@charset "UTF-8";

/* 이미지 전체 팝업 시작 */

	/* --- 슬라이더 컨테이너 --- */
	.image.main {
	    display: flex;
	    align-items: center;      /* 세로 중앙 */
	    justify-content: center;  /* 가로 중앙 */
	    width: 100%;
	    position: relative;
	    background-color: #f4f4f4;
	    min-height: 200px;
	    margin: 2.5rem 0;
	    overflow: hidden;
	    border-radius: 4px;
	    transition: height 0.3s ease;
	}
	
	/* --- 이미지 공통 스타일 --- */
	.image.main img {
	    max-width: 100%;
	    height: auto;
	    display: block;
	    border-radius: 4px;
	    
	    /* 겹치기 설정 */
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%); /* 정확한 중앙 배치 */
	    
	    opacity: 0;
	    visibility: hidden;
	    transition: opacity 0.8s ease-in-out, visibility 0.8s;
	    z-index: 1;
	}
	
	/* --- 활성화된 이미지 --- */
	.image.main img.active {
	    opacity: 1 !important;
	    visibility: visible !important;
	    z-index: 2;
	}
	
	/* --- 도트 스타일 --- */
	.dots-container {
	    text-align: center;
	    position: absolute;
	    bottom: 15px;
	    width: 100%;
	    z-index: 10;
	    line-height: 0;
	}
	
	.dot {
	    cursor: pointer;
	    height: 10px;
	    width: 10px;
	    margin: 0 5px;
	    background-color: rgba(0, 0, 0, 0.2);
	    border-radius: 50%;
	    display: inline-block;
	    transition: 0.3s;
	}
	
	.dot.active {
	    background-color: #000;
	    transform: scale(1.2);
	}
	/* 이미지 슬라이드 종료 */
	/* 이미지 전체 팝업 */
	/* 팝업 전체 배경 (어두운 오버레이) */
	.popup-overlay {
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background-color: rgba(0, 0, 0, 0.85);
	    display: none; /* 기본은 숨김 */
	    z-index: 10000;
	    overflow-y: auto;
	    padding: 2rem;
	}
	
	/* 팝업 중앙 정렬 컨테이너 */
	.popup-content {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	    min-height: 100%;
	}
	
	/* 기존 article 디자인을 팝업 내부에 적용 */
	#popup-article {
	    background-color: rgba(27, 31, 34, 0.95);
	    border-radius: 4px;
	    padding: 4.5rem 2.5rem 1.5rem 2.5rem;
	    position: relative;
	    width: 40rem;
	    max-width: 100%;
	    opacity: 1 !important; /* 항상 보이게 */
	    transform: translateY(0) !important;
	}
	
	/* 닫기 버튼 스타일 */
	.close-popup {
	    position: absolute;
	    top: 1rem;
	    right: 1.5rem;
	    font-size: 2.5rem;
	    color: #fff;
	    cursor: pointer;
	    z-index: 10001;
	}
	
	/* 팝업 내 이미지 리스트 스타일 */
	#popup-image-container img {
	    width: 100%;
	    height: 550px;
	    margin-bottom: 2rem;
	    border-radius: 4px;
	    display: block;
	}	
	/* 모바일 전용 최적화: 가시성 극대화 */
	@media screen and (max-width: 736px) {
	    .popup-overlay {
	        padding: 0;         /* 바깥 여백 완전히 제거 */
	    }
	
	    .popup-content {
	        justify-content: flex-start; /* 상단부터 채우도록 변경 */
	    }
	
	    #popup-article {
	        width: 100vw;       /* 화면 너비를 꽉 채움 */
	        padding: 4rem 1rem 1rem 1rem; /* 상단 닫기 버튼 공간 확보, 좌우 최소 여백 */
	        background-color: #1b1f22; /* 기존 테마 유지하되 어둡게 */
	        border-radius: 0;   
	        box-shadow: none;
	    }
	}	
	
	.section-info{
		display:none;
		margin-bottom: -30px;
	}
	
/* 이미지 전체 팝업 종료 */