/**
 * WIA Book - 언어 모달 + 다크모드 스타일
 * 앱 설치 → 언어 모달로 변경
 */

/* ========================================
   1. 메뉴바 언어 버튼 (앱 설치 자리)
   ======================================== */
.wia-lang-menu-item {
    margin-left: 10px !important;
}

.wia-lang-header-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 20px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border-radius: 27px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    line-height: 54px !important;
    height: 54px !important;
    cursor: pointer !important;
}

.wia-lang-header-btn:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5) !important;
    color: white !important;
}

/* 지구본 이모지 - 흰색으로! */
.wia-lang-header-btn .wia-globe-icon {
    font-size: 20px !important;
    filter: grayscale(1) brightness(10) !important;
    line-height: 1 !important;
}

.wia-lang-header-btn .wia-lang-text {
    color: white !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

.wia-lang-header-btn .wia-lang-arrow {
    font-size: 10px !important;
    opacity: 0.9 !important;
    margin-left: -2px !important;
}

/* 기존 앱 설치 버튼 숨기기 (혹시 남아있으면) */
.pwa-menu-item,
#pwa-menu-btn {
    display: none !important;
}

/* 기존 frontend-features.php에서 추가한 버튼 숨기기 */
li.wia-lang-menu-item:not(#wia-lang-menu-btn) {
    display: none !important;
}

/* ========================================
   2. 다크모드 토글 버튼
   ======================================== */
.dark-mode-toggle { 
    display: none !important; /* WIA Toolkit으로 통합 */
    position: fixed;
    bottom: 145px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 99997;
    transition: all 0.3s ease;
    padding: 0;
    margin: 0;
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.dark-mode-toggle .icon-sun,
.dark-mode-toggle .icon-moon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.dark-mode-toggle .icon-moon {
    opacity: 1;
    visibility: visible;
}

.dark-mode-toggle .icon-sun {
    opacity: 0;
    visibility: hidden;
}

body.dark-mode .dark-mode-toggle { 
    display: none !important;
    background: linear-gradient(135deg, #3498db, #2980b9);
}

body.dark-mode .dark-mode-toggle .icon-moon {
    opacity: 0;
    visibility: hidden;
}

body.dark-mode .dark-mode-toggle .icon-sun {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   3. 다크모드 스타일
   ======================================== */
body.dark-mode {
    background-color: #1a1a2e !important;
    color: #e0e0e0 !important;
}

body.dark-mode .site-header,
body.dark-mode .main-navigation {
    background-color: #16213e !important;
}

body.dark-mode .site-content,
body.dark-mode .widget,
body.dark-mode .sidebar,
body.dark-mode .inside-article {
    background-color: #1a1a2e !important;
    color: #e0e0e0 !important;
}

body.dark-mode a {
    color: #00BCD4 !important;
}

body.dark-mode .entry-title,
body.dark-mode h1, body.dark-mode h2, 
body.dark-mode h3, body.dark-mode h4 {
    color: #ffffff !important;
}

/* 다크모드에서 언어 버튼 */
body.dark-mode .wia-lang-header-btn {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
}

/* ========================================
   4. 반응형
   ======================================== */
@media (max-width: 768px) {
    /* 모바일: 언어 코드 숨김 */
    .wia-lang-header-btn .wia-lang-text {
        display: none !important;
    }
    
    .wia-lang-header-btn .wia-lang-arrow {
        display: none !important;
    }
    
    .wia-lang-header-btn {
        padding: 0 14px !important;
        height: 44px !important;
        line-height: 44px !important;
    }
    
    .wia-lang-header-btn .wia-globe-icon {
        font-size: 18px !important;
    }
    
    .dark-mode-toggle { 
        display: none !important;
        width: 45px;
        height: 45px;
        bottom: 140px;
        right: 20px;
    }
    
    .dark-mode-toggle .icon-sun,
    .dark-mode-toggle .icon-moon {
        font-size: 20px;
    }
}