/* ================================================================
   [수정] Footer Styles - 기본 상태를 완전히 숨김으로 설정
   ================================================================ */
body, html, #app-container {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
}

/* 기본 상태: 화면 아래 위치에 완전히 숨어있음 (로드 시 자동 표시 차단) */
.page-footer {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    bottom: -300px !important; 
    width: 100% !important;
    z-index: 99998 !important; 
    background: transparent !important;
    color: #fff !important;
    padding: 28px 0 !important;
    text-align: left !important;
    opacity: 0 !important; 
    visibility: hidden !important;
    /* 20% 투명도의 화이트 컬러 상단 구분선 추가 */
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important; 
    transition: bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease, visibility 0.5s ease !important;
    pointer-events: none !important;
}

/* JS에서 .visible 클래스가 추가되면 화면 바닥(0px)으로 스르륵 올라옴 */
.page-footer.visible {
    bottom: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.page-footer .footer-info {
    pointer-events: auto;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 120px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.page-footer .footer-info h3 { font-size: 16px; margin-bottom: 0; }
.page-footer .footer-info h2 { margin: 0 0 4px; line-height: 1.2; font-size: 20px; }
.page-footer .footer-info .footer-left { text-align: left; }
.page-footer .footer-info .footer-meta { text-align: right !important; }
.page-footer .footer-info .footer-meta p { text-align: right !important; }
.page-footer .footer-info p { font-size: 13px; color: #888; margin: 4px 0; }
.page-footer .footer-link { color: #888; text-decoration: none; }
.page-footer .footer-link:hover { color: #ffffff; text-decoration: none; }

/* Light Mode: 20% 투명도의 #0b0b0b 컬러 상단 구분선 적용 */
body.light-mode .page-footer { 
    border-top: 1px solid rgba(11, 11, 11, 0.2) !important; 
    color: #0b0b0b !important; 
}
body.light-mode .page-footer h3 { color: #0b0b0b !important; }
body.light-mode .page-footer p, body.light-mode .page-footer a { color: #444 !important; }

/* Mobile */
@media (max-width: 768px) {
    .page-footer {
        position: relative !important;
        bottom: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        text-align: center;
        background: rgba(10,10,10,0.95) !important;
        padding: 20px 0 !important;
        margin-top: 0;
    }
    body.light-mode .page-footer { background: #f5f5f5 !important; }
    .page-footer .footer-info { padding: 0 20px; flex-direction: column; gap: 15px; }
    .page-footer .footer-info .footer-right { text-align: center; }
}