/* style.css */
/* --- 기본 스타일 --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    display: flex;
    min-height: 100vh;
    background-color: #f5f5f5; /* 밝은 회색 배경 */
    color: #333;
}

#main-content img {
    max-width: 45%; /* 이미지가 부모 요소(main-content) 너비를 넘지 않도록 합니다. */
    height: auto;    /* 가로세로 비율을 유지하면서 높이를 자동으로 조절합니다. */
    display: block;  /* 이미지 아래 여백을 제거하고 블록 요소처럼 동작하게 합니다. */
    margin: 15px 0; /* 이미지 위아래에 약간의 여백을 줍니다. */
    border-radius: 4px; /* 모서리를 부드럽게 합니다. */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 미묘한 그림자를 추가합니다. */
}

#sidebar {
    width: 250px;
    background-color: #1c1c1c; /* 다크 그레이/블랙 배경 */
    color: #f5f5f5; /* 밝은 텍스트 */
    padding: 20px;
    flex-shrink: 0;
    transition: transform 0.3s ease; /* 부드러운 애니메이션 */
}

#sidebar h2 {
    color: white;
    margin-top: 0;
    font-size: 1.5em;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
}

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

#sidebar ul li a {
    display: block;
    color: #f5f5f5;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

#sidebar ul li a:hover {
    background-color: #333;
}

#sidebar ul li ul { /* 서브 메뉴 스타일 */
    padding-left: 20px;
    margin-top: 5px;
}

#sidebar ul li ul li a {
    padding: 8px 15px;
    font-size: 0.9em;
    background-color: #2a2a2a;
}

#sidebar ul li ul li a:hover {
    background-color: #444;
}

#main-content {
    flex-grow: 1;
    padding: 20px 40px;
    background-color: white;
    margin: 20px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.07);
}

#main-content h1 { color: #111; border-bottom: 2px solid #eee; padding-bottom: 15px; margin-top: 0; }
#main-content h2 { color: #333; }
.current-page { background-color: #007aff !important; color: white !important; font-weight: bold; }

/* --- 반응형 디자인을 위한 CSS --- */

/* 햄버거 버튼 기본 스타일 */
#menu-toggle {
    display: none; /* 데스크탑에서는 숨김 */
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1001; /* 사이드바보다 위에 표시 */
    background: #333;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 20px;
}

/* 화면 너비가 768px 이하일 때 (모바일) */
@media (max-width: 768px) {
    body {
        flex-direction: column; /* 세로 정렬 */
    }

    #sidebar {
        position: fixed; /* 화면에 고정 */
        left: 0;
        top: 0;
        height: 100%;
        transform: translateX(-100%); /* 왼쪽 화면 밖으로 숨김 */
        z-index: 1000;
        width: 250px;
    }

    #sidebar.visible {
        transform: translateX(0); /* .visible 클래스가 추가되면 보임 */
    }
    
    #menu-toggle {
        display: block; /* 모바일에서 햄버거 버튼 보임 */
    }
    
    #main-content {
        margin: 0;
        padding: 20px;
        padding-top: 80px; /* 햄버거 버튼과 겹치지 않도록 상단 여백 */
        border-radius: 0;
        box-shadow: none;
    }
}