/* ══════════════════════════════════════════════════════════════════════
   PC 페이지 모바일 최적화(2026-09-30) — 요청사항: "모바일 전체메뉴, 전체페이지를 pc skylab modern
   스타일로 바꾸고 모두 모바일 최적화". auth.js가 mobile.html을 뺀 모든 페이지에 이 파일을 넣음.
   전부 720px 이하에서만 동작 → PC 화면은 전혀 안 바뀜.
   theme-skylab-modern.css가 body[data-theme-demo=..] + !important로 덮어써서, 여기선 선택자를
   "html:root body ..."로 시작해 우선순위를 한 단계 높임(테마가 꺼져 있어도 똑같이 적용됨).
   표처럼 화면보다 넓은 건 auth.js가 .sl-mx 클래스를 붙여 그 표 안에서만 가로 스크롤되게 함.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* 가로 넘침 안전망: 페이지가 옆으로 밀리거나 축소돼 보이지 않게(html에만 — body에 걸면 sticky가 깨짐) */
  html:root { overflow-x: hidden; }
  html:root body { max-width: 100vw; }
  html:root body { -webkit-text-size-adjust: 100%; }

  /* ── 상단 헤더: 한 줄, 로고는 말줄임, 시계 등 부가정보 숨김 ── */
  html:root body .top-header { height: 52px !important; min-height: 52px !important; padding: 0 10px !important; gap: 8px !important; flex-wrap: nowrap !important; overflow: hidden !important; }
  html:root body .top-header .erp-logo { flex: 1 1 auto !important; min-width: 0 !important; font-size: 14px !important; gap: 8px !important; white-space: nowrap !important; overflow: hidden !important; display: flex !important; align-items: center !important; -webkit-mask-image: linear-gradient(90deg,#000 88%,transparent); mask-image: linear-gradient(90deg,#000 88%,transparent); }
  html:root body .top-header .erp-logo::before { flex: 0 0 26px !important; width: 26px !important; height: 26px !important; }
  html:root body .top-header .erp-header-right { flex: 0 0 auto !important; min-width: 0 !important; max-width: 70vw; gap: 5px !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  html:root body .top-header .erp-header-right::-webkit-scrollbar { display: none; }
  html:root body #dash-time-erp, html:root body .top-header .erp-clock { display: none !important; }
  html:root body .top-header .topbar-btn, html:root body #authBar .topbar-btn { height: 30px !important; padding: 0 9px !important; font-size: 11.5px !important; white-space: nowrap !important; flex-shrink: 0 !important; }
  html:root body #authBar { gap: 5px !important; flex-wrap: nowrap !important; }
  html:root body #authBar .tb-txt { display: none !important; } /* "⚙ 내 정보" → "⚙" */

  /* ── 메뉴바: 가로로 밀어서 보기(현재 메뉴는 auth.js가 가운데로 스크롤해 둠) ── */
  html:root body .erp-menu-bar { height: 42px !important; min-height: 42px !important; padding: 0 6px !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
  html:root body .erp-menu-bar::-webkit-scrollbar { display: none; }
  html:root body .erp-menu-bar .erp-menu-item { flex-shrink: 0 !important; padding: 0 11px !important; font-size: 13px !important; white-space: nowrap !important; }

  /* ── 좌측 사이드바(영업관리 등) → 가로 탭 줄 ── */
  html:root body .layout { flex-direction: column !important; height: auto !important; min-height: 0 !important; }
  html:root body .layout > .sidebar { width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; padding: 8px 8px !important; overflow-x: auto !important; overflow-y: hidden !important; box-shadow: none !important; scrollbar-width: none; position: sticky; top: 0; z-index: 50; }
  html:root body .layout > .sidebar::-webkit-scrollbar { display: none; }
  html:root body .layout > .sidebar .sidebar-section { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 6px !important; padding: 0 !important; width: max-content; }
  html:root body .layout > .sidebar .sidebar-label { display: none !important; }
  html:root body .layout > .sidebar #documentMenu:not(.nav-hidden) { display: contents !important; }
  html:root body .layout > .sidebar .nav-item { flex: 0 0 auto !important; min-height: 34px !important; padding: 6px 12px !important; border-radius: 99px !important; white-space: nowrap !important; font-size: 13px !important; margin: 0 !important; background: rgba(255,255,255,.08); }
  html:root body .layout > .sidebar .nav-item.active { background: linear-gradient(90deg,#2878d0,#246ab5) !important; }
  html:root body .layout > .main, html:root body main.main { padding: 10px !important; min-width: 0 !important; overflow-x: hidden; }

  /* ── 본문 공통 여백·줄바꿈 ── */
  html:root body .erp-page-body, html:root body .erp-content, html:root body .erp-body { padding-left: 10px !important; padding-right: 10px !important; min-width: 0 !important; max-width: 100vw; box-sizing: border-box; }
  html:root body .erp-page-title { font-size: 16px !important; flex-wrap: wrap !important; }
  html:root body img, html:root body video, html:root body canvas { max-width: 100%; }
  html:root body pre { white-space: pre-wrap; word-break: break-word; }

  /* 화면보다 넓은 표 — 그 표 안에서만 가로 스크롤(auth.js가 넘치는 표에만 붙임) */
  html:root body table.sl-mx { display: block !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  /* 화면보다 넓은 버튼줄·툴바 — 줄바꿈(auth.js가 붙임) */
  html:root body .sl-mwrap { flex-wrap: wrap !important; min-width: 0 !important; max-width: 100% !important; row-gap: 6px !important; }
  /* 탭 줄처럼 줄바꿈하면 어색한 건 가로 스크롤(auth.js가 붙임) */
  html:root body .sl-mscroll { overflow-x: auto !important; flex-wrap: nowrap !important; max-width: 100% !important; scrollbar-width: none; }
  html:root body .sl-mscroll::-webkit-scrollbar { display: none; }
  html:root body .sl-mscroll > * { flex-shrink: 0 !important; }

  /* ── 모달 ── */
  html:root body .modal-box, html:root body .ep-modal-box, html:root body [class$="-modal-box"], html:root body .skl-modal { max-width: 94vw !important; }
  html:root body input, html:root body select, html:root body textarea { font-size: 16px; } /* iOS 자동확대 방지 */

  /* ── 페이지별 ── */
  /* 캘린더: 달력을 위로, 범례/해야 할 일정은 아래로 */
  html:root body .cal-layout { flex-direction: column !important; height: auto !important; }
  html:root body .cal-main { order: -1; overflow: visible !important; }
  html:root body .cal-header { flex-wrap: wrap !important; padding: 10px !important; gap: 8px !important; }
  html:root body .cal-nav { flex-wrap: wrap !important; gap: 6px !important; row-gap: 8px !important; }
  html:root body .cal-nav .cal-today-btn { padding: 6px 10px !important; font-size: 12px !important; writing-mode: horizontal-tb !important; white-space: nowrap !important; }
  html:root body .cal-sidebar { order: 1; }
  /* AI 프로젝트: 좌측 채팅목록 위로 */
  html:root body .aip-layout.show { flex-direction: column !important; height: auto !important; min-height: 100vh; }
  html:root body .aip-sidebar { width: 100% !important; min-width: 0 !important; max-height: 38vh; overflow-y: auto; border-right: 0 !important; border-bottom: 1px solid var(--border) !important; }
  /* 사용 가이드: 목차 한 열 */
  html:root body .g-wrap { grid-template-columns: minmax(0,1fr) !important; padding-left: 10px !important; padding-right: 10px !important; }
  html:root body .g-wrap > * { min-width: 0 !important; }
  /* 재고변동 이력: 긴 값은 줄바꿈 */
  html:root body .tl-change-row { flex-wrap: wrap !important; }
  html:root body .tl-change-row > span { white-space: normal !important; word-break: break-all; min-width: 0; max-width: 100%; }
  /* 재고리스트(카탈로그) A4 미리보기: 화면폭에 맞춰 축소 */
  html:root body .print-sheet-wrap { zoom: 0.46; transform: none !important; }
  html:root body .table-row > .row-actions { position: static !important; grid-column: 1 / -1; transform: none !important; width: auto !important; max-width: none !important; justify-content: flex-end; padding: 3px 6px !important; border-right: 0 !important; zoom: 1.6; }
  /* 수출패킹·주간보고 툴바 */
  html:root body .ep-toolbar { flex-wrap: wrap !important; padding: 12px !important; }
  html:root body .ep-toolbar-actions, html:root body #wrLiveActions, html:root body .wr-toolbar { flex-wrap: wrap !important; flex-shrink: 1 !important; min-width: 0 !important; }
  html:root body .wr-toolbar .wr-save-status { min-width: 0 !important; }
  /* 점검관리 탭 */
  html:root body .tab-bar { overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none; }
  html:root body .tab-bar > * { flex-shrink: 0 !important; }
}

@media (max-width: 720px) {
  html:root body .sl-mfit { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
}
@media (max-width: 720px) {
  /* 목록 머리(제목 + 검색·필터 + 등록버튼): 제목은 한 줄 통째로, 나머지는 그 아래 줄바꿈 */
  html:root body .page-header { flex-wrap: wrap !important; gap: 8px !important; padding: 12px !important; align-items: flex-start !important; }
  html:root body .page-header > :first-child { flex: 1 1 100% !important; min-width: 0 !important; }
  html:root body .page-header > * { min-width: 0; max-width: 100%; }
  html:root body .page-header .page-title { white-space: nowrap; font-size: 17px !important; }
  html:root body .page-header .btn, html:root body .page-header button { white-space: nowrap; }
}
@media (max-width: 720px) {
  html:root body .page-header .toolbar { flex: 1 1 100% !important; justify-content: flex-start !important; margin: 0 !important; flex-wrap: wrap !important; gap: 6px !important; }
  html:root body .page-header .toolbar .search-box { flex: 1 1 100% !important; min-width: 0 !important; }
  html:root body .page-header .toolbar .search-box input { width: 100% !important; min-width: 0 !important; }
  html:root body .page-header .toolbar .filter-select { flex: 1 1 40%; min-width: 0; }
  /* 영업관리 문의·견적 표의 카드형 보기(sales.css)가 표 안에 갇혀 첫 칸 너비로 찌그러지던 것 — 표 자체를 블록으로, 머리줄은 숨김 */
  html:root body table:has(> #piTableBody), html:root body table:has(> #siTableBody), html:root body table:has(> #quoteTableBody) { display: block !important; overflow: visible !important; }
  html:root body table:has(> #piTableBody) > thead, html:root body table:has(> #siTableBody) > thead, html:root body table:has(> #quoteTableBody) > thead { display: none !important; }
}
@media (max-width: 720px) {
  /* 수출패킹 날짜 묶음 머리: 날짜·건수·링크공유는 첫 줄, 판매처 목록은 다음 줄 */
  html:root body .ep-group-head { flex-wrap: wrap !important; row-gap: 4px !important; }
  html:root body .ep-group-head .ep-group-title, html:root body .ep-group-head .ep-group-count, html:root body .ep-group-head .ep-share-btn { white-space: nowrap !important; flex-shrink: 0 !important; }
  html:root body .ep-group-head .ep-group-buyers { order: 9; flex: 1 1 100% !important; padding-left: 30px; font-size: 12px !important; }
  html:root body .ep-toolbar .ep-btn { padding: 9px 12px !important; }
}
@media (max-width: 720px) {
  html:root body .ep-group-head { gap: 6px !important; padding: 10px 12px !important; }
  html:root body .ep-group-head > div[style*="flex:1"] { display: none !important; }
  html:root body .ep-group-head .ep-share-btn { margin-left: auto !important; padding: 5px 8px !important; }
  html:root body .ep-group-head .ep-group-title { font-size: 14px !important; }
}
@media (max-width: 720px) { html:root body #epSearchBox { width: 100% !important; flex: 1 1 100% !important; } }
@media (max-width: 720px) {
  /* 문의내역 통계: 떠 있는 "도넛 차트 기간" 상자를 본문 안으로, 머리줄 줄바꿈 */
  html:root body .donut-period-bar { position: static !important; max-width: none !important; margin: 0 0 12px !important; box-shadow: none !important; }
  html:root body .stat-header { flex-wrap: wrap !important; gap: 8px !important; }
  html:root body .stat-header-left { flex: 1 1 100% !important; min-width: 0 !important; }
  html:root body .stat-back { white-space: nowrap !important; flex-shrink: 0; }
  html:root body .seg-group { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  html:root body .seg-group .seg-btn { white-space: nowrap; flex-shrink: 0; }
}
@media (max-width: 720px) {
  /* 서류작성(매입기안서·견적서): 서류 탭은 가로로 밀기, 제목은 한 줄 통째로, 버튼은 그 아래 나란히 */
  html:root body .doc-shell { padding: 10px !important; }
  html:root body .doc-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; }
  html:root body .doc-tabs::-webkit-scrollbar { display: none; }
  html:root body .doc-tabs > * { flex-shrink: 0 !important; white-space: nowrap !important; }
  html:root body .doc-toolbar { flex-wrap: wrap !important; gap: 6px !important; }
  html:root body .doc-toolbar h1 { flex: 1 1 100% !important; margin: 0 0 2px !important; font-size: 19px !important; white-space: nowrap; }
  html:root body .doc-toolbar > button, html:root body .doc-toolbar > a, html:root body .doc-toolbar .doc-btn, html:root body .doc-toolbar .btnx { flex: 1 1 auto !important; white-space: nowrap !important; min-width: 0; }
}
@media (max-width: 720px) {
  html:root body .toolbar:has(> h1) { flex-wrap: wrap !important; gap: 6px !important; }
  html:root body .toolbar:has(> h1) > h1 { flex: 1 1 100% !important; margin: 0 0 2px !important; font-size: 19px !important; white-space: nowrap; }
  html:root body .toolbar:has(> h1) > .btnx { flex: 1 1 auto !important; white-space: nowrap !important; }
  /* 서류 종이는 실제 크기(A4 794px) 그대로 두고 그 안에서만 옆으로 밀어 봄 — 줄이면 칸이 찌그러져 입력이 안 됨 */
  html:root body .workspace:not(.new-doc-shell .workspace) { grid-template-columns: minmax(0,1fr) !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  html:root body .workspace:not(.new-doc-shell .workspace) > .paper { width: 794px !important; min-width: 794px !important; max-width: none !important; box-sizing: border-box !important; overflow: visible !important; }
  html:root body .workspace > .saved { position: sticky; left: 0; }
}
@media (max-width: 720px) {
  /* ── 점검관리(maintenance.html) 휴대폰 배치(2026-09-30, 요청사항 "점검관리 쪽은 왜 모바일 최적화 안 했어") ──
     예전엔 KPI 카드 3개가 세로로 쌓인 채 화면 위에 고정(sticky)돼 화면 1/3을 계속 차지했고, 장비 카드가 한 줄에 하나(사진 크게)라
     미점검 51건이면 페이지가 2만px 넘게 길어졌음 → KPI는 한 줄 3칸·고정 해제, 장비 카드는 2열, KPI 상세는 1열 정리 */
  html:root body .kpi-bar { position: static !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; padding: 8px 10px !important; gap: 6px !important; }
  html:root body .kpi-bar .kpi-card { flex-direction: column !important; align-items: flex-start !important; gap: 1px !important; padding: 8px 9px !important; min-width: 0 !important; }
  html:root body .kpi-bar .kpi-icon { display: none !important; }
  html:root body .kpi-bar .kpi-label { font-size: 10.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin: 0 !important; }
  html:root body .kpi-bar .kpi-val { font-size: 19px !important; }
  html:root body .kpi-bar .kpi-sub { font-size: 10px !important; }
  /* 탭 줄: 화면 위에 붙어 따라오게(탭 전환이 쉬움) */
  html:root body .tab-bar { position: sticky !important; top: 0; z-index: 60; background: #fff; }
  html:root body .tab-bar .tab-item { padding: 10px 12px !important; font-size: 13px !important; }
  /* 장비 카드 2열 */
  html:root body .hist-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  html:root body .hist-card { border-radius: 11px !important; }
  html:root body .hist-card-body { padding: 8px 9px !important; gap: 2px !important; }
  html:root body .hist-card .hist-model { font-size: 12.5px !important; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html:root body .hist-card-meta, html:root body .hist-card .hist-mgmt, html:root body .hist-card .hist-date { font-size: 10.5px !important; }
  html:root body .hist-card-foot { flex-wrap: wrap; gap: 2px 6px !important; }
  html:root body .hist-card-actions { flex-wrap: wrap; gap: 4px !important; }
  html:root body .hist-card-actions .btn { font-size: 11px !important; padding: 6px 4px !important; min-width: 0; }
  html:root body .hist-card-photo .grade-badge { width: 28px !important; height: 28px !important; font-size: 14px !important; top: 6px; left: 6px; }
  /* 섹션 여백·머리 */
  html:root body .sec-header { padding: 10px 12px !important; }
  html:root body [id^="sec-"] { padding-left: 10px !important; padding-right: 10px !important; }
  /* KPI 상세: 큰 카드 3개 → 한 줄 3칸, 목록 타일 1열 */
  html:root body .kpi-detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
  html:root body .kpi-detail-card { padding: 9px 10px !important; }
  html:root body .kpi-detail-val { font-size: 20px !important; }
  html:root body .kpi-detail-label, html:root body .kpi-detail-sub { font-size: 10.5px !important; }
  html:root body .kpi-tile-grid { grid-template-columns: minmax(0, 1fr) !important; padding: 8px !important; gap: 8px !important; }
  html:root body .kpi-tile { padding: 11px 12px !important; }
  html:root body .kpi-tile-model { font-size: 14px !important; }
  html:root body .kpi-items-head { flex-wrap: wrap; gap: 4px; }
  /* 점검 모달(점검 체크·리포트 작성) — 화면 가득 */
  html:root body .modal { width: 100vw !important; max-width: 100vw !important; max-height: 94vh !important; border-radius: 14px 14px 0 0 !important; }
  html:root body .overlay.open { align-items: flex-end !important; }
  html:root body .modal-body { padding: 12px !important; }
  html:root body .modal-foot { flex-wrap: wrap; }
  html:root body .detail-modal { width: 100vw !important; height: 94vh !important; border-radius: 14px 14px 0 0 !important; }
  html:root body .detail-modal-overlay.open { align-items: flex-end !important; }
}
@media (max-width: 720px) {
  /* 점검관리 카드 버튼: 3개면 첫 버튼(점검진행) 한 줄 전체 + 나머지 둘 반씩, 글자가 중간에서 쪼개지지 않게 */
  html:root body .hist-card-actions { display: grid !important; grid-template-columns: 1fr 1fr; }
  html:root body .hist-card-actions > .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html:root body .hist-card-actions > .btn:first-child:nth-last-child(3) { grid-column: 1 / -1; }
  html:root body .hist-card-actions > .btn:only-child { grid-column: 1 / -1; }
}