/* ─────────────────────────────────────────────
 * 모바일 반응형 — 720px 이하에서 적용
 *
 * 핵심:
 *   - 사이드바 fixed + transform 슬라이드
 *   - 헤더 정리 (햄버거 버튼 표시, org-bc/검색바 폭 조정)
 *   - 대시보드 그리드 단일 열
 *   - 테이블 가로 스크롤 (이미 wrapper 있음 — 보강)
 *   - 모달 전체 화면 또는 padding 축소
 *   - drawer 폭 조정
 * ───────────────────────────────────────────── */

/* 햄버거 버튼 — 데스크탑 숨김 */
.mobile-menu-btn {
  display: none;
  width: 38px;
  height: 38px;
  background: var(--gray-100);
  border: none;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  color: var(--gray-700);
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  margin-right: 6px;
}
.mobile-menu-btn:hover { background: var(--gray-200); }
.mobile-menu-btn svg { width: 18px; height: 18px; display: block; }

/* 모바일 오버레이 */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 24, 24, 0.5);
  z-index: 6500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.mobile-overlay.on {
  opacity: 1;
  pointer-events: auto;
}

body.no-scroll { overflow: hidden; }

/* ── 모바일 (≤ 720px) ───────────────────── */
@media (max-width: 720px) {
  /* 헤더 햄버거 버튼 표시 */
  .mobile-menu-btn { display: inline-flex; }

  /* 사이드바 fixed 슬라이드 */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    z-index: 7000;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 0 0 24px rgba(15, 24, 24, 0.18);
  }
  .sidebar.open { transform: translateX(0); }
  .mobile-overlay { display: block; }

  /* 메인 영역 전체 폭 차지 */
  .main { width: 100%; }
  .layout { display: block; height: auto; min-height: 100vh; }

  /* 헤더 — 한 줄에 다 못 들어가니 wrap 허용 + 핵심만 */
  .main-header {
    flex-wrap: nowrap;
    height: auto;
    min-height: 56px;
    padding: 8px 14px;
    gap: 8px;
    overflow-x: auto;
  }
  .crumbs { font-size: 12px; }
  .crumbs .now { font-size: 14px; }
  .org-bc { display: none; }                 /* 모바일에서 숨김 */
  .search-bar {
    max-width: none;
    flex: 1;
    min-width: 140px;
    margin-left: 4px;
  }
  .search-bar input { font-size: 12px; padding: 8px 12px 8px 32px; }
  .search-bar .ic { left: 10px; }
  .search-bar .kbd { display: none; }        /* ⌘K 힌트 숨김 */

  /* qa-bar — 텍스트 라벨 숨기고 아이콘만 */
  .qa-bar { gap: 4px; flex-shrink: 0; }
  .qa-btn {
    padding: 8px;
    min-width: 36px;
  }
  .qa-btn span:not(.ic):not(.badge):not(#kq-count-text):not(#kq-pending-badge) {
    display: none;
  }
  /* 카톡 큐 카운터는 텍스트 유지 */
  .qa-btn.kq-counter { padding: 8px 10px; }
  .qa-btn.kq-counter #kq-count-text { display: inline; }

  .notif-bell { width: 36px; height: 36px; }

  /* 메인 컨텐츠 padding 축소 */
  .pane { padding: 16px 14px; }
  .pane-head h1 { font-size: 18px; }
  .pane-head .desc { font-size: 12px; }

  /* 대시보드 그리드 — 단일 열 */
  .dash-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .dash-grid .span-3,
  .dash-grid .span-4,
  .dash-grid .span-5,
  .dash-grid > * { grid-column: span 1 !important; }

  /* KPI 그리드 — 1-2열 */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .kpi { padding: 12px; }
  .kpi-value { font-size: 18px; }
  .kpi-label { font-size: 10px; }

  /* 보장분석 — 5탭은 가로 스크롤 */
  .cov-tabs,
  .cov-kyc {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .cov-tab { flex-shrink: 0; }

  /* 보장분석 테이블 — 이미 .policy-scroll 이 가로 스크롤 가능 */
  .policy-table {
    min-width: 540px;       /* 모바일에서도 가로 스크롤로 보이도록 */
  }

  /* 고객관리 / claims / history 테이블 가로 스크롤 보강 */
  .cust-table,
  .history-table {
    min-width: 720px;
  }

  /* 자료실 — 카테고리 그리드 단일 열 */
  .rsr-cat-grid {
    grid-template-columns: 1fr !important;
  }
  .rsr-toolbar { flex-direction: column; align-items: stretch; }
  .rsr-toolbar .btn { width: 100%; }

  /* 보장분석 DB 패널 액션 줄바꿈 */
  .cdp-head { flex-wrap: wrap; }
  .cdp-actions { flex-wrap: wrap; gap: 6px; }
  .cdp-list { grid-template-columns: 1fr !important; max-height: 280px; }

  /* 모달 — 화면 padding 축소 */
  .modal-overlay,
  .cust-modal-overlay,
  .rsr-modal-overlay {
    padding: 12px;
    align-items: flex-end;     /* 모바일은 하단 시트 스타일 */
  }
  .modal-box,
  .cust-modal-box,
  .rsr-modal-box {
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    width: 100%;
  }
  .form-grid,
  .cust-row-2,
  .cust-row-3,
  .rsr-row-3 {
    grid-template-columns: 1fr !important;
  }

  /* 알림 패널 — 화면 폭 거의 다 차지 */
  .notif-panel {
    width: calc(100vw - 16px) !important;
    right: 8px !important;
    left: 8px !important;
    top: 56px !important;
  }

  /* 검색 드롭다운 — 화면 가득 */
  .search-dropdown.sd-db {
    position: fixed !important;
    top: 56px !important;
    left: 8px !important;
    right: 8px !important;
    margin-top: 0;
    max-height: calc(100vh - 70px);
  }

  /* day-drawer — 모바일에서 화면 거의 가득 */
  .drawer-panel {
    width: calc(100vw - 24px);
    max-width: 380px;
  }

  /* 대시보드 위젯 행 padding */
  .widget { padding: 12px 14px; }
  .widget-head { margin-bottom: 8px; }
  .widget-row { padding: 8px 0; }

  /* 가격 페이지 카드 */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  /* AI 어시스턴트 — 입력 pill 폭 조정 */
  .ai-pill { width: 100% !important; }
  .ai-shell.empty .ai-hero { padding: 16px; }
  .ai-suggested-pills { flex-direction: column; gap: 6px; }
  .ai-suggested-pills button { width: 100%; }
  .ai-clear-btn {
    top: 8px;
    right: 8px;
    font-size: 10px;
    padding: 5px 10px;
  }

  /* AI 사고분석 폼 */
  .analyzer-tabs { grid-template-columns: 1fr !important; }
  .anlz-history { padding: 10px 12px; }
  .anlz-hist-item { min-width: 100%; }

  /* 청구 결과 카드 그리드 */
  .result-section { padding: 0; }

  /* 사용자 카드 (사이드바 하단) - 슬라이드 사이드바 안에서 그대로 */
}

/* ── 태블릿 (721px ~ 1024px) ─────────── */
@media (min-width: 721px) and (max-width: 1024px) {
  .sidebar { width: 200px; }
  .org-bc { display: none; }                  /* 좁아서 숨김 */
  .search-bar { max-width: 320px; }
  .qa-btn span:not(.ic):not(.badge):not(#kq-count-text):not(#kq-pending-badge) {
    display: none;                            /* 태블릿도 라벨 숨김 */
  }
  .pane { padding: 20px 18px; max-width: none; }

  .dash-grid {
    grid-template-columns: repeat(8, 1fr) !important;
  }
  .dash-grid .span-3 { grid-column: span 4 !important; }
  .dash-grid .span-4 { grid-column: span 4 !important; }
  .dash-grid .span-5 { grid-column: span 8 !important; }

  .rsr-cat-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── iOS 안전 영역 보정 ─────────────── */
@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 720px) {
    .main-header {
      padding-top: calc(8px + env(safe-area-inset-top));
    }
    .sidebar {
      padding-top: env(safe-area-inset-top);
    }
  }
}