/* 푸터 컴포넌트 전용 CSS */

/* 푸터 기본 스타일 */
footer { 
    background: #2C3E50; 
    color: white;
    padding: 20px 0; 
    margin-top: 100px; 
}

.footer-content { 
    max-width: var(--maxwidth); 
    margin: 0 auto; 
    padding: 0 20px; 
}

.footer-logo { 
    font-size: 18px; 
    font-weight: bold; 
    margin-bottom: 15px; 
    color: white; 
}

.footer-info { 
    color: #BDC3C7; 
    font-size: 14px; 
    line-height: 1.6; 
}

.footer-info p { 
    margin-bottom: 4px; 
}

.footer-copyright {  
    margin-top: 20px; 
    font-size: 12px; 
    color: #BDC3C7; 
}

.footer-details { 
    margin-top: 20px; 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; 
    opacity: 0;
    visibility: hidden;
}

.footer-details.active { 
    max-height: 500px; 
    margin-top: 20px; 
    opacity: 1;
    visibility: visible;
}

/* 회사정보 버튼 */
.company-info-button { 
    text-align: center; 
    align-items: center; 
    margin: 0 auto; 
    width: fit-content; 
    cursor: pointer; 
    padding: 10px 20px; 
    background-color: rgba(255, 255, 255, 0.1); 
    border-radius: 8px; 
    font-size: 14px; 
    color: white; 
    transition: all 0.3s ease; 
}

.company-info-button:hover { 
    background-color: rgba(255, 255, 255, 0.2); 
}

.company-info-button .arrow { 
    margin-left: 8px; 
    font-size: 12px; 
    transition: transform 0.3s ease; 
}

.company-info-button.active .arrow { 
    transform: rotate(180deg); 
}

/* 정보 행 스타일 */
.info-row { 
    display: flex; 
    margin-bottom: 8px; 
}

.info-row span:first-child { 
    width: 140px; 
    color: #BDC3C7; 
}

/* 반응형 디자인 */

/* 모바일 (768px 이하) */
@media (max-width: 768px) {
    footer { 
        padding: 40px 0 30px; 
        margin-top: 60px; 
    }
    
    .footer-content { 
        padding: 0 20px; 
    }
    
    .footer-logo { 
        font-size: 18px; 
        margin-bottom: 20px; 
    }
    
    .footer-info { 
        font-size: 12px; 
    }
    
    .footer-copyright { 
        margin-top: 20px; 
        font-size: 12px; 
    }
    
    .company-info-button { 
        padding: 12px 20px; 
        font-size: 14px; 
        width: 100%; 
        max-width: 100px; 
    }
    
    
}

/* 애니메이션 효과 */
.footer-details { 
    animation: slideDown 0.3s ease-in-out; 
}

@keyframes slideDown { 
    from { 
        opacity: 0; 
        transform: translateY(-10px); 
    } 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
}