body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.container {
    display: flex;
    height: 100vh;
}

.sidebar {
    width: 200px;
    background-color: #f0f0f0;
    padding: 20px;
}

.sidebar h2 {
    margin-top: 0;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar li {
    margin-bottom: 10px;
    cursor: pointer;
}

.main-content {
    flex-grow: 1;
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
}


.main-content {
    flex-grow: 1;
    /* iframe-container의 위치 기준을 위해 relative 설정 */
    position: relative;
}

.iframe-container {
    /* 원하는 보이는 영역의 크기 설정 */
    width: 860px; /* 예시 크기 */
    height: 100vh; /* 예시 크기 */
    overflow: hidden; /* 컨테이너 밖으로 나가는 내용 숨김 */
    position: relative; /* iframe 위치 기준 */
}

.iframe-container iframe {
    /* iframe의 전체 크기 설정 */
    width: 860px;
    height: 1000px;
    /* iframe의 위치를 조정하여 원하는 부분이 보이도록 함 */
    position: absolute;
    top: -360px; /* 위로 360px 이동 */
    left: 0px; /* 왼쪽에서 0px 이동 */
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 반투명 검은색 배경 */
    display: none; /* 초기에는 숨김 */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* 다른 요소 위에 표시 */
}

.popup-overlay .container {
    background-color: #fff; /* 팝업 배경색 */
    padding: 0; /* 기존 container의 패딩 제거 */
    border-radius: 8px; /* 모서리 둥글게 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
    width: 55%; /* 팝업 너비 조정 */
    height: 600px; /* 팝업 높이 조정 */
    overflow: hidden; /* 내부 스크롤 방지 */
    display: flex; /* 사이드바와 메인 콘텐츠를 가로로 배치 */
}

.popup-overlay .sidebar {
    width: 180px; /* 팝업 내 사이드바 너비 */
    background-color: #f8f8f8; /* 사이드바 배경색 */
    padding: 15px; /* 사이드바 패딩 */
    box-sizing: border-box;
    flex-shrink: 0; /* 사이드바 크기 고정 */
    color: #000;
}

.popup-overlay .sidebar li {
    margin-bottom: 10px;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.popup-overlay .sidebar li:hover {
    background-color: #e0e0e0;
}

.popup-overlay .sidebar li.active {
    background-color: #d0d0d0; /* 선택된 항목 배경색 */
    font-weight: bold; /* 선택된 항목 글자 굵게 */
}

.popup-overlay .main-content {
    flex-grow: 1;
    position: relative;
    padding: 15px; /* 메인 콘텐츠 패딩 */
    box-sizing: border-box;
    overflow-y: auto; /* 메인 콘텐츠 영역에 스크롤 추가 (필요시) */
}

.popup-overlay .iframe-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.popup-overlay iframe {
    width: 860px; /* iframe 너비 */
    height: 840px; /* iframe 높이 */
    position: absolute;
    top: -360px; /* iframe 위치 조정 */
    left: 0px;
}

/* 팝업 닫기 버튼 스타일 (선택 사항) */
.close-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
    z-index: 1001;
    color: #aaa;
}

.close-popup:hover {
    color: #777;
}