/* 페이지 전환 효과 */
main {
    opacity: 1;
    transition: opacity 0.3s ease-in; /* 페이지 로드 시 fade-in */
} 
/* 페이지 로드/복원 시 초기에 적용될 클래스 (투명 상태) */
main.fade-in-start {
    opacity: 0;
}
main.fade-out {
    opacity: 0;
}


/* =================================== */
/* Module Card Hover Effect (index.php) */
/* =================================== */

/* 카드 기본 상태에 transition 추가 */
#moduleCardList .module-card .card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    /* 기본 그림자 (shadow-sm)는 이미 PHP 코드에서 클래스로 적용되어 있습니다. */
}

/* 카드에 마우스 커서가 올라갔을 때 효과 */
#moduleCardList .module-card .card:hover {
    transform: translateY(-5px); /* 카드를 살짝 위로 이동 */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; /* 그림자를 더 강조 (Bootstrap 기본 shadow-sm보다 강하게) */
    /* 필요하다면 테두리 색상 변경도 추가 가능 */
    /* border-color: var(--bs-primary); */
}

/* =================================== */
/* edu/index.php 버튼 Hover Effect  */
/* =================================== */
/* 큰 버튼 스타일 */
.edu-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 250px; /* 버튼 최소 높이 */
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.3s ease; /* 호버 효과 */
    background-color: var(--bs-light-bg-subtle); /* 밝은 배경 */
    border: 1px solid var(--bs-border-color-translucent);
    color: var(--bs-body-color);
}
.edu-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    background-color: var(--bs-primary-bg-subtle); /* 호버 시 강조 색상 */
    color: var(--bs-primary-text-emphasis);
    border-color: var(--bs-primary);
}
.edu-button i {
    font-size: 4rem; /* 아이콘 크기 */
    margin-bottom: 1rem;
}
.edu-button h3 {
    font-size: 1.75rem; /* 제목 크기 */
    margin-bottom: 0.5rem;
}
.edu-button p {
    font-size: 1rem;
    color: var(--bs-secondary-color);
}


/* =================================== */
/* youtube/index.php 카드 Hover Effect */
/* =================================== */

/* 기본 카드 상태: 스태킹 컨텍스트 생성 및 기본 z-index 설정 */
/* ID가 "youtube-list-"로 시작하는 div 내부의 .card */
div[id^="youtube-list-"] .card {
    position: relative; /* 스태킹 컨텍스트를 명시적으로 생성 */
    z-index: 1;         /* 기본 z-index 설정 */
    /* 기존 transition 유지 */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* 드롭다운 메뉴가 열려 있는 카드의 z-index를 높임 */
div[id^="youtube-list-"] .card.dropdown-open {
    z-index: 10; /* 다른 카드(z-index: 1)보다 높게 설정 */
}

/* 기존 카드 호버 효과는 그대로 유지 */
div[id^="youtube-list-"] .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    /* 호버 시에도 z-index를 약간 높여 자연스럽게 */
    /* z-index: 5; */ /* 필요에 따라 주석 해제, dropdown-open 보다는 낮게 */
}

/* 드롭다운 메뉴 자체의 z-index도 충분히 높게 유지 (중요) */
.dropdown-menu.show {
    z-index: 1050 !important; /* 카드 z-index와 별개로 메뉴 자체도 높게 유지 */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* =================================== */
/* lab/index.php 카드 Hover Effect (선택 사항) */
/* =================================== */
/* lab 모듈 카드에도 비슷한 효과를 주려면 아래 주석 해제 */

#labProjectList  .card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

#labProjectList  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}


/* =================================== */
/* admin/index.php 카드 Hover Effect  */
/* =================================== */

/* 관리자 모듈 카드 기본 상태에 transition 추가 */
#adminModuleList .admin-module-card .card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* 관리자 모듈 카드에 마우스 커서가 올라갔을 때 효과 */
#adminModuleList .admin-module-card .card:hover {
    transform: translateY(-5px); /* 카드를 살짝 위로 이동 */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; /* 그림자를 더 강조 */
}