/* mobile.css - 메가 서버 모바일 반응형 전용 스타일 */
@media screen and (max-width: 768px) {
    /* 1. 사이드바 -> 상단 고정 네비게이션 바 변환 */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 55px !important;
        flex-direction: row !important;
        align-items: center !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(0,255,128,0.3) !important;
        padding: 0 !important;
        background: rgba(10,16,26,0.98) !important;
        z-index: 9999 !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.5) !important;
    }
    .sidebar-logo {
        padding: 0 15px !important;
        border-bottom: none !important;
        border-right: 1px solid rgba(0,255,128,0.2) !important;
        height: 55px !important;
        display: flex !important;
        align-items: center !important;
    }
    .sidebar-logo h2 {
        font-size: 20px !important;
        margin: 0 !important;
        letter-spacing: 2px !important;
    }
    .sidebar-menu {
        flex-direction: row !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        align-items: center !important;
        height: 55px !important;
        -webkit-overflow-scrolling: touch !important;
    }
    /* 모바일 상단 메뉴 스크롤바 숨기기 (깔끔한 외관) */
    .sidebar-menu::-webkit-scrollbar {
        display: none !important;
    }
    .sidebar-menu a {
        padding: 0 15px !important;
        font-size: 15px !important;
        height: 55px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        border-left: none !important;
        border-bottom: 3px solid transparent !important;
        box-sizing: border-box !important;
    }
    .sidebar-menu a:hover, .sidebar-menu a.active {
        background: rgba(0, 255, 128, 0.1) !important;
        border-left: none !important;
        border-bottom: 3px solid #33ff99 !important;
    }
    .sidebar-footer {
        display: none !important; /* 모바일 상단바에서는 푸터 문구 숨김 */
    }

    /* 2. 메인 컨텐츠 및 상단 배너 조정 */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding-top: 55px !important; /* 상단 고정바 높이만큼 여백 확보 */
        box-sizing: border-box !important;
    }
    .header {
        height: 240px !important;
        background-position: center top !important;
    }
    .header::after {
        height: 150px !important;
    }
    .header h1 {
        font-size: 28px !important;
        top: 20px !important;
        letter-spacing: 2px !important;
        text-align: center !important;
        padding: 0 15px !important;
    }

    /* 3. 공통 컨테이너 조정 */
    .container {
        width: 92% !important;
        margin: 30px auto 50px auto !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        border-radius: 8px !important;
    }

    /* 4. 페이지별 개별 요소 최적화 */
    /* 마법인형 (doll.html) */
    .doll-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    .doll-card {
        padding: 15px !important;
        gap: 15px !important;
    }
    .tier-title {
        font-size: 22px !important;
        margin: 35px 0 15px 0 !important;
    }

    /* 보스정보 (boss.html) */
    table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        font-size: 14px !important;
        width: 100% !important;
        -webkit-overflow-scrolling: touch !important;
    }
    thead th {
        font-size: 15px !important;
        padding: 10px !important;
    }
    tbody td {
        padding: 10px !important;
    }

    /* 간편기능 (feature.html) */
    .feature-card {
        flex-direction: column !important;
        padding: 20px !important;
        gap: 15px !important;
    }
    .video-box {
        width: 100% !important;
        height: 200px !important;
    }
    .feature-info {
        width: 100% !important;
        padding: 0 !important;
    }
    .feature-title {
        font-size: 20px !important;
    }

    /* 사냥터 (hunting.html) */
    .hunt-card {
        flex-direction: column !important;
    }
    .hunt-img {
        width: 100% !important;
        height: 180px !important;
    }
    .hunt-info {
        padding: 20px !important;
    }
    .hunt-title {
        font-size: 22px !important;
    }

    /* 서버정보 (info.html) */
    .info-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    .info-section {
        padding: 20px !important;
    }
    .info-title {
        font-size: 22px !important;
    }

    /* 공지사항 (notice.html) */
    .notice-header {
        font-size: 15px !important;
        padding: 15px !important;
    }
    .notice-body {
        padding: 20px 15px !important;
        font-size: 14px !important;
    }

    /* 홍보안내 (promo.html) */
    .promo-box {
        padding: 20px !important;
    }
    .promo-step {
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
    }
    .step-badge {
        margin: 0 auto !important;
    }
    .step-info {
        margin-left: 0 !important;
    }

    /* 고객센터 (service.html) */
    .service-row {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px !important;
        padding: 25px 0 !important;
    }
    .service-text {
        margin-left: 0 !important;
    }
    .service-btn {
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* 업데이트 (update.html) */
    .update-item {
        padding: 20px !important;
    }
    .update-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px !important;
    }
    .modal-container {
        width: 92% !important;
        margin: 20px auto !important;
        padding: 20px !important;
    }

    /* 다운로드 (download.html) */
    .download-card {
        padding: 25px 20px !important;
    }
    .btn-download {
        padding: 15px !important;
        font-size: 16px !important;
        flex-direction: column !important;
        gap: 5px !important;
        text-align: center !important;
    }

    /* 이미지 반응형 공통 */
    img {
        max-width: 100% !important;
        height: auto;
    }
    .doll-img, td img {
        height: 64px !important; /* 인형 및 보스 썸네일은 고정 크기 유지 */
        width: 64px !important;
    }
}