/* v3.440 폰 전용 화면(≤760px) — 사장님(10/10) "ERP 모든 화면을 모바일로 봤을 때 보기 편하게. PC 와 전혀 다르게 설계해도 괜찮아".
   모든 규칙이 @media (max-width:760px) 안에 있어 PC 는 영향 없다. 내비(아래 탭 막대·더보기 시트)는 nav.css.
   원칙: ① 손가락 크기(탭 대상 44px·입력 글자 16px — 작으면 iOS 가 확대함) ② 한 화면 한 열(가로 스크롤 금지, 표는 카드 목록) ③ 아래 엄지 영역에 주요 동작
   ④ 대화창은 아래에서 올라오는 시트 ⑤ DESIGN.md 토큰(색·라운드·간격) 그대로. */
@media (max-width:760px){
  html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
  body{font-size:15px; -webkit-tap-highlight-color:transparent; background:#f4f5f6;}
  .wrap{padding:12px 12px 24px; max-width:none;}

  /* 제목 줄 */
  h1{font-size:20px; margin-bottom:2px;}
  h2{font-size:16px; margin:20px 0 10px;}
  .sub{font-size:13px; margin-bottom:12px;}
  .page-head{gap:6px 10px; margin-bottom:10px;}
  .page-head h2{font-size:20px;}
  .page-head .actions{margin-left:0; width:100%; display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px;}

  /* 카드·통계 — 흰 카드 + 회색 바탕(앱 느낌) */
  .card,.chart-card,.stat,.csb-stat{border-radius:14px; border-color:#e9ebef;}
  .card{padding:14px; margin-bottom:12px;}
  .stat{padding:12px 14px;}
  .stat .v{font-size:22px;}
  .grid{gap:10px; margin-bottom:12px;}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr));}                 /* 숫자 카드는 두 칸 */
  .g2{grid-template-columns:minmax(0,1fr);}
  .csb-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .rt-cmp{gap:6px;}
  .hbar-row{grid-template-columns:96px 1fr 52px; gap:8px;}
  .lotrow{grid-template-columns:1fr 84px; }
  .lotrow > .lottrack{grid-column:1 / -1; order:3;}

  /* 손가락 크기 — 입력 16px(작으면 iOS 가 화면을 확대한다), 단추 44px */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:16px; min-height:44px; padding:10px 12px; border-radius:12px;}
  textarea{min-height:88px;}
  input[type=checkbox],input[type=radio]{width:22px; height:22px; accent-color:#266df0; flex:0 0 auto;}
  .btn{min-height:44px; padding:10px 16px; font-size:15px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; text-align:center;}
  .btn.sm{min-height:40px; padding:8px 12px; font-size:14px;}
  .btn:hover{box-shadow:none;}
  .badge{font-size:12px; padding:3px 9px;}
  form.inline{gap:10px;}
  form.inline > *{min-width:0;}
  form.inline .btn,form.inline button{flex:1 1 auto;}
  label{font-size:13px;}
  summary{min-height:44px; display:flex; align-items:center; cursor:pointer;}

  /* 표 → 카드 목록(mobile.js 가 table.mt 로 표시) — 줄 하나 = 카드 하나, 칸 = '이름  값' 한 줄, 첫 글자 칸 = 카드 제목, 단추 칸 = 아래 가로 전체 */
  main table.mt{display:block; overflow:visible; border:none; background:transparent; border-radius:0; font-size:14px;}
  main table.mt thead{display:none;}
  main table.mt tbody,main table.mt tfoot{display:block;}
  main table.mt tr{display:block; position:relative; background:#fff; border:1px solid #e9ebef; border-radius:14px; padding:10px 14px; margin:0 0 10px; box-shadow:0 1px 2px rgba(28,40,64,.03);}
  main table.mt tr[hidden],main table.mt tr.pgr-hidden{display:none !important;}
  main table.mt tbody tr:hover td{background:transparent;}
  main table.mt td{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:5px 0; border:none; text-align:right; min-width:0; overflow-wrap:anywhere; word-break:keep-all;}
  main table.mt td::before{content:attr(data-ml); flex:0 0 34%; max-width:40%; text-align:left; color:#8f99a8; font-size:12.5px; font-weight:500; line-height:1.5; word-break:keep-all;}
  main table.mt td[data-ml=""]::before,main table.mt td.m-title::before,main table.mt td.m-act::before,main table.mt td.m-chk::before{display:none;}
  main table.mt td.m-title{display:block; text-align:left; font-size:15.5px; font-weight:600; padding:2px 0 8px; margin-bottom:4px; border-bottom:1px solid #f0f1f3; padding-right:30px;}
  main table.mt td.m-empty{display:none;}
  main table.mt td.m-act{display:flex; flex-wrap:wrap; justify-content:flex-start; gap:8px; padding-top:10px;}
  main table.mt td.m-act > *{flex:1 1 auto;}
  main table.mt td.m-chk{position:absolute; top:10px; right:12px; padding:0; width:auto; z-index:1;}
  main table.mt td.num,main table.mt td.r{text-align:right; font-variant-numeric:tabular-nums;}
  main table.mt td a{word-break:break-all;}
  main table.mt tr.m-span{padding:12px 14px; text-align:center; color:#6f7988; background:#fff;}
  main table.mt tr.m-span td{display:block; text-align:center; padding:0;}
  main table.mt tr.m-span td::before{display:none;}
  main table.mt tr.sum,main table.mt tr.total,main table.mt tfoot tr{background:#f4f5f6;}
  main table.mt .btn,main table.mt button{min-height:40px;}
  /* 표를 카드로 바꾸지 않는 넓은 숫자표 — 그 표만 안에서 가로로 민다(화면 나머지는 제자리) */
  main table:not(.mt){display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px;}
  main table:not(.mt) th,main table:not(.mt) td{white-space:nowrap; padding:10px 12px;}
  .pgr{padding:8px 0 4px; justify-content:center;}
  .pgr-pages{width:100%; justify-content:center; margin-left:0;}
  .pgr-b{min-width:40px; height:40px; font-size:14px;}
  .pgr-per select{height:40px; font-size:15px; min-height:40px;}

  /* 대화창 → 아래에서 올라오는 시트 (app.css 의 *{margin:0} 이 <dialog> 의 margin:auto 를 지우는 함정 때문에 위치를 직접 준다) */
  dialog[open]{position:fixed; inset:auto 0 0 0; margin:0; width:100%; max-width:100%; max-height:92vh; max-height:92dvh; overflow-y:auto; -webkit-overflow-scrolling:touch;
    border:none; border-radius:20px 20px 0 0; padding:16px 16px calc(20px + env(safe-area-inset-bottom)); box-shadow:0 -8px 32px rgba(28,40,64,.18);}
  dialog::backdrop{background:rgba(28,29,31,.45);}

  /* 자주 쓰는 한 줄 도구 막대 — 가로로 밀어 보기(칩) */
  .seg,.tabs,.chips{display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px;}
  .seg::-webkit-scrollbar,.tabs::-webkit-scrollbar,.chips::-webkit-scrollbar{display:none;}
  .seg > *,.tabs > *,.chips > *{flex:0 0 auto;}

  /* 긴 안내문·설명은 접어서 읽기 편하게 */
  .help{font-size:13px; line-height:1.55;}
  pre,code{overflow-x:auto; max-width:100%;}
  img,svg,canvas,video{max-width:100%;}

  /* 칸 수가 정해진 인라인 격자(repeat(N,…)) = 숫자 타일 묶음 → 한 줄 한 칸(v3.309)이 아니라 두 칸. 상태 필터 카드(.stcards)는 세 칸 */
  main [style*="grid-template-columns:repeat("]:not([style*="auto-fit"]):not([style*="auto-fill"]),
  main [style*="grid-template-columns: repeat("]:not([style*="auto-fit"]):not([style*="auto-fill"]){grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  main nav.grid.stcards[style]{grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important;}
  main .stcards > .card{padding:10px 12px !important; border-radius:12px;}
  /* 표 칸에 박힌 한 줄 자르기·최대 폭(PC 용)을 카드 안에서는 푼다 */
  main table.mt td{max-width:none !important; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; width:auto !important;}
  main table.mt td[style]{border-bottom:none !important;}

  /* 넘침 방지 위생 — PC 용 고정 폭·한 줄 고정을 폰에서는 풀어 화면 안에 가둔다 */
  main label{min-width:0; max-width:100%;}
  main label > input:not([type=checkbox]):not([type=radio]),main label > select,main label > textarea{width:100% !important; max-width:100%; min-width:0;}
  main input[type=date],main input[type=time],main input[type=month],main input[type=datetime-local]{min-width:0; -webkit-appearance:none; appearance:none;}
  main span[style*="display:flex"] > input,main span[style*="display: flex"] > input{flex:1 1 0; min-width:0;}
  main form[style*="min-width"],main [style*="min-width:min("]{min-width:0 !important;}
  main form,main .inline,main .actions{flex-wrap:wrap;}
  main .btn,main button{max-width:100%;}
  main .btn{white-space:normal;}
  main input[style*="width:"],main select[style*="width:"]{max-width:100% !important;}
  main select,main textarea,main input:not([type=checkbox]):not([type=radio]){max-width:100%; min-width:0;}
  main td form.inline,main td form{display:flex; flex-wrap:wrap; gap:8px; min-width:0; width:100%;}
  main td form.inline > select,main td form > select{flex:1 1 100%; width:100%;}

  /* 화면 높이를 꽉 채우는 앱(상담 관리·메일·업무방)은 아래 탭 막대(64px)만큼 줄여 가려지지 않게 하고, 본문 아래 여백은 없앤다 */
  :root{--mbar:calc(64px + env(safe-area-inset-bottom));}
  body:has(.ib),body:has(.mailapp),body:has(.workapp){padding-bottom:0;}
  main .ib{--ibh:calc(100vh - var(--navh,53px) - var(--mbar)); --ibh:calc(100dvh - var(--navh,53px) - var(--mbar));}
  .workapp{height:calc(100vh - var(--navh,52px) - var(--mbar)); height:calc(100dvh - var(--navh,52px) - var(--mbar));}
  .mailapp{height:calc(100vh - var(--navh,52px) - var(--mbar)); height:calc(100dvh - var(--navh,52px) - var(--mbar));}
}