/**
 * [V7_통합작업_모바일반응형_20260429] 반응형 미디어 쿼리
 * 파일: /opt/manna-v7-beta/app/css/responsive.css
 *
 * 브레이크포인트:
 *   768px 이하 — 사이드바 자동 접힘 + 햄버거 메뉴 노출
 *   480px 이하 — 표 가로 스크롤 + 중요 컬럼만 표시
 *   360px 이하 — 최소 폰트/패딩 보정
 *
 * 데스크탑(1024px 이상)은 기존 style.css 그대로 동작.
 */

/* ═══════════════════════════════════════════════════
   햄버거 버튼 (기본 숨김 → 768px 이하에서 노출)
   ═══════════════════════════════════════════════════ */
#hamburger-btn {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 8000;
  background: #1a237e;
  color: #fff;
  border: none;
  border-radius: 8px;
  width: 42px;
  height: 42px;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════
   768px 이하 — 태블릿·대형 모바일
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* 햄버거 버튼 노출 */
  #hamburger-btn {
    display: flex;
  }

  /* 사이드바: 기본 숨김(드로어 방식) */
  .app-container .sidebar,
  #sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 7500;
    width: 260px !important;
    overflow-y: auto;
  }

  /* 사이드바 열림 상태 */
  .app-container .sidebar.open,
  #sidebar.open {
    transform: translateX(0);
  }

  /* 사이드바 오버레이 (배경 어둡게) */
  #sidebar-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 7400;
    background: rgba(0,0,0,0.45);
  }
  #sidebar-mobile-overlay.active {
    display: block;
  }

  /* 본문 영역: 사이드바가 없으므로 왼쪽 여백 제거 */
  .app-container .main-content,
  .main-content,
  #main-content {
    margin-left: 0 !important;
    padding: 56px 12px 20px !important;
  }

  /* 카드 패딩 축소 */
  .card {
    padding: 12px !important;
    margin-bottom: 12px !important;
  }

  /* 폼 그리드: 단일 열로 전환 */
  .form-grid,
  .grid-2col,
  .grid-3col {
    grid-template-columns: 1fr !important;
  }

  /* 버튼 그룹: 전체 너비 */
  .btn-group {
    flex-wrap: wrap;
    gap: 8px;
  }
  .btn-group .btn,
  .btn-group button {
    flex: 1 1 auto;
    min-width: 120px;
  }

  /* 폰트 크기 소폭 축소 */
  body {
    font-size: 0.93rem;
  }

  /* 페이지 타이틀 */
  .page-title,
  h1.section-title {
    font-size: 1.15rem !important;
  }

  /* 헤더 패딩 축소 */
  .page-header,
  .section-header {
    padding: 10px 12px !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* 필터 바 */
  .filter-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .filter-bar > * {
    flex: 1 1 140px;
  }

  /* 대시보드 통계 카드 그리드 */
  .stats-grid,
  .summary-cards {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}

/* ═══════════════════════════════════════════════════
   480px 이하 — 일반 스마트폰
   ═══════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* 표: 가로 스크롤 허용 */
  .table-wrapper,
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 표 중요하지 않은 열 숨기기 */
  table.responsive-hide-col .col-hide,
  table.responsive-hide-col th.col-hide,
  table.responsive-hide-col td.col-hide {
    display: none !important;
  }

  /* 표 셀 최소 너비 보장 */
  table td,
  table th {
    min-width: 64px;
    white-space: nowrap;
    font-size: 0.83rem;
    padding: 6px 8px !important;
  }

  /* 대시보드 통계 카드: 단열 */
  .stats-grid,
  .summary-cards {
    grid-template-columns: 1fr !important;
  }

  /* 모달 전체 너비 */
  .modal-dialog,
  .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* 입력 필드 */
  .form-input,
  input[type="text"],
  input[type="number"],
  input[type="date"],
  select,
  textarea {
    font-size: 1rem !important; /* iOS 자동 확대 방지 */
    padding: 9px 10px !important;
  }

  /* 버튼 최소 높이 (터치 타겟) */
  .btn,
  button {
    min-height: 40px;
  }

  /* 본문 패딩 최소화 */
  .app-container .main-content,
  .main-content,
  #main-content {
    padding: 52px 8px 16px !important;
  }
}

/* ═══════════════════════════════════════════════════
   360px 이하 — 소형 기기
   ═══════════════════════════════════════════════════ */
@media (max-width: 360px) {

  body {
    font-size: 0.87rem;
  }

  .page-title,
  h1.section-title {
    font-size: 1rem !important;
  }

  table td,
  table th {
    font-size: 0.78rem;
    padding: 5px 6px !important;
  }
}

/* ═══════════════════════════════════════════════════
   인쇄 스타일 — 반응형과 충돌 방지
   ═══════════════════════════════════════════════════ */
@media print {
  #hamburger-btn,
  #sidebar-mobile-overlay {
    display: none !important;
  }
}