/* ==========================================================================
   1. 애니메이션 정의 (기존 유지)
   ========================================================================== */

/* 배경 이미지 미세 확대/축소 */
@keyframes bgScale {
    0% { transform: scale(1.0); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1.0); }
}

/* 이미지 위를 지나가는 빛 효과 */
@keyframes lightSweep {
    0% { left: -150%; }
    100% { left: 150%; }
}

/* ==========================================================================
   2. 서브 비주얼 영역 (기존 유지 및 경로 보정)
   ========================================================================== */

.sub-visual {
    background-image: url('../images/oa_text.png') !important;
    background-size: 100% auto !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative !important;
    overflow: hidden !important;
    height: 280px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    z-index: 1 !important;
    background-color: #001a35 !important;
}

.sub-visual::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.05);
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0) 100%);
    animation: lightSweep 5s infinite linear;
    z-index: 2;
}

.sub-visual::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: inherit;
    background-size: 85% auto;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    animation: bgScale 15s infinite ease-in-out;
    will-change: transform;
}

.sub-visual .container {
    position: relative;
    z-index: 5;
}

/* ==========================================================================
   3. 공통 레이아웃 및 포인트 컬러 (기존 유지)
   ========================================================================== */

.bg-navy { background-color: #001a35 !important; }
.text-primary { color: #001a35 !important; }
.btn-primary { background-color: #001a35 !important; border-color: #001a35 !important; }

.sticky-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
}

.advantage-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.1) !important;
    border-top: 4px solid #1e3a8a !important;
}

/* ==========================================================================
   4. 서브페이지 구성 요소 보완 (추가/보안)
   ========================================================================== */

/* 스크롤 시 나타나는 효과 (JS 클래스 active와 연동) */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* 커리큘럼 테이블 세부 디자인 보완 */
.table { border-top: 2px solid #001a35; }
.table thead th { 
    background-color: #001a35 !important; 
    color: #ffffff !important; 
    border: none;
    text-align: center;
}
.table-responsive {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* 사이드바 상담 카드 애니메이션 */
.info-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

/* ==========================================================================
   5. 공지사항 및 학습자료 스타일 (기존 유지)
   ========================================================================== */

.notice-main-card {
    background-color: #f8faff; 
    border-left: 5px solid #1e3a8a !important;
    display: flex;
    flex-direction: column;
}

.extra-small { font-size: 0.75rem; }
.transition { transition: all 0.2s ease-in-out; }

.hover-bg-light {
    border: 1px solid transparent !important;
}

.hover-bg-light:hover {
    background-color: #f8f9fa;
    transform: translateX(5px); /* 호버 시 우측 이동 포인트 */
    cursor: pointer;
}

.text-truncate {
    max-width: 450px;
    display: inline-block;
    vertical-align: middle;
}

.badge.bg-light {
    display: inline-block;
    text-align: center;
    font-size: 0.8rem;
}

/* ==========================================================================
   6. 반응형 최적화 (기존 유지)
   ========================================================================== */

@media (max-width: 991px) {
    .text-truncate { max-width: 300px; }
}

@media (max-width: 768px) {
    .sub-visual { 
        height: 180px !important; 
        background-size: 95% auto !important; 
    }
    .sub-visual::after { background-size: 95% auto; }
    .text-truncate { max-width: 180px; }
    .notice-main-card { height: auto !important; }
}

/* 유틸리티 */
.hidden-content { visibility: hidden; pointer-events: none; }
[style*="display: none"] { display: none !important; }


/* 3. 이미지 컨테이너 및 기본 설정 */
.portfolio-img-wrapper {
    position: relative;
    overflow: hidden;
    height: 220px;
    background-color: #f0f0f0;
}

/* 4. 이미지 위 어두운 오버레이 (평상시: 안 보임) */
.portfolio-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 26, 53, 0.75); /* 학원 메인 컬러 (남색) 톤 */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* 처음에 숨김 */
    transition: opacity 0.3s ease; /* 부드럽게 나타나도록 설정 */
}

/* 5. 마우스 올렸을 때(Hover) 액션 */
.portfolio-item:hover .portfolio-hover {
    opacity: 1; /* 마우스 올리면 오버레이가 나타남 */
}

.portfolio-item:hover .portfolio-img-wrapper img {
    transform: scale(1.1); /* 이미지도 살짝 커지는 효과 */
}

/* 1. 게임 배경 이미지 경로 확인 및 오버레이 강화 */
#game-container {
    /* 닷홈 경로에 맞게 ../images/로 수정 확인 */
    background-image: linear-gradient(rgba(0, 26, 53, 0.85), rgba(0, 26, 53, 0.85)), url('../images/game_bg.jpg'); 
    background-size: cover;
    background-position: center;
    border: 5px solid #001a35;
    position: relative; /* 내부 요소 절대 위치 기준 */
}

/* 2. 떨어지는 단어의 가독성 (남색 배경에서 잘 보이도록) */
.falling-word {
    position: absolute;
    color: white;
    font-size: 1.4rem; /* 시니어분들을 위해 살짝 키움 */
    font-weight: bold;
    padding: 8px 18px;
    /* 학원 테마인 남색 계열로 변경하여 통일감 부여 */
    background: rgba(0, 86, 179, 0.9); 
    border-radius: 30px;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 10;
}

/* 3. 입력창 포커스 시 테두리 색상을 학원 메인 컬러로 변경 */
#word-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 26, 53, 0.25);
    border-color: #001a35;
    outline: none;
}