/* =====================================================================
 * 산림유량 — 공통 반응형 스타일시트
 * 설계근거: 08_화면설계서.md §1.9 (반응형 웹 필수)
 * 적용범위: 관리도구(head.jspf) + 공개/단독 페이지(viewer, manual, login, error)
 * 브레이크포인트: ≤768px(태블릿/모바일), ≤480px(폰)
 * 페이지별 인라인 @media 금지 — 본 파일로 일원화
 * ===================================================================== */

/* ───────────────────────────────────────────────────────────────────
 * 0) 데스크톱(≥768px) 보정
 *    Bootstrap이 .offcanvas-md에 background:transparent!important 를 적용해
 *    데스크톱에서 사이드바 배경(짙은 남색)이 사라지는 것을 복원.
 * ─────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .sidebar.offcanvas-md { background-color: #1e293b !important; }
}

/* ───────────────────────────────────────────────────────────────────
 * 1) 태블릿/모바일 (≤768px)
 * ─────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── 관리도구 레이아웃: 사이드바를 좌측 슬라이드 드로어(offcanvas)로 전환 ──
   * 마크업의 .offcanvas-md(Bootstrap)가 ≤768px에서 좌측 드로어로 동작.
   * 드로어 폭을 데스크톱 사이드바와 동일하게 맞춤. */
  .sidebar.offcanvas-md { --bs-offcanvas-width: 240px; }
  .sidebar .nav-link {
    display: flex;
    align-items: center;
    min-height: 44px;          /* 터치 타깃 (WCAG 2.5.5) */
  }
  /* 햄버거 토글: 모바일에서만 노출(부트스트랩 d-md-none 보조) */
  #sidebarToggle { margin-right: auto; }

  /* ── 본문/탑바 패딩 축소 ── */
  .main-content { padding: 16px !important; }
  .topbar {
    padding: 8px 16px !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  .page-title { font-size: 1.15rem; }

  /* ── 공개 페이지(viewer/manual) 헤더·본문 ── */
  .viewer-header,
  .manual-header { padding: 14px 16px !important; }
  .main-wrap { padding: 12px 10px 36px !important; }

  /* ── 테이블: 셀 압축(글자 세로쪼개짐) 방지 → 최소폭 부여하고 가로 스크롤 ── */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table-responsive > table { min-width: 640px; }
  table.dataTable, .table { font-size: .82rem; }
  .table th, .table td { white-space: nowrap; }

  /* ── 인라인 고정폭 입력/셀렉트 → 폰 폭 적응 ── */
  [style*="width:140px"],
  [style*="width: 140px"],
  [style*="min-width:160px"],
  [style*="min-width: 160px"] {
    width: 100% !important;
    min-width: 0 !important;
  }
  .form-select.d-inline-block,
  .form-control.d-inline-block { width: 100% !important; }

  /* ── 카드 max-width 해제 ── */
  .card[style*="max-width"] { max-width: 100% !important; }

  /* ── 버튼 터치영역 ── */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; }

  /* ── 모달: 폰에서 거의 전체폭 ── */
  .modal-dialog {
    margin: .5rem;
    max-width: calc(100% - 1rem);
  }
}

/* ───────────────────────────────────────────────────────────────────
 * 2) 폰 (≤576px) — 진짜 모바일 레이아웃
 * ─────────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {

  body { font-size: 13px; }
  /* 페이지 가로 스크롤 차단(모바일에서 좌우로 길어 보이는 현상 제거) */
  html, body { overflow-x: hidden; }

  .main-content { padding: 12px !important; }
  .page-title { font-size: 1.05rem; }

  /* 탑바: 사용자정보/매뉴얼 버튼 줄바꿈 정렬 */
  .topbar { justify-content: flex-start !important; }

  /* 검색/필터 카드 패딩 축소 */
  .card-search,
  .search-area { padding: 12px !important; }

  /* 통계/요약 카드: 한 줄 1개 */
  #summaryCards .col-6 { flex: 0 0 100%; max-width: 100%; }

  /* 로그인 카드 */
  .login-card { padding: 26px 20px !important; }

  /* ── 표 → 행별 카드(세로 스택) ── 가로 스크롤 대신 모바일 카드 레이아웃 */
  .table-responsive { overflow-x: visible; }
  .table-responsive > table { min-width: 0 !important; }
  table.table thead { display: none; }                 /* 헤더 숨김(각 셀에 라벨) */
  table.table, table.table > tbody { display: block; width: 100%; }
  table.table > tbody > tr {
    display: block;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
    background: #fff;
  }
  table.table > tbody > tr > td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    white-space: normal !important;
    border: 0;
    padding: 6px 0;
    text-align: right;
    word-break: break-all;
  }
  table.table > tbody > tr > td::before {
    content: attr(data-label);
    flex: 0 0 36%;
    font-weight: 600;
    color: #475569;
    text-align: left;
    white-space: normal;
  }
  /* 라벨이 없는(액션 버튼 등) 셀은 우측 정렬만 */
  table.table > tbody > tr > td:empty { display: none; }
}