/* =====================================================================
 * ONE 플랫폼 공통 모바일 대응 (서브 시스템용)
 *
 * 각 시스템 폴더에 이 파일을 복사해 두고, 자기 CSS **뒤에** 링크한다.
 *   <link href="css/style.css" rel="stylesheet">
 *   <link href="css/one-mobile.css" rel="stylesheet">   ← 반드시 뒤
 *
 * [원칙]
 * PC 화면은 한 줄도 바꾸지 않는다. 이 파일의 규칙은 전부 max-width 미디어쿼리
 * 안에만 있다. 그래서 잘못 넣어도 데스크톱은 안전하다.
 *
 * [브레이크포인트]
 *   ≤1024px  태블릿 — 여백을 줄이고 2열을 1열로
 *   ≤640px   모바일 — 사이드바를 접고, 표는 가로 스크롤, 입력은 전체 폭
 *
 * [왜 공통 파일인가]
 * 시스템마다 마크업은 달라도 "좁아지면 깨지는 지점"은 거의 같다.
 * 표가 잘리고, 2열 폼이 뭉개지고, 고정 사이드바가 화면을 잡아먹는다.
 * 그 공통 부분을 여기서 막고, 시스템 고유 레이아웃만 각자 CSS 에서 다룬다.
 * ===================================================================== */

/* ── 공통: 가로 스크롤 방지 ──
   모바일에서 가장 흔한 사고가 "화면이 옆으로 밀리는" 것이다.
   원인이 되는 요소를 일일이 찾기 어려우니 뿌리에서 막는다. */
@media (max-width: 1024px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img, video, canvas, svg, iframe { max-width: 100%; }
}

/* ── 태블릿 (≤1024px) ── */
@media (max-width: 1024px) {
  /* 2열 폼·그리드를 1열로. 좁은 화면에서 2열은 글자가 잘린다 */
  .form-grid,
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }

  /* 고정 폭 사이드바를 아이콘 폭으로 (시스템마다 클래스명이 달라 넉넉히 잡는다) */
  .sidebar { padding-left: 8px; padding-right: 8px; }

  /* 여백 축소 — 화면이 좁을수록 내용이 우선이다 */
  .content, .main, .page, .container { padding-left: 16px; padding-right: 16px; }
}

/* ── 모바일 (≤640px) ── */
@media (max-width: 640px) {
  /* 표는 억지로 줄이면 읽을 수 없다 → 가로 스크롤로 원래 폭을 지킨다 */
  .table-wrap, .admin-table-wrap, .table-scroll, .tbl-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  table { min-width: 560px; }
  /* 이미 스크롤 컨테이너가 없는 표는 자기 자신이 스크롤되게 한다 */
  table.responsive-scroll { display: block; overflow-x: auto; min-width: 0; }

  /* 탭 줄이 넘칠 때 잘리지 않고 옆으로 넘긴다 */
  .tabs, .tab-bar, .admin-tabs, .nav-tabs {
    overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
  }

  /* 입력·버튼은 손가락 크기에 맞춘다.
     16px 미만이면 iOS 사파리가 입력할 때 화면을 확대해 버린다 — 그걸 막는 값이다. */
  input, select, textarea { font-size: 16px !important; }
  input, select, textarea, button { min-height: 40px; }
  .btn, button { padding-top: 9px; padding-bottom: 9px; }

  /* 좌우로 나란히 두던 것들을 세로로 */
  .row, .toolbar, .filters, .form-row, .actions {
    flex-wrap: wrap !important; gap: 8px;
  }

  /* 모달은 화면을 거의 다 쓴다(작으면 오히려 읽기 힘들다) */
  .modal-dialog, .modal-card, .modal-panel {
    max-width: 100% !important; margin: 8px !important;
  }

  /* 카드 그리드는 한 줄에 하나 */
  .cards, .card-grid, .bento { grid-template-columns: 1fr !important; }

  /* 고정 사이드바가 있는 시스템 — 화면 위쪽에 가로 메뉴로 눕힌다.
     서브 시스템은 쉘 안에서 열리므로 서랍까지는 필요 없고, 이 정도면 쓸 만하다. */
  .layout { flex-direction: column !important; height: auto !important; overflow: visible !important; }
  .sidebar {
    width: 100% !important; min-width: 0 !important; flex-direction: row !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-right: 0 !important; border-bottom: 1px solid rgba(0,0,0,.08);
    padding: 8px !important; gap: 6px;
  }
  .sidebar-nav { flex-direction: row !important; gap: 6px; }
  .sidebar-item, .sidebar .nav-item { white-space: nowrap; width: auto !important; }
}

/* =====================================================================
 *  통합스케줄 고유 보강 — 캘린더는 좁은 화면에서 특히 잘 깨진다
 * ===================================================================== */
@media (max-width: 640px) {
  /* 월 그리드는 칸이 좁아 글자가 뭉개진다 → 최소 높이를 주고 폰트를 줄인다 */
  .cal-grid, .calendar-grid { font-size: 11px; }
  .cal-cell, .calendar-cell { min-height: 62px; }
  .cal-event, .event-chip { font-size: 10.5px; padding: 1px 4px; }
  /* 주간/일간 보기의 시간 축을 좁힌다 */
  .time-gutter, .cal-time-col { width: 42px !important; min-width: 42px !important; }
}