/* ==========================================
   📱 PC 화면에서는 모바일 전용 요소 숨김
========================================== */
@media (min-width: 769px) and (min-aspect-ratio: 4/5) {
    .mobile-only { display: none !important; }
}

/* ==========================================
   📱 모바일 환경 (화면폭 768px 이하 OR 세로 모드)
========================================== */
@media (max-width: 768px), (max-aspect-ratio: 4/5) {
    
    /* 1. 레이아웃 1칸으로 통일 및 스크롤 고정 */
    body { 
        overflow: hidden; 
        height: 100dvh; 
    }

    #app-root {
        grid-template-areas: 
            "header"
            "viewer";
        grid-template-columns: 1fr; 
    }

    /* 2. 헤더 다이어트 */
    .app-header {
        padding: 8px 12px; 
    }
    .header-logo h1 {
        font-size: 1.2em; 
    }
    .external-links {
        display: none !important;
    }

    /* 3. 뷰어(캔버스) 영역 확장 */
    #slot-viewer {
        height: calc(100dvh - 65px - 60px); 
        margin-bottom: 65px;
        border-radius: 0;
        border: none;
    }

    /* 4. 하단 네비게이션 바 */
    #mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0; left: 0;
        width: 100%; height: 65px;
        background: var(--bg-surface);
        border-top: 1px solid var(--border-color);
        justify-content: space-around; 
        align-items: center;
        z-index: 1000;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .nav-btn {
        flex: 1; height: 100%;
        background: none; border: none; cursor: pointer;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        gap: 4px; color: var(--text-secondary);
    }
    .nav-btn.active { color: var(--accent-primary); }
    .nav-icon { font-size: 20px; }
    .nav-text { font-size: 11px; font-weight: bold; }

    /* 5. 바텀 시트 (글래스모피즘 적용 및 z-index 최상단) */
    #slot-sidebar {
        position: fixed !important;
        bottom: calc(65px + env(safe-area-inset-bottom)) !important; 
        left: 0 !important;
        width: 100% !important;
        height: 65vh !important; 
        
        /* 글래스모피즘 */
        background: rgba(244, 245, 247, 0.75) !important;
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.4);
        z-index: 1005 !important; /* 🚨 툴바보다 높게 덮기 위해 1005 부여 */
        overflow-y: auto;
        padding: 0 15px 20px 15px;
        
        transform: translateY(120%);
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    #slot-sidebar.sheet-open { transform: translateY(0); }

    /* 글래스모피즘 다크모드 대응 */
    html[data-theme="dark"] #slot-sidebar {
        background: rgba(30, 30, 46, 0.75) !important; 
    }
    #slot-sidebar .sidebar-section {
        background: rgba(255, 255, 255, 0.45) !important; 
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important; 
    }
    html[data-theme="dark"] #slot-sidebar .sidebar-section {
        background: rgba(0, 0, 0, 0.35) !important;
    }

    /* 6. 바텀 시트 손잡이 */
    #mobile-drag-handle {
        position: sticky; top: 0;
        width: calc(100% + 30px); margin-left: -15px; height: 40px;
        background: transparent !important; /* 투명화 적용 */
        display: flex; justify-content: center; align-items: center;
        z-index: 10; cursor: pointer;
        border-bottom: 1px solid var(--border-color);
        margin-bottom: 15px;
    }
    #mobile-drag-handle::after {
        content: ""; width: 40px; height: 5px;
        background: #bbb; border-radius: 10px;
    }

    /* 7. 뷰어 하단 툴바 모바일 최적화 (가로 스크롤 및 겹침 방지) */
    .viewer-bottom-toolbar {
        display: flex !important;
        bottom: 75px; 
        z-index: 990; 
        
        width: 95vw;
        max-width: 100%;
        padding: 8px 10px;
        gap: 6px;
        overflow-x: auto; 
        white-space: nowrap;
        scrollbar-width: none; 
        -ms-overflow-style: none; 
        
        /* 🚨 [핵심 해결] 팝업창이 탈출할 수 있도록 transform 감옥을 해제합니다! */
        transform: none !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important; /* transform 대신 margin으로 가운데 정렬 */
    }

    .viewer-bottom-toolbar::-webkit-scrollbar {
        display: none;
    }
    .viewer-bottom-toolbar > * {
        flex-shrink: 0;
    }
    .viewer-bottom-toolbar .v-btn {
        width: 32px;
        height: 32px;
        font-size: 1.1em;
    }
    .viewer-bottom-toolbar .dl-label {
        font-size: 0.8em;
    }
    .viewer-bottom-toolbar .dl-btn {
        padding: 8px 12px;
        font-size: 0.9em;
    }

    .dl-popup {
        /* overflow-x의 감옥(툴바)에서 강제로 빠져나오게 만듭니다! */
        position: fixed !important; 
        
        /* 화면 하단(바텀 시트와 툴바 위) 중앙에 고정 */
        bottom: 135px !important; 
        left: 50% !important;
        transform: translateX(-50%) !important;
        
        width: 85vw !important;
        max-width: 320px !important;
        z-index: 2000 !important;
    }
    
    /* 화면 중앙에 고정되었으므로, 말풍선 꼬리는 어색해져서 숨깁니다 */
    .dl-popup-tail {
        display: none !important; 
    }

    /* ==========================================
       🌟 9. 모바일 뷰어 툴바 다운로드 기능 숨김
       (다운로드 전용 바텀 시트 탭으로 이관됨)
    ========================================== */
    .viewer-bottom-toolbar .v-divider,
    .viewer-bottom-toolbar .dl-checkbox-group,
    .viewer-bottom-toolbar .dl-btn {
        display: none !important;
    }
    
    /* 4. 숨겨진 글자 대신 아이콘만 가짜 요소(pseudo-element)로 새로 생성! */
    #btnDownload::after {
        content: "💾";
        font-size: 1.2rem;
    }
}

/* ==========================================
       🌟 모바일 바텀시트 전용 다운로드 UI 스타일
    ========================================== */
    .m-download-container {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .m-dl-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: bold;
        cursor: pointer;
    }
    .m-sub-options {
        margin-top: 8px;
        margin-left: 24px;
        padding: 12px;
        background: var(--bg-color);
        border-radius: 8px;
        border: 1px solid var(--border-color);
    }
    .m-primary-btn {
        width: 100%;
        margin-top: 15px;
        background: linear-gradient(145deg, #3498db, #2980b9);
        color: white;
        padding: 16px;
        font-size: 1.1em;
        font-weight: bold;
        border: none;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
    }