/** 모달 전반적인 css*/
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); justify-content: center; align-items: center; z-index: 9999 !important; }
.modal-content { background: white; padding: 20px; border-radius: 12px; text-align: center; display: flex; flex-direction: column; align-items: center; max-width: 70%; width: 70%; height: 90%;  max-height: 90%; position: relative; animation: fadeIn 0.3s ease-in-out;}
.modal-content h2 { font-size: 20px; font-weight: 600; position: relative; padding-bottom: 5px; width: 100%; }
.modal-img { padding-top: 20px; height: 95%; width: 100%;}
.modal-content h2::after { content: ""; display: block; width: 60px; height: 3px; background: #007bff; margin: 8px auto 0; border-radius: 3px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; width: 100%; padding-bottom: 10px; border-bottom: 1px solid #ddd;}

/* 이미지 css*/
.org-chart { width: 100%; border-radius: 8px; height: 100%; object-fit: contain; }

/* 닫기 버튼 css*/
.close-org { background: none; border: none; font-size: 24px; cursor: pointer; color: #333; padding: 5px; }
.close-org:hover { color: red; }

/** 모달창 켜질때 애니메이션 효과*/
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@media screen and (min-width:360px) and (max-width: 649px) {
    .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); justify-content: center; align-items: center; z-index: 9999 !important; }
    .modal-content { background: white; padding: 2%; border-radius: 12px; text-align: center; display: flex; flex-direction: column; align-items: center; max-width: 90%; width: 90%; height: 50%;  max-height: 60%; position: relative; animation: fadeIn 0.3s ease-in-out;}
    .modal-content h2 { font-size: 80%; font-weight: 600; position: relative; padding-bottom: 5px; width: 100%; }
    .modal-img { padding-top: 20px; width: 100%; height: 100%;}
    .modal-content h2::after { content: ""; display: block; width: 25%; height: 3px; background: #007bff; margin: 8px auto 0; border-radius: 3px; }
    .modal-header { display: flex; justify-content: space-between; align-items: center; width: 100%; padding-bottom: 10px; border-bottom: 1px solid #ddd;}

    /* 이미지 css*/
    .org-chart { width: 100%; border-radius: 8px ; height: 100%; object-fit: contain; }

    /* 닫기 버튼 css*/
    .close-org { background: none; border: none; font-size: 90%; cursor: pointer; color: #333; padding: 2%; }
    .close-org:hover { color: red; }

}