/* ============================================================
 * 데스크톱 전용 스타일 (768px 이상)
 * ============================================================ */

@media (min-width: 768px) {

  /* ===========================================
   * 헤더 - 데스크톱
   * =========================================== */
  #header {
    padding: 0 var(--spacing-6);
  }


  /* ===========================================
   * 사이드바 - 데스크톱에서 활성화 (기본 닫힘)
   * =========================================== */
  #sidebar {
    display: block;
  }

  #sidebar-toggle {
    display: inline-flex;
  }

  /* 지도는 기본 전체 폭 사용. 사이드바 열릴 때만 우측 여백 확보 */
  #map {
    right: 0;
    width: auto;
    transition: right 0.28s ease;
  }

  body.sidebar-open #map {
    right: var(--sidebar-width);
  }

  /* 필터 컨트롤도 사이드바 상태에 따라 우측 위치 조정 */
  body.sidebar-open .map-overlay-controls {
    right: calc(var(--sidebar-width) + var(--spacing-4));
  }


  /* ===========================================
   * 바텀시트 - 데스크톱에서는 숨김
   * =========================================== */
  #bottom-sheet {
    display: none !important;
  }


  /* ===========================================
   * 지도 오버레이 - 데스크톱
   * =========================================== */
  .map-overlay-legend {
    top: calc(var(--header-height) + var(--spacing-6));
    left: var(--spacing-6);
    padding: var(--spacing-4);
  }

  .map-overlay-controls {
    top: calc(var(--header-height) + var(--spacing-6));
    /* 사이드바와 겹치지 않도록 사이드바 왼쪽에 배치 */
    right: calc(var(--sidebar-width) + var(--spacing-4));
  }


  /* ===========================================
   * 관리자 페이지 - 데스크톱
   * =========================================== */
  .admin-header {
    padding: 0 var(--spacing-8);
  }

  .admin-main {
    padding: var(--spacing-8) var(--container-padding-desktop);
  }

  /* 2컬럼 그리드 옵션 (관리자 페이지용) */
  .admin-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-6);
  }
}


/* ===========================================
 * 와이드 스크린 (1280px 이상)
 * =========================================== */
@media (min-width: 1280px) {
  .admin-main {
    padding: var(--spacing-10) var(--container-padding-desktop);
  }
}