/* =========================================================
   ERP MOBILE VIEW ONLY (FINAL)
   - 작성/수정 불가
   - 조회/확인 전용
   ========================================================= */

@media (max-width: 768px) {

  /* ------------------------------
     1. 전체 기본 설정
     ------------------------------ */
  body {
    font-size: 14px;
    overflow-x: hidden;
  }

  /* ------------------------------
     2. 상단바 단순화
     ------------------------------ */
  .topbar {
    height: 48px;
    padding: 0 12px;
  }

  .topbar .top-right {
    display: none;
  }

  .topbar .top-left {
    font-size: 15px;
    font-weight: 600;
  }

  /* ------------------------------
     3. 모바일 상단 메뉴바 (사이드바 공통 처리)
     ------------------------------ */
  .sidebar {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    background: #ffffff;
    border-right: none !important;
    border-bottom: 1px solid #e5e7eb;
    padding: 6px 6px 8px;
  }

  /* 🔥 메뉴 컨테이너가 무엇이든 전부 가로 메뉴로 */
  .sidebar nav,
  .sidebar .menu,
  .sidebar .menu-group,
  .sidebar .menu-list,
  .sidebar .left-menu {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* 🔥 메뉴 아이템 공통 */
  .sidebar a,
  .sidebar .menu-item {
    flex: 0 0 auto;
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 8px;
    background: #f3f4f6;
    white-space: nowrap;
  }

  .sidebar a.active,
  .sidebar .menu-item.active {
    background: #2563eb;
    color: #ffffff;
  }

  /* ------------------------------
     4. PC 보조영역 숨김
     ------------------------------ */
  .doc-storage,
  .storage-area {
    display: none !important;
  }

  /* ------------------------------
     5. 본문 레이아웃 복구
     ------------------------------ */
  .body-area,
  .main-area,
  .content,
  .page-content {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    padding: 10px;
  }

  /* ------------------------------
     6. 카드형 UI
     ------------------------------ */
  .card,
  .card-box {
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
  }

  .card-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
  }

  /* ------------------------------
     7. 테이블 (안정 모드)
     ------------------------------ */
  table {
    width: 100%;
    font-size: 13px;
  }

  /* ------------------------------
     8. 입력요소 비활성 (버튼은 살림)
     ------------------------------ */
  input,
  select,
  textarea {
    pointer-events: none;
    background: #f7f7f7;
    opacity: 0.9;
  }

  /* ------------------------------
     9. 스크롤 안정화
     ------------------------------ */
  .body-area {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

}