body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: sans-serif;
    overflow: hidden; /* 전체 페이지 스크롤 방지 */
}

.container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* 뷰포트 전체 높이 사용 */
}

.header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background-color: #f0f0f0;
    position: relative;
    border-bottom: 1px solid #ccc;
    flex-shrink: 0; /* 헤더가 줄어들지 않도록 고정 */
}

.logo {
    position: absolute;
    left: 15px;
    height: 30px;
}

.title {
    margin: 0;
    font-size: 24px;
    color: #333;
}

.main-content-wrapper {
    display: flex;
    flex: 1; /* 남은 공간을 모두 차지하도록 설정 */
    overflow: hidden; /* 자식 요소 스크롤 처리를 위해 부모는 숨김 */
}

.sidebar {
    background-color: #f7f7f7;
    width: 300px;
    min-width: 150px;
    overflow-y: auto; /* 사이드바 내용이 많을 때 스크롤 */
    padding: 10px;
    flex-shrink: 0; /* 사이드바가 줄어들지 않도록 고정 */
}

.sidebar li {
    list-style: none;
}

.resizer {
    width: 8px;
    background-color: #ccc;
    cursor: ew-resize;
    user-select: none;
    flex-shrink: 0; /* 리사이저가 줄어들지 않도록 고정 */
}

.main-content {
    flex: 1; /* 남은 공간을 모두 차지하도록 설정 */
    padding: 20px;
    overflow-y: auto; /* **핵심**: 이 영역에서만 세로 스크롤 발생 */
    box-sizing: border-box; /* 패딩이 너비/높이에 포함되도록 */
}

.footer {
    padding: 10px;
    text-align: center;
    background-color: #f0f0f0;
    border-top: 1px solid #ccc;
    flex-shrink: 0; /* 푸터가 줄어들지 않도록 고정 */
}

/* 메뉴 관련 스타일 (이전과 동일) */
.menu-list,
.menu-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

summary {
    cursor: pointer;
    list-style: none;
}
summary::-webkit-details-marker {
    display: none;
}
summary::marker {
    display: none;
}

.menu-group > details > summary {
    font-weight: normal;
    color: #333;
    font-size: 14px;
    padding: 8px 15px;
}
.menu-group > details > summary::before {
    content: '▶';
    font-size: 10px;
    margin-right: 5px;
}
.menu-group > details[open] > summary::before {
    content: '▼';
    font-size: 10px;
}

.menu-group > details > ul {
    margin-left: 20px;
}

.menu-list a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    color: #000;
    font-size: 12px;
}
.menu-list a:hover {
    background-color: #e9e9e9;
}

/* **추가**: 이미지 너비 제한 */
.main-content img {
    max-width: 100%; /* 이미지가 부모 요소 너비를 초과하지 않도록 */
    height: auto; /* 가로 세로 비율 유지 */
    display: block; /* 가끔 이미지 아래 생기는 여백 제거 */
    margin: 0 auto; /* 중앙 정렬 (선택 사항) */
}

/* **수정**: 페이지별 스타일 (HowToAccessHowToPortal.html 내부 스타일) */
.main-content .classL1 {
    font-size: 14px;
}
.main-content .classL1B {
    font-size: 14px;
    font-weight: bold;
}
.main-content .cl2 {
    margin-left: 10px;
}

/* 모달 팝업 스타일 */
.modal {
    display: none; /* 초기에는 팝업 숨기기 */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* 반투명 검은색 배경 */
    overflow: auto; /* 내용이 넘칠 경우 스크롤 허용 */
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 1000px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

#modal-image {
    width: 100%;
    height: auto;
    display: block;
}

.close-button {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

#video_area {
    text-align: center;
}

#background_video {
    margin: 0 auto;
    width: 850px;
    display: block;
    top: 100px;
    position: relative;
}

/* 검색 모달 팝업 스타일 */
#search-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* 좀 더 부드러운 오버레이 */
    backdrop-filter: blur(3px); /* 배경 블러 효과 추가 */
    overflow: auto;
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬 */
}

#search-modal .modal-content {
    background-color: #fefefe;
    margin-top: 50px; /* 100px로 변경 */
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 800px;
    height: 60vh;
    max-height: 800px;
    overflow-y: auto;
    border-radius: 8px;
    position: relative;
}

/* 모달 등장 애니메이션 */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

#search-modal .close-button {
    color: #6c757d; /* 닫기 버튼 색상 변경 */
    position: absolute;
    top: 15px; /* 위치 조정 */
    right: 20px; /* 위치 조정 */
    font-size: 30px; /* 폰트 크기 키움 */
    font-weight: normal; /* 볼드 해제 */
    cursor: pointer;
    transition: color 0.2s ease-in-out; /* 호버 시 색상 변경 애니메이션 */
}

#search-modal .close-button:hover,
#search-modal .close-button:focus {
    color: #343a40; /* 호버 시 색상 더 진하게 */
    text-decoration: none;
}

#search-results-list h3 {
    margin-top: 15px; /* 상단 여백 조정 */
    margin-left: 20px;
    margin-bottom: 15px; /* 하단 여백 추가 */
    font-size: 14px; /* 폰트 크기 약간 키움 */
    color: #343a40; /* 색상 변경 */
    border-bottom: 1px solid #e9ecef; /* 제목 아래 구분선 */
    padding-bottom: 10px;
}

#search-results-list a {
    color: #007bff; /* 링크 색상 변경 */
    text-decoration: none;
    display: block; /* 블록 요소로 만들어 클릭 영역 확장 */
    padding: 10px 0; /* 패딩 추가 */
    border-bottom: 1px dashed #e9ecef; /* 각 항목 구분선 */
    font-size: 0.98em; /* 폰트 크기 조정 */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; /* 호버 애니메이션 */
}

#search-results-list a:last-child {
    border-bottom: none; /* 마지막 항목은 구분선 없음 */
}

#search-results-list a:hover {
    background-color: #e2e6ea; /* 호버 시 배경색 변경 */
    color: #0056b3; /* 호버 시 텍스트 색상 변경 */
    text-decoration: none; /* 호버 시 밑줄 제거 */
    border-radius: 4px; /* 호버 시 살짝 둥근 모서리 */
    padding-left: 10px; /* 호버 시 살짝 들여쓰기 효과 */
}
/* 검색 결과 리스트의 점을 제거 */
#search-results-list {
    list-style: none; /* 리스트 전체의 마커를 제거 */
    padding-left: 0; /* 기본 패딩도 제거하여 들여쓰기 없애기 */
}

#search-results-list li {
    list-style: none; /* 🌟 하위 li 태그에 대한 마커도 명시적으로 제거 */
}