/* Leafmusic v3 — Responsive (mobile-first overlay) */

/* ── 모바일 하단 nav — 데스크탑에선 숨김 ── */
.lm-mobile-nav { display: none !important; }

/* ── 모바일 패널 탭바 — 데스크탑에선 숨김 ── */
.lm-mobile-panel-tabs { display: none !important; }

/* ── 스크롤바 모바일 얇게 ── */
@media (max-width: 768px) {
  .scroll-region::-webkit-scrollbar { width: 3px; height: 3px; }

  /* 사이드바 숨김 */
  .lm-sidenav { display: none !important; }

  /* DashSidebar 숨김 */
  .lm-dashsidebar { display: none !important; }

  /* TopBar: 검색/상태 숨김, 패딩 줄임 */
  .lm-topbar { padding: 0 16px !important; height: 48px !important; }
  .lm-topbar-search { display: none !important; }
  .lm-topbar-status { display: none !important; }

  /* PlayerBar: 더 컴팩트 + 하단 nav 공간 확보 */
  .lm-playerbar {
    height: auto !important;
    padding: 8px 16px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
  .lm-playerbar-vol { display: none !important; }
  .lm-playerbar-meta { flex: 1 !important; min-width: 0 !important; }
  .lm-playerbar-controls { gap: 12px !important; }
  .lm-playerbar-seek { width: 100% !important; }

  /* Create 3컬럼 → 1컬럼 */
  .lm-create-grid {
    display: flex !important;
    flex-direction: column !important;
  }

  /* 패널들: 모바일에서 전체 폭 */
  .lm-panel-left,
  .lm-panel-center,
  .lm-panel-right {
    width: 100% !important;
    min-width: 0 !important;
    border-right: none !important;
    border-left: none !important;
    border-bottom: 1px solid var(--border) !important;
    height: auto !important;
    min-height: 400px !important;
    overflow: visible !important;
  }

  /* 패널 숨김 — JS로 .lm-panel-hidden 클래스 토글 */
  .lm-panel-hidden { display: none !important; }

  /* 모바일 패널 탭바 표시 */
  .lm-mobile-panel-tabs {
    display: flex !important;
    gap: 4px !important;
    padding: 6px 10px !important;
    background: var(--bg-elev) !important;
    border-bottom: 1px solid var(--border) !important;
    flex-shrink: 0 !important;
  }

  /* 페이지 헤더 패딩 줄임 */
  .lm-create-header {
    padding: 12px 16px 10px !important;
  }
  .lm-create-header h1 {
    font-size: 22px !important;
    letter-spacing: -0.4px !important;
  }
  .lm-create-header-tabs { flex-wrap: wrap !important; gap: 6px !important; }

  /* Dashboard 헤더 컴팩트 */
  .lm-dash-header {
    padding: 12px 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .lm-dash-search { width: 100% !important; border-radius: 8px !important; }

  /* Dashboard 히어로 섹션 */
  .lm-dash-hero { padding: 24px 16px 16px !important; }
  .lm-dash-hero h1 { font-size: 28px !important; letter-spacing: -0.6px !important; }

  /* Dashboard content padding */
  .lm-dash-content { padding: 24px 16px 160px !important; }

  /* 모바일 하단 nav 표시 */
  .lm-mobile-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 60px !important;
    background: rgba(10,10,11,0.96) !important;
    border-top: 1px solid var(--border) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 100 !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding: 0 8px !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* 본문 하단 여백 (하단 nav 높이) */
  .lm-route { padding-bottom: 60px; }

  /* 모바일 chat bubble 더 넓게 */
  .lm-chat-bubble { max-width: 88% !important; }

  /* 버튼 터치 타겟 */
  .btn { min-height: 40px !important; }
  .lm-mobile-nav .lm-nav-btn {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* 탭 전환 버튼 크게 */
  .lm-tab-seg span { padding: 6px 14px !important; font-size: 12px !important; }

  /* Right panel (FocusedPanel) 모바일 최적화 */
  .lm-panel-right { min-height: 300px !important; }

  /* Create 헤더 내 숨길 요소 */
  .lm-create-extlm { display: none !important; }

  /* Beat sample 카드 가로 스크롤 */
  .lm-beat-row { overflow-x: auto !important; flex-wrap: nowrap !important; }
}

/* 태블릿 (769px ~ 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .lm-sidenav { width: 64px !important; }
  .lm-create-grid {
    grid-template-columns: 320px 1fr !important;
  }
  .lm-panel-right { display: none !important; }
}