/* =====================================================================
 * ONE 플랫폼 공통 모바일 대응 (서브 시스템용)
 *
 * 각 시스템 폴더에 이 파일을 복사해 두고, 자기 CSS **뒤에** 링크한다.
 *   <link href="css/style.css" rel="stylesheet">
 *   <link href="css/one-mobile.css" rel="stylesheet">   ← 반드시 뒤
 *
 * [원칙]
 * PC 화면은 한 줄도 바꾸지 않는다. 이 파일의 규칙은 전부 max-width 미디어쿼리
 * 안에만 있다. 그래서 잘못 넣어도 데스크톱은 안전하다.
 *
 * [설계 방침 — 첫 판에서 배운 것]
 * 좁은 화면에서 넘치는 내용을 **자르지 않는다**. 잘라 놓으면 화면 밖 내용에
 * 아예 손이 닿지 않는다(실제로 KPI 상세 화면 왼쪽이 통째로 잘려 보였다).
 * 대신 두 가지로 해결한다.
 *   ① 눌려서는 안 되는 것(버튼·탭·툴바)은 폭을 지키고 그 줄을 가로 스크롤시킨다.
 *   ② 표처럼 원래 넓은 것은 자기 스크롤 상자를 만들어 준다.
 *
 * 특히 버튼 안 글자가 "새\n로\n고\n침" 처럼 세로로 쌓이는 건 flex 아이템이
 * 짓눌렸다는 신호다. flex-shrink:0 + white-space:nowrap 이 그 해결책이다.
 * ===================================================================== */

/* ── 태블릿 (≤1024px) ── */
@media (max-width: 1024px) {
  img, video, canvas, svg { max-width: 100%; height: auto; }

  /* 2열 폼·그리드를 1열로. 좁은 화면에서 2열은 글자가 잘린다 */
  .form-grid,
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }

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

/* ── 모바일 (≤640px) ── */
@media (max-width: 640px) {

  /* ① 눌리면 안 되는 것들 — 글자가 세로로 쌓이는 걸 막는다.
     버튼·셀렉트·탭은 제 폭을 지키고, 대신 담고 있는 줄이 옆으로 스크롤된다. */
  button, .btn, select, .badge, .chip, .tag,
  .nav-action, .sidebar-item, .tab, .tab-item {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* 그 버튼들을 담는 줄 — 줄바꿈 대신 가로 스크롤.
     wrap 으로 접으면 글자가 세로로 쌓여 오히려 읽기 어려워진다. */
  .navbar, .app-navbar, .toolbar, .tabs, .tab-bar, .nav-tabs,
  .admin-tabs, .filters, .btn-row, .actions, .header-actions {
    display: flex;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;                 /* 얇은 화면에서 스크롤바가 자리를 먹지 않게 */
  }
  .navbar::-webkit-scrollbar, .app-navbar::-webkit-scrollbar,
  .toolbar::-webkit-scrollbar, .tabs::-webkit-scrollbar,
  .admin-tabs::-webkit-scrollbar { display: none; }

  /* ② 표는 자기 스크롤 상자를 갖는다.
     감싸는 요소가 있으면 그쪽을, 없으면 표 자신을 스크롤시킨다.
     (전역으로 min-width 를 주면 페이지 전체가 밀려 왼쪽이 잘린다 — 하지 않는다) */
  .table-wrap, .admin-table-wrap, .table-scroll, .tbl-wrap, .table-responsive {
    overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  }
  table { max-width: none; }

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

  /* ④ 카드 그리드는 한 줄에 하나. 다만 숫자만 있는 통계 카드는 두 개씩이 낫다
     (하나씩 쌓으면 스크롤만 길어진다) */
  .cards, .card-grid, .bento { grid-template-columns: 1fr !important; }
  .stat-strip, .stats, .kpi-cards, .summary-cards { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* ⑤ 모달은 화면을 거의 다 쓴다(작으면 오히려 읽기 힘들다).
     그리고 세로로 길면 안쪽이 스크롤되어야 한다 — 아니면 버튼에 손이 안 닿는다. */
  .modal-dialog, .modal-card, .modal-panel {
    max-width: 100% !important; width: auto !important; margin: 8px !important;
  }
  .modal-body { max-height: 70vh; overflow-y: auto; }

  /* ⑥ 고정 사이드바가 있는 시스템 — 화면 위쪽 가로 메뉴로 눕힌다.
     서브 시스템은 쉘 안에서 열리므로 서랍까지는 필요 없다. */
  .layout { flex-direction: column !important; height: auto !important; overflow: visible !important; }
  .sidebar {
    width: 100% !important; min-width: 0 !important; height: auto !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; flex-wrap: nowrap; }
  .sidebar-item, .sidebar .nav-item { width: auto !important; }
}

/* =====================================================================
 *  T-Sync 고유 보강 — 이 시스템은 .app-layout / .app-sidebar 를 쓴다
 * ===================================================================== */
@media (max-width: 640px) {
  .app-layout { flex-direction: column !important; height: auto !important; }
  .app-sidebar {
    width: 100% !important; min-width: 0 !important; height: auto !important;
    border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .sidebar-scroll { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sidebar-section-title { white-space: nowrap; flex-shrink: 0; }
  .app-main { padding: 14px 12px 80px !important; }

  /* 대시보드 통계 카드는 2열이 읽기 좋다(하나씩 쌓으면 스크롤만 길어진다) */
  .app-main .row > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }

  /* 파일탭 — 좁은 화면에선 버전·소유자·크기를 접고 이름만 */
  .wo-list-head { display: none; }
  .wo-row { grid-template-columns: 1fr 32px !important; }
  .wo-c-ver, .wo-c-size, .wo-c-owner, .wo-c-date { display: none !important; }
  .wo-detail-actions { flex-wrap: wrap !important; overflow: visible !important; }
  .wo-detail-actions .btn { flex: 1 1 auto; }
  .wo-ver { grid-template-columns: 1fr !important; }
  .wo-ver-act { justify-content: flex-start; flex-wrap: wrap !important; overflow: visible !important; }

  .post-card .card-body, .note-item .card-body { padding: 12px !important; }
}