/* ============================================================
 * 모바일 전용 스타일 (0 ~ 767px)
 * ============================================================ */

@media (max-width: 767px) {

  /* ===========================================
   * 헤더 - 모바일
   * =========================================== */
  #header {
    padding: 0 var(--spacing-3);
  }

  .header-title {
    font-size: var(--font-size-sm);
  }

  .header-brand-icon {
    width: 24px;
    height: 24px;
  }

  .header-user-name {
    display: none;  /* 공간 절약 */
  }


  /* ===========================================
   * 사이드바 - 모바일에서는 숨김
   * =========================================== */
  #sidebar {
    display: none !important;
  }


  /* ===========================================
   * 바텀시트 - 모바일에서 활성화
   * =========================================== */
  #bottom-sheet {
    display: block;
  }


  /* ===========================================
   * 지도 오버레이 - 모바일
   * =========================================== */
  .map-overlay-legend {
    top: calc(var(--header-height) + var(--spacing-2));
    left: var(--spacing-2);
    right: var(--spacing-2);
    max-width: none;
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-xs);
  }

  .map-overlay-controls {
    top: auto;
    bottom: calc(var(--bottomsheet-closed) + var(--spacing-3));
    right: var(--spacing-3);
  }


  /* ===========================================
   * 관리자 페이지 - 모바일
   * =========================================== */
  .admin-header {
    padding: 0 var(--spacing-3);
  }

  .admin-main {
    padding: var(--spacing-4) var(--container-padding-mobile);
  }

  .admin-section {
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-4);
  }


  /* ===========================================
   * 공통 컴포넌트 - 모바일 조정
   * =========================================== */

  /* 버튼: 터치 영역 확보 */
  .btn {
    min-height: var(--touch-target-min);
  }

  /* 입력: 줌 방지를 위해 16px 이상 */
  .input {
    font-size: var(--font-size-md);  /* 최소 16px */
  }

  /* 토스트: 화면 가득 */
  .toast-container {
    top: calc(var(--header-height) + var(--spacing-2));
    left: var(--spacing-2);
    right: var(--spacing-2);
  }

  .toast {
    min-width: 0;
    max-width: none;
    width: 100%;
  }
}