/* 스마트폰(화면 폭 800px 이하) 전용 보정. PC 화면에는 아무 영향이 없습니다. 각 화면의 <head> 에서 media 조건과 함께 불러옵니다.
   - 버튼·표 머리글·탭 글자가 세로로 쪼개지지 않게 한 줄로 두고, 도구줄은 줄바꿈되게 합니다.
   - 표가 많은 화면(body.m-wide)은 PC 처럼 읽히는 최소 폭(760px)을 주고 좌우로 밀어 볼 수 있게 합니다. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, .btn, .seg button, .tabs button, .tab, th, label, .tag, select { white-space: nowrap; }
button, .btn, select, input[type=date], input[type=month] { min-height: 32px; }
input, select, textarea { max-width: 100%; }
input[type=text], input[type=search], input[type=number], input[type=date], input[type=month], select, textarea { font-size: 16px; }      /* 아이폰에서 입력칸을 누를 때 화면이 확대되는 것을 막음 */
.top, .toolbar, .filter, .bar, .pgfoot, .head-row { flex-wrap: wrap !important; row-gap: 6px; }
h1 { font-size: 18px; }
.ov .box, .modal-box, .modal, .dlg, [class*="modal"] > div { max-width: calc(100vw - 16px) !important; }
.ov .box { width: auto !important; min-width: 0; }
.ov .gbox { width: auto !important; }
.grow { grid-template-columns: 110px 1fr 120px !important; }
.card.click small::after { content: ''; }

/* 표가 많은 화면: 좁은 폰에서 글자가 세로로 깨지지 않도록 최소 폭을 주고, 화면을 좌우로 밀어서 본다 */
html:has(body.m-wide) { overflow-x: auto; }
body.m-wide { min-width: 760px; }
body.m-wide .wrap, body.m-wide .scroll { -webkit-overflow-scrolling: touch; }
body.m-wide.m-w860 { min-width: 860px; }
body.m-wide.m-w1060 { min-width: 1060px; }
body.m-wide.m-w1180 { min-width: 1180px; }
/* 좌우 2단 화면(일일/월 출역 등)은 폰에서 위아래로 쌓고 화면 전체를 세로로 스크롤 */
body.m-stack { height: auto; min-height: 100%; display: block; }
html:has(body.m-stack) { height: auto; }
body.m-stack .main { display: block !important; }
body.m-stack .col { margin-bottom: 14px; }
body.m-stack .lst { max-height: 60vh; }
.rbar, .info, .strip .ym { flex-wrap: wrap; }
body.m-stack .col { min-width: 0; }

/* 좌(목록)·우(표) 2단 화면: 폰에서는 목록을 위, 표를 아래에 두고 화면 전체를 세로로 스크롤(가로 화면에서도 높이가 부족하지 않게) */
html:has(body.m-split) { height: auto; overflow-x: hidden; }
body.m-split { height: auto !important; min-height: 100%; overflow: visible !important; display: block !important; padding: 8px 10px 14px !important; min-width: 0; }
body.m-split .main-layout { display: flex !important; flex-direction: column; gap: 8px; height: auto !important; }
body.m-split .left-section { width: auto !important; max-height: 190px; flex: none; }
body.m-split .right-section { width: 100%; }
body.m-split .table-container { max-height: none; overflow: auto; -webkit-overflow-scrolling: touch; }
body.m-split .table-container table { min-width: 640px; }
body.m-split .filter-bar, body.m-split .filter-left, body.m-split .filter-right, body.m-split .filter-center { flex-wrap: wrap; width: 100%; gap: 6px; }
body.m-split .filter-left select, body.m-split #site-filter { flex: 1 1 100%; min-width: 0; width: 100%; }
body.m-split .filter-right .btn { flex: 1 1 auto; }
body.m-split .header-container { margin-bottom: 4px; }
body.m-split .table-container table { min-width: 560px; }
body.m-split .erp-table { font-size: 12px; }
body.m-split .erp-table th, body.m-split .erp-table td { padding: 5px 4px !important; height: auto !important; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
body.m-split .erp-table th { white-space: nowrap; }
body.m-split .text-left { padding-left: 6px !important; min-width: 110px; }