/* ═══════════════════════════════════════════════════════════
   OMS 모바일 셸 — 초반 세팅
   원본 index.html의 스타일/구조는 그대로 두고, 이 파일에서만 다음을 재배치한다:
     1) 좌측 고정 사이드바 → 오프캔버스(슬라이드) 드로어 + 하단 세이프에어리어 대응
     2) 데스크톱 2단/3단 그리드 레이아웃 → 세로 스택
     3) 버튼/입력/모달 → 터치 크기 확대, 모달은 바텀시트로
   app.js는 전혀 건드리지 않으므로, 여기서 다루지 못한 화면별 디테일은
   페이지별로 추가 클래스/규칙을 얹어가며 계속 다듬으면 됨.

   ⚠ 아래 규칙은 전부 900px 미만(휴대폰·세로 태블릿)에서만 적용된다.
   900px 이상에서는 원본 데스크톱 화면이 손댄 곳 없이 그대로 나온다 —
   그래서 PC에서 그냥 열면(창 폭이 넓으면) 데스크톱 화면이 보이는 게 정상이며,
   모바일 레이아웃을 보려면 브라우저 창 폭을 줄이거나(F12 → Ctrl+Shift+M
   기기 툴바) 900px 아래로 맞춰야 한다.
   ═══════════════════════════════════════════════════════════ */

/* 900px 이상(데스크톱 폭)에서는 모바일 전용으로 새로 추가한 요소(햄버거 버튼/닫기 버튼/
   드로어 배경)를 아예 안 보이게 감춰서, 원본 데스크톱 화면과 완전히 동일하게 보이게 한다. */
#drawer-open-btn, #drawer-close-btn, #drawer-backdrop { display: none !important; }
/* 태블릿 사이드바 접힘/펼침 토글 버튼 — 아래 "진짜 태블릿" 미디어쿼리에서만 다시 보이게 함 */
#m-sb-toggle-btn { display: none !important; }
/* 태블릿 사이드바 전용 추가 항목(단가요청/제품보기/비용청구) — 휴대폰 하단바는 5개도 꽉 차서
   자리가 없으므로 기본은 숨김, 아래 "진짜 태블릿" 미디어쿼리에서만 다시 보이게 함 */
.m-sb-extra { display: none !important; }
/* 하단바 메뉴(내정보에서 고름, mApplyBottomBar) — 고른 칸만 보이고, 누른 순서대로(--bb-order) 놓인다.
   태블릿 사이드바는 아래 "진짜 태블릿" 미디어쿼리에서 원래대로 되돌린다 */
#m-bottombar .m-tab { order: var(--bb-order, 50); }
#m-bottombar .m-tab.m-bb-off { display: none !important; }
#m-bottombar .m-tab.m-sb-extra.m-bb-on { display: flex !important; }
/* 태블릿 사이드바 "발주 입력" 버튼 — 기본 숨김, "진짜 태블릿"에서 권한(m-oe-ok) 있을 때만 보임 */
#m-sb-oe { display: none !important; }
/* 컨테이너(발주 입력) 목록의 제품 사진 — 태블릿에서만 보임 */
.m-oe-cart-thumb { display: none; }
/* 대시보드 배치에서 숨긴 박스 */
.dash-box-hidden { display: none !important; }
/* 완료 탭 "총 N" — 기본 숨김, 태블릿의 완료 탭에서만 보임 */
.m-done-total { display: none !important; }
/* 단가요청·A/S 상세 팝업 상단의 상태 진행 막대 — 태블릿에서만 보임 */
.m-detail-steps { display: none !important; }
/* A/S 상태 카테고리(답변대기/진행중) 아이콘 — 태블릿에서만 보임 */
.m-seg-ico { display: none; }
/* 내정보 > 대시보드 배치 — 기본 숨김, "진짜 태블릿"에서만 보임 */
#m-dash-layout-card { display: none; }
/* 태블릿 전용 홈 대시보드(PC 대시보드 7개 박스) — 휴대폰 폭에서는 숨김 */
.m-tablet-dash { display: none !important; }
.m-popover-backdrop, .m-cal-month-picker { display: none !important; }
/* 카드형으로 새로 짠 모바일 전용 블록 — 데스크톱 폭에서는 항상 숨김
   (데스크톱 인라인 <style>이 이 파일보다 나중에 나와서 같은 명시도면 이겨버리므로 !important 필수) */
.mobile-only, .mfab { display: none !important; }
/* 비용청구 일괄 승인 하단 바 — .mobile-only를 달면 숨김/보임을 JS가 못 잡으므로(항상 block!important)
   여기서 기본은 숨김으로 두고, 모바일 폭에서 .show가 붙었을 때만 뜨게 한다 */
#m-exp-bulk-bar { display: none !important; }
/* 당겨서 새로고침 링·저장 중 오버레이 — 모바일 폭에서만 쓰는 요소 */
#m-ptr, #m-saving { display: none !important; }

/* 휴대폰(900px 미만)은 항상, 태블릿(900~1600px이면서 주 입력수단이 손가락인 기기)도 모바일 셸.
   상한 1600px은 갤럭시 탭 기준 — S9/A9+ 가로 1280px, S9 Ultra 가로 1480px까지 들어온다.
   마우스를 쓰는 PC는 폭이 넓으면 원래 데스크톱 화면 그대로 — 1366×768 노트북이 태블릿으로
   오인되지 않도록 폭이 아니라 pointer로 갈라낸다.
   ⚠ js/mobile-render.js의 M_SHELL_MQ와 글자 그대로 같은 조건이어야 한다(둘이 어긋나면
   CSS는 모바일인데 JS는 데스크톱으로 동작하는 상태가 된다). */
@media (max-width: 899.98px), (min-width: 900px) and (max-width: 1599.98px) and (pointer: coarse) {

  #drawer-open-btn { display: flex !important; }
  #drawer-close-btn { display: flex !important; }
  #drawer-backdrop.show { display: block !important; }

  /* 데스크톱 전용(가로로 긴 표) 블록은 모바일에서 완전히 숨기고, 같은 자리에 카드형 UI를 보여줌 */
  .dsk-only { display: none !important; }
  .mobile-only { display: block !important; }

  html { font-size: 15px; }
  /* 디자인 가이드라인 1.4 — WCAG는 텍스트/배경 명도 대비 4.5:1 이상을 권장하는데, 앱 전체에서
     "보조 텍스트(라벨/날짜/부가정보)"로 두루 쓰는 --text3(#80868B)는 흰 배경 위에서 약 3.7:1로
     기준에 못 미친다. 톤은 거의 그대로 유지하면서(그레이 계열) 살짝만 더 어둡게 조정해
     4.5:1 이상(약 4.8:1)이 되도록 모바일에서만 값을 바꾼다. */
  /* mobile.css가 index.html의 인라인 <style>보다 <head>에서 먼저 로드되므로, 동일 우선순위인
     일반 :root 선언끼리는 나중에 나오는 인라인 쪽이 이긴다 — !important로 순서를 뒤집는다. */
  :root { --text3: #6E7378 !important; }
  /* 디자인 가이드라인 1.2 — 본문 줄간격은 폰트 크기의 1.4~1.6배가 안전선.
     지금까지 line-height를 명시 안 한 곳은 브라우저 기본값(대략 1.15~1.2배)이라 글줄이
     빽빽해 보였다. 숫자 하나만 크게 보여주는 곳(.kpi-val 등)은 이미 자체적으로
     line-height:1을 지정해두었으므로 이 기본값에 영향받지 않는다. */
  body { line-height: 1.5; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }

  /* ── 오프캔버스 사이드바(드로어) ───────────────────────────── */
  #sb {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: min(calc(82vw / var(--m-vz, 1)), 300px) !important;
    height: calc(100vh / var(--m-vz, 1)) !important;
    z-index: 500;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--sh2);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  #sb.open { transform: translateX(0); }

  #drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(20,22,30,.45);
    z-index: 490;
  }

  .sb-logo { position: relative; }
  #drawer-close-btn {
    display: flex; align-items: center; justify-content: center;
    margin-left: auto;
    width: 32px; height: 32px;
    border: none; border-radius: 8px;
    background: var(--surface); color: var(--text2);
    font-size: 16px; cursor: pointer;
  }

  .sb-link { min-height: 44px; font-size: 13.5px; }

  /* ── 상단 바 제거 + 하단 탭바로 교체 ───────────────────────── */
  :root { --m-bottombar-h: 58px; }
  #main { width: 100%; }
  #topbar { display: none !important; }

  #page-wrap {
    padding: calc(12px + env(safe-area-inset-top)) 12px calc(var(--m-bottombar-h) + 14px + env(safe-area-inset-bottom)) !important;
  }

  /* ── 하단 탭바 ─────────────────────────────────────────────── */
  #m-bottombar {
    display: flex !important;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
    background: #fff; border-top: 1px solid var(--border);
    height: calc(var(--m-bottombar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* 하단 탭바(z-index:500)가 새로 생기면서, 화면 아래쪽까지 내용이 오는 모달/슬라이드 패널의
     버튼(예: 바텀시트 팝업의 하단 버튼)이 탭바에 가려 눌리지 않는 문제가 있었다.
     모든 모달·오버레이류를 탭바보다 항상 위에 뜨게 고정한다. */
  .moverlay, #pp, #pp-ovl, #smpp, #smpp-ovl, #sp, #sp-ovl, #bmp, #bmp-ovl, #ntp, #ntp-ovl {
    z-index: 600 !important;
  }
  .m-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border: none; background: transparent; color: var(--text3); cursor: pointer; position: relative;
    font-family: var(--font);
  }
  .m-tab-lbl { font-size: 11.5px; font-weight: 600; }
  .m-tab.active { color: var(--accent); }
  /* 선택된 탭 위쪽(하단바 맨 위 테두리 자리)에 굵은 파란 막대를 얹어 표시 */
  .m-tab.active::before {
    content: ''; position: absolute; top: 0; left: 32%; right: 32%;
    height: 3px; border-radius: 0 0 3px 3px; background: var(--accent);
  }
  /* 기본: 아이콘 바깥 테두리는 안쪽 채움과 같은 파란색 — 안쪽에 별도 흰색 선이 필요한
     아이콘(일정/A·S/SAMPLE)만 아래에서 그 선 부분만 따로 흰색으로 덮어씀.
     아래쪽으로 그림자가 번지는 방향성 있는 emboss는 라벨 글자와 gap이 좁아 겹쳐 보이는
     문제가 있었다 — 방향 없는 은은한 파란 글로우(halo) 한 겹으로 입체감만 살짝 준다 */
  .m-tab.active svg {
    fill: var(--accent); stroke: var(--accent);
    filter: drop-shadow(0 0 4px rgba(66,133,244,.55));
  }
  /* 일정(달력): 틀(rect)은 파란 테두리 유지, 위쪽 고리 2개+가운데 가로선(path)만 흰색 */
  #m-bottombar .m-tab[data-p="schedule"].active svg path { stroke: #fff; }
  /* A/S(경고 삼각형): 삼각형 테두리(첫 path)는 파란색 유지, 느낌표(나머지 path)만 흰색 */
  #m-bottombar .m-tab[data-p="as"].active svg path:not(:first-child) { stroke: #fff; }
  /* SAMPLE(상자): 바깥 윤곽(뚜껑=1번째, 몸통=2번째 path)은 파란색 유지, 가운데 Y자 이음선
     (세로 기둥=3번째, 뚜껑 안쪽 V선=4번째 path)만 흰색 — index.html에서 이음선을 몸통보다 나중에
     그리도록 순서를 바꿔 둬서, 파랗게 채워진 몸통이 V선을 덮지 않는다 */
  #m-bottombar .m-tab[data-p="sample"].active svg path:nth-child(3),
  #m-bottombar .m-tab[data-p="sample"].active svg path:nth-child(4) { stroke: #fff; }
  /* 단가요청(가격표): 가격표 윤곽은 파란색 유지, 구멍(동그라미)만 흰색 */
  #m-bottombar .m-tab[data-p="priceReq"].active svg circle { fill: #fff; stroke: #fff; }
  /* 비용청구(카드): 카드 윤곽은 파란색 유지, 가운데 가로선 2개(path)만 흰색 */
  #m-bottombar .m-tab[data-p="expense"].active svg path { stroke: #fff; }
  /* 업무 지시(클립보드): 판 · 집게는 파란색 유지, 가운데 체크(path)만 흰색 */
  #m-bottombar .m-tab[data-p="wo"].active svg path { fill: none; stroke: #fff; }
  .m-tab.active .m-tab-lbl { font-weight: 700; }
  .m-tab-badge {
    display: none;
    position: absolute; top: 4px; right: calc(50% - 20px);
    min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px;
    background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
    align-items: center; justify-content: center; font-family: var(--mono);
  }
  .m-tab-badge.show { display: flex; }

  /* ── 데스크톱 그리드 레이아웃 → 세로 스택 ──────────────────── */
  #page-wrap [style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
  }
  #page-wrap [style*="position:sticky"] { position: static !important; }

  /* 달력(요일 헤더 7칸 + 날짜 7칸)은 위 규칙에서 제외 — 항상 7열 그리드를 유지해야 함
     (#page-wrap [style*=...] 보다 명시도가 높아야 이겨서, #page-wrap을 한 번 더 붙임) */
  #page-wrap #sched-cal-wd, #page-wrap #sched-cal-days, #page-wrap #cal-wd, #page-wrap #cal-days {
    display: grid !important;
    flex-direction: initial !important;
    grid-template-columns: repeat(7, 1fr) !important;
  }
  /* 태블릿 홈/PC 대시보드 예치금 현황 카드의 발주금액·기준30%·부족(여유) 3칸도 PC처럼 한 줄로 —
     ([style*=...]에 클래스를 더 붙여 명시도를 올려서 위 세로 스택 규칙을 이긴다) */
  #page-wrap [style*="grid-template-columns"].dash-deposit-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* 오늘 브리핑 카드 목록(.mb-grid)도 위 세로 스택 규칙에서 제외 — 걸리면 태블릿에서도 1열로 쌓인다.
     열 수는 아래 휴대폰(2열)·태블릿(3열) 규칙이 정한다 */
  #page-wrap #m-morning-briefing .mb-grid {
    display: grid !important;
    flex-direction: initial !important;
  }
  /* 날짜 칸 안에 들어가는 일정 배지 개수가 날마다 달라서, 데스크톱의 고정 92px 높이를 그대로 쓰면
     이벤트가 많은 날의 칸(그리고 그 칸이 속한 행 전체)만 세로로 늘어나 칸 크기가 들쭉날쭉해 보였다.
     모바일에서는 칸 높이를 좁은 폭에 맞게 줄이고, 넘치는 내용은 잘라서(앱이 이미 "+N" 표시로
     안내) 모든 칸이 항상 같은 크기를 유지하게 한다. */
  #cal-days .cal-day {
    height: 84px !important;
    overflow: hidden !important;
  }

  /* ── 일정 관리 캘린더: 화면 꽉 채우기(엣지투엣지) + 세로로 최대한 늘리기 ───────── */
  #sched-cal-card {
    margin: 0 -12px;
    border: none !important;
    border-radius: 0 !important; box-shadow: none !important;
  }
  #sched-missing-insp-card { margin-left: 0; margin-right: 0; }
  /* 필터는 위에서 아래로 펼쳐지는 대신, 제품 보기 필터(#pv-filter-panel)와 똑같이
     전체화면으로 왼쪽에서 슬라이드해 들어오는 패널로 만든다. */
  #sched-filter-card {
    position: fixed !important; inset: 0; z-index: 700;
    background: #fff;
    display: flex !important; flex-direction: column;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    margin: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important;
    overflow-y: auto;
  }
  #sched-filter-card.open { transform: translateX(0); }
  /* 필터 목록(일정종류/담당자)은 이제 토글 스위치 줄(.sched-filter-row)이라, 라벨이 flex:1로
     남는 자리를 차지하면서 스위치가 저절로 줄 오른쪽 끝에 붙는다 — 따로 자리를 옮길 필요가 없다.
     터치로 누르기 좋게 줄 높이만 조금 키운다. */
  .sched-filter-row { padding: 11px 10px !important; font-size: 13px !important; }
  #main:has(#pg-schedule.active) #topbar-pdf-btn { display: none !important; }
  #sched-cal-cardb { padding: 6px 0 !important; }
  #sched-cal-events { padding: 0 10px; }
  /* 필터/미입력 카드가 담긴 왼쪽 칸은 (데스크톱에서만 보이는) 사이드바 자리 — 모바일에서는
     필터가 펼쳐졌을 때만 잠깐 보이면 되므로, 평소엔 아예 display:none으로 접어서 캘린더와의
     사이 간격(gap)까지 완전히 없앤다. 필터가 열리면(.open) 다시 나타난다. */
  #sched-side-wrap { display: none !important; }
  #sched-side-wrap:has(#sched-filter-card.open) { display: flex !important; }
  /* 일정 관리 페이지는 상단 안전영역만 남기고 위쪽 여백을 없애고, 스크롤 자체를 막아서
     화면 하나에 캘린더 전체가 항상 다 보이게 한다(당겨서 더 내려가지 않음). */
  #page-wrap:has(#pg-schedule.active) {
    padding-top: env(safe-area-inset-top) !important;
    overflow: hidden !important;
  }
  /* 필터/미입력 카드가 아이콘 버튼으로 빠지면서 남는 공간을, 화면 높이에서 페이지 여백·
     요일 헤더줄·달 이동줄 정도만 뺀 값으로 캘린더 칸에 그대로 돌려준다 — 5주/6주짜리 달 모두
     화면을 거의 꽉 채우고, 한 행 안의 칸들은 grid-auto-rows:1fr 덕분에 서로 높이가 같다. */
  #sched-cal-days {
    /* 높이를 "최소"가 아니라 "고정"으로 — 일정이 많은 날이 있어도 줄이 늘어나 캘린더가 화면 아래로 잘리지
       않는다(페이지 스크롤이 막혀 있어서 늘어난 만큼 잘렸음). 칸에 안 들어가는 일정 표시는
       mFitSchedCalEvents(mobile-shell.js)가 "+N"으로 접는다. */
    grid-auto-rows: minmax(0, 1fr) !important;
    height: calc(calc(100vh / var(--m-vz, 1)) - var(--m-bottombar-h) - 76px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    min-height: 0;
    /* 칸 사이 여백을 최대한 줄여서 발주번호가 끝까지 다 보일 폭을 조금이라도 더 확보 */
    gap: 1px !important;
  }
  #sched-cal-days .cal-day {
    height: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  /* 오늘/선택 칸은 원래 테두리를 1px→2px로 키워 강조했는데, border-box라 그만큼 칸 안쪽
     폭이 2px 줄어들어 발주번호(예: ZC-20-00)의 끝자리가 말줄임(…)으로 잘렸다(7열 칸 하나가
     40~50px 안팎이라 2px도 한 글자를 좌우한다). 테두리는 1px 그대로 두고, 레이아웃에 영향을
     주지 않는 바깥쪽 1px 링(box-shadow)을 덧그려 두께감만 살린다 — 어느 칸이든 안쪽 폭이
     똑같으므로 글자가 항상 끝까지 다 보인다. 링이 옆 칸 배경에 덮이지 않게 z-index로 올린다. */
  #sched-cal-days .cal-day.is-today,
  #sched-cal-days .cal-day.is-sel {
    border-width: 1px !important;
    position: relative;
    z-index: 1;
  }
  #sched-cal-days .cal-day.is-today { box-shadow: 0 0 0 1px var(--text); }
  #sched-cal-days .cal-day.is-sel { box-shadow: 0 0 0 1px var(--accent); }
  /* 날짜/일정 배지 — 아이콘 없이 발주번호(예: PH-26-08)가 한 줄로 다 보이도록 폭을 최대한 확보.
     디자인 가이드라인상 본문 텍스트는 12pt 밑으로 내려가지 않는 게 원칙이지만, 7열 캘린더 칸
     하나의 실제 폭이 40px 안팎이라 12pt로 올리면 발주번호가 줄바꿈되며 칸 높이가 들쭉날쭉해지는
     문제(바로 위 #cal-days .cal-day 규칙이 막으려는 문제)가 재발한다. 가독성과 격자 정렬 사이의
     의도적 절충으로, 최소한의 개선(9→10px)만 적용한다. */
  /* 배지(일정띠) 세로 높이 — line-height(14px, 10px×1.4) + 위아래 패딩(기존 1px씩=2px)
     + 테두리(1px씩=2px) = 총 18px였던 것을, 위아래 패딩만 3.7px씩(=7.4px)으로 늘려
     18px → 23.4px(약 30% 증가)로 키운다. 글자 크기(10px)는 그대로 둬서 가독성 절충은 유지. */
  #sched-cal-days .cal-day > div {
    flex-shrink: 0 !important; /* 칸이 좁아도 배지를 납작하게 눌러 글자를 자르지 않는다(안 들어가는 건 "+N"으로 접음) */
    font-size: 10px !important;
    padding: 3.7px 1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* 배지 안의 발주번호 글자는 순수 <span>(inline)이라 overflow/text-overflow가 원래 아무
     효과가 없다(인라인 요소는 자체 줄바꿈 박스가 없어 ellipsis 속성이 무시됨) — 오늘/선택
     칸처럼 폭이 아주 살짝만 줄어도 이 글자가 줄바꿈되던 진짜 원인. inline-block으로 바꿔
     확실하게 한 줄+말줄임으로 고정한다. */
  /* 화면이 작아 기본 배지 높이로는 하루 3개가 안 들어가는 기종 — 배지 위아래 여백만 줄여 3개를 확보 */
  #sched-cal-days.m-cal-compact .cal-day > div { padding: 1.5px 1px !important; }
  #sched-cal-days .cal-day > div span {
    display: inline-block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    vertical-align: middle;
  }

  /* 월 선택 드롭다운(캘린더 헤더의 "2026년 9월" 라벨을 누르면 뜸) */
  .m-popover-backdrop { position: fixed; inset: 0; z-index: 590; }
  .m-popover-backdrop.show { display: block !important; }
  .m-cal-month-picker {
    position: absolute; top: 100%; left: 0; margin-top: 6px;
    background: #fff; border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--sh2); z-index: 600;
    width: 150px; max-height: 240px; overflow-y: auto;
  }
  .m-cal-month-picker.show { display: block !important; }
  .m-cal-month-row {
    padding: 12px; font-size: 13px; color: var(--text2); cursor: pointer;
    text-align: center; font-family: var(--mono);
  }
  .m-cal-month-row.current { font-weight: 800; color: var(--text); background: var(--surface); }
  .m-cal-month-row:active { background: var(--accent-lt); }
  #m-sched-filter-btn.on { border-color: var(--accent); background: var(--accent-lt); color: var(--accent-dk); }
  .m-icon-btn.has-alert {
    animation: mBlinkPink 1.1s ease-in-out infinite;
    border-color: #ff8fb8;
  }
  @keyframes mBlinkPink {
    0%, 100% { background: #fff; color: var(--text2); }
    50% { background: #ffd2e2; color: #c2185b; }
  }
  /* 검수일정 미입력 버튼 — 남는 공간을 다 차지하며 오른쪽 끝까지 늘어나고, 아이콘+글씨는 오른쪽 정렬
     (버튼 자신에 flex:1을 줘도 그 부모 줄(캘린더 헤더 우측 버튼 묶음) 자체가 콘텐츠 크기로만
     줄어들어 있으면 "늘어날 공간"이 없으므로, 부모 줄도 카드 헤더 전체 폭으로 먼저 늘려둔다) */
  #sched-cal-hd-btns { flex: 1; }
  #m-sched-insp-btn {
    width: auto; flex: 1;
    justify-content: flex-end;
    padding: 0 10px;
    gap: 5px;
  }
  .m-sched-insp-lbl { font-size: 11px; font-weight: 700; white-space: nowrap; }

  /* ── 바텀시트를 화면의 4/5 지점까지 끌어올림(검수일정 미입력 팝업, 일정 목록 팝업) ── */
  .m-sheet-4-5 {
    height: calc(80vh / var(--m-vz, 1)) !important;
    max-height: calc(80vh / var(--m-vz, 1)) !important;
    display: flex !important;
    flex-direction: column;
  }
  .m-sheet-4-5 .mdl-h { flex-shrink: 0; }
  .m-sheet-4-5 .mdl-b { flex: 1; }
  /* 견적 요청 상세 버튼 줄 — 삭제(왼쪽)는 왼쪽·아래, 수정·완료(오른쪽)는 오른쪽·아래 여백 */
  #m-pr-preview-modal .mdl-foot, #m-pr-add-modal .mdl-foot { padding: 11px 16px 16px; margin-top: 4px; }
  /* 견적 요청 관리 — 휴대폰은 전체/요청접수/공장요청/단가수령 카테고리 없이 목록만(태블릿은 아래에서 다시 보임) */
  #m-pr-seg { display: none !important; }
  /* 검수일정 미입력 팝업 — 목록에 데스크톱용 max-height:260px가 남아 있어 팝업의 절반만 쓰고 잘렸다.
     목록은 전부 펼치고 스크롤은 팝업 본문(mdl-b)이 맡는다 */
  #sched-missing-insp-mobile-slot #sched-missing-insp { max-height: none !important; overflow: visible !important; padding: 0 !important; }
  /* 닫기(✕) 버튼 대신 아래로 스와이프해서 닫는 손잡이(드래그 핸들) */
  .m-sheet-drag-handle {
    width: 36px; height: 5px; border-radius: 3px; background: var(--border);
    margin: 8px auto 0; flex-shrink: 0; touch-action: none;
  }
  #sched-events-sheet { transition: transform .2s ease; }
  #sched-events-sheet.dragging { transition: none; }

  .frow2, .frow3, .ig { grid-template-columns: 1fr !important; }
  /* SAMPLE 등록의 사이즈(W×D×H)만 위 공용 1열 규칙을 뚫고 3열로 되돌림(js가 이 클래스를 붙임) */
  #smpp-body .frow3.m-smpp-size-row { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; }
  /* 견적 요청 등록/수정 — W·D·H 한 줄 */
  #m-pr-add-modal .frow3.m-pr-size-row { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }
  /* SAMPLE 등록의 CBM·적재수량도 한 줄(2열)로 되돌림 */
  #smpp-body .frow2.m-smpp-cbmload-row { display: grid !important; grid-template-columns: 1fr 1fr !important; }
  /* SAMPLE 등록의 단가 정보 — #smpp [style*="grid-template-columns"]가 통째로 flex-column으로
     눌러버리는 것 위에, 화폐 줄/가격 줄 2단만 남기고 그 안(가격 줄)은 다시 가로 2열로 */
  #smpp [style*="grid-template-columns"].m-smpp-price-grid { display: flex !important; flex-direction: column !important; gap: 9px !important; }
  .m-smpp-price-row { display: flex !important; gap: 9px; }
  .m-smpp-price-row .fgrp { flex: 1; min-width: 0; margin-bottom: 0 !important; }
  .m-smpp-price-inputwrap { position: relative; }
  .m-smpp-price-inputwrap .finput { padding-left: 22px; }
  .m-smpp-price-sym {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    font-weight: 700; font-size: 13px; color: var(--text2); pointer-events: none;
  }
  /* 정보 롤업 박스(.ig, 검수일정/A·S 미리보기 등에서 두루 씀)의 라벨은 데스크톱 기준 10px로
     짜여 있는데, 가이드라인 1.2가 요구하는 12pt 하한에 못 미쳐 모바일에서만 살짝 올려준다. */
  .ig-lbl { font-size: 11px !important; }
  /* 전 화면 공통으로 쓰이는 라벨/보조텍스트 클래스 — 데스크톱 기준(10~11px)이 가이드라인 1.2의
     "본문·라벨 모두 12pt 밑으로 내려가지 않는다"는 하한보다 작아서, 모바일에서만 일괄로 올려준다.
     (제품/발주/샘플/A·S/부자재 등 거의 모든 폼의 <label class="flbl">가 여기 해당) */
  .flbl { font-size: 12px !important; }
  .card-sub { font-size: 12px !important; }
  .tm { font-size: 12px !important; }
  .badge, .tag { font-size: 11.5px !important; }

  /* 발주번호 검색 등 좁은 필터 바는 줄바꿈 허용 + 터치 크기 확대 */
  .fbar { row-gap: 8px; }
  .fsel, .finp-sm, .finput, .fselect, select, input[type=text], input[type=date],
  input[type=number], input[type=password], textarea {
    min-height: 40px;
    font-size: 14.5px !important;
  }
  .btn { min-height: 40px; }
  /* 터치 타깃 확대용으로 트랙만 키우고 놉(knob) 크기/위치는 그대로 둬서, 트랙 높이(23px)에
     비해 놉(19px)이 거의 꽉 차 뭉툭해 보이던 문제 — 데스크톱과 같은 비율(놉 = 트랙 높이-6)로 축소하고
     좌우 여백(3px)이 대칭이 되도록 on 상태 위치도 트랙 폭에 맞게 다시 계산 */
  /* flex-shrink:0가 없으면 좁은 헤더 줄(담당자별 묶기+공장별 묶기가 나란히 있는 경우 등)에서
     트랙 자체가 flex로 눌려 좁아지는데, 놉의 on-상태 위치(left:21px)는 고정 px라 그대로라서
     좁아진 트랙 밖으로 놉이 튀어나와 보였다 — 트랙 크기를 항상 고정해 방지한다. */
  /* 트랙을 34x18(desktop)→40x22로 키우면서 border-radius는 그대로 9px를 물려받아 완전한
     알약(pill) 모양이 아니었다 — 22px 높이에 맞는 11px(=height/2)로 다시 계산 */
  /* !important 필수 — mobile.css는 index.html에 박힌 desktop 기본 스타일보다 <link>상
     먼저 로드되는데, 특정성이 같으면 "나중에 로드된 규칙이 이긴다"는 원칙 때문에 !important가
     없으면 이 크기 조정이 desktop 기본값(34x18, 놉 12x12)한테 매번 덮어써져서 무효화된다
     (실제로 이번에 발견하기 전까지 이 문제로 앞서 몇 차례의 "토글 크기 수정"이 하나도 실제
     화면에 반영되지 않고 있었다). */
  .tog-sw { width: 40px !important; height: 22px !important; flex-shrink: 0 !important; border-radius: 11px !important; }
  .tog-sw .tog-knob { width: 16px !important; height: 16px !important; top: 3px !important; }
  .tog-sw.on .tog-knob { left: 21px !important; }

  /* 발주 상세(SP) 상태 스텝퍼 — 상태별 아이콘 원 + 연결선(지난 구간 실선 초록/남은 구간 점선 회색) */
  .m-sp-steps { display: flex; align-items: flex-start; margin-bottom: 16px; }
  .m-sp-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; }
  .m-sp-step-icon {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 1; box-sizing: border-box;
  }
  /* svg는 기본이 inline이라 텍스트처럼 baseline 정렬 대상이 될 수 있어, 부모의 flex 중앙정렬과
     별개로 미세하게 안 맞아 보일 수 있음 — block으로 바꿔 순수 박스 중앙정렬만 적용되게 함 */
  .m-sp-step-icon svg { display: block; }
  .m-sp-step-lbl { font-size: 9.5px; white-space: nowrap; }
  .m-sp-step:not(:first-child)::before {
    content: ''; position: absolute; top: 14px; left: -50%; width: 100%; height: 2px;
    background: var(--green); z-index: 0;
  }
  .m-sp-step-todo:not(:first-child)::before {
    background: none; border-top: 2px dashed var(--border); height: 0;
  }


  /* 발주 입력(관리자 전용, 장바구니 방식) — 제품 그리드는 .prod-grid를 그대로 재사용하고,
     카드 안에 수량 스테퍼만 덧붙인다. 카드 자체는 상세 이동용이 아니라서 커서/호버 이동 효과는 끔. */
  #pg-order-entry { padding-bottom: 70px; }
  /* 발주 입력 — 회사가 20개 넘게 있으면 가로 칩으로는 고르기 힘들어서, 현재 선택된 회사를
     보여주는 버튼 하나로 바꾸고 누르면 중앙 팝업에서 버튼 목록으로 고르게 함 */
  .m-oe-comp-trigger {
    display: flex !important; align-items: center; gap: 11px; width: 100%;
    box-sizing: border-box; margin-bottom: 12px; padding: 9px 14px 9px 9px;
    border: 1px solid rgba(26,115,232,.14); border-radius: 14px;
    background: linear-gradient(180deg, #fff, #fafbff);
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 14px rgba(26,115,232,.09);
    font-family: var(--font); text-align: left; cursor: pointer;
    transition: box-shadow .15s, transform .1s;
  }
  .m-oe-comp-trigger:active { transform: scale(.99); box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 2px 8px rgba(26,115,232,.1); }
  .m-oe-comp-badge {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: flex;
    align-items: center; justify-content: center; color: var(--accent-dk);
  }
  .m-oe-comp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .m-oe-comp-cap { font-size: 9.5px; font-weight: 700; letter-spacing: .5px; color: var(--accent-dk); text-transform: uppercase; }
  .m-oe-comp-val { font-size: 14px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-oe-comp-trigger.m-oe-comp-empty .m-oe-comp-val { color: var(--text3); font-weight: 600; }
  .m-oe-comp-chev { flex-shrink: 0; color: var(--accent); display: flex; }
  .m-oe-comp-btn {
    padding: 12px 6px; border: 1.5px solid var(--border); border-radius: 10px;
    background: #fff; color: var(--text); font-size: 12.5px; font-weight: 600; text-align: center;
    font-family: var(--font); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .m-oe-comp-btn.on { border-color: var(--accent); background: var(--accent-lt); color: var(--accent); font-weight: 700; }
  /* 발주 입력 — 회사 선택 밑에 품목 슬라이서, 그 아래 검색창(한 줄 가득), 그 아래 정렬(우측 정렬) */
  .m-oe-cat-slicer { margin-bottom: 10px; }
  .m-oe-search { flex: 1; min-width: 0; box-sizing: border-box; background: #fff !important; }
  /* 필터 버튼을 누르면 검색창 바로 밑에 뜨는 작은 팝오버 — 지금은 정렬 하나만 담고 있음 */
  .m-oe-filter-panel {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
    background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--sh2);
    padding: 12px; min-width: 160px;
  }
  .m-oe-filter-panel.open { display: block; }
  .m-oe-filter-panel .flbl { margin-bottom: 5px; }
  .m-oe-sort { background: #fff; width: 100%; }
  .m-oe-card { cursor: default; }
  .m-oe-card:hover { transform: none; border-color: var(--border); box-shadow: var(--sh0); }
  /* 수량 스테퍼 — 흰 알약형 대신 회색 트랙 안에 떠 있는 둥근 버튼(+연한 파란 프레스 효과)으로,
     카드 너비 가득 채우고 가운데 숫자는 구분선 없이 트랙 배경 위에 크게 보이도록 */
  .m-oe-qty-row {
    display: flex; align-items: center; justify-content: space-between; gap: 4px;
    width: 100%; background: var(--surface); border-radius: 10px; padding: 3px;
  }
  .m-oe-qty-btn {
    width: 27px; height: 27px; border-radius: 8px; border: none; flex-shrink: 0;
    background: #fff; color: var(--accent-dk); font-size: 15px; font-weight: 800; line-height: 1;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 1px 2px rgba(16,24,40,.09);
  }
  .m-oe-qty-btn:active { background: var(--accent-lt); color: var(--accent-dk); }
  /* 수량 숫자를 <input>으로 바꿔 +/- 버튼 없이도 탭해서 직접 입력할 수 있게 함.
     숫자 입력 기본 스피너(위아래 화살표)는 이미 양옆에 +/- 버튼이 있어 중복이라 감춘다 */
  .m-oe-qty-val {
    font-family: var(--mono); font-weight: 800; font-size: 14px; flex: 1; min-width: 0; height: 27px;
    text-align: center; border: none; background: transparent; color: var(--text); padding: 0; -moz-appearance: textfield;
  }
  .m-oe-qty-val:focus { outline: none; }
  .m-oe-qty-val::-webkit-outer-spin-button, .m-oe-qty-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  /* 장바구니 줄 안에서는 코드/이름/금액/삭제와 한 줄을 나눠 써야 해서, 카드용(너비 100%) 대신
     고정폭의 작은 스테퍼로 줄인다 — width:100%가 장바구니 줄의 다른 요소들과 겹쳐 보이던 원인이었음 */
  .m-oe-cart-row .m-oe-qty-row { width: auto; flex-shrink: 0; gap: 2px; padding: 2px; }
  .m-oe-cart-row .m-oe-qty-btn { width: 26px; height: 22px; font-size: 13px; }
  .m-oe-cart-row .m-oe-qty-val { width: 29px; flex: none; height: 22px; font-size: 12px; }
  /* 제품 카드 — 가격만 한 줄, 수량 스테퍼는 카드 맨 밑에 구분선을 두고 중앙 정렬로 별도 배치 */
  .m-oe-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
  .m-oe-qty-wrap { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
  /* 부자재는 가격이 없어 제품과 데이터가 다르므로, 그리드/장바구니 모두 "부자재" 구분 라벨로 분리 */
  .m-oe-grid-sec-lbl {
    grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--text3);
    margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--border);
  }
  .m-oe-cart-sec-lbl { font-size: 11.5px; font-weight: 700; color: var(--text3); padding: 8px 0 2px; }
  /* 담은 제품이 있을 때만 하단 탭바 바로 위에 떠서 "장바구니 N개 · 총액 · 보기"를 보여줌 */
  .m-oe-cartbar {
    position: fixed; left: 12px; right: 12px;
    bottom: calc(var(--m-bottombar-h) + env(safe-area-inset-bottom) + 10px);
    z-index: 490; display: none; align-items: center; gap: 10px;
    background: #202124; color: #fff; border-radius: 14px; padding: 12px 16px;
    box-shadow: 0 4px 14px rgba(0,0,0,.28); cursor: pointer;
  }
  .m-oe-cartbar-badge {
    background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
    min-width: 20px; height: 20px; border-radius: 10px; display: flex; align-items: center;
    justify-content: center; padding: 0 5px; flex-shrink: 0;
  }
  .m-oe-cartbar-total { flex: 1; font-size: 13px; font-weight: 600; font-family: var(--mono); }
  .m-oe-cartbar-go { display: flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.85); flex-shrink: 0; }
  /* 장바구니 팝업 안 각 줄 */
  .m-oe-cart-row {
    display: flex; align-items: center; gap: 8px; padding: 9px 0;
    border-bottom: 1px solid var(--border);
  }
  .m-oe-cart-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .m-oe-cart-row-code { font-family: var(--mono); font-size: 11px; color: var(--accent); font-weight: 700; }
  .m-oe-cart-row-name { font-size: 12px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-oe-cart-row-amt { font-family: var(--mono); font-size: 12px; font-weight: 700; flex-shrink: 0; min-width: 60px; text-align: right; }
  .m-oe-cart-row-del { background: none; border: none; cursor: pointer; color: var(--text3); padding: 4px; display: flex; flex-shrink: 0; }
  .m-oe-cart-total-line { display: flex; justify-content: space-between; font-size: 13px; color: var(--text2); padding: 10px 0; font-weight: 600; }
  .m-oe-cart-total-line strong { font-family: var(--mono); font-size: 15px; color: var(--text); }
  .m-oe-cart-total-r { display: flex; align-items: center; gap: 12px; }
  .m-oe-cart-cnt { font-size: 12px; font-weight: 600; color: var(--text3); padding: 3px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
  .m-oe-cart-cnt b { font-family: var(--mono); color: var(--accent); font-size: 13px; }

  /* ── 표: 가로 스크롤 관성 ───────────────────────────────────── */
  .tbl-wrap { -webkit-overflow-scrolling: touch; }
  .dtbl th, .dtbl td { padding-top: 7px; padding-bottom: 7px; }

  /* ── 카드 그리드(제품 보기 등) 촘촘하게 + 항상 카드형만 노출 ──────── */
  .prod-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 8px !important; }
  #pv-tbl-v, #pv-grouped-v { display: none !important; }
  #pv-card-v { display: block !important; }
  /* 모바일은 제품 등록/수정을 막으므로 "+ 신규 등록" 카드도 노출하지 않음 */
  #prod-grid-v .prod-card[onclick="openPP(null)"] { display: none !important; }

  /* .mobile-only는 항상 display:block!important라서, 이 자리는 flex로 가로 배치돼야
     하므로 id 선택자(우선순위가 .mobile-only보다 높음)로 다시 flex를 강제해야 함 —
     안 그러면 정렬 버튼과 형태 변환 버튼이 세로로 쌓여 "총 00"과 다른 줄에 놓이게 됨 */
  #m-pv-toolbar-actions { display: flex !important; }

  /* 상단 정렬 드롭다운(쿠팡 랭킹순 ▾ 스타일) 버튼 */
  .m-sort-pill-btn {
    display: flex; align-items: center; gap: 5px; padding: 0 12px; height: 34px;
    border-radius: 999px; border: 1.5px solid var(--border); background: #fff;
    color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  }
  /* 제품 보기: 형태 변환 — 카드형(사진 위/내용 아래) ↔ 리스트형(사진 왼쪽/내용 오른쪽) */
  #prod-grid-v.m-list-mode { display: flex !important; flex-direction: column; gap: 10px !important; }
  /* 리스트형은 오른쪽 정보 칸(발주주기/마지막발주/발주수량 등 여러 줄)이 사진보다 길어질 때가
     많아서, align-items:center로 사진을 그 안에서 세로 가운데에 오도록 고정한다 */
  #prod-grid-v.m-list-mode .prod-card { display: flex; flex-direction: row; align-items: center; }
  #prod-grid-v.m-list-mode .prod-img { width: 130px; height: 100px; flex-shrink: 0; }
  #prod-grid-v.m-list-mode .prod-info { flex: 1; min-width: 0; padding: 8px 10px; display: flex; flex-direction: column; justify-content: center; }

  /* 제품 상세(읽기전용) "단가 정보" — 화폐/수출가/공장가 세 칸이 한 줄에 나란히 있어야 하는데,
     두 규칙이 겹쳐서 막고 있었다: ① ".frow2,.frow3,.ig{grid-template-columns:1fr!important}"가
     .ig를 공유하는 이 그리드까지 1열로 누르고, ② 위쪽 "#pp [style*=grid-template-columns]"
     규칙(사진|폼 2단 폼을 세로로 푸는 용도)이 인라인 style에 "grid-template-columns"만 들어있으면
     다 걸려서 display:flex로 통째로 바꿔버려 grid-template-columns 자체가 무의미해진다.
     그래서 grid-template-columns뿐 아니라 display/flex-direction까지 셋 다 여기서 다시 못박아야
     실제로 3열 그리드로 복원된다. 칸 사이 구분선은 .pp-ro-grid-3 자체의 border-right를 그대로 씀. */
  #pp .ig.pp-ro-grid-3 {
    display: grid !important;
    flex-direction: initial !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }
  #pp .m-price-grid-vertical > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 3px !important;
  }
  /* 물류 정보 — 제품사이즈/제품무게(좌) | 포장사이즈/포장무게(우) 2단 분할도
     위와 같은 이유로 flex-column으로 강제 변환되어 세로로 쌓이므로, grid 2열로 복원.
     주의: 아래쪽의 #pp [style*="grid-template-columns"] 규칙과 특정성이 동일(#id + 클래스/속성 1개)
     하기 때문에 파일상 순서로만 승부가 나서, 이 셀렉터에 .pp-ro-section을 하나 더 붙여
     특정성을 확실히 높여야 항상 이긴다(파일 내 위치와 무관하게). */
  #pp .pp-ro-section .m-logi-split {
    display: grid !important;
    flex-direction: initial !important;
    grid-template-columns: 1fr 1fr !important;
  }
  #pp .pp-ro-section .m-logi-split > .ig {
    display: grid !important;
    flex-direction: initial !important;
    grid-template-columns: 1fr !important;
  }
  /* 제품 사이즈 / 포장 사이즈 행만(각 칸의 첫 번째 줄) 라벨 아래에 값이 오도록 세로 배치 —
     제품무게/포장무게 행(두 번째 줄)은 기존 그대로 라벨-값 한 줄 유지 */
  #pp .pp-ro-section .m-logi-split > .ig > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 3px !important;
  }
  /* 제품 상세(읽기전용) 사진 — 데스크톱은 사진(50%)|기본정보(50%)가 나란히 있는데, 모바일은
     세로로 쌓아서 사진을 화면 폭 전체(=사진+기본정보를 합친 정도)로 키우고, 그 아래에
     기본정보 박스를 배치한다. 사진은 이미 aspect-ratio:1/1이라 폭만 100%로 늘리면 정사각형을
     유지한 채 커진다. */
  .pp-ro-hero { flex-direction: column !important; }
  .pp-ro-photo { width: 100% !important; }
  /* 발주 상세(SP) "발주 기본 정보" — 위와 같은 이유(#sp [style*="grid-template-columns"]가
     flex-column으로 강제 변환)로 세로 4줄로만 쌓여 여백이 많아 보이던 것을 2×2 grid로 복원.
     .m-sp-basic-box를 하나 더 붙여 특정성을 확실히 높인다(파일 내 위치와 무관하게 항상 이김). */
  #sp .m-sp-basic-box .m-sp-basic-grid {
    display: grid !important;
    flex-direction: initial !important;
    grid-template-columns: repeat(2, 1fr) !important;
    row-gap: 5px !important;
    column-gap: 5px !important;
  }
  /* 4칸을 흰 박스로 각각 분리한 이상, 그걸 또 감싸던 회색 배경 박스는 필요 없어서 제거 */
  .m-sp-basic-box { background: transparent !important; border: none !important; padding: 0 !important; }
  /* 발주번호·회사명·발주일·총 수출금액 — 십자형 구분선 대신 흰 배경의 독립 박스로 분리 */
  .m-sp-basic-cell { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px !important; }
  /* ── 단가분석 좌측 필터: 고정폭 사이드바 → 페이지 상단 전체폭 ──── */
  #pa-layout { flex-direction: column !important; }
  .pa-sidebar { width: 100% !important; }

  /* ── 모달을 바텀시트로 ─────────────────────────────────────── */
  .moverlay { align-items: flex-end !important; }
  .mdl {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(90vh / var(--m-vz, 1)) !important;
    border-radius: 18px 18px 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* A/S 등록 — 바텀시트 대신 화면을 꽉 채우는 전체화면 폼으로, 섹션 사이 여백도 넉넉하게 */
  /* 견적 요청 등록(#m-pr-add-modal)도 A/S 등록과 같은 전체화면 폼 */
  #m-as .mdl, #m-pr-add-modal .mdl { max-height: calc(100vh / var(--m-vz, 1)) !important; height: calc(100vh / var(--m-vz, 1)); border-radius: 0 !important; }
  #m-as .m-as-add-sec { margin-top: 18px; }
  /* A/S 수량 — 지나치지 않게 파란 테두리 상자 + 큰 숫자 + − / + 버튼(mobile-shell.js mSimplifyAsForm) */
  .m-as-qty-box { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1.5px solid var(--accent); background: var(--accent-lt); border-radius: 12px; }
  .m-as-qty-btn { flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; border: 1px solid rgba(66,133,244,.25); background: var(--white); color: var(--accent); font-size: 24px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
  .m-as-qty-btn:active { background: var(--surface); }
  #m-as .m-as-qty-box #as-qty { flex: 1; min-width: 0; height: 42px; border: none !important; background: transparent !important; box-shadow: none !important; text-align: right; font-size: 22px; font-weight: 800; font-family: var(--mono); color: var(--text); padding: 0 2px; }
  .m-as-qty-unit { flex: 1; font-size: 15px; font-weight: 700; color: var(--text2); }

  /* 업무 알림(#m-notif-panel) — 바텀시트 대신 화면 위(종 아이콘 쪽)에서 내려오는 시트.
     태블릿은 아래쪽 태블릿 구간에서 오른쪽 사이드 보기로 다시 덮어쓴다 */
  #m-notif-panel.moverlay { align-items: flex-start !important; }
  /* 알림이 몇 개 없어도 시트가 기본적으로 화면의 3/4 높이로 내려온다(아래는 여백). 목록은 그 안에서 스크롤 */
  #m-notif-panel .mdl {
    height: calc(75vh / var(--m-vz, 1)); display: flex; flex-direction: column;
    border-radius: 0 0 18px 18px !important;
    padding-top: env(safe-area-inset-top); padding-bottom: 0;
    animation: mSheetDown .26s cubic-bezier(.4,0,.2,1);
  }
  @keyframes mSheetDown { from { transform: translateY(-100%); } to { transform: none; } }
  /* 아래쪽 손잡이 — 손가락으로 잡기 쉽게 터치 영역을 넉넉히(막대 자체는 작게) */
  .m-notif-drag { padding: 4px 0 12px; touch-action: none; cursor: grab; }
  .m-notif-drag .m-sheet-drag-handle { margin-top: 4px; }
  #m-notif-panel .mdl-h { touch-action: none; flex-shrink: 0; }
  #m-notif-panel #m-notif-panel-body { flex: 1; min-height: 0; max-height: none !important; overflow-y: auto; }
  .m-notif-drag { flex-shrink: 0; }
  /* 알림 카드 — 왼쪽 종류 아이콘 + 제목 위 글자 태그(색은 mobile-shell.js M_NOTIF_KIND) */
  .m-notif-ico {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .m-notif-tag {
    display: inline-block; padding: 1px 7px; border-radius: 999px;
    font-size: 10px; font-weight: 800; line-height: 1.6;
  }

  /* ── 일정 추가/수정, 일정 상세 미리보기, 공지 상세/공지 추가는 바텀시트가 아니라 화면 중앙에 뜨는 팝업으로 ── */
  #m-sched-add.moverlay, #sched-preview-modal.moverlay, #m-smp-preview-modal.moverlay, #notice-detail-modal.moverlay, #notice-add-modal.moverlay, #m-exp-detail.moverlay, #m-oe-comp-modal.moverlay, #notice-photo-lightbox.moverlay, #m-as-preview-modal.moverlay, #m-prod-info.moverlay, #m-datepick.moverlay, #m-pr-preview-modal.moverlay, #notice-login-popup.moverlay, #m-morning-briefing.moverlay {
    align-items: center !important;
    justify-content: center !important;
    padding: 20px;
  }
  /* 다른 팝업(A/S 상세 등) 위에서 열릴 수 있으니 항상 맨 위로 */
  #notice-photo-lightbox { z-index: 800 !important; }
  /* 제품 정보는 일정 상세(#sched-preview-modal, z-index 600) 위에서 열리므로 더 위로 올린다 */
  #m-prod-info { z-index: 800 !important; }
  .m-prod-info-hero {
    width: 100%; height: 190px; margin-bottom: 12px; border-radius: 12px; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
  }
  .m-prod-info-hero img { width: 100%; height: 100%; object-fit: cover; }
  .m-prod-info-code { font-family: var(--mono); font-size: 13px; font-weight: 800; color: var(--accent); }
  .m-prod-info-name { font-size: 15px; font-weight: 700; color: var(--text); margin-top: 2px; }
  /* 일정 상세의 제품 상세보기 줄 — 눌러서 제품 정보를 열 수 있다는 표시 */
  .m-sched-prod-row { cursor: pointer; }
  .m-sched-prod-row:active { background: var(--surface); }
  #m-sched-add .mdl, #sched-preview-modal .mdl, #m-smp-preview-modal .mdl, #notice-detail-modal .mdl, #notice-add-modal .mdl, #m-exp-detail .mdl, #m-oe-comp-modal .mdl, #notice-photo-lightbox .mdl, #m-as-preview-modal .mdl, #m-prod-info .mdl, #m-pr-preview-modal .mdl, #notice-login-popup .mdl, #m-morning-briefing .mdl {
    width: 100% !important;
    max-width: 400px !important;
    max-height: calc(85vh / var(--m-vz, 1)) !important;
    overflow-y: auto;
    border-radius: 18px !important;
  }
  /* 오늘 브리핑 카드(app.js showMorningBriefingPopup의 .mb-grid) — 휴대폰은 1열(카드마다 한 줄 전체).
     좁은 폭에 맞춰 여백·간격을 조금 줄인다 */
  #m-morning-briefing .mdl-b { padding: 12px 12px 4px; }
  #m-morning-briefing .mb-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; } /* 휴대폰은 1열 — 태블릿(폭 600px 이상)은 파일 끝 규칙이 3열로 덮어씀 */
  #m-morning-briefing .mb-grid > div { padding: 9px 9px !important; }
  #m-morning-briefing .mdl-foot { margin-top: 8px; padding: 10px 12px 14px; }
  /* 휴대폰은 글자를 한 단계 크게(app.js가 PC 기준 크기를 인라인으로 넣으므로 !important로 덮음) —
     글자가 커진 만큼 카드 최소 높이도 늘려 모든 카드 크기를 똑같이 유지 */
  #m-morning-briefing .mb-mgr { width: 38px !important; font-size: 10.5px !important; }
  #m-morning-briefing .mb-label { font-size: 14px !important; }
  #m-morning-briefing .mb-count { font-size: 19px !important; }
  #m-morning-briefing .mb-line { font-size: 13.5px !important; }
  #m-morning-briefing .mb-badge { font-size: 11.5px !important; padding: 0 5px !important; }
  #m-morning-briefing .mb-more { font-size: 12px !important; margin-top: 4px !important; }
  #m-morning-briefing .mb-ico { width: 30px !important; height: 30px !important; }
  /* 공지 상세/추가는 #ntp(공지 전체보기) 안에서 열리는 경우가 많은데, 둘 다 .moverlay라
     z-index가 똑같이 600이라 DOM에서 나중에 나오는 #ntp가 위에 그려져 팝업이 안 보이고 있었다
     (그래서 #ntp가 닫히는 순간에야 나타났던 것). #ntp보다 확실히 위로 올린다. */
  #notice-detail-modal, #notice-add-modal { z-index: 700 !important; }
  /* 일정 상세 미리보기: 삭제/수정 버튼이 모달 오른쪽·아래 끝에 딱 붙어있던 것을 안쪽으로 살짝 띄움 */
  #sched-preview-modal .mdl-foot { padding-right: 17px; padding-bottom: 15px; }

  /* 제품 상세의 "PDF 저장"은 데스크톱 전용 — 모바일/태블릿에서는 감춘다
     (app.js가 읽기전용 화면에서 display를 켜주므로 !important로 눌러야 한다) */
  #pp-pdf-btn { display: none !important; }
  /* ── 우측 슬라이드 상세 패널(제품/샘플/발주/부자재/공지 전체보기) → 전체화면 ─── */
  #pp, #smpp, #sp, #bmp, #ntp {
    width: calc(100vw / var(--m-vz, 1)) !important;
    right: calc(-100vw / var(--m-vz, 1));
    padding-bottom: env(safe-area-inset-bottom);
  }
  #pp.open, #smpp.open, #sp.open, #bmp.open, #ntp.open { right: 0 !important; }
  /* 샘플 등록만 옆에서 밀려 들어오는 느낌 대신 AS 등록처럼 그 자리에 바로 뜨는 팝업 느낌으로 */
  #smpp { transition: none !important; }
  /* 상세 패널 안의 "사진(195px) | 폼" 가로 2단 그리드를 세로로 풀어서, 사진은 화면 폭 전체를
     채우는 큰 히어로 이미지로, 그 아래 입력칸들도 전부 한 줄씩 넓게 쓰도록 함(신규 등록 시
     특히 좁은 폼 안에 다닥다닥 붙어 있던 입력칸이 손가락으로 누르기 편한 크기로 바뀜). */
  #pp [style*="grid-template-columns"], #smpp [style*="grid-template-columns"],
  #sp [style*="grid-template-columns"], #bmp [style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important; /* 원본 inline style의 align-items:start(그리드용)가 그대로 남아있어
      플렉스에서는 "내용 크기만큼만" 폭이 줄어버렸던 것을 막음 — 자식이 폭 전체를 채우게 함 */
  }
  #smpp-img-wrap, #pp-img-wrap {
    width: 100% !important;
    height: 220px !important;
  }
  /* ── 공지 전체보기(#ntp) — 카드/박스 없이 전체화면 리스트로, 공지 사이 여백을 넉넉하게 ── */
  #ntp .sp-h { padding: calc(14px + env(safe-area-inset-top)) 18px 14px; }
  #ntp-body { padding: 4px 18px calc(20px + env(safe-area-inset-bottom)); }
  #ntp-body .notice-row { padding: 16px 2px !important; gap: 10px !important; }
  /* "+" 공지 추가 버튼 — .mfab은 position:fixed라 부모(#ntp)가 화면 밖(right:calc(-100vw / var(--m-vz, 1)))에 있어도
     뷰포트 기준으로 그대로 떠서 다른 화면에서도 보이는 버그가 있었다. 보이는 조건을 아예
     "#ntp가 .open일 때 + 권한 있을 때(m-can-add)"로 CSS에서 강제해서 패널 상태에 정확히 묶는다. */
  #m-notice-add-btn { display: none !important; }
  #ntp.open #m-notice-add-btn.m-can-add { display: flex !important; }
  /* 공지 추가 팝업 내용칸 — rows="4"라 몇 줄만 써도 안이 꽉 차서 스크롤이 생겼다. 화면 중앙
     팝업으로 바뀌면서 세로 공간도 넉넉해졌으니 10줄 정도는 그대로 보이게 높인다. */
  #notice-compose-inp { min-height: 220px !important; }

  /* ── 로그인 화면 ───────────────────────────────────────────── */
  .login-card { width: min(calc(92vw / var(--m-vz, 1)), 360px); }

  /* ═══ 홈(대시보드 겸 전체 메뉴) ═══ */
  /* .sec-hd가 .mobile-only도 같이 달고 있어서 .mobile-only의 display:block!important에
     밀려 세로로 쌓였던 것을 다시 가로 배치로 고정(인사말과 톱니바퀴 버튼이 한 줄에 있어야 함) */
  /* 홈 화면 전체(진행중인 발주~비용청구)가 한 화면에 들어오도록, 인사말 줄 아래 여백을 줄임
     (다른 페이지의 .sec-hd는 그대로 두고 홈 화면만 좁힘) */
  /* 제목 옆에 토글/버튼처럼 높이가 다른 요소가 나란히 있는 헤더(진행 중인 발주·검수일정의
     "공장별/담당자별 묶기" 등)에서, 원래(desktop) 기본값인 align-items:flex-start 때문에
     위쪽 끝으로 정렬돼 제목과 높이가 안 맞고 토글이 어중간하게 튀어나와 보였다 — 모바일에서는
     항상 세로 중앙 정렬로 통일한다.
     주의: mobile.css는 index.html 안에 박힌 desktop 기본 스타일(.sec-hd{align-items:flex-start})
     보다 <link>상 먼저 로드되는데, 특정성이 똑같으면 "나중에 로드된 규칙이 이긴다"는 원칙 때문에
     그냥 두면 이 규칙이 매번 desktop 기본값한테 덮어써진다 — 반드시 !important가 있어야 한다. */
  .sec-hd { align-items: center !important; }
  /* 인사말 줄 아래 구분선을 넣고, 스크롤해도 화면 위에 고정되게(position:sticky) 함.
     #page-wrap의 좌우 12px 패딩 안에서만 고정하면 스크롤되는 카드가 그 옆으로 비쳐 보이므로,
     좌우만 음수 마진으로 배경을 늘려 가려지게 한다. 세로 방향은 손대지 않는다 — #page-wrap의
     padding-top까지 끌어올리려고 위쪽도 음수 마진을 줬더니, 그 아래 발주입력 박스가 오히려
     인사말보다 위로 올라와 겹쳐 보이는 문제가 있었다(스크롤 컨테이너 padding과 얽혀 계산이 어긋남).
     top:0인 상태로도 스크롤 시 padding-top 바로 아래에서 멈춰 고정되므로 이걸로 충분하다. */
  #pg-home .sec-hd {
    display: flex !important; align-items: center !important;
    position: sticky; top: 0; z-index: 20;
    background: var(--bg); margin: 0 -12px 14px; padding: 0 12px 10px;
    border-bottom: 1px solid var(--border);
  }
  /* 구분선 위쪽(상단 안전영역 포함)도 항상 배경색으로 채워지도록 별도 도형을 하나 더 얹는다 —
     레이아웃(margin/padding)은 안 건드리고 순수 배경만 덧대는 방식이라, 이전에 세로 음수
     마진으로 위쪽까지 끌어올리려다 발주입력 박스와 순서가 꼬였던 문제를 다시 일으키지 않는다. */
  #pg-home .sec-hd::before {
    content: ''; position: absolute; left: 0; right: 0;
    top: calc(-12px - env(safe-area-inset-top)); height: calc(12px + env(safe-area-inset-top));
    background: var(--bg);
  }
  /* 검수일정 하이브리드 카드 — 위: 파란 버튼(누르면 #pg-insp-list 전체 목록으로 이동),
     아래: 가장 가까운 일정 1~2건을 카드 행으로 바로 미리보여주는 영역. 하나의 둥근 카드
     안에서 두 구역이 이어지도록 바깥은 overflow:hidden, 안쪽 모서리는 각자 맞춰서 뗀다. */
  /* 파란색도 제품 보기 박스와 같은 방식(톤 최소화 + 은은한 그림자/하이라이트 한 겹)으로
     고급스럽게 — 헤더/미리보기 영역이 하나로 이어져 보이도록 그라데이션은 카드 전체에 준다 */
  .m-insp-card {
    width: 100%; min-height: 66px; border-radius: 18px; margin-bottom: 8px; overflow: hidden;
    background: linear-gradient(175deg, #5B95F6 0%, #4285F4 60%, #1A73E8 100%);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 2px 6px rgba(26,115,232,.3), inset 0 1px 0 rgba(255,255,255,.14);
    box-sizing: border-box;
  }
  /* 진행 중인 발주 카드 — 짙은 네이비(#174EA6, google-material-light.md의 primary-900)로,
     바로 아래 검수일정 카드(밝은 기본 파랑 #4285F4)보다 한 톤 더 깊고 차분하게 눌러서
     같은 파랑 계열이지만 톤 차이로 구분되게 했다. */
  .m-ord-card {
    background: linear-gradient(175deg, #1967D2 0%, #174EA6 60%, #123D85 100%);
    box-shadow: 0 2px 6px rgba(18,61,133,.35), inset 0 1px 0 rgba(255,255,255,.14);
    /* 좌우 여백은 검수일정 카드와 동일하게 page-wrap의 12px 패딩을 그대로 따름(별도 조정 없음) */
    /* 하이브리드(미리보기) 카드에서 그냥 버튼 박스로 바뀌었으니, 세로 크기도 발주입력 박스와 동일하게 */
    height: 66px; display: flex; align-items: center;
  }
  .m-ord-card .m-insp-card-hd { flex: 1; height: 100%; box-sizing: border-box; }
  /* 진행중인 단가 요청 카드 — 짙은 회색(#3C4043, "발주 입력" 박스와 같은 톤 계열)으로,
     "진행 중인 발주" 카드와 같은 크기(높이 66px)로 그 바로 위에 놓인다.
     display:flex에 !important가 필요하다 — 이 카드에도 .mobile-only가 붙어 있어서
     ".mobile-only{display:block!important}"가 그냥 flex를 덮어써 버려, 안의 .m-insp-card-hd가
     부모 높이(66px)를 못 채우고 위쪽에 붙어버리는(=아이콘/글씨/건수/화살표가 가운데 정렬 안 되는) 원인이 된다. */
  .m-priceReq-card {
    background: #3C4043;
    box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
    height: 66px; display: flex !important; align-items: center;
  }
  .m-priceReq-card .m-insp-card-hd { flex: 1; height: 100%; box-sizing: border-box; }
  /* 업무 지시 카드 — 진행중인 견적 요청 바로 위. 같은 크기(66px), 보라 계열(업무 지시 알림 · 박스와 같은 색)로 구분.
     display:flex에 !important — .mobile-only의 display:block!important를 덮기 위해(위 .m-priceReq-card와 같은 이유) */
  .m-wo-card {
    background: linear-gradient(175deg, #6366F1 0%, #4F46E5 60%, #4338CA 100%);
    box-shadow: 0 2px 6px rgba(67,56,202,.35), inset 0 1px 0 rgba(255,255,255,.14);
    height: 66px; display: flex !important; align-items: center;
  }
  .m-wo-card .m-insp-card-hd { flex: 1; height: 100%; box-sizing: border-box; }
  #mh-wo-dot {
    position: absolute; top: 12px; right: 44px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--red); border: 2px solid #4F46E5;
  }
  /* 발주 입력 — 관리자 전용 진입 버튼. 기본값은 숨김(display:none)으로 두어, admin 여부가
     확정되기 전(로그인 직후 mApplyMobilePermissions 실행 전)에도 비관리자에게 잠깐이라도
     보이는 일이 없게 한다 — 실제 표시는 JS가 권한이 있을 때만 m-oe-ok 클래스를 붙여 켠다. */
  #mh-orderentry-card.mobile-only { display: none !important; }
  #mh-orderentry-card.mobile-only.m-oe-ok { display: flex !important; }
  .m-orderentry-card { background: #202124; box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); height: 66px; align-items: center; }
  .m-orderentry-card .m-insp-card-hd { flex: 1; height: 100%; box-sizing: border-box; }
  .m-insp-card-hd {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; cursor: pointer; text-align: left;
    position: relative; font-family: var(--font);
  }
  .m-insp-card-hd:active { filter: brightness(.94); }
  .m-insp-btn-ico { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
  /* 문장형 부제 대신 짧은 건수만 쓰므로, 위아래로 쌓지 않고 제목과 건수를 아이콘과
     같은 한 줄에 나란히(제목 오른쪽에 건수, 글자 크기도 제목과 동일) 배치한다 */
  .m-insp-btn-body { display: flex; flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
  .m-insp-btn-title { font-size: 19px; font-weight: 800; color: #fff; }
  .m-insp-btn-sub { font-size: 19px; font-weight: 600; color: rgba(255,255,255,.92); }
  .m-insp-card-chev { flex-shrink: 0; color: rgba(255,255,255,.75); display: flex; }
  #mh-insp-change-dot {
    display: none !important; /* 홈 검수일정 건수 오른쪽 빨간 점은 표시하지 않음(변경된 일정은 아래 미리보기 줄의 "일정변경" 표시로 확인) */
    position: absolute; top: 12px; right: 44px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--red); border: 2px solid var(--accent);
  }
  /* 미리보기 행 영역 — 배경을 따로 칠하지 않고 부모(.m-insp-card)의 그라데이션이 그대로
     비치게 해서 헤더와 이어져 보이게 한다. 일정 내용이 적힌 개별 카드(.mcard)는 자기
     배경(#fff)이 있어서 그대로 하얗게 보인다. 예정된 일정이 없을 땐(:empty) 완전히 접힘. */
  .m-insp-card-preview { background: transparent; padding: 0; }
  .m-insp-card-preview:not(:empty) { padding: 2px 4px 0; }
  /* 예정된 일정이 없어 미리보기가 비면(:empty) 헤더 한 줄만 남는데, 그 한 줄이 카드
     min-height(66px) 안에서 위로 붙어 보였다. 헤더 자체를 66px까지 늘려서(flex:1) 그 안의
     align-items:center가 내용을 정확히 세로 중앙에 놓게 한다 — 일정이 있어 이미 66px를
     넘는 경우엔 늘어날 여유 공간이 없어 자연스럽게 원래 높이 그대로 남는다.
     display에 !important가 꼭 필요하다: 이 카드에도 .mobile-only가 붙어 있어서
     ".mobile-only{display:block!important}"가 그냥 flex를 덮어써 버린다(위 #m-pv-toolbar-actions와 같은 이유). */
  #mh-insp-card { display: flex !important; flex-direction: column; }
  /* 홈 검수일정 카드 파란 바탕 — 왼쪽 진한 파랑 → 오른쪽 조금 밝은 파랑 가로 그라데이션(컬러 시스템 primary-500 → 400, 은은하게) */
  #mh-insp-card { background: linear-gradient(90deg, #4285F4 0%, #5591F5 55%, #669DF6 100%); }
  #mh-insp-card > .m-insp-card-hd { flex: 1 0 auto; box-sizing: border-box; }
  /* 홈 카드 아이콘 균형 — 진행 중인 발주 · 검수일정 · 제품 보기 · 일정 관리 · 비용청구 모두
     아이콘 24px · 카드 왼쪽 끝에서 14px · 아이콘과 제목 사이 10px로 통일 */
  #mh-insp-card > .m-insp-card-hd { padding-left: 14px; gap: 10px; }
  #mh-insp-preview .mcard, #mh-ord-preview .mcard { height: 60px; }
  /* 홈 검수일정 카드 안 미리보기 일정 — 사이 간격은 기본 .mcard(8px)보다 좁게, 모서리도 덜 둥글게(14px→8px).
     검수일정 전체 목록 페이지(#mh-my-insp-list)는 그대로.
     mInspRowHtml이 카드에 margin-bottom:5px를 인라인으로 박아 두므로 !important가 있어야 적용된다 */
  #mh-insp-preview .mcard { margin-bottom: 2px !important; border-radius: 8px; }
  /* 재검수 · 일정변경 · 미등록 표시(날짜 위 작은 알약)가 붙는 행은 mInspRowHtml이 위 패딩을 16px로 키워서
     같은 높이 안에서 내용이 아래로 밀려 행마다 정렬이 어긋났다 — 홈 미리보기는 처음부터 알약이 들어갈 만큼
     높이를 키우고(60→66px) 모든 행의 위아래 패딩을 0으로 통일해 내용이 항상 정가운데에 오게 한다.
     (알약은 날짜 바로 위에 absolute로 떠 있어서 66px 안에 들어간다) */
  #mh-insp-preview .mcard { height: 66px; padding-top: 0 !important; padding-bottom: 0 !important; }
  /* 위아래 패딩을 0으로 바꾼 만큼 구분선 길이를 원래 모양대로 되돌린다 —
     담당자 | 발주번호 선은 위아래 안쪽으로 띄우고(원래 패딩 10px 자리), 날짜 | D-day 선(인라인 margin:-10px 0으로
     패딩을 뚫고 박스 끝까지 닿게 한 선)은 박스 위아래 끝에 딱 맞게 */
  #mh-insp-preview .mcard > div[style*="width:1px"] { margin: 12px 0 !important; }
  #mh-insp-preview .mcard > div[style*="margin:-10px"] { margin: 0 !important; }
  /* 검수일정 페이지(지난 검수 · 미등록 / 예정 / 완료 목록의 일정 줄)도 홈 미리보기와 같은 높이 · 정렬 — 둥글기 · 간격은 그대로.
     div.mcard로 특정성을 높여 태블릿의 "#mh-insp-overdue .m-insp-od > .mcard { height: 60px }"보다 우선 */
  #pg-insp-list div.mcard.m-ir { height: 66px; padding-top: 0 !important; padding-bottom: 0 !important; }
  #pg-insp-list div.mcard.m-ir > div[style*="width:1px"] { margin: 12px 0 !important; }
  #pg-insp-list div.mcard.m-ir > div[style*="margin:-10px"] { margin: 0 !important; }
  /* 맨 아래 박스 밑 여백 4px = 박스 자체 2px + 미리보기 영역 아래 안쪽 여백 2px */
  #mh-insp-preview:not(:empty) { padding-bottom: 2px; }
  /* ── 홈 배치(2026-10-15 시안): 진행 중인 발주 배너 → 4칸 줄 → 검수일정 → 제품 보기 · 일정 관리 → 비용청구 ── */
  /* 진행 중인 발주 — 맨 위 배너. 배경은 바다 위 컨테이너선 그림(img/home-ord-ship.svg, 오른쪽 기준으로 꽉 채움).
     위 줄: 발주현황 아이콘(PC와 같은 steps) 제목 · 전체 건수 · > / 아래 줄: 상태별 건수. display에 !important — .mobile-only의 block!important를 덮기 위해 */
  #mh-ord-card {
    display: flex !important; flex-direction: column; justify-content: space-between; align-items: stretch;
    height: 104px; aspect-ratio: auto; position: relative; margin-bottom: 10px; cursor: pointer;
    padding: 10px 12px 9px 14px; color: #fff;
    /* 맨 위 층: 오른쪽 위 건수 자리만 은은하게 어둡게 — 그 뒤의 밝은 선교·하늘빛 때문에 노란 숫자가 묻히지 않게 */
    background:
      radial-gradient(ellipse 30% 55% at 88% 28%, rgba(14,38,110,.5) 0%, rgba(14,38,110,0) 100%),
      #2358D0 url('../img/home-ord-ship.svg?v=1') 72% 62% / auto 135% no-repeat;
    box-shadow: 0 4px 12px rgba(28,71,180,.3), inset 0 1px 0 rgba(255,255,255,.16);
  }
  #mh-ord-card:active { filter: brightness(.95); }
  .m-ord-top { display: flex; align-items: center; gap: 10px; }
  .m-ord-ico { display: flex; flex-shrink: 0; color: #fff; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)) drop-shadow(0 -1px 0 rgba(255,255,255,.3)); }
  .m-ord-ttl { flex: 1; min-width: 0; font-size: 19px; font-weight: 800; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* 전체 건수 — 검수일정 카드의 건수와 같게(숫자 21px · 노란색 #FBBC04 / "건" 13px) */
  .m-ord-total { flex-shrink: 0; font-size: 13px; font-weight: 600; white-space: nowrap; color: rgba(255,255,255,.92); }
  .m-ord-total strong { font-size: 21px; font-weight: 700; color: #FBBC04; margin-right: 2px; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
  .m-ord-chev { flex-shrink: 0; opacity: .85; margin-left: -2px; }
  /* 상태별 건수 — 다섯 칸을 한 줄에 고르게 펼치고 사이에 옅은 세로 구분선. 좁은 폰에서는 글자를 조금씩 줄인다 */
  .m-ord-stats { display: flex; align-items: center; justify-content: space-between; gap: 2px; white-space: nowrap; font-size: clamp(7.5px, 2.2vw, 11px); letter-spacing: -.3px; color: rgba(255,255,255,.82); }
  .m-ord-stats span { display: inline-flex; align-items: baseline; }
  .m-ord-stats b { margin: 0 1px 0 2px; font-size: 1.12em; font-weight: 700; color: #fff; }
  .m-ord-stats i { flex-shrink: 0; width: 1px; height: 10px; background: rgba(255,255,255,.3); }
  /* 업무 지시 · 견적 요청 · A/S 관리 · SAMPLE 현황 한 줄 — 칸이 빠지면 남은 칸이 폭을 나눔 */
  .m-qk-row { display: flex !important; gap: 8px; margin-bottom: 10px; }
  .m-qk-tile {
    flex: 1 1 0; min-width: 0; position: relative; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 11px 4px 10px; background: #fff; border: 1px solid var(--border); border-radius: 16px;
    box-shadow: var(--sh0);
  }
  .m-qk-tile:active { background: var(--surface); }
  .m-qk-img { height: 42px; width: auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.22)); margin-bottom: 1px; }
  .m-qk-lbl { max-width: 100%; font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-qk-pill {
    max-width: 100%; padding: 2px 7px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 11px; font-weight: 700; background: var(--surface); color: var(--text3);
  }
  .m-qk-pill.has-data { background: #FDECEA; color: var(--red); padding: 1px 11px 2px; }
  /* 건수 숫자만 크게 · 굵게 — 한눈에 들어오게("N건") */
  .m-qk-n { font-size: 15px; font-weight: 700; line-height: 1; margin-right: 1px; vertical-align: -1px; font-family: var(--mono); letter-spacing: -.3px; }
  /* 빨간 점은 숨김 — 칸 아래 알약에 건수가 이미 나오고, 확인 전 지시는 칸 깜빡임으로 따로 알린다 */
  .m-qk-tile #mh-wo-dot { display: none !important; }
  /* 업무 지시 칸 — 아직 "확인 전"인 지시가 있으면 일정의 "검수일정 미입력" 버튼처럼 분홍으로 깜빡임(app.js renderWorkOrderBox) */
  .m-qk-tile.m-wo-unconfirmed { border-color: #ff8fb8; animation: mBlinkPinkTile 1.1s ease-in-out infinite; }
  #wo-card.m-wo-unconfirmed { border-color: #ff8fb8; }
  #wo-card.m-wo-unconfirmed > .card-h { animation: mBlinkPinkTile 1.1s ease-in-out infinite; } /* 태블릿 홈 박스는 머리글만 */
  @keyframes mBlinkPinkTile { 0%, 100% { background: #fff; } 50% { background: #ffd2e2; } }
  /* 바로가기 표시 — 오른쪽 위 작은 연회색 ›, 그림 · 글자보다 눈에 덜 띄게 */
  .m-qk-go { position: absolute; top: 8px; right: 7px; width: 11px; height: 11px; fill: none; stroke: #BDC1C6; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
  /* ── 제품 보기(한 줄 전체) — 왼쪽: 아이콘 · 제목 · 설명(세로 가운데). 오른쪽 64%: 가구 장면 그림이
     왼쪽으로 갈수록 투명해지며 보라 바탕에 녹아든다. 색은 기존 보라 그라데이션 그대로 ── */
  #pg-home .m-hpv {
    flex-direction: column; align-items: stretch; justify-content: center; gap: 0;
    padding: 12px 12px 12px 14px; color: #fff; position: relative; overflow: hidden;
  }
  .m-hpv-scenes {
    position: absolute; top: 0; right: 0; bottom: 0; width: 64%; pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 35%, #000 70%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 35%, #000 70%);
  }
  .m-hpv-scene { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .9s ease; }
  .m-hpv-scene.on { opacity: .72; }
  .m-hpv-hd { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
  .m-hpv-ico { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } /* 이전 버전 아이콘(흰 선 4칸) 그대로 — 바탕 도형 없음 */
  .m-hpv-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .m-hpv-ttl { font-size: 17px; font-weight: 800; letter-spacing: -.3px; line-height: 1.2; text-shadow: 0 1px 3px rgba(60,10,80,.3); }
  .m-hpv-sub { margin-top: 2px; font-size: 11px; color: rgba(255,255,255,.88); text-shadow: 0 1px 3px rgba(60,10,80,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-hpv-chev { flex-shrink: 0; opacity: .9; }
  /* 진행 중인 발주 화면 맨 아래 「발주 입력」 — 목록을 스크롤해도 화면 아래쪽에 붙어 있음 */
  #pg-ord-list #mh-orderentry-card.m-oe-ok { position: sticky; bottom: 0; z-index: 5; margin: 12px 0 2px; height: 48px; min-height: 0; border-radius: 14px; }
  #pg-ord-list #mh-orderentry-card .m-insp-card-hd { padding: 0 16px; gap: 10px; }
  #pg-ord-list #mh-orderentry-card .m-insp-btn-title { font-size: 16px; }
  /* 제품 보기(한 줄 전체) → 일정 관리 · 비용청구(한 줄 2칸). 권한으로 한 칸이 빠지면 남은 칸이 폭을 다 가진다(flex) */
  .m-home-grid { display: flex; flex-wrap: wrap; gap: 8px; }
  .m-home-grid > .m-home-card { flex: 1 1 0; min-width: 0; }
  .m-home-grid > .m-home-card[data-p="productsView"] { flex-basis: 100%; }
  .m-home-card {
    background: #fff; border: 1px solid var(--border); border-radius: 14px;
    padding: 10px; cursor: pointer; box-shadow: var(--sh0);
    display: flex; align-items: center; gap: 8px;
  }
  .m-home-card:active { background: var(--surface); }
  /* A·S관리/SAMPLE현황/제품 보기 박스는 세로 높이 고정. *{box-sizing:border-box}라 height에 패딩이 포함되므로
     내용(아이콘+글자)은 그대로 두고 flex align-items:center로 가운데 정렬만 유지된다. */
  .m-home-card[data-p="as"],
  .m-home-card[data-p="sampleStatus"] {
    height: 104px;
  }
  /* 제품 보기 · 일정 관리 · 비용청구는 92px — 맨 위 진행 중인 발주 배너(104px)보다 한 단계 낮게 */
  .m-home-card[data-p="productsView"] { height: 92px; }
  /* 제품 보기는 아이콘이 badge 폭을 거의 꽉 채워서 그 자체로 여백이 있어 보이지만,
     A·S관리/SAMPLE현황은 아이콘이 작아 보여서 아이콘·글자 사이 간격을 좀 더 준다 */
  .m-home-card[data-p="as"], .m-home-card[data-p="sampleStatus"] {
    gap: 12px;
  }
  /* ── 일정 관리(보라) · 비용청구(초록) 2칸 카드 — 제목·부제 위, 큰 건수 아래, 오른쪽 아래 그림.
     바로가기(>)는 도형 없이 화살표만. #pg-home을 붙여 .m-home-card 기본값(흰 배경·가운데 정렬)보다 우선 ── */
  #pg-home .m-hc {
    position: relative; overflow: hidden; height: 92px; padding: 14px 12px 12px 14px; /* 제품 보기와 같은 높이 */
    flex-direction: column; align-items: stretch; gap: 0;
    border: 1px solid rgba(255,255,255,.1); border-radius: 18px; color: #fff;
    transition: transform .1s ease;
  }
  #pg-home .m-hc:active { transform: translateY(1px); filter: brightness(.95); }
  #pg-home .m-hc-sched {
    background: radial-gradient(120% 80% at 100% 100%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 60%),
                linear-gradient(160deg, #1967D2 0%, #185ABC 55%, #174EA6 100%); /* 컬러 시스템 primary-700 → 800 → 900 */
    box-shadow: 0 4px 12px rgba(23,78,166,.32), inset 0 1px 0 rgba(255,255,255,.18);
  }
  #pg-home .m-hc-exp {
    background: radial-gradient(120% 80% at 100% 100%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 60%),
                linear-gradient(160deg, #34A853 0%, #2D9249 100%); /* 컬러 시스템 success-fg → 아래쪽만 살짝 어둡게(#2D9249는 팔레트 밖) */
    box-shadow: 0 4px 12px rgba(45,146,73,.32), inset 0 1px 0 rgba(255,255,255,.18);
  }
  .m-hc-hd { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
  .m-hc-ico { flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.18)); }
  .m-hc-ttl { flex: 1; min-width: 0; font-size: 17px; font-weight: 800; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-hc-chev { flex-shrink: 0; opacity: .9; }
  /* 건수 글자 크기는 진행 중인 발주 카드(숫자 21px · "건" 13px)와 같게 */
  .m-hc-stat { margin-top: auto; display: flex; align-items: baseline; gap: 2px; position: relative; z-index: 1; white-space: nowrap; }
  .m-hc-n { font-size: 21px; font-weight: 700; line-height: 1; }
  .m-hc-stat span { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.92); }
  .m-hc-dash { width: 16px; height: 3px; border-radius: 2px; margin-top: 7px; background: rgba(255,255,255,.7); position: relative; z-index: 1; }
  /* 홈 화면 박스 모서리 — 전체적으로 덜 둥글게(배너·4칸 타일·검수일정·제품 보기·일정 관리·비용청구 모두 12px로 통일) */
  #pg-home .m-insp-card, #pg-home .m-qk-tile, #pg-home .m-home-card, #pg-home .m-hc { border-radius: 12px; }
  /* 오른쪽 아래 물결무늬 — 옅은 흰색 곡선 띠 · 선을 카드 오른쪽 아래에 깔고, 그 위에 그림(.m-hc-art)이 놓인다 */
  .m-hc-wave { position: absolute; right: 0; bottom: 0; width: 85%; height: 65%; pointer-events: none; }
  .m-hc-art { position: absolute; right: -2px; bottom: -2px; width: 58px; height: 58px; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.18)); }
  /* 제품 보기 박스만 브랜드 보라(#7B1FA2) 배경 + 흰 글자 — 톤 차이는 최소화하고
     은은한 그림자/하이라이트 한 겹씩만 얹어 화려하지 않게(고급스럽게) 마무리 */
  .m-home-card[data-p="productsView"] {
    background: linear-gradient(175deg, #832AA9 0%, #7B1FA2 60%, #6E1B93 100%);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow:
      0 2px 6px rgba(91,20,122,.3),
      inset 0 1px 0 rgba(255,255,255,.14);
    transition: transform .1s ease, box-shadow .15s ease, background .15s ease;
    /* 아이콘 왼쪽 여백을 진행중인 발주 카드 헤더(padding-left:16px)와 맞춤 */
    padding-left: 16px;
  }
  .m-home-card[data-p="productsView"]:active {
    transform: translateY(1px);
    box-shadow:
      0 1px 2px rgba(91,20,122,.25),
      inset 0 1px 3px rgba(0,0,0,.2);
  }
  .m-home-card[data-p="productsView"] .m-home-body { display: flex; align-items: center; }
  .m-home-card[data-p="productsView"] .m-home-label {
    color: #fff; font-size: 17px; letter-spacing: .1px;
  }
  .m-home-card[data-p="productsView"] .m-home-chevron { color: rgba(255,255,255,.8); }
  .m-home-icon-badge {
    width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  /* 제품 보기 — 이모지 글리프로 손쉽게 사실적인 느낌을 낸다(A/S·SAMPLE은 앱 톤에 맞춘
     전용 SVG 아이콘을 따로 그려 씀 — 아래 as/sampleStatus 카드 마크업 참고) */
  .m-home-emoji { font-size: 24px; line-height: 1; display: inline-flex; }
  .m-home-body { flex: 1; min-width: 0; }
  .m-home-label { font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-home-stat { font-size: 12px; color: var(--text3); font-family: var(--mono); margin-top: 2px; }
  .m-home-stat.has-data { color: var(--red); font-weight: 700; }
  .m-home-chevron { flex-shrink: 0; color: var(--text3); display: flex; }

  /* ═══ 카드형 목록 (A/S·SAMPLE·비용청구 등, mobile-render.js가 채워 넣음) ═══ */
  .mfab {
    display: flex; align-items: center; justify-content: center;
    position: fixed;
    right: 16px; bottom: calc(var(--m-bottombar-h) + 16px + env(safe-area-inset-bottom));
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--accent); color: #fff; border: none;
    font-size: 26px; line-height: 1;
    box-shadow: var(--sh2); cursor: pointer; z-index: 80;
    transition: background .15s, transform .1s;
  }
  .mfab:active { transform: scale(.94); background: var(--accent-dk); }

  .mcard {
    background: #fff; border: 1px solid var(--border); border-radius: 14px;
    padding: 12px; margin-bottom: 8px; box-shadow: var(--sh0);
  }
  /* 홈 화면 검수 일정 카드만 세로 높이 60px 고정(box-sizing:border-box라 패딩 포함, 내용은
     그대로 두고 flex align-items:center로 가운데 정렬만 유지됨) */
  #mh-my-insp-list .mcard, #mh-ord-list .mcard { height: 60px; }
  .mcard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
  .mcard-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .mcard-thumb {
    width: 42px; height: 42px; border-radius: 10px; object-fit: cover;
    background: var(--surface); flex-shrink: 0; display: flex; align-items: center;
    justify-content: center; color: var(--text3); border: 1px solid var(--border); cursor: pointer;
  }
  .mcard-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
  /* SAMPLE 카드 전용 — 제품 보기 가로 보기처럼 사진을 크게 왼쪽에 배치 */
  .mcard-thumb-lg {
    width: 96px; height: 96px; border-radius: 10px; flex-shrink: 0;
    background: var(--surface); border: 1px solid var(--border); overflow: hidden;
    display: flex; align-items: center; justify-content: center; color: var(--text3);
  }
  .mcard-thumb-lg img { width: 100%; height: 100%; object-fit: cover; }
  /* A/S · SAMPLE 카드 공용 — 기본 96px보다 크게, 사진을 더 비중있게 보여준다 */
  .mcard-thumb-lg.thumb-120 { width: 120px; height: 120px; border-radius: 10px; }
  .mcard-title { font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mcard-sub { font-size: 12px; color: var(--text3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mcard-body { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
  .mcard-row { display: flex; align-items: center; gap: 8px; }
  .mcard-row .lbl { font-size: 12px; color: var(--text3); width: 62px; flex-shrink: 0; }
  .mcard-row .fld { flex: 1; min-width: 0; }
  .mcard-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .mcard-kv .k { font-size: 11.5px; color: var(--text3); }
  .mcard-kv .v { font-size: 12.5px; color: var(--text); font-weight: 600; }
  /* A/S · SAMPLE 카드 공용 — 제목 영역 아래 구분선 + 아래 2x2 정보를 각자 테두리만 있는
     독립 박스(배경색 없음)로 분리해서 구분감 있게 정리 */
  .kv-wrap { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }
  .kv-boxed.mcard-grid2 { gap: 4px 5px; }
  .kv-boxed .mcard-kv .k { display: flex; align-items: center; gap: 4px; }
  .kv-boxed .mcard-kv .k svg { flex-shrink: 0; }
  .kv-boxed .mcard-kv .v { margin-top: 1px; }
  .kv-boxed .mcard-kv { border: 1px solid var(--border); border-radius: 7px; padding: 6px 9px; }
  .kv-boxed .kv-full { grid-column: 1 / -1; }
  /* 샘플 상세(완료) 머리글 — 사진을 아래 정보 칸(.kv-boxed) 한 칸과 똑같은 폭으로 맞추려고
     같은 2열 그리드·같은 gap을 쓰고, aspect-ratio로 세로도 1:1이 되게 한다.
     오른쪽 칸은 위아래로 벌려서(space-between) 상태 뱃지는 우측 상단, 샘플명은 사진 아랫줄에 맞춘다. */
  .m-smp-photo {
    width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden;
    margin-bottom: 8px;
    background: var(--surface); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; color: var(--text3); cursor: pointer;
  }
  .m-smp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* 샘플명(좌) + 상태(우)를 한 줄에 놓고, 그 아래 구분선을 그어 사진과 나눈다 */
  .m-smp-titlerow {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--border);
  }
  .m-smp-name {
    min-width: 0; font-size: 15px; font-weight: 800; color: var(--accent); line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* 샘플 상세(완료) — 사이즈·소재/등급은 한 줄을 다 쓰면서 값도 크게 */
  .m-smp-kv-big { padding: 8px 11px !important; }
  .m-smp-kv-big .v { font-size: 15px !important; font-weight: 700; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
  .m-smp-unit { font-size: 11.5px; color: var(--text3); font-weight: 600; }
  /* 소재/등급 칩도 "테두리만" 규칙에 맞춰 배경 없이 */
  .m-smp-mat {
    font-size: 12.5px; font-weight: 700; color: var(--text2);
    border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; background: transparent;
  }
  .mcard-empty { text-align: center; padding: 26px 12px; color: var(--text3); font-size: 12.5px; }
  .mcard-more {
    width: 100%; height: 38px; border-radius: 10px; border: 1.5px dashed var(--border);
    background: transparent; color: var(--text2); font-size: 12px; font-weight: 600; cursor: pointer; margin-top: 4px;
  }
  .mcard-del {
    width: 32px; height: 32px; border-radius: 8px; border: none; background: var(--red-lt); color: var(--red);
    display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  }
  .msec-hd { font-size: 13px; font-weight: 700; color: var(--text); margin: 4px 0 8px; }

  /* ═══ A/S 관리 · SAMPLE 입력 공용: 진행중/완료 좌우 탭 — 아래 목록과 한 화면처럼 이어지도록
     밑줄 인디케이터가 있는 탭바 형태로(카드처럼 붕 떠있지 않게) ═══ */
  .m-seg-tabs {
    display: flex !important; margin: 0 -12px 12px; padding: 0 12px;
    border-bottom: 1.5px solid var(--border); background: #fff;
  }
  .m-seg-tab {
    flex: 1; padding: 13px 6px 11px; border: none; background: transparent;
    color: var(--text3); font-size: 13.5px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    border-bottom: 3px solid transparent; margin-bottom: -1.5px; transition: color .15s, border-color .15s;
  }
  .m-seg-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
  .m-seg-cnt { font-family: var(--mono); font-weight: 700; font-size: 12px; opacity: .75; }

  /* SAMPLE 입력: 탭 바로 밑에 카드 테두리/그림자가 끊겨 보이지 않도록, 탭과 한 화면처럼
     이어지게 카드 박스 껍데기를 벗김(안의 필터바/목록 기능은 그대로 유지) */
  #smp-prog-card { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 -12px; }
  #smp-prog-card .fbar { padding-left: 12px; padding-right: 12px; }

  /* ═══ 제품 보기: 상단 검색창 + 필터 아이콘 + 전체화면 필터 패널 ═══ */
  .m-pv-topbar { display: flex !important; gap: 8px; margin-bottom: 10px; align-items: center; }
  .m-icon-btn {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid var(--border);
    background: #fff; color: var(--text2); cursor: pointer;
  }
  /* 홈 화면 종 아이콘 2개(업무 알림·공지사항) — 버튼 박스(테두리/배경) 없이 아이콘만 */
  .mh-bell-btn {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 30px; height: 30px; position: relative; cursor: pointer;
  }
  /* 업무 알림(왼쪽) — 기존처럼 꽉 채운 노란색 단색 아이콘 */
  .mh-alert-btn { color: #FBBC04; }
  .mh-alert-btn svg { fill: #FBBC04; }
  /* 공지사항(오른쪽) — 빨간 압정 핀(index.html에 직접 그려 넣은 mh-notice-svg) */
  .mh-notice-svg { overflow: visible; position: relative; z-index: 1; transform-origin: 50% 100%; }
  /* 홈 인사말 왼쪽 앱 종료 버튼 — 종 버튼(.mh-bell-btn)과 같은 크기·박스 없는 아이콘형.
     .sec-hd가 justify-content:space-between이라 종료(왼쪽) → 인사말 → 종(오른쪽) 순서가 되고,
     인사말이 flex:1로 남는 자리를 차지해야 가운데로 밀리지 않고 왼쪽에 붙는다. */
  .mh-exit-btn {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 30px; height: 30px; margin-right: 8px;
    cursor: pointer; color: var(--text3);
  }
  .mh-exit-btn:active { color: var(--red); }
  #pg-home .sec-hd .sec-ttl { flex: 1; min-width: 0; }
  /* 왼쪽 위 OMS 로고(앱 아이콘) — 전원 아이콘 자리, 누르면 그대로 앱 종료 */
  .mh-oms-logo { width: 26px; height: 26px; display: block; }
  /* 인사말 묶음 — "000 님, 안녕하세요." 아래에 시간대별 한마디를 작고 옅게.
     상단바 높이는 오른쪽 버튼(30px)이 정하므로, 두 줄(16 + 1 + 13px)이 30px 안에 딱 들어가게 줄 높이를 고정 */
  #pg-home .sec-hd .mh-greet-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; height: 30px; }
  #pg-home .sec-hd .mh-greet-wrap .sec-ttl { flex: none; font-size: 15px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mh-greet-sub { margin-top: 1px; font-size: 11px; line-height: 13px; font-weight: 500; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mh-greet-sub:empty { display: none; }
  /* 안 읽은 업무 알림이 있을 때만(.has-unread) 종을 흔든다 — 한 사이클(2.5초) 중 앞쪽 짧은 구간에서만
     좌우로 흔들리고 나머지는 가만히 있어서 "계속" 흔드는 게 아니라 "간헐적으로" 흔드는 느낌을 낸다 */
  .mh-alert-btn.has-unread { animation: mBellRing 2.5s ease-in-out infinite; transform-origin: 50% 0%; }
  @keyframes mBellRing {
    0%, 20%, 100% { transform: rotate(0deg); }
    2.5% { transform: rotate(-15deg); }
    5% { transform: rotate(12deg); }
    7.5% { transform: rotate(-10deg); }
    10% { transform: rotate(8deg); }
    12.5% { transform: rotate(-5deg); }
    15% { transform: rotate(3deg); }
    17.5% { transform: rotate(-1deg); }
  }
  /* 안 읽은 공지가 있을 때 — 핀이 위로 튀어올랐다가 "콕" 꽂히며 찌그러졌다 돌아오고(mPinDrop),
     꽂히는 순간 핀 아래에서 빨간 원형 파동이 퍼져나간다(mPinRipple). 2.4초마다 반복 */
  .mh-notice-btn.has-unread .mh-notice-svg { animation: mPinDrop 2.4s cubic-bezier(.3,0,.3,1) infinite; }
  .mh-notice-btn::before {
    content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
    border-radius: 50%; border: 2px solid #E5352E; background: rgba(229,53,46,.12);
    opacity: 0; pointer-events: none;
  }
  .mh-notice-btn.has-unread::before { animation: mPinRipple 2.4s ease-out infinite; }
  @keyframes mPinDrop {
    0% { transform: translateY(0) scale(1); }
    14% { transform: translateY(-8px) rotate(-10deg) scale(1.18); }
    24% { transform: translateY(1px) scale(1.12, .86); }
    31% { transform: translateY(-1px) scale(.95, 1.06); }
    38%, 100% { transform: translateY(0) scale(1); }
  }
  @keyframes mPinRipple {
    0%, 23% { opacity: 0; transform: scale(.35); }
    24% { opacity: .9; transform: scale(.45); }
    60% { opacity: 0; transform: scale(1.7); }
    100% { opacity: 0; transform: scale(1.7); }
  }
  @media (prefers-reduced-motion: reduce) {
    .mh-notice-btn.has-unread .mh-notice-svg, .mh-notice-btn.has-unread::before { animation: none; }
  }
  #pf-q-v-mobile-slot #pf-q-v, .m-pv-topbar input {
    width: 100% !important; background: #fff !important; height: 38px !important;
    border: 1.5px solid var(--border) !important; border-radius: 10px !important;
  }
  #pv-filter-panel, #smp-filter-panel, #as-filter-panel, #pr-filter-panel {
    position: fixed; inset: 0; z-index: 700; background: #fff;
    display: flex !important; flex-direction: column;
    transform: translateX(-100%); transition: transform .25s cubic-bezier(.4,0,.2,1);
  }
  #pv-filter-panel.open, #smp-filter-panel.open, #as-filter-panel.open, #pr-filter-panel.open { transform: translateX(0); }
  .pv-filter-hd {
    display: flex; align-items: center; justify-content: space-between;
    padding: calc(14px + env(safe-area-inset-top)) 16px 14px;
    border-bottom: 1px solid var(--border); flex-shrink: 0;
  }
  .pv-filter-title { font-size: 17px; font-weight: 700; color: var(--text); }
  .pv-filter-body { flex: 1; overflow-y: auto; padding: 6px 16px; }
  .pv-filter-sec { padding: 16px 0; border-bottom: 1px solid var(--border); }
  .pv-filter-lbl { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 9px; }
  .pv-filter-sec select { width: 100%; }
  .pv-filter-foot {
    display: flex; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border); flex-shrink: 0;
  }

  /* 제품 보기 필터: 드롭다운 대신 슬라이서(칩/알약형 버튼) UI */
  .pv-filter-lbl-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
  .pv-filter-lbl-row .pv-filter-lbl { margin-bottom: 0; }
  .m-sort-dir-btn {
    display: flex; align-items: center; justify-content: center;
    height: 32px; padding: 0 10px; border-radius: 8px;
    border: 1.5px solid var(--border); background: #fff; color: var(--text2); cursor: pointer;
    font-size: 12px; font-weight: 600; white-space: nowrap;
  }
  .m-sort-dir-btn.desc { color: var(--accent); border-color: var(--accent); background: var(--accent-lt); }
  .m-slicer { display: flex; flex-wrap: wrap; gap: 8px; }
  /* 일정 추가 — 담당자를 드롭다운 대신 슬라이서(칩)로. select는 값 창구로 숨기고 칩만 보여줌 */
  #sched-add-mgr { display: none !important; }
  /* 한 줄에 5명씩 고정 배치 — 다른 슬라이서(.m-slicer)는 폭이 자유로운 flex-wrap을 그대로
     쓰지만, 여기만 grid로 열 개수를 못박는다 */
  #sched-add-mgr-pills { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 6px; }
  #sched-add-mgr-pills .m-pill { padding: 0 4px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
  .m-pill {
    height: 32px; padding: 0 13px; border-radius: 999px;
    border: 1.5px solid var(--border); background: #fff; color: var(--text2);
    font-size: 12.5px; font-weight: 600; font-family: var(--font); cursor: pointer; white-space: nowrap;
  }
  .m-pill.on { border-color: var(--accent); background: var(--accent); color: #fff; }
  /* 진행중인 A/S — 검색창 밑 상태 카테고리(전체/답변대기/진행중, 세그먼트 컨트롤형) +
     공장·회사 묶어보기 토글(진행 중인 발주의 "공장별 묶기"와 같은 tog-sw 스위치) 한 줄 */
  .m-as-cat-row { display: flex !important; align-items: center; gap: 8px; margin: 8px 0; }
  .m-as-seg.hidden { display: none !important; }
  .m-as-seg { display: flex; flex: 1; min-width: 0; background: var(--surface); border-radius: 10px; padding: 3px; gap: 3px; }
  .m-as-seg button {
    flex: 1; min-width: 0; border: none; background: transparent; border-radius: 8px;
    padding: 7px 4px; font-size: 11.5px; font-weight: 600; color: var(--text2);
    display: flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font);
  }
  .m-as-seg button .cnt { font-family: var(--mono); font-size: 10.5px; opacity: .7; }
  .m-as-seg button.on { background: #fff; color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.15); font-weight: 700; }
  .m-as-seg button.on .cnt { opacity: 1; }
  .m-as-group-toggles { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }
  .m-as-group-toggle { display: flex; align-items: center; gap: 4px; cursor: pointer; }
  .m-as-group-toggle span { font-size: 10px; color: var(--text3); white-space: nowrap; }
  /* 이 줄에서만 스위치를 더 작게 — 위 mobile.css의 40x22 !important 오버라이드를 다시 덮어써야 함 */
  .m-as-group-toggle .tog-sw { width: 30px !important; height: 17px !important; }
  .m-as-group-toggle .tog-knob { width: 11px !important; height: 11px !important; top: 3px !important; }
  .m-as-group-toggle .tog-sw.on .tog-knob { left: 16px !important; }
  .m-as-group-hd {
    display: flex; align-items: center; gap: 6px; margin: 14px 0 6px; padding: 0 2px;
    font-size: 12px; font-weight: 700; color: var(--text2);
  }
  .m-as-group-hd:first-child { margin-top: 2px; }
  .m-as-group-cnt {
    font-size: 10.5px; font-weight: 700; color: var(--text3); font-family: var(--mono);
    background: var(--surface); border-radius: 8px; padding: 1px 6px;
  }
  /* A/S 등록 — 제품코드 선택용 배지형 pill. "코드 — 이름"이 한 색으로 이어붙어 나오던 것 대신
     코드는 파란 글씨, 이름은 기본 글자색으로 나눠서 알약 모양 도형 하나 안에 넣는다.
     선택됐을 때(.on)도 .m-pill처럼 통짜 파란 배경으로 칠하면 파란 글씨 코드가 묻히므로,
     테두리+연한 파란 배경만 주는 것으로 구분한다. */
  .m-as-pcode-pill {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 13px; border-radius: 999px;
    border: 1.5px solid var(--border); background: #fff; cursor: pointer;
    font-size: 12.5px; font-family: var(--font); white-space: nowrap;
  }
  .m-as-pcode-pill.on { border-color: var(--accent); background: var(--accent-lt); }
  .m-as-pcode-code { color: var(--accent); font-weight: 700; font-family: var(--mono); }
  .m-as-pcode-name { color: var(--text); font-weight: 500; }
  /* 기간(연/월/일) 필터 — 시작일/종료일을 각각 별도 박스로 나누고, 그 사이에 "~" 구분자를 둠 */
  .m-daterange-wrap { display: flex; align-items: center; gap: 8px; }
  .m-daterange-sep { color: var(--text3); font-size: 12px; flex-shrink: 0; }
  .m-daterange {
    flex: 1; min-width: 0; display: flex; align-items: center;
    background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px;
    padding: 2px 12px; transition: border-color .15s;
  }
  .m-daterange:focus-within { border-color: var(--accent); }
  /* 모바일 셸에서는 mConvertDateInputs()가 이 칸을 type=text + data-mdate(앱 달력)로 바꾸므로
     [type=date]만 잡으면 스타일이 빠져 브라우저 기본 테두리·고정 폭으로 박스를 뚫고 나왔다 — 둘 다 잡는다 */
  .m-daterange input[type=date], .m-daterange input[data-mdate] {
    flex: 1; width: 100%; min-width: 0; border: none; background-color: transparent; outline: none;
    font-size: 12.5px; font-family: var(--mono); color: var(--text); padding: 8px 0;
  }
  /* 달력 아이콘(아래 "날짜 선택 달력" 섹션의 input[data-mdate])은 박스 안쪽 오른쪽 끝에 붙인다 */
  .m-daterange input[data-mdate] { padding: 9px 22px 9px 0 !important; background-position: right 0 center; }
  .m-daterange input[data-mdate]::placeholder { color: var(--text3); }
  .m-daterange input[type=date]::-webkit-calendar-picker-indicator {
    filter: invert(46%) sepia(80%) saturate(1700%) hue-rotate(199deg) brightness(101%) contrast(101%);
    cursor: pointer;
  }

  /* ═══ 비용청구: 월 필터 · 담당자 카테고리 · 청구자별 묶기 · 일괄 결제 승인 ═══ */
  .m-exp-filter { display: flex !important; align-items: center; gap: 5px; margin: 8px 0; }
  /* 월 입력칸은 "2026-09" 한 덩어리라 줄 전체를 차지할 필요가 없다 — 절반 정도로 묶어두고,
     화면이 좁아지면 이 칸이 먼저 줄어들어 오른쪽 묶기 스위치를 밀어내지 않게 한다 */
  .m-exp-filter .m-daterange { flex: 1 1 auto; max-width: 130px; min-width: 0; padding: 2px 8px; }
  .m-exp-filter #m-exp-group-btn { margin-left: auto; flex-shrink: 0; }
  .m-exp-filter .m-daterange input[type=month] {
    flex: 1; min-width: 0; border: none; background: transparent; outline: none;
    font-size: 12.5px; font-family: var(--mono); color: var(--text); padding: 8px 0;
  }
  .m-exp-filter .m-daterange input[type=month]::-webkit-calendar-picker-indicator {
    filter: invert(46%) sepia(80%) saturate(1700%) hue-rotate(199deg) brightness(101%) contrast(101%);
    cursor: pointer;
  }
  .m-exp-mon-nav {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 30px; height: 34px; border-radius: 9px; cursor: pointer;
    border: 1.5px solid var(--border); background: #fff; color: var(--text2);
    font-size: 17px; line-height: 1; font-family: var(--font);
  }
  .m-exp-mon-all {
    flex-shrink: 0; height: 34px; padding: 0 12px; border-radius: 9px; cursor: pointer;
    border: 1.5px solid var(--border); background: #fff; color: var(--text2);
    font-size: 11.5px; font-weight: 700; font-family: var(--font);
  }
  .m-exp-mon-all.on { border-color: var(--accent); background: var(--accent-lt); color: var(--accent-dk); }
  /* 담당자 카테고리 — 인원이 늘어도 줄바꿈으로 화면을 잡아먹지 않게 가로 스크롤 한 줄 */
  .m-exp-mgr-row {
    display: flex !important; gap: 6px; margin: 8px 0 10px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .m-exp-mgr-row::-webkit-scrollbar { display: none; }
  .m-exp-mgr-row .m-pill {
    flex-shrink: 0; height: 30px; padding: 0 11px; font-size: 12px;
    display: inline-flex; align-items: center; gap: 5px;
  }
  .m-exp-mgr-cnt { font-family: var(--mono); font-size: 10.5px; opacity: .7; }

  #m-exp-bulk-btn { margin-left: auto; }
  .m-exp-bulk-btn {
    display: flex; align-items: center; gap: 5px; flex-shrink: 0;
    height: 32px; padding: 0 12px; border-radius: 9px; cursor: pointer;
    border: 1.5px solid var(--border); background: #fff; color: var(--text2);
    font-size: 11.5px; font-weight: 700; font-family: var(--font);
  }
  .m-exp-bulk-btn.on { border-color: var(--accent); background: var(--accent-lt); color: var(--accent-dk); }
  /* 그룹 머리띠 — 검수일정 담당자별 묶기(mInspMgrHeaderHtml)와 같은 담당자 색 배지 형태에
     오른쪽 끝 금액 합계만 더 얹었다 */
  .m-exp-grp-bar {
    display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
    padding: 6px 11px; border-radius: 8px; margin: 10px 0 4px;
  }
  .m-exp-grp-cnt { font-weight: 500; opacity: .75; }
  .m-exp-grp-sum { margin-left: auto; font-family: var(--mono); font-size: 12px; }
  .m-exp-grp-all {
    flex-shrink: 0; height: 22px; padding: 0 9px; border-radius: 7px; cursor: pointer;
    border: 1px solid currentColor; background: transparent; color: inherit;
    font-size: 10.5px; font-weight: 700; font-family: var(--font);
  }
  .m-exp-grp-all.on { background: rgba(255,255,255,.6); }
  /* 결제완료 묶음 상세 팝업 — 합계 줄 + 그 안에 든 개별 비용 행 */
  .m-exp-batch-sum {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
    padding: 11px 13px; border-radius: 11px; background: var(--surface); border: 1px solid var(--border);
    font-size: 12.5px; font-weight: 700; color: var(--text2);
  }
  .m-exp-batch-sum strong { margin-left: auto; font-family: var(--mono); font-size: 16px; }
  .m-exp-batch-cnt { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text3); }
  .m-exp-batch-row {
    display: flex; align-items: center; gap: 9px; cursor: pointer; background: #fff;
    padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 12px;
  }
  .m-exp-batch-row:active { background: var(--surface); }
  .m-exp-batch-row .mcard-thumb { width: 34px; height: 34px; border-radius: 8px; }
  .m-exp-batch-row .mcard-thumb img { border-radius: 8px; }
  .m-exp-cb { display: flex; align-items: center; flex-shrink: 0; }
  .m-exp-cb input { width: 20px; height: 20px; accent-color: var(--accent); }
  #m-exp-bulk-bar.show { display: flex !important; }
  #m-exp-bulk-bar {
    position: fixed; left: 0; right: 0; z-index: 82;
    bottom: calc(var(--m-bottombar-h) + env(safe-area-inset-bottom));
    flex-direction: column; gap: 8px; padding: 10px 12px 12px;
    background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -6px 18px rgba(0,0,0,.08);
  }
  .m-exp-bulk-line { display: flex; align-items: center; gap: 8px; }
  .m-exp-bulk-line .lbl { font-size: 12px; color: var(--text3); flex-shrink: 0; }
  .m-exp-bulk-line .finput { flex: 1; min-width: 0; }
  #m-exp-bulk-cnt { font-family: var(--mono); font-size: 15px; font-weight: 800; color: var(--accent); margin-right: 2px; }
  .m-exp-bulk-sum { margin-left: auto; font-family: var(--mono); font-size: 13px; font-weight: 800; color: var(--text); }
  .m-exp-bulk-hint { font-size: 10.5px; color: var(--text3); }
  #m-exp-bulk-go { flex-shrink: 0; min-width: 82px; justify-content: center; }
  /* 하단 바에 마지막 카드가 가리지 않게 목록 아래 여백을 준다 */
  #m-exp-body.m-exp-bulk-pad { padding-bottom: 124px; }
  .m-hide, .mfab.m-hide { display: none !important; }
  /* 직원 화면 — 결제일/승인 버튼 자리에 들어가는 읽기 전용 표시 */
  .m-exp-ro { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--text2); }
  .m-exp-wait {
    margin-left: auto; flex-shrink: 0; font-size: 11px; font-weight: 700;
    color: var(--text3); background: var(--surface); border-radius: 8px; padding: 4px 9px;
  }

  /* ═══ 표 → 카드 변환 (단가분석 등, mCardifyTable()이 붙이는 클래스) ═══ */
  .m-cardified { display: block !important; width: 100% !important; }
  .m-cardified thead { display: none; }
  .m-cardified tbody { display: block; }
  .m-cardified tr {
    display: block; background: #fff !important; border: 1px solid var(--border); border-radius: 12px;
    padding: 10px 12px; margin-bottom: 8px;
  }
  .m-cardified tr[data-mgrp] { background: var(--surface); border-style: dashed; font-weight: 700; padding: 8px 12px; }
  .m-cardified td { display: flex !important; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 0 !important; border: none !important; background: transparent !important; text-align: right; width: auto !important; }
  .m-cardified td[data-label]::before { content: attr(data-label); color: var(--text3); font-size: 11.5px; font-weight: 600; text-align: left; flex-shrink: 0; }

  /* ═══ 당겨서 새로고침(Pull to Refresh) + 저장 중 표시 ═══ */
  /* 그라데이션이 한 바퀴 도는 링 — 가운데를 mask로 도려내 "선"만 남긴다.
     새로고침/저장 중일 때만 .spin이 붙어 실제로 회전한다. */
  .m-spin-ring {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    background: conic-gradient(from 0deg,
      rgba(66,133,244,0) 0deg, rgba(66,133,244,.18) 90deg,
      var(--accent) 270deg, var(--accent-dk) 360deg);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 calc(100% - 3px));
            mask: radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 calc(100% - 3px));
  }
  .m-spin-ring.spin { animation: mSpinRing .7s linear infinite; }
  @keyframes mSpinRing { to { transform: rotate(360deg); } }

  #m-ptr {
    display: flex !important; align-items: center; justify-content: center;
    position: fixed; z-index: 480;
    top: calc(env(safe-area-inset-top) + 6px); left: 50%; margin-left: -18px;
    width: 36px; height: 36px;
    background: #fff; border-radius: 50%;
    box-shadow: 0 2px 10px rgba(26,31,54,.18);
    opacity: 0; transform: translateY(-52px); pointer-events: none;
  }
  /* 손가락을 따라 움직이는 동안은 transition 없이(JS가 매 프레임 transform을 씀),
     손을 뗀 뒤 제자리로 돌아갈 때만 .anim을 붙여 부드럽게 */
  #m-ptr.anim { transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .2s ease; }

  #m-saving {
    display: none !important; position: fixed; inset: 0; z-index: 850;
    align-items: center; justify-content: center;
    background: rgba(26,31,54,.28); backdrop-filter: blur(2px);
  }
  #m-saving.show { display: flex !important; }
  .m-saving-box {
    display: flex; align-items: center; gap: 11px;
    background: #fff; border-radius: 14px; padding: 16px 22px;
    box-shadow: var(--sh2); animation: mdlIn .18s ease;
  }
  /* 저장 진행률 게이지 — 가운데가 뚫린 도넋. conic-gradient는 12시 방향에서 시작해
     시계방향으로 칠해지므로, 채울 양(--p)만 바꿔주면 0% → 100%로 차오른다.
     가운데 구멍은 ::after로 흰 원을 하나 여백만큼 안쪽에 여러 만든다. */
  .m-save-gauge {
    --p: 0%;
    position: relative; flex-shrink: 0;
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: conic-gradient(var(--accent) var(--p), var(--border) 0);
  }
  .m-save-gauge::after {
    content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #fff;
  }
  .m-save-gauge span {
    position: relative; z-index: 1;
    font-family: var(--mono); font-size: 13px; font-weight: 800; color: var(--accent);
  }
  .m-saving-txt { font-size: 13px; font-weight: 700; color: var(--text2); }

  /* ═══ 발주 선택 2줄 카드 (일정 추가의 발주번호 목록 · 검수일정 미입력 목록 공용) ═══
     여백·글자 크기·줄 간격은 일정 목록 팝업 카드(app.js renderSchedCalEvents)와 같은 값이라,
     두 목록을 나란히 놓아도 카드 높이가 똑같이 보인다. */
  /* 카드 높이는 일정 목록 팝업 쪽(mobile-shell.js mFixSchedCalEvents)과 이 변수 하나를 같이 쓴다 */
  :root { --m-sched-row-h: 60px; }
  .m-ord-list { max-height: 244px; overflow-y: auto; }
  .m-ord-row {
    display: flex; flex-direction: column; justify-content: center; box-sizing: border-box;
    min-height: var(--m-sched-row-h);
    padding: 6px 8px; margin-bottom: 4px; border-radius: 6px; font-size: 11px;
    background: #fff; border: 1px solid var(--border); cursor: pointer;
  }
  .m-ord-row:last-child { margin-bottom: 0; }
  .m-ord-row.on { background: var(--accent-lt); border-color: var(--accent); }
  .m-ord-row-miss { background: var(--red-lt); border-color: rgba(234,67,53,.2); }
  /* 검수일정 미입력 박스만 글자를 살짝 줄임(일정 추가 카드 목록은 그대로 둠) */
  .m-ord-row-miss .m-ord-no { font-size: 11.5px; }
  .m-ord-row-miss .m-ord-fac { font-size: 10px; }
  .m-ord-row-miss .m-ord-l2 { font-size: 11px; }
  .m-ord-row-miss .m-ord-more { font-size: 10.5px; }
  /* 글자 색·칩 모양은 홈 화면 검수일정 카드(mobile-shell.js mInspRowHtml)와 같은 규칙 —
     발주번호는 검정, 공장명은 둥근 네모 칩, 제품코드는 파란색, 색상은 드롭다운 색 칩 */
  .m-ord-l1 { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
  .m-ord-no { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--text); flex-shrink: 0; }
  .m-ord-fac {
    flex-shrink: 0; max-width: 55%;
    font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: 4px;
    background: var(--surface); border: 1px solid var(--border); color: var(--text2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .m-ord-l2 { display: flex; align-items: center; gap: 5px; font-size: 12px; }
  .m-ord-prod { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-ord-code { font-family: var(--mono); font-weight: 700; color: var(--accent); }
  .m-ord-name { color: var(--text3); }
  .m-ord-color { flex-shrink: 0; display: inline-flex; }
  .m-ord-more { font-family: var(--mono); font-weight: 400; color: var(--text2); flex-shrink: 0; }
  .m-ord-empty { font-size: 11.5px; color: var(--text3); padding: 8px 2px; }

}

/* ═══════════════════════════════════════════════════════════
   태블릿 (600px 이상 + 손가락 입력) — 모바일 셸을 그대로 쓰되, 넓어진 가로폭을
   "확대"가 아니라 "더 많이 보여주는" 쪽으로 쓴다. 위 모바일 규칙 다음에 오므로
   여기서 덮어쓰는 항목만 태블릿에서 달라지고, 나머지 동작·구성은 모바일과 완전히 같다.
   (휴대폰 가로모드도 이 폭에 들어오는데, 2열 카드·여백 확대는 그 경우에도 이득이라 그대로 둔다)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 600px) and (max-width: 1599.98px) and (pointer: coarse) {

  /* ── 본문 여백 — 화면이 넓어진 만큼 좌우를 넉넉히 ── */
  #page-wrap {
    padding: calc(16px + env(safe-area-inset-top)) 24px
             calc(var(--m-bottombar-h) + 20px + env(safe-area-inset-bottom)) !important;
  }

  /* ── 카드 목록을 2열로 ──
     컨테이너에는 카드만 들어있는 게 아니라 그룹 헤더("공장별 묶기" 등)·"더 보기" 버튼·
     "항목 없음" 안내도 섞여 있다. 그래서 기본은 한 줄 전체를 쓰게 하고(grid-column:1/-1),
     .mcard 만 2열 흐름에 태운다 — JS는 한 줄도 고치지 않아도 된다. */
  #m-as-body, #m-smp-body, #m-exp-body, #m-pr-body, #mh-ord-list,
  #m-smpst-prog-body, #m-smpst-done-body, #mh-my-insp-list, #m-notif-panel-body,
  #mh-insp-overdue .m-insp-od {
    /* 1fr은 "내용보다 좁아지지 않음"이라, 줄바꿈 없는 글자(발주번호 · 날짜)가 긴 카드는 칸이 화면보다 넓어져
       오른쪽이 잘렸다 — minmax(0,1fr)로 두 칸을 항상 화면 폭에 맞추고, 넘치는 제품명은 말줄임(…) */
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start;
  }
  #m-as-body > *, #m-smp-body > *, #m-exp-body > *, #m-pr-body > *, #mh-ord-list > *,
  #m-smpst-prog-body > *, #m-smpst-done-body > *, #mh-my-insp-list > *, #m-notif-panel-body > *,
  #mh-insp-overdue .m-insp-od > * { grid-column: 1 / -1; }
  #m-as-body > .mcard, #m-smp-body > .mcard, #m-exp-body > .mcard, #m-pr-body > .mcard, #mh-ord-list > .mcard,
  #m-smpst-prog-body > .mcard, #m-smpst-done-body > .mcard, #mh-my-insp-list > .mcard, #m-notif-panel-body > .mcard,
  #mh-insp-overdue .m-insp-od > .mcard {
    grid-column: auto; margin-bottom: 0; min-width: 0;
  }
  /* 지난 검수 · 미등록 카드도 아래 검수 예정 카드와 같은 높이로(2열 줄이 가지런하게) */
  #mh-insp-overdue .m-insp-od > .mcard { height: 60px; }

  /* ── 홈 타일 — 2열이면 타일이 지나치게 넓어지므로 3열로 늘려 비율을 지킨다 ── */
  .m-home-grid { gap: 10px; } /* 제품 보기(한 줄 전체) + 일정 관리 · 비용청구(한 줄 2칸) */
  .m-home-card[data-p="as"],
  .m-home-card[data-p="sampleStatus"], .m-home-card[data-p="productsView"] { height: 112px; }
  #pg-home .m-hc { height: 112px; }

  /* ── 하단 탭바 — 폭 전체에 5개를 늘어놓으면 손가락이 화면 끝까지 가야 한다.
     바 자체는 그대로 두고 탭만 가운데로 모아 엄지 닿는 범위 안에 들어오게 한다 ── */
  #m-bottombar {
    padding-left: max(env(safe-area-inset-left), 12%);
    padding-right: max(env(safe-area-inset-right), 12%);
  }

  /* ── 서랍 메뉴 — 폭이 넓어졌으니 글자와 여백도 함께 ── */
  #sb { width: min(calc(44vw / var(--m-vz, 1)), 340px) !important; }
  .sb-link { min-height: 48px; font-size: 14.5px; }

  /* ── 팝업 — 400px에 묶어두면 태블릿에선 화면 한가운데 작은 쪽지처럼 보인다 ── */
  #m-sched-add .mdl, #sched-preview-modal .mdl, #m-smp-preview-modal .mdl, #notice-detail-modal .mdl,
  #notice-add-modal .mdl, #m-exp-detail .mdl, #m-oe-comp-modal .mdl, #notice-photo-lightbox .mdl,
  #m-as-preview-modal .mdl, #m-prod-info .mdl, #m-pr-preview-modal .mdl, #notice-login-popup .mdl {
    max-width: 560px !important;
    max-height: calc(88vh / var(--m-vz, 1)) !important;
  }

  /* ── 우측 슬라이드 상세 패널 — 전체화면으로 덮으면 뒤 목록이 안 보여 맥락이 끊긴다.
     태블릿에서는 오른쪽 일부만 덮고 뒤 화면이 비치게 한다 ── */
  #pp, #smpp, #sp, #bmp, #ntp { width: min(640px, calc(76vw / var(--m-vz, 1))) !important; right: calc(-100vw / var(--m-vz, 1)) !important; }
  #pp.open, #smpp.open, #sp.open, #bmp.open, #ntp.open { right: 0 !important; }

  /* ── A/S 등록·수정(#m-as)과 견적 요청 등록(#m-pr-add-modal) — 샘플 등록/수정(#smpp)과 같은 "사이드 보기":
     화면 오른쪽에 붙은 세로 전체 높이 패널로, 오른쪽에서 밀려 들어오고 뒤 목록은 옅게 비친다 ── */
  #m-as.moverlay, #m-pr-add-modal.moverlay {
    justify-content: flex-end !important; align-items: stretch !important;
    background: rgba(26,31,54,.18); backdrop-filter: none;
  }
  #m-as .mdl, #m-pr-add-modal .mdl {
    width: min(640px, calc(76vw / var(--m-vz, 1))) !important; max-width: none !important;
    height: calc(100vh / var(--m-fs, 1)) !important; max-height: none !important;
    border-radius: 0 !important; border-left: 1px solid var(--border);
    box-shadow: var(--sh2); overflow-y: auto;
    animation: mSideIn .28s cubic-bezier(.4,0,.2,1);
  }
  @keyframes mSideIn { from { transform: translateX(100%); } to { transform: none; } }
  /* 업무 알림(#m-notif-panel)도 같은 사이드 보기 — 알림 목록이라 폭은 조금 좁게, 목록이 패널 높이를 꽉 채워 스크롤 */
  #m-notif-panel.moverlay {
    justify-content: flex-end !important; align-items: stretch !important;
    background: rgba(26,31,54,.18); backdrop-filter: none;
  }
  #m-notif-panel .mdl {
    width: min(480px, calc(60vw / var(--m-vz, 1))) !important; max-width: none !important;
    height: calc(100vh / var(--m-fs, 1)) !important; max-height: none !important;
    border-radius: 0 !important; border-left: 1px solid var(--border);
    box-shadow: var(--sh2); display: flex; flex-direction: column;
    animation: mSideIn .28s cubic-bezier(.4,0,.2,1);
  }
  #m-notif-panel .mdl-h { flex-shrink: 0; }
  #m-notif-panel #m-notif-panel-body { flex: 1; min-height: 0; max-height: none !important; overflow-y: auto; }
  /* 목록이 패널 높이를 꽉 채우면 그리드가 남는 높이를 줄마다 나눠 카드가 가운데로 퍼져 보였다 — 위에서부터 차곡차곡.
     좁은 사이드 패널이라 2열 대신 한 줄에 하나씩 */
  #m-notif-panel-body { align-content: start; grid-template-columns: 1fr !important; }
  #m-notif-drag { display: none; } /* 태블릿은 사이드 보기라 위로 올려 닫는 손잡이가 필요 없다 */
  /* 오늘 브리핑의 태블릿 배치는 파일 맨 아래 "폭 600px 이상" 구간에 있다(터치 여부와 상관없이 폭으로만 판단) */
  #m-notif-panel .mdl-h { touch-action: auto; }

  /* ── 전체화면 필터 패널 — 왼쪽에서 들어오는 패널이므로 왼쪽 일부만 차지하면 충분하다 ── */
  #smp-filter-panel, #pv-filter-panel, #as-filter-panel, #pr-filter-panel, #sched-filter-card {
    right: auto !important; width: min(460px, calc(58vw / var(--m-vz, 1))) !important;
    box-shadow: var(--sh2);
  }

  /* ── 터치 크기 — 모바일보다 한 단계 더 여유 있게 ── */
  .btn { min-height: 44px; }
  .finput, .fselect, .ftextarea { min-height: 44px; }
  .m-pill { min-height: 38px; }
}

/* ═══════════════════════════════════════════════════════════
   진짜 태블릿(가로·세로 어느 쪽이든 짧은 변도 600px 이상) — 하단 탭바를
   접이식 좌측 사이드바로 바꾼다. 휴대폰은 가로로 눕혀도 짧은 변(세로 길이)이
   600px를 못 넘어서 이 규칙 밖이라 계속 하단 탭바를 그대로 쓴다(바로 위
   "태블릿" 섹션의 2열 카드·여백 확대 등은 폭 조건만 같으면 전화기 가로모드에도
   그대로 적용되지만, 이 블록은 "탭바 위치"까지 바꾸는 것이라 더 엄격하게 가른다).
   --m-bottombar-h를 0으로 되돌리면, 이 변수를 참조하는 FAB·바텀시트·페이지
   하단 여백(위쪽 여러 규칙)이 전부 "바텀바가 없어진" 계산으로 저절로 맞춰진다.
   기본값(가로=펼침/세로=접힘)과 사용자가 누른 뒤 기억하는 로직은
   js/mobile-shell.js의 mApplySidebarState()/mToggleSidebarExpand()가 담당한다. */
@media (min-width: 600px) and (max-width: 1599.98px) and (min-height: 600px) and (pointer: coarse) {
  :root { --m-bottombar-h: 0px; --m-sb-w: 80px; --m-sb-w-open: 216px; }

  /* 카드 사이/아래 빈 공간에 페이지 배경(연회색 #F8F9FA)이 드러나 보이던 것 자체를 없앤다 —
     그리드 정렬(stretch)이 잘 먹었는지와 상관없이, 배경을 흰색으로 통일해서 카드와 구분이
     아예 안 보이게(=빈 공간이 "박스"처럼 안 보이게) 만든다. 태블릿 화면에서만 적용. */
  body { background: var(--white) !important; }

  /* 하단 빈 흰 영역의 원인 — 아래 "글자 크기 조절" 섹션의 #main{height:calc(100vh / var(--m-fs))}.
     zoom이 vh에 먹는 방식이 브라우저/WebView마다 달라서 글자 크기를 "작게" 등으로 바꾸면
     #main(=본문 스크롤 영역 #page-wrap의 부모)이 화면보다 짧게 계산되고, 그 아래로 body 배경이
     빈 네모처럼 드러났다. vh 계산을 버리고 화면 네 변에 직접 붙여서 높이 자체가 항상 화면과
     같게 한다. (#sb는 모바일 셸에서 이미 fixed 서랍이라 #app 흐름에 끼지 않는다) */
  #main { position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: auto !important; }

  #page-wrap {
    padding: calc(16px + env(safe-area-inset-top)) 24px 20px
             calc(var(--m-sb-w) + 24px + env(safe-area-inset-left)) !important;
  }
  /* 사이드바가 펼쳐지면(m-sb-open) 그만큼 본문 왼쪽 여백도 같이 넓혀야, 넓어진 사이드바가
     본문 내용을 가리지 않는다 (#m-bottombar와 #page-wrap은 #main의 형제 요소) */
  #m-bottombar.m-sb-open ~ #page-wrap {
    padding-left: calc(var(--m-sb-w-open) + 24px + env(safe-area-inset-left)) !important;
  }

  #m-bottombar {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    left: 0; right: auto; top: 0; bottom: 0;
    width: var(--m-sb-w);
    /* 높이는 위 top:0/bottom:0으로 화면 끝까지 맞춘다 — vh 계산은 zoom 처리 방식에 따라
       화면보다 짧아질 수 있어서 쓰지 않는다(#main도 같은 이유로 fixed 네 변 고정). */
    height: auto;
    border-top: none;
    border-right: 1px solid var(--border);
    padding: calc(12px + env(safe-area-inset-top)) 8px calc(12px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
    gap: 2px;
    transition: width .18s ease;
    /* overflow:hidden을 주면 아래 토글 버튼(사이드바 오른쪽 가장자리에 절반 걸쳐 떠 있음)이
       잘려서 반쪽만 보인다 — 각 항목 라벨은 자기 자신에 이미 overflow:hidden;width:0이
       걸려 있어서 여기서 다시 안 잘라도 접힘 애니메이션 중 글자가 새어나오지 않는다. */
  }
  #m-bottombar.m-sb-open { width: var(--m-sb-w-open); }

  /* 접힘/펼침 토글 — 사이드바 위쪽에 큰 막대로 두는 대신, VSCode/Notion 같은 앱처럼
     사이드바 오른쪽 가장자리에 반쯤 걸친 작은 원형 손잡이로 둔다(세로 중앙, 항상 같은 자리라
     찾기 쉽고, 탭 목록 위쪽 자리를 잡아먹지 않는다). */
  #m-sb-toggle-btn {
    display: flex !important;
    position: absolute;
    top: 50%; right: -13px;
    transform: translateY(-50%);
    width: 26px; height: 26px; margin: 0; flex-shrink: 0;
    align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 50%;
    background: #fff; color: var(--text2);
    box-shadow: var(--sh1);
    cursor: pointer;
    z-index: 5;
  }
  #m-sb-toggle-btn:active { background: var(--surface); }
  #m-sb-toggle-btn span { display: flex; transition: transform .18s ease; }
  #m-bottombar.m-sb-open #m-sb-toggle-btn span { transform: rotate(180deg); }

  .m-sb-extra { display: flex !important; }
  /* 하단바 메뉴 설정은 휴대폰 전용 — 태블릿 사이드바는 고른 것과 상관없이 원래 항목 · 순서 그대로 */
  #m-bottombar .m-tab.m-bb-off:not(.m-bb-phone-only) { display: flex !important; }
  #m-bottombar .m-tab.m-bb-phone-only { display: none !important; }
  .m-bb-setting { display: none !important; }

  /* 사이드바 순서 · 보이는 메뉴 — 내정보 > 설정 > 사이드바 메뉴에서 고른 대로(mApplyTabletSidebar가 --sb-order와
     m-sbt-on/off를 붙임). 홈은 맨 위, 발주 입력 · 내정보는 맨 아래 고정. 휴대폰 하단바도 같은 버튼들을 쓰므로
     HTML 순서는 그대로 두고 태블릿에서만 order로 바꾼다. 권한으로 숨긴 메뉴는 인라인 !important라 여기서 못 켠다 */
  #m-bottombar .m-tab { order: var(--sb-order, 1); }
  #m-bottombar .m-tab[data-p="home"] { order: 1; }
  #m-bottombar .m-tab[data-p].m-sbt-on { display: flex !important; }
  #m-bottombar .m-tab[data-p].m-sbt-off { display: none !important; }
  #m-bottombar #m-sb-oe { order: 95; }
  #m-bottombar .m-tab[data-p="m-settings"] { order: 99; }
  .fgrp.mobile-only.m-tsb-setting { display: block !important; } /* 아래쪽 공통 숨김(.fgrp.m-tsb-setting)보다 우선 */


  /* 일정 — 왼쪽 위 월 선택을 두 배 폭(약 208px, 테두리 없음)으로. 오른쪽 "검수일정 미입력"
     버튼은 남는 폭을 채우는 방식(flex:1)이라 늘어난 만큼 자동으로 줄어든다 */
  #sched-cal-lbl-btn {
    width: 208px; height: 38px; flex-shrink: 0; justify-content: center; gap: 6px !important;
    border: none !important; border-radius: 10px; background: #fff !important;
  }
  #sched-cal-lbl { min-width: 0 !important; }

  /* A/S 상태 카테고리 — 답변대기(모래시계)·진행중(돌아가는 화살표) 아이콘 */
  .m-detail-steps { display: flex !important; padding: 2px 4px 12px; margin-bottom: 12px !important; border-bottom: 1px solid var(--border); }
  /* 단가요청 상세 버튼 줄 — 본문과 같은 좌우 여백 + 아래 여백 */
  #m-pr-preview-modal .mdl-foot, #m-pr-add-modal .mdl-foot { padding: 11px 17px 15px; margin-top: 4px; }
  .m-done-total.show { display: block !important; font-size: 12px; color: var(--text3); font-family: var(--mono); margin: -2px 2px 10px; }
  .m-done-total strong { color: var(--text); }
  /* 검수일정 미입력 팝업 — 칸 높이는 본문을 6등분한 값(mSizeSchedInspRows)이라 2열×6행 12개가 한눈에, 글자도 크게 */
  #sched-missing-insp-mobile-slot #sched-missing-insp .m-ord-row {
    height: var(--m-miss-row-h, 80px); min-height: 0; margin: 0; padding: 8px 14px; gap: 4px; border-radius: 10px;
  }
  #sched-missing-insp .m-ord-row-miss .m-ord-no { font-size: 15px; }
  #sched-missing-insp .m-ord-row-miss .m-ord-fac { font-size: 12px; }
  #sched-missing-insp .m-ord-row-miss .m-ord-l2 { font-size: 13.5px; }
  #sched-missing-insp .m-ord-row-miss .m-ord-more { font-size: 12.5px; }
  /* 컨테이너 팝업 — 선택한 제품 목록: 가로 모드는 2열, 코드·제품명 왼쪽에 작은 제품 사진 */
  .m-oe-cart-thumb {
    display: flex; width: 38px; height: 38px; flex-shrink: 0; border-radius: 8px; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border); align-items: center; justify-content: center; color: var(--text3);
  }
  .m-oe-cart-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* 컨테이너 팝업 — 태블릿은 줄·글자·사진·수량 버튼을 한 단계 크게 */
  #m-oe-cart .m-oe-cart-row { padding: 12px 0; gap: 12px; }
  #m-oe-cart .m-oe-cart-thumb { width: 48px; height: 48px; border-radius: 10px; }
  #m-oe-cart .m-oe-cart-row-code { font-size: 13px; }
  #m-oe-cart .m-oe-cart-row-name { font-size: 14px; }
  #m-oe-cart .m-oe-cart-row-amt { font-size: 14px; min-width: 70px; }
  #m-oe-cart .m-oe-cart-row .m-oe-qty-row { gap: 3px; padding: 3px; }
  #m-oe-cart .m-oe-cart-row .m-oe-qty-btn { width: 32px; height: 28px; font-size: 15px; }
  #m-oe-cart .m-oe-cart-row .m-oe-qty-val { width: 38px; height: 28px; font-size: 14px; }
  #m-oe-cart .m-oe-cart-row-del svg { width: 17px; height: 17px; }
  #m-oe-cart .m-oe-cart-total-line { font-size: 14px; padding: 12px 0; }
  #m-oe-cart .m-oe-cart-total-line strong { font-size: 17px; }
  /* 비용청구 일괄 승인 하단 바 — 왼쪽 사이드바에 가리지 않게 사이드바 폭만큼 비켜서 시작 */
  #m-bottombar ~ #page-wrap #m-exp-bulk-bar { left: calc(var(--m-sb-w) + env(safe-area-inset-left)) !important; }
  #m-bottombar.m-sb-open ~ #page-wrap #m-exp-bulk-bar { left: calc(var(--m-sb-w-open) + env(safe-area-inset-left)) !important; }
  /* 발주 입력 하단 컨테이너 바(검정) — 같은 이유로 사이드바 오른쪽 12px 떨어진 곳부터 */
  #m-bottombar ~ #page-wrap .m-oe-cartbar { left: calc(var(--m-sb-w) + 12px + env(safe-area-inset-left)); }
  #m-bottombar.m-sb-open ~ #page-wrap .m-oe-cartbar { left: calc(var(--m-sb-w-open) + 12px + env(safe-area-inset-left)); }
  /* 검수일정 미입력 팝업 — 태블릿은 2열 */
  #sched-missing-insp-mobile-slot #sched-missing-insp { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; align-content: start; }
  /* 발주 입력 하단 컨테이너 바 — 세로 20% 더 크게 */
  .m-oe-cartbar { padding-top: 17px; padding-bottom: 17px; }
  #m-pr-seg:not(.hidden) { display: flex !important; }
  #m-as-seg .m-seg-ico, #m-pr-seg .m-seg-ico { display: inline-block; vertical-align: -2px; margin-right: 4px; }

  /* 단가요청 카드·상세의 상태 라벨 — 글자 왼쪽 동그란 점 없앰 */
  #m-pr-body .badge::before, #m-pr-preview-modal .badge::before { display: none; }

  /* SAMPLE 카드 오른쪽 위 — 가격을 먼저, 상태 라벨을 맨 오른쪽으로(휴대폰은 그대로) */
  .m-smp-hd .m-smp-price { order: 1; }
  .m-smp-hd > .badge, .m-smp-hd > :not(.mcard-title):not(.m-smp-price) { order: 2; }
  /* 발주 입력 — 홈 카드 대신 사이드바 목록 맨 끝의 검정 띠(흰 글씨)로. 접힘 상태에서는 아이콘만 보이는 검정 칸 */
  #mh-orderentry-card.mobile-only.m-oe-ok { display: none !important; }
  #m-bottombar #m-sb-oe.m-oe-ok {
    display: flex !important;
    background: #202124; color: #fff; margin-top: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
  }
  #m-bottombar #m-sb-oe .m-tab-lbl { font-weight: 700; }
  #m-bottombar #m-sb-oe:active { background: #000; }
  /* 발주 입력 화면에 있는 동안 — 검정 띠가 파란 띠로 바뀌어 "지금 이 화면"임을 보여준다
     (다른 메뉴의 선택 표시처럼 아이콘을 파랗게 채우는 규칙은 파란 배경에서 안 보이므로 흰 선으로 되돌림) */
  #m-bottombar #m-sb-oe.m-oe-ok.active {
    background: var(--accent); color: #fff;
    box-shadow: 0 0 0 3px var(--accent-lt), 0 2px 8px rgba(66,133,244,.45);
  }
  #m-bottombar #m-sb-oe.active svg { fill: none; stroke: #fff; filter: none; }

  #m-bottombar .m-tab {
    flex: none;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    height: 46px;
    padding: 0 11px;
    border-radius: 10px;
  }
  #m-bottombar.m-sb-open .m-tab { justify-content: flex-start; }
  /* 내정보는 다른 메뉴들과 떨어뜨려 사이드바 맨 아래에 고정 — 나머지 항목은 위에서부터,
     이 항목만 margin-top:auto로 남는 공간을 밀어내며 바닥에 붙는다 */
  #m-bottombar .m-tab[data-p="m-settings"] { margin-top: auto; }
  #m-bottombar .m-tab.active { background: var(--accent-lt); }
  #m-bottombar .m-tab.active::before { content: none; }
  #m-bottombar .m-tab-lbl {
    opacity: 0; width: 0; overflow: hidden; white-space: nowrap;
    transition: opacity .12s ease;
  }
  #m-bottombar.m-sb-open .m-tab-lbl { opacity: 1; width: auto; }
  #m-bottombar .m-tab-badge { position: static; margin-left: auto; flex-shrink: 0; }
  #m-bottombar:not(.m-sb-open) .m-tab-badge.show {
    display: flex; position: absolute; top: 4px; left: 42px; right: auto;
  }

  /* 홈 화면 — PC 대시보드 7개 박스를 보여주고, 같은 내용을 요약 카드로 중복 보여주던
     "진행중인 단가 요청"/"진행 중인 발주" 버튼 박스는 숨긴다(같은 데이터가 대시보드
     박스 안에 이미 목록으로 나옴). 검수일정·발주입력 카드는 PC 대시보드에 없는
     모바일 전용 기능이라 그대로 둔다. */
  #mh-pr-card, #mh-ord-card { display: none !important; }
  /* 업무 지시 — 태블릿은 휴대폰용 버튼 대신 대시보드 격자의 박스(data-dash-box="wo")로 보여준다 */
  #mh-wo-card { display: none !important; }
  /* 태블릿 홈은 대시보드 박스만 — 하늘색 검수일정 카드(같은 내용이 "검수 일정" 박스로 나옴)와
     제품보기·일정관리·A/S관리·SAMPLE현황·비용청구 바로가기 칸(모두 사이드바에 있음)은 숨긴다 */
  #mh-insp-card, #pg-home .m-home-grid, #mh-quick-row { display: none !important; }
  /* 태블릿 홈 대시보드 — 2열 격자. 각 박스의 칸 위치·세로 크기는 태블릿 전용 배치(내정보 >
     대시보드 배치)를 applyDashboardLayout()이 인라인 스타일로 얹는다(아래 grid-auto-rows 참고).
     예전의 "가리는 버그"는 자동 채움(dense) 배치에서 생겼던 것 — 지금은 모든 박스가 명시적인 칸에 놓인다. */
  .m-tablet-dash {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    /* align-items:start를 쓰면 같은 줄의 두 카드 중 짧은 쪽 밑에 빈 배경이 그대로 드러나
       보인다(신고해주신 "하단부 회색/검은 네모"가 바로 이 빈 공간) — stretch로 바꿔서
       짧은 카드도 옆 카드 높이만큼 자기 흰 배경으로 채우게 한다(빈 공간 자체가 없어짐). */
    align-items: stretch;
    margin-bottom: 14px;
  }
  /* 칸 위치·세로 크기는 태블릿 전용 배치(내정보 > 대시보드 배치, app_settings.dashboard_layout_tablet)를
     applyDashboardLayout()이 인라인 grid-column/grid-row로 그대로 얹는다 — PC와 같은 방식.
     줄 하나(1칸) 높이를 고정하고, 박스는 차지한 줄 높이를 꽉 채우며 목록 칸이 남는 높이를 채운 뒤 스크롤
     (목록 칸이 height:0 + flex:1이라 데이터 양이 줄 높이를 밀어 올리지 않는다 — 데이터가 없어도 크기 유지).
     1칸 = 기본 박스(제목줄 + 목록 336px)의 절반, 2칸 = 기본 박스 하나. */
  .m-tablet-dash { grid-auto-rows: calc((384px - 12px) / 2); }
  .m-tablet-dash > .card { display: flex; flex-direction: column; min-height: 0; }
  .m-tablet-dash > .card .dash-mini-scroll { flex: 1 1 auto; height: 0; min-height: 0; max-height: none; }

  /* 홈 인사말 줄 — 태블릿은 본문 배경이 흰색이라 줄 배경도 흰색으로. 스크롤하면 sticky가
     #page-wrap의 위쪽 여백(16px + 안전영역) 아래에서 멈춰 그 틈으로 아래 카드가 비쳐 보였다 —
     top을 그 여백만큼 음수로 줘서 화면 맨 위에 붙이고, 같은 만큼 padding-top/margin-top으로
     되돌려 처음 위치(스크롤 전)는 그대로 둔다. 좌우도 태블릿 여백(24px)만큼 늘려 옆으로 비치는 것을 막는다. */
  #pg-home .sec-hd {
    background: var(--white);
    top: calc(-16px - env(safe-area-inset-top));
    margin: calc(-16px - env(safe-area-inset-top)) -24px 14px;
    padding: calc(16px + env(safe-area-inset-top)) 24px 10px;
  }
  #pg-home .sec-hd::before { content: none; }
  .m-tablet-dash .card-title { font-size: 13px !important; }
  /* 내정보 > 대시보드 배치 편집기 — PC(app/index.html)와 같은 모양. 팝업은 바텀시트가 아니라 화면 중앙 */
  #m-dash-layout-card { display: block; }
  #dash-layout-modal.moverlay { align-items: center !important; }
  #dash-layout-modal .mdl {
    width: min(760px, calc(92vw / var(--m-vz, 1))) !important; max-width: 760px !important; max-height: calc(88vh / var(--m-vz, 1)) !important;
    border-radius: var(--rl) !important;
  }
  #dash-layout-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .dl-cell { border: 1.5px dashed var(--border); border-radius: var(--rl); }
  .dl-drop { border: 2px solid var(--accent); border-radius: var(--rl); background: var(--accent-lt); opacity: .55; pointer-events: none; z-index: 3; }
  .dl-tile {
    display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--rl); background: var(--white); box-shadow: var(--sh0);
    cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; z-index: 2;
  }
  .dl-tile.dl-large { align-items: flex-start; padding-top: 14px; }
  .dl-grip { color: var(--text3); flex-shrink: 0; }
  .dl-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dl-size { display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 2px; flex-shrink: 0; }
  .dl-size button {
    border: none; background: transparent; color: var(--text3); font-size: 11.5px; font-weight: 600; font-family: var(--font);
    padding: 5px 8px; border-radius: 5px; cursor: pointer; white-space: nowrap;
  }
  .dl-size button.on { background: var(--accent); color: #fff; }
  .dl-tile.dl-dragging { opacity: .35; border-style: dashed; box-shadow: none; }
  .dl-ghost { position: fixed; z-index: 3000; pointer-events: none; box-shadow: var(--sh2); opacity: .95; }
  #dash-layout-list.dl-readonly .dl-tile { cursor: default; }
  .dl-hide {
    flex-shrink: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text3); padding: 0;
  }
  .dl-hide:active { color: var(--red); border-color: var(--red); }
  #dash-layout-hidden:not(:empty) { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
  .dl-hidden-ttl { font-size: 12.5px; font-weight: 700; color: var(--text2); margin-bottom: 8px; }
  .dl-hidden-ttl span { color: var(--text3); font-weight: 600; }
  .dl-hidden-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .dl-hidden-chip {
    display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px;
    border: 1px dashed var(--border2); border-radius: 999px; font-size: 12.5px; color: var(--text3);
  }
  .dl-hidden-chip button {
    border: none; background: var(--accent-lt); color: var(--accent); font-size: 12px; font-weight: 700;
    font-family: var(--font); padding: 5px 11px; border-radius: 999px;
  }
  /* 수수료 미정산 — 태블릿 앱에는 수수료 정산 화면이 없어(비용청구로 잘못 넘어갔다) 눌러도 이동하지 않게.
     줄은 pointer-events:none이라 눌러도 반응이 없고, 목록 스크롤은 부모 칸이 그대로 받는다 */
  #m-tablet-dash [data-dash-box="fee"] .dash-mini-row { pointer-events: none; cursor: default; }



  /* 제품 보기 — 태블릿은 카드형을 기본 5열로 (리스트형 m-list-mode는 flex라 영향 없음.
     세로일 때는 아래 별도 규칙이 4열로 다시 줄인다) */
  #prod-grid-v:not(.m-list-mode) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  /* 카드형 사진 칸은 고정 높이(170px) 대신 카드 폭에 맞춘 정사각형(1:1) */
  #prod-grid-v:not(.m-list-mode) .prod-img { height: auto; aspect-ratio: 1 / 1; }
}
/* 제품 보기 — 태블릿 "세로"는 폭이 좁아 5열이 너무 빽빽해서 4열로 줄인다(가로는 5열 유지) */
@media (min-width: 600px) and (max-width: 1599.98px) and (min-height: 600px) and (pointer: coarse) and (orientation: portrait) {
  #prod-grid-v:not(.m-list-mode) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  /* 검수일정 2열 — 세로는 한 칸이 330px 남짓이라 발주번호가 잘렸다. 담당자 · 날짜(달력 아이콘 빼고) · D-day 칸과
     여백을 줄여 발주번호 자리를 넓힌다(mInspRowHtml의 인라인 스타일을 덮어써야 해서 !important). 가로는 그대로 */
  #pg-insp-list .mcard.m-ir { gap: 6px !important; padding-left: 9px !important; padding-right: 9px !important; }
  #pg-insp-list .m-ir-mgr { width: 42px !important; padding: 2px 3px !important; font-size: 10.5px !important; }
  #pg-insp-list .m-ir-date { width: 42px !important; }
  #pg-insp-list .m-ir-date > .ico-svg { display: none !important; }
  #pg-insp-list .m-ir-day { width: 34px !important; }
  #pg-insp-list .m-ir-fac { max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ═══ 날짜 선택 달력 ═══ (모바일 셸 폭에서만) */
@media (max-width: 899.98px), (min-width: 900px) and (max-width: 1599.98px) and (pointer: coarse) {
  /* 날짜 칸은 글자칸으로 바뀌었지만 "누르면 달력이 뜬다"는 게 보이도록 달력 아이콘을 붙인다 */
  input[data-mdate] {
    cursor: pointer; font-family: var(--mono);
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2380868B' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
    padding-right: 34px !important;
  }
  #m-datepick .mdl { width: 100% !important; max-width: 360px !important; max-height: calc(88vh / var(--m-vz, 1)) !important; border-radius: 18px !important; }
  .m-dp-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
  .m-dp-nav {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px;
    border: 1px solid var(--border); background: #fff; color: var(--text2);
    font-size: 20px; line-height: 1; cursor: pointer;
  }
  .m-dp-nav:active { background: var(--surface); }
  .m-dp-ym {
    flex: 1; height: 40px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text); font-family: var(--font);
    font-size: 14px; font-weight: 800; cursor: pointer;
  }
  /* 연·월 빠른 이동 — 몇 달씩 떨어진 날짜를 고를 때 ‹ › 를 반복해 누르지 않아도 되게 */
  .m-dp-ympanel {
    border: 1px solid var(--border); border-radius: 10px; padding: 7px; margin-bottom: 10px;
  }
  .m-dp-ymrow { display: flex; flex-wrap: wrap; gap: 4px; }
  .m-dp-ymrow + .m-dp-ymrow { margin-top: 6px; border-top: 1px dashed var(--border); padding-top: 6px; }
  .m-dp-ymrow button {
    flex: 1 0 auto; min-width: 52px; min-height: 34px; border-radius: 8px;
    border: 1px solid var(--border); background: #fff; color: var(--text2);
    font-size: 12px; font-weight: 700; font-family: var(--font); cursor: pointer;
  }
  .m-dp-ymrow button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
  .m-dp-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
  .m-dp-wd span {
    text-align: center; font-size: 11px; font-weight: 700; color: var(--text3);
    font-family: var(--mono); padding: 4px 0;
  }
  .m-dp-wd span.sun { color: var(--red); }
  .m-dp-wd span.sat { color: #3b82f6; }
  .m-dp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
  /* 손가락으로 누르기 편하도록 한 칸을 정사각(최소 40px 남짓)으로 크게 */
  .m-dp-day {
    aspect-ratio: 1 / 1; min-height: 38px; border-radius: 10px;
    border: 1px solid transparent; background: transparent; color: var(--text);
    font-family: var(--mono); font-size: 13.5px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .m-dp-day:active { background: var(--surface); }
  .m-dp-day.sun { color: var(--red); }
  .m-dp-day.sat { color: #3b82f6; }
  .m-dp-day.out { color: var(--text3); opacity: .3; cursor: default; }
  .m-dp-day.off { color: var(--text3); opacity: .28; cursor: not-allowed; text-decoration: line-through; }
  .m-dp-day.today { border-color: var(--accent); font-weight: 800; }
  .m-dp-day.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 800; }
  .m-dp-quick { display: flex; gap: 6px; margin-top: 12px; }
  .m-dp-quick button {
    flex: 1; min-height: 38px; border-radius: 9px; border: 1px solid var(--border);
    background: #fff; color: var(--text2); font-size: 12px; font-weight: 700;
    font-family: var(--font); cursor: pointer;
  }
  .m-dp-quick button:last-child { color: var(--red); border-color: var(--red-lt); background: var(--red-lt); }
}

/* ═══ 글자 크기 조절 (설정 → 글자 크기) ═══
   zoom은 글자와 칸을 같은 비율로 함께 키워서 줄바꿈·간격이 어긋나지 않는다.
   다만 vh/vw는 zoom의 영향을 받지 않고 항상 "진짜 화면 크기"를 가리키므로,
   calc(100vh / var(--m-vz, 1))를 쓰는 칸들은 배율로 나눠서 화면 밖으로 넘치지 않게 보정한다.
   (--m-fs는 mobile-shell.js가 <html>에 직접 지정한다)
   --m-vz: zoom이 실제로 걸린 폭에서만 --m-fs, 그 밖(데스크톱 폭)은 1. 모든 vw/vh 값은
   calc(N단위 / var(--m-vz, 1))로 적어서, 글자 크기를 바꿔도 팝업·패널이 기본 상태와 같은
   화면 비율을 유지한다(예전엔 "작게"에서 전체화면 팝업이 90% 폭 · 높이로 줄어들었다). */
:root { --m-vz: 1; }
@media (max-width: 899.98px), (min-width: 900px) and (max-width: 1599.98px) and (pointer: coarse) {
  :root { --m-vz: var(--m-fs, 1); }
  body { zoom: var(--m-fs, 1); }
  #main, #sb, #pp, #smpp, #sp, #bmp, #ntp { height: calc(100vh / var(--m-fs, 1)) !important; }
  #sched-filter-card, #smp-filter-panel, #pv-filter-panel, #as-filter-panel, #pr-filter-panel,
  #login-screen, #login-loading, #login-find { height: calc(100vh / var(--m-fs, 1)) !important; }
  #m-sched-add .mdl, #sched-preview-modal .mdl, #m-smp-preview-modal .mdl, #notice-detail-modal .mdl,
  #notice-add-modal .mdl, #m-exp-detail .mdl, #m-oe-comp-modal .mdl, #notice-photo-lightbox .mdl,
  #m-as-preview-modal .mdl, #m-prod-info .mdl, #m-pr-preview-modal .mdl { max-height: calc(85vh / var(--m-fs, 1)) !important; }
  .moverlay { height: calc(100vh / var(--m-fs, 1)); }
}

/* 태블릿 가로 모드 — 컨테이너(발주 입력) 제품 목록 2열, 검수일정 미입력 3열 */
@media (min-width: 600px) and (max-width: 1599.98px) and (min-height: 600px) and (pointer: coarse) and (orientation: landscape) {
  #m-oe-cart-rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
  /* 검수일정 미입력 팝업 — 가로 모드는 3열(칸 높이는 본문 6등분 그대로 → 3열×6행 18개가 한눈에, 넘치면 스크롤) */
  #sched-missing-insp-mobile-slot #sched-missing-insp { grid-template-columns: repeat(3, 1fr); }
}

/* 권한으로 숨긴 박스·버튼 — .mobile-only{display:block!important} 보다 우선하도록 선택자를 더 구체적으로 */
html body .m-perm-hide { display: none !important; }

/* 오늘 브리핑 — 폭 600px 이상(태블릿)은 PC와 동일하게 3열 카드, 확인 버튼 없이 ✕·바깥 누르기로 닫음.
   태블릿 구간(pointer: coarse)에 두면 터치 판정이 안 되는 환경에서 휴대폰용 2열이 나와서, 폭으로만 판단하도록
   파일 맨 끝(휴대폰 규칙보다 뒤)에 둔다. 휴대폰용 큰 글자·좁은 칩도 여기서 PC 크기로 되돌린다. */
@media (min-width: 600px) {
  #m-morning-briefing.moverlay { padding: 12px !important; }
  #m-morning-briefing .mdl { width: 100% !important; max-width: 1100px !important; max-height: calc(92vh / var(--m-vz, 1)) !important; }
  #m-morning-briefing .mdl-b { padding: 15px 17px 18px; }
  #m-morning-briefing .mb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
  #m-morning-briefing .mb-grid > div { padding: 10px 11px !important; }
  #m-morning-briefing .mdl-foot { display: none; }
  #m-morning-briefing .mb-label { font-size: 12.5px !important; }
  #m-morning-briefing .mb-count { font-size: 17px !important; }
  #m-morning-briefing .mb-line { font-size: 12px !important; }
  #m-morning-briefing .mb-badge { font-size: 10.5px !important; padding: 0 6px !important; }
  #m-morning-briefing .mb-more { font-size: 10.5px !important; margin-top: 2px !important; }
  #m-morning-briefing .mb-ico { width: 28px !important; height: 28px !important; }
  #m-morning-briefing .mb-mgr { width: 42px !important; font-size: 11px !important; }
}

/* ═══ 오늘의 루틴(모바일·태블릿) — 줄 모양은 PC 대시보드 박스(app/index.html .rt-*)와 같고 글자만 조금 크게 ═══ */
.rt-row{display:flex;align-items:center;gap:8px;padding:11px 4px;border-bottom:1px dashed var(--border);font-size:13.5px}
.rt-row:last-child{border-bottom:none}
.rt-ck{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--border2,#c9ceda);background:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;color:#fff;font-size:13px;font-weight:900;line-height:1}
.rt-ck.on{background:var(--green);border-color:var(--green)}
.rt-tag{flex-shrink:0;padding:0 8px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.8;white-space:nowrap}
.rt-day{background:#eff6ff;color:#2563eb}.rt-week{background:#f0fdf4;color:#16a34a}.rt-month{background:#f5f3ff;color:#7c3aed}.rt-event{background:#fff7ed;color:#ea580c}
.rt-lbl{flex:1;min-width:0;color:var(--text);font-weight:600;cursor:pointer;line-height:1.35}
.rt-row.done .rt-lbl{color:var(--text3);text-decoration:line-through;font-weight:500}
.rt-st{flex-shrink:0;font-size:11px;font-weight:700;padding:0 7px;border-radius:999px;line-height:1.8}
.rt-st-auto{background:#f0fdf4;color:var(--green)}.rt-st-done{background:var(--surface);color:var(--text3)}.rt-st-left{background:#fef2f2;color:#dc2626}
.rt-empty{font-size:13px;color:var(--text3);padding:24px 4px;text-align:center}
.rt-note{font-size:11.5px;color:#b45309;background:#FFF8E1;border-radius:8px;padding:7px 10px;margin-top:10px}

/* 홈 머리글 리스트 아이콘 — 남은 루틴이 있으면(.has-todo) 세 줄이 위에서부터 차례로 "써졌다가" 잠시 머문 뒤
   차례로 "지워지는" 것을 반복(선 길이를 pathLength=1 기준 stroke-dashoffset으로 그렸다 지움). 다 끝나면 세 줄 고정 */
.mh-routine-svg{overflow:visible}
.mh-routine-btn .rt-l{stroke-dasharray:1;stroke-dashoffset:0}
.mh-routine-btn.has-todo .rt-l{animation:mRtWrite 3s ease-in-out infinite}
.mh-routine-btn.has-todo .rt-l2{animation-delay:.35s}
.mh-routine-btn.has-todo .rt-l3{animation-delay:.7s}
@keyframes mRtWrite{
  0%{stroke-dashoffset:1}
  18%{stroke-dashoffset:0}
  66%{stroke-dashoffset:0}
  84%{stroke-dashoffset:-1}
  100%{stroke-dashoffset:-1}
}
@media (prefers-reduced-motion: reduce){ .mh-routine-btn.has-todo .rt-l{animation:none} }

/* 루틴 시트 — 휴대폰·태블릿 모두 화면 위에서 내려오는 전체 화면. 아래 손잡이로 위로 올려 닫음 */
#m-routine-sheet.moverlay{align-items:flex-start!important;justify-content:stretch!important;padding:0!important;z-index:650}
#m-routine-sheet .mdl{width:100%!important;max-width:none!important;height:calc(100vh / var(--m-fs, 1))!important;max-height:none!important;
  border-radius:0 0 18px 18px!important;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);box-sizing:border-box;
  animation:mRtSheetDown .3s cubic-bezier(.4,0,.2,1)}
@keyframes mRtSheetDown{from{transform:translateY(-100%)}to{transform:none}}
#m-routine-sheet .mdl-h{flex-shrink:0;touch-action:none}
#m-routine-sheet .mdl-b{flex:1;min-height:0;overflow-y:auto;padding:8px 18px}
#m-routine-sheet .m-notif-drag{display:block!important;flex-shrink:0;padding:4px 0 14px;touch-action:none}


/* ── 검수 관리 공통 스타일(PC app/index.html의 .insp-* 그대로 복사) ── */
.insp-2col{display:grid;grid-template-columns:320px 1fr;gap:14px;align-items:start}
.insp-left{position:sticky;top:0}
.insp-chips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:10px 10px 8px;border:1.5px solid var(--border);border-radius:9px;overflow:hidden;background:var(--white)}
.insp-start{display:flex;align-items:center;gap:6px;padding:10px 10px 0;font-size:11.5px;font-weight:600;color:var(--text2)}
.insp-start .insp-date{height:26px;padding:2px 6px;font-size:11.5px}
.insp-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;border:0;border-left:1px solid var(--border);background:transparent;color:var(--text2);padding:5px 2px;font-size:10.5px;font-family:var(--font);white-space:nowrap;cursor:pointer;transition:background .12s}
.insp-chip:first-child{border-left:0}
.insp-chip:hover{background:var(--surface)}
.insp-chip b{font-family:var(--mono);font-size:13px;line-height:1.1;opacity:.85}
.insp-chip.on{background:var(--accent);color:#fff;font-weight:700}
.insp-chip.on b{opacity:1}
.insp-filters{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:0 10px 8px;border-bottom:1px solid var(--border)}
.insp-search{grid-column:1/-1;position:relative;display:flex;align-items:center}
.insp-search>svg{position:absolute;left:9px;color:#94a3b8;pointer-events:none}
.insp-search .finp-sm{width:100%;box-sizing:border-box;background:#fff;color:#1f2937;padding:6px 8px 6px 29px}
.insp-list{max-height:calc(calc(100vh / var(--m-vz, 1)) - 290px);overflow-y:auto;padding:8px}
.insp-row{border:1.5px solid var(--border);border-radius:9px;padding:8px 10px;margin-bottom:6px;cursor:pointer;background:var(--white);transition:border-color .12s}
.insp-row:hover{border-color:var(--text3)}
.insp-row.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(66,133,244,.15)}
.insp-row-top{display:flex;justify-content:space-between;align-items:center;gap:6px}
.insp-no{font-family:var(--mono);font-weight:800;color:var(--accent)}
.insp-row-sub{font-size:11px;color:var(--text2);display:flex;align-items:center;gap:6px;margin-top:2px;flex-wrap:wrap}
.insp-sums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:6px}
.insp-sum{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:3px 2px;border-radius:6px;background:var(--surface);color:var(--text3);font-size:11px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.insp-sum i{font-style:normal;font-size:9.5px;font-weight:600;opacity:.75}
.insp-sum.ok{background:var(--green-lt);color:var(--green)}
.insp-sum.mid{background:#fef9c3;color:#a16207}
.insp-sum.bad{background:var(--red-lt);color:var(--red)}
.insp-sum.vio{background:#ede9fe;color:#6d28d9}
.insp-tag{font-size:10.5px;font-weight:700;border-radius:999px;padding:1px 8px;background:var(--surface);color:var(--text2);white-space:nowrap}
.insp-dots{display:inline-flex;gap:3px;vertical-align:-1px}
.insp-dots i{width:9px;height:9px;border-radius:50%;background:#d5d8e3;display:inline-block}
.insp-dots i.full{background:var(--green)}
.insp-dots i.part{background:#f59e0b}
.insp-dots i.arch{background:#93a4c3}
.insp-arch{margin-top:8px;padding:7px 10px;border-radius:8px;background:#eef2f9;color:#475569;font-size:11.5px}
.insp-bulk-quick{display:flex;gap:6px;flex-wrap:wrap}
.insp-bulk-danger{margin-top:14px;padding:11px 13px;border:1.5px solid rgba(220,38,38,.35);border-radius:10px;background:#fff7f7}
.insp-head{margin-bottom:10px}
.insp-checks{margin-bottom:10px;margin-top:12px}
.insp-steps-card{margin-bottom:12px}
.insp-steps-card .insp-steps{margin-bottom:0}
.insp-part+.insp-part{margin-top:14px;padding-top:12px;border-top:1px dashed var(--border)}
.insp-part-h{display:flex;align-items:center;gap:7px;margin-bottom:9px;min-width:0}
.insp-part-h b{font-size:13px;color:var(--text);white-space:nowrap}
.insp-part-h>span:not(.insp-part-n){font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.insp-part-n{flex:none;width:20px;height:20px;border-radius:50%;background:var(--text);color:var(--white);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.insp-part-photo{margin:4px 0 6px}
.insp-wx-h .insp-part-h{margin-bottom:0}
.insp-chk-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr);gap:14px;align-items:start}
.insp-chk-main{min-width:0}
.insp-chk-main .insp-note{min-width:160px}
.insp-note:placeholder-shown{background:var(--white)}
.insp-cb.on.violet{border-color:#7c3aed;color:#6d28d9;background:#ede9fe}
.insp-sub-row .insp-lbl{color:var(--text3);font-weight:600}
.insp-sub-row .insp-lbl::before{content:'└ ';color:var(--border2)}
.insp-follow-date{width:auto!important;padding-right:8px}
.insp-follow-date.empty{background:var(--white)}
.insp-slicer{display:inline-flex;flex-wrap:wrap;gap:4px}
.insp-slicer button{border:1.5px solid var(--border);background:var(--white);color:var(--text2);font:inherit;font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px;cursor:pointer;transition:all .12s}
.insp-slicer button:hover{border-color:#a78bfa;color:#6d28d9}
.insp-slicer button.on{background:#7c3aed;border-color:#7c3aed;color:#fff}
.insp-fs{border:0;margin:0;padding:0;min-width:0}
.insp-part-lock .insp-fs{opacity:.45;pointer-events:none}
.insp-lock-msg{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:800;line-height:1.35;color:#92400e;background:#fef3c7;border:1.5px solid #f59e0b;border-left-width:5px;border-radius:10px;padding:9px 12px;margin-bottom:10px}
.insp-lock-msg>i{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#f59e0b;color:#fff}
.insp-lock-msg>i .ico-svg{display:block}
#m-insp-wiz .insp-lock-msg{font-size:14px;padding:11px 13px}
.insp-fix-photos{margin:4px 0 0 66px}
.insp-fix-photos .insp-sec{margin:0;box-shadow:none}
.insp-follow-date::-webkit-calendar-picker-indicator{margin-left:6px;cursor:pointer;opacity:.75}
.insp-steps{display:flex;flex-wrap:nowrap;gap:6px;margin-bottom:12px}
.insp-step{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:7px;padding:8px 12px;border:1.5px solid var(--border);border-radius:9px;background:var(--white);white-space:nowrap}
.insp-step-n{flex:none;width:20px;height:20px;border-radius:50%;background:var(--surface);color:var(--text2);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.insp-step b{font-size:12px;color:var(--text);display:inline-flex;align-items:center;gap:4px}
.insp-step b .ico-svg{color:var(--text2);flex:none}
.insp-step-d{font-size:11.5px;color:var(--text3);min-width:0;overflow:hidden;text-overflow:ellipsis}
.insp-step-d em{font-style:normal;font-weight:700;color:var(--red)}
.insp-step-d .insp-dots{display:inline-flex}
.insp-step>div{display:flex;align-items:center;gap:7px;min-width:0}
.insp-step.done .insp-step-n{background:var(--green);color:#fff}
.insp-step.warn .insp-step-n{background:#f59e0b;color:#fff}
.insp-step.now{border-color:#ca8a04;background:#fefce8;z-index:1}
.insp-step.now .insp-step-n{background:#ca8a04;color:#fff}
.insp-step.now .insp-step-d{color:#854d0e}
.insp-step.res-cond .insp-step-n{background:#ca8a04;color:#fff}
.insp-step.res-fail .insp-step-n{background:var(--red);color:#fff}
.insp-step.res-fail .insp-step-d{color:var(--red);font-weight:700}
.insp-step.res-cond .insp-step-d{color:#a16207;font-weight:700}
.insp-wx{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--bg)}
.insp-wx-h{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:var(--text2);margin-bottom:7px}
.insp-wx-seg{margin-left:auto;display:inline-flex;border:1.5px solid var(--border);border-radius:7px;overflow:hidden}
.insp-wx-seg button{border:0;background:var(--white);color:var(--text2);font:inherit;font-size:11px;font-weight:700;padding:3px 10px;cursor:pointer}
.insp-wx-seg button+button{border-left:1.5px solid var(--border)}
.insp-wx-seg button.on{background:var(--text);color:var(--white)}
.insp-wx-pre{margin:0;white-space:pre-wrap;word-break:break-all;font-family:var(--font);font-size:12px;line-height:1.6;color:var(--text);background:var(--white);border:1px solid var(--border);border-radius:8px;padding:8px 10px;max-height:190px;overflow:auto}
.insp-wx-f{display:flex;align-items:center;gap:8px;margin-top:8px}
.insp-chk-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.insp-chk-row:last-child{margin-bottom:0}
.insp-lbl{font-size:11.5px;font-weight:700;color:var(--text2)}
.insp-res{border:1.5px solid var(--border);background:var(--white);border-radius:8px;padding:5px 14px;font-size:12px;font-weight:700;font-family:var(--font);color:var(--text2);cursor:pointer}
.insp-photo-state{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--text3);display:flex;align-items:center;gap:6px}
.insp-photo-state.ok{color:var(--green)}
.insp-cb{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--text2);border:1.5px solid var(--border);border-radius:8px;padding:5px 10px;cursor:pointer;white-space:nowrap;background:var(--white)}
.insp-cb.on{border-color:var(--green);color:var(--green);background:var(--green-lt)}
.insp-cb.on.red{border-color:var(--red);color:var(--red);background:var(--red-lt)}
.insp-cb.on.amber{border-color:#ca8a04;color:#a16207;background:#fef9c3}
.insp-cb.off{opacity:.45;cursor:default}
.insp-chk-main .insp-lbl{min-width:58px}
.insp-note{flex:1;min-width:240px;height:32px!important}
.insp-short{width:130px;height:30px!important}
.insp-date{width:140px;height:30px!important}
.insp-meta{font-size:11px;color:var(--text3)}
.insp-hint{font-size:11px;color:var(--text3);margin:0 2px 8px}
.insp-sectors{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.insp-sec{transition:box-shadow .12s;margin:0}
.insp-sec:nth-child(5){grid-column:1/-1}
.insp-sec.active{box-shadow:0 0 0 2px rgba(66,133,244,.35)}
.insp-sec.over{box-shadow:0 0 0 3px var(--accent);background:var(--accent-lt)}
.insp-sec-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.insp-sec-t{font-size:12px;font-weight:800;border-radius:999px;padding:2px 10px;white-space:nowrap}
.insp-sec-hint{font-size:10.5px;color:var(--text3);flex:1;min-width:0}
.insp-sec-cnt{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--text3);white-space:nowrap}
.insp-sec-cnt.full{color:var(--green)}
.insp-sec-cnt.empty{color:var(--red)}
.insp-sec-cnt.part{color:#d97706}
.insp-sec-cnt.arch{color:#64748b}
.insp-slots{display:flex;gap:8px;flex-wrap:wrap}
.insp-ph,.insp-add{width:104px;height:104px;border-radius:9px;flex-shrink:0;position:relative}
.insp-ph img{width:100%;height:100%;object-fit:cover;border-radius:9px;border:1px solid var(--border);cursor:zoom-in;display:block}
.insp-ph-lb{position:absolute;left:5px;bottom:5px;font-size:10px;font-weight:700;color:#fff;background:rgba(0,0,0,.55);border-radius:5px;padding:1px 6px;pointer-events:none}
/* 삭제 버튼은 호버 없이 항상 보인다(모바일은 호버가 없음) — 사진 우측 상단 모서리에 걸치게(상위 칸에 overflow:hidden 없음, 카드 여백 안).
   손가락으로 누르기 쉽게 24px, 누를 영역은 ::before 로 조금 더 넓힌다 */
.insp-ph-x{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;border:1.5px solid #fff;background:rgba(15,23,42,.72);color:#fff;font-size:12px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.3);z-index:2;-webkit-tap-highlight-color:transparent}
.insp-ph-x::before{content:'';position:absolute;inset:-6px}
.insp-ph-x:active{background:#dc2626}
.insp-add{border:2px dashed var(--border2);background:var(--white);color:var(--text3);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:24px;cursor:pointer;transition:all .12s}
.insp-add span{font-size:11px;font-weight:700;margin-top:2px}
.insp-add:hover,.insp-add.over{border-color:var(--accent);color:var(--accent);background:var(--accent-lt)}
@keyframes inspSpin{to{transform:rotate(360deg)}}
@keyframes inspPulse{0%,100%{background:#eef2fb}50%{background:#dfe7f8}}
@keyframes inspBar{0%{background-position:0 0}100%{background-position:28px 0}}
.insp-spin{width:22px;height:22px;border:3px solid rgba(66,133,244,.22);border-top-color:var(--accent);border-radius:50%;animation:inspSpin .8s linear infinite;flex-shrink:0;display:inline-block}
.insp-spin.sm{width:11px;height:11px;border-width:2px}
.insp-pending{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:2px solid rgba(66,133,244,.35);animation:inspPulse 1.2s ease-in-out infinite;font-size:10.5px;font-weight:700;color:var(--accent);text-align:center}
.insp-saving{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:9px 13px;border-radius:10px;background:var(--accent-lt);border:1.5px solid rgba(66,133,244,.35);font-size:12px;color:var(--accent)}
.insp-saving span:not(.insp-spin){color:var(--text2);font-size:11.5px}
.insp-saving-bar{flex:1;min-width:120px;height:7px;border-radius:999px;background:rgba(66,133,244,.15);overflow:hidden}
.insp-saving-bar i{display:block;height:100%;border-radius:999px;background-color:var(--accent);background-image:linear-gradient(45deg,rgba(255,255,255,.35) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.35) 75%,transparent 75%);background-size:28px 14px;animation:inspBar .6s linear infinite;transition:width .3s;min-width:8px}
.insp-slot-lbl{font-size:11px;font-weight:700;color:var(--text2);margin-bottom:4px}
/* 검수 사진 크게 보기 — 모바일은 화면 중앙의 카드형 팝업
   [머리: 발주 · 칸 · n/전체  ✕] / [사진(좌우 화살표는 사진 위 동그란 버튼)] / [올린 사람 · 시각   원본 열기] */
.insp-viewer{position:fixed;inset:0;background:rgba(15,23,42,.62);z-index:9999;display:none;align-items:center;justify-content:center;padding:16px;animation:inspVwFade .15s ease-out}
@keyframes inspVwFade{from{opacity:0}to{opacity:1}}
.insp-viewer-box{display:flex;flex-direction:column;width:100%;max-width:480px;max-height:calc(calc(100vh / var(--m-vz, 1)) - 32px);background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.insp-viewer-top{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t x" "m o";column-gap:10px;row-gap:2px;align-items:center;padding:12px 10px 10px 16px;border-bottom:1px solid var(--border);color:var(--text)}
.insp-viewer-top span:nth-of-type(1){grid-area:t;font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.insp-viewer-top span:nth-of-type(2){grid-area:m;font-size:11.5px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.insp-viewer-top a{grid-area:o;justify-self:end;font-size:12px;font-weight:700;color:var(--accent);text-decoration:none;padding:2px 6px}
.insp-viewer-top button{grid-area:x;justify-self:end;width:32px;height:32px;border-radius:50%;border:none;background:var(--surface);color:var(--text2);font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
/* 사진 칸은 높이를 고정한다 — 사진을 넘길 때 새 사진이 로딩되는 동안 칸이 접혔다 펴지며 팝업 크기가 바뀌지 않게.
   사진은 칸 안에 맞춰 들어가고(contain), 로딩 중엔 가운데 작은 원이 돌다가 다 받으면 사진이 부드럽게 나타난다 */
.insp-viewer-stage{position:relative;flex:0 0 auto;height:min(calc(62vh / var(--m-vz, 1)),calc(calc(100vh / var(--m-vz, 1)) - 260px));min-height:200px;display:flex;align-items:center;justify-content:center;background:#f1f3f4;overflow:hidden}
.insp-viewer-stage::before{content:'';position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:3px solid rgba(0,0,0,.12);border-top-color:var(--accent);animation:inspVwSpin .8s linear infinite}
.insp-viewer-stage.ld::before{display:none}
@keyframes inspVwSpin{to{transform:rotate(360deg)}}
.insp-viewer-stage img{position:relative;display:block;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .15s}
.insp-viewer-stage.ld img{opacity:1}
/* 확대 사진 아래 썸네일 줄 — 한 줄 4열, 넘치면 가로 스크롤. 지금 보고 있는 사진은 파란 테두리 */
.insp-viewer-thumbs{position:relative;flex:0 0 auto;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 24px) / 4);gap:8px;padding:10px 12px 12px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-top:1px solid var(--border);background:#fff}
.insp-viewer-thumbs::-webkit-scrollbar{display:none}
.insp-viewer-th{position:relative;aspect-ratio:1/1;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:var(--surface);cursor:pointer;opacity:.6;-webkit-tap-highlight-color:transparent}
.insp-viewer-th img{display:block;width:100%;height:100%;object-fit:cover}
.insp-viewer-th.on{border-color:var(--accent);opacity:1;box-shadow:0 0 0 1px var(--accent)}
.insp-viewer-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border:none;border-radius:50%;background:rgba(15,23,42,.5);color:#fff;font-size:24px;line-height:1;padding:0 0 3px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1}
.insp-viewer-nav:disabled{display:none}
.insp-viewer-nav.l{left:8px}.insp-viewer-nav.r{right:8px}

.insp-final-auto{font-size:12px;font-weight:700;color:var(--green);background:var(--green-lt);border-radius:8px;padding:7px 10px}
.insp-res.insp-final-pass.on{background:var(--green-lt);color:var(--green);border-color:var(--green)}
.insp-res.insp-final-fail.on{background:var(--red-lt);color:var(--red);border-color:var(--red)}
#m-insp-wiz .insp-final-auto{font-size:13.5px;padding:10px 12px}
.insp-rc-hist{display:flex;flex-direction:column;gap:4px;margin:0 0 10px 66px}
.insp-rc-h{display:flex;align-items:center;gap:8px;font-size:11.5px;padding:5px 10px;border-radius:8px;background:#f5f3ff;color:#4c1d95;min-width:0}
.insp-rc-h.ok{background:var(--green-lt);color:var(--green)}
.insp-rc-h b{font-weight:800;white-space:nowrap}
.insp-rc-h em{font-style:normal;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.insp-rc-done{font-size:12.5px;font-weight:700;color:var(--green)}
.insp-res.insp-rc-again{border-color:#a78bfa;color:#6d28d9}
.insp-res.insp-rc-again:hover{background:#ede9fe}
#m-insp-wiz .insp-rc-hist{margin-left:0}
.insp-follow-seg{display:grid;gap:8px;margin-bottom:10px}
.insp-follow-seg.n1{grid-template-columns:1fr}.insp-follow-seg.n2{grid-template-columns:1fr 1fr}.insp-follow-seg.n3{grid-template-columns:repeat(3,1fr)}
.insp-follow-seg button{display:flex;align-items:center;justify-content:center;gap:6px;border:2px solid var(--border);background:var(--white);border-radius:11px;padding:10px 8px;font:inherit;font-size:13px;font-weight:800;color:var(--text2);cursor:pointer}
.insp-follow-seg button b{font-size:15px}
.insp-follow-seg button.on.noFollowup{border-color:var(--green);background:var(--green-lt);color:var(--green)}
.insp-follow-seg button.on.fixPhoto{border-color:#ca8a04;background:#fef9c3;color:#92400e}
.insp-follow-seg button.on.recheck{border-color:#7c3aed;background:#ede9fe;color:#6d28d9}
.insp-follow-box{border:1px solid var(--border);border-radius:11px;padding:10px 12px;background:var(--bg);display:flex;flex-direction:column;gap:8px}
.insp-follow-box .insp-chk-row{margin:0}
.insp-follow-box>.insp-note{min-width:0}
.insp-follow-ok{font-size:12.5px;font-weight:800;color:var(--green);background:var(--green-lt);border-color:transparent}
.insp-big-done{border:2px dashed #ca8a04;background:var(--white);color:#92400e;border-radius:11px;padding:10px;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.insp-big-done.on{border:2px solid var(--green);background:var(--green-lt);color:var(--green)}
.insp-rc-after{border-top:1px dashed var(--border);padding-top:8px;display:flex;flex-direction:column;gap:6px}
.insp-rc-after-t{font-size:11.5px;font-weight:800;color:var(--text3)}
.insp-rc-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.insp-rc-btns .insp-res{padding:9px 4px;text-align:center}
.insp-follow-box .insp-rc-hist{margin:0}
.insp-follow-box .insp-fix-photos{margin:0}
.insp-rc-done{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#m-insp-wiz .insp-follow-seg button{padding:14px 6px;font-size:14.5px;flex-direction:column;gap:2px}
#m-insp-wiz .insp-follow-seg button b{font-size:20px}
#m-insp-wiz .insp-big-done{padding:14px;font-size:14.5px}
#m-insp-wiz .insp-rc-btns .insp-res{padding:13px 4px;font-size:14.5px}
#m-insp-wiz .insp-follow-box .insp-lbl{flex:0 0 auto}
#m-insp-wiz .insp-wx-copy{flex:1;height:46px!important;font-size:15px!important}
.insp-wip{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.insp-wip-btns{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.insp-wip-btns button{display:flex;flex-direction:column;align-items:center;gap:2px;border:1.5px solid var(--border);background:var(--white);border-radius:10px;padding:8px 2px 7px;font:inherit;color:#0369a1;cursor:pointer}
.insp-wip-btns button b{font-size:12.5px;font-weight:800;color:var(--text)}
.insp-wip-btns button small{font-size:10.5px;font-weight:600;color:var(--text3)}
.insp-wip-btns button.on{background:#0284c7;border-color:#0284c7;color:#fff}
.insp-wip-btns button.on b,.insp-wip-btns button.on small{color:#fff}
#m-insp-wiz .insp-wip-btns button{padding:11px 2px 9px}
#m-insp-wiz .insp-wip-btns button b{font-size:13.5px}
.insp-wip-bar{position:relative;height:24px;border-radius:999px;background:#e0f2fe;overflow:hidden}
.insp-wip-bar i{position:absolute;left:0;top:0;bottom:0;background:#38bdf8;border-radius:999px;transition:width .2s}
.insp-wip-bar span{position:relative;display:block;text-align:center;line-height:24px;font-size:12px;font-weight:800;color:#075985}
.insp-step.res-wip .insp-step-n{background:#0284c7;color:#fff}
.insp-step.res-wip .insp-step-d{color:#0369a1;font-weight:700}
.insp-sum.wip{background:#e0f2fe;color:#0369a1}
#m-insp-wiz .insp-wip-bar{height:30px}#m-insp-wiz .insp-wip-bar span{line-height:30px;font-size:13.5px}
.insp-res .ico-svg{vertical-align:-2px;margin-right:3px}
/* 판정 결과 버튼 4개 — 합격 · 보완 합격 · 불합격 · 미완성. 색은 버튼마다 --rc(진한색) · --rb(연한 배경) */
.insp-res-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;flex:1 1 100%;min-width:0}
.insp-res-grid .insp-res{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:64px;padding:10px 2px 9px;border-radius:12px;border:1.5px solid var(--border);background:var(--white);color:var(--text2);font-size:13px;line-height:1.15;text-align:center;transition:background .15s,border-color .15s,color .15s,transform .08s}
.insp-res-grid .insp-res .ico-svg{margin:0;vertical-align:0;color:var(--rc);opacity:.85}
.insp-res-grid .insp-res span{word-break:keep-all}
.insp-res-grid .insp-res:active{transform:scale(.96)}
.insp-res-grid .insp-res.on{background:var(--rb);border-color:var(--rc);color:var(--rc);font-weight:800;box-shadow:0 0 0 3px color-mix(in srgb,var(--rc) 14%,transparent)}
.insp-res-grid .insp-res.on .ico-svg{opacity:1}
.insp-res-grid:has(.on) .insp-res:not(.on){opacity:.6}
.insp-step-n .ico-svg,.m-iw-n .ico-svg{display:block}
.insp-sum .ico-svg,.insp-tag .ico-svg{vertical-align:-1px}
.insp-fin-big{display:flex;align-items:center;gap:12px;border-radius:12px;padding:14px 16px;margin-bottom:12px}
.insp-fin-big b{display:block;font-size:16px}.insp-fin-big span{font-size:12.5px;opacity:.85}
.insp-fin-big.ok{background:#dcfce7;color:#15803d}.insp-fin-big.bad{background:#fee2e2;color:#b91c1c}.insp-fin-big.wait{background:#fefce8;color:#854d0e;border:1.5px dashed #eab308}
.insp-fin-list{display:flex;flex-direction:column;gap:6px}
.insp-fin-row{display:flex;align-items:center;gap:8px;border:1.5px solid var(--border);border-radius:10px;padding:9px 11px;background:var(--white);min-width:0}
.insp-fin-row.ok{border-color:#86efac;background:#f0fdf4}
.insp-fin-n{flex:none;width:20px;height:20px;border-radius:50%;background:#e5e7eb;color:var(--text2);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.insp-fin-row.ok .insp-fin-n{background:var(--green);color:#fff}
.insp-fin-row.res-cond{border-color:#fde047;background:#fefce8}.insp-fin-row.res-cond .insp-fin-n{background:#ca8a04;color:#fff}.insp-fin-row.res-cond .insp-fin-d{color:#a16207;font-weight:700}
.insp-fin-row.res-fail{border-color:#fca5a5;background:#fef2f2}.insp-fin-row.res-fail .insp-fin-n{background:var(--red);color:#fff}.insp-fin-row.res-fail .insp-fin-d{color:var(--red);font-weight:700}
.insp-fin-row.res-wip{border-color:#7dd3fc;background:#f0f9ff}.insp-fin-row.res-wip .insp-fin-n{background:#0284c7;color:#fff}.insp-fin-row.res-wip .insp-fin-d{color:#0369a1;font-weight:700}
.insp-fin-row.now .insp-fin-n{background:#ca8a04;color:#fff}.insp-fin-row.warn .insp-fin-n{background:#f59e0b;color:#fff}
.insp-fin-n .ico-svg{display:block}
.insp-flow{display:flex;flex-direction:column;align-items:stretch}
.insp-flow-box{display:flex;align-items:center;gap:12px;border:2px solid var(--border);border-radius:14px;padding:14px 14px;background:var(--white);min-width:0;cursor:pointer;transition:transform .1s}
.insp-flow-box:active{transform:scale(.99)}
.insp-flow-box .insp-fin-n{width:28px;height:28px;font-size:13.5px}
.insp-flow-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.insp-flow-txt b{display:inline-flex;align-items:center;gap:5px;font-size:14.5px}
.insp-flow-txt .insp-fin-d{margin-left:0;font-size:12.5px}
.insp-flow-go{flex:none;font-size:12px;font-weight:800;color:var(--text3)}
.insp-flow-go:not(.seen){color:#b45309}
/* 단계 사이 화살표 — 동그라미 안 아래 화살표, 앞 단계가 끝났으면 초록(차례대로 진행하는 느낌) */
.insp-flow-arrow{display:flex;justify-content:center;align-items:center;height:30px;position:relative}
.insp-flow-arrow::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#e2e8f0}
.insp-flow-arrow span{position:relative;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid #cbd5e1;color:#94a3b8}
.insp-flow-arrow .ico-svg{transform:rotate(90deg);display:block}
.insp-flow-arrow.done::before{background:#86efac}
.insp-flow-arrow.done span{border-color:#22c55e;color:#16a34a;background:#f0fdf4}
.insp-flow-box.ok{border-color:#86efac;background:#f0fdf4}.insp-flow-box.ok .insp-fin-n{background:var(--green);color:#fff}
.insp-flow-box.now{border-color:#eab308;background:#fefce8;box-shadow:0 0 0 3px rgba(234,179,8,.15)}.insp-flow-box.now .insp-fin-n{background:#ca8a04;color:#fff}
.insp-flow-box.warn{border-color:#fdba74;background:#fff7ed}.insp-flow-box.warn .insp-fin-n{background:#f59e0b;color:#fff}
.insp-flow-box.res-cond{border-color:#fde047;background:#fefce8}.insp-flow-box.res-cond .insp-fin-n{background:#ca8a04;color:#fff}.insp-flow-box.res-cond .insp-fin-d{color:#a16207;font-weight:700}
.insp-flow-box.res-fail{border-color:#fca5a5;background:#fef2f2}.insp-flow-box.res-fail .insp-fin-n{background:var(--red);color:#fff}.insp-flow-box.res-fail .insp-fin-d{color:var(--red);font-weight:700}
.insp-flow-box.res-wip{border-color:#7dd3fc;background:#f0f9ff}.insp-flow-box.res-wip .insp-fin-n{background:#0284c7;color:#fff}.insp-flow-box.res-wip .insp-fin-d{color:#0369a1;font-weight:700}
.insp-flow .insp-fin-big{margin:0;padding:16px 16px;border-radius:14px}
.insp-flow .insp-fin-big[role=button]{cursor:pointer}
.insp-fin-row b{display:inline-flex;align-items:center;gap:4px;font-size:13px;white-space:nowrap}
.insp-fin-d{margin-left:auto;font-size:12px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.insp-fin-d em{font-style:normal;color:var(--red);font-weight:700}
.insp-part-n .ico-svg{display:block}
#m-insp-wiz .mdl{position:relative}
.m-iw-wx{position:absolute;inset:0;background:rgba(17,24,39,.35);display:none;align-items:flex-end;z-index:5}
.m-iw-wx.show{display:flex}
/* 위챗 보고 시트 — 화면 중간쯤까지 올라오고, 문구가 길면 문구 칸만 스크롤(버튼은 아래 고정) */
.m-iw-wx-in{width:100%;height:60%;max-height:85%;display:flex;flex-direction:column;background:var(--white);border-radius:18px 18px 0 0;padding:12px 14px calc(14px + env(safe-area-inset-bottom));box-sizing:border-box}
#m-insp-wx-body{flex:1;min-height:0;display:flex;flex-direction:column}
#m-insp-wx-body .insp-wx{flex:1;min-height:0;display:flex;flex-direction:column}
#m-insp-wx-body .insp-wx-pre{flex:1;min-height:0;overflow-y:auto}
.m-iw-wx-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.m-iw-wx-h b{font-size:15px}
.m-iw-wx-in .insp-wx-h .insp-part-h{display:none}
#m-insp-wiz .mdl-foot .m-iw-wxbtn{flex:0 0 auto;padding:0 14px;gap:4px;color:#15803d;border-color:#86efac;background:#f3fcf6}
/* 아래 버튼 줄 「‹ · 보고 · 비용 · 다음」 — 이전은 화살표만, 비용은 미입력이면 주황 + 점 */
#m-insp-wiz .mdl-foot .m-iw-prevbtn{flex:0 0 44px;padding:0;font-size:22px;line-height:1}
#m-insp-wiz .mdl-foot .m-iw-costbtn{flex:0 0 auto;padding:0 13px;gap:4px;position:relative;color:#1A73E8;border-color:#AECBFA;background:#F4F8FE}
#m-insp-wiz .mdl-foot .m-iw-costbtn.need{color:var(--orange);border-color:#F6C26B;background:var(--orange-lt)}
#m-insp-wiz .mdl-foot .m-iw-costbtn i{position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--red);border:1.5px solid #fff}
#m-insp-wiz .mdl-foot .btn-p{white-space:nowrap;overflow:hidden;min-width:0;padding:0 8px;font-size:13.5px}
/* 시각 칸 — 기본 시계 칸의 최소 폭 때문에 시트 밖으로 밀려나지 않게 두 칸을 격자로 나눔 */
.insp-visit-time{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.insp-visit-t{overflow:hidden}
.insp-visit-t input{max-width:100%;-webkit-appearance:none;appearance:none;padding:0 6px!important;font-size:15px!important}
.insp-visit-t input::-webkit-calendar-picker-indicator{display:none} /* 앱에선 칸을 누르면 시계 창이 뜸 — 아이콘 자리만 차지 */
.insp-visit-t input{text-align:center;box-sizing:border-box}
.insp-visit-hrs{grid-column:1 / -1}
#m-insp-cost-body{overflow-x:hidden}
/* 시각 칸 — 누르면 아래에 시 · 분 버튼판(app.js inspTimePickerHtml) */
.insp-trow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px}
.insp-trow .insp-visit-tilde{padding:0}
.insp-tbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:58px;width:100%;border:1.5px solid var(--border);border-radius:12px;background:var(--white);font-family:var(--font);color:var(--text);cursor:pointer}
.insp-tbtn:active{background:var(--surface)}
.insp-tbtn-l{font-size:11.5px;font-weight:700;color:var(--text3)}
.insp-tbtn b{font-size:21px;font-weight:800;font-family:var(--mono);letter-spacing:.5px}
.insp-tbtn.empty b{color:#BDC1C6}
.insp-tbtn.on{border-color:var(--accent);background:var(--accent-lt);box-shadow:0 0 0 3px rgba(66,133,244,.15)}
.insp-tbtn.on .insp-tbtn-l{color:var(--accent-dk,#1A73E8)}
.insp-tbtn:disabled{opacity:.6}
.insp-visit .insp-visit-hrs{margin:9px 0 10px}
/* 검수 시간 팝업(mobile-shell.js mTimePopOpen) — 화면 가운데. 시작 → 종료 칸 · 검수시간 · 빠른 버튼 · 시 / 분 휠 */
#m-tp{position:fixed;inset:0;background:rgba(17,24,39,.45);display:none;align-items:center;justify-content:center;z-index:3000;padding:16px;box-sizing:border-box}
#m-tp.show{display:flex}
.m-tp-box{width:100%;max-width:360px;background:var(--white);border-radius:20px;padding:14px 14px 12px;box-shadow:0 12px 32px rgba(0,0,0,.28);box-sizing:border-box}
.m-tp-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.m-tp-h b{font-size:15px}
.m-tp-tabs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px}
.m-tp-arrow{color:var(--text3);display:flex}
.m-tp-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:66px;border:2px solid var(--border);border-radius:14px;background:var(--white);font-family:var(--font);color:var(--text);cursor:pointer}
.m-tp-tab span{font-size:12px;font-weight:700;color:var(--text3)}
.m-tp-tab b{font-size:27px;font-weight:800;font-family:var(--mono);letter-spacing:.5px}
.m-tp-tab.unset b{color:#BDC1C6}
.m-tp-tab.on{border-color:var(--accent);background:var(--accent-lt)}.m-tp-tab.on span{color:#1A73E8}
.m-tp-sum{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0 8px;padding:8px 10px;border-radius:10px;background:var(--accent-lt);color:#1A73E8;font-size:13px;font-weight:700}
.m-tp-sum b{font-size:14px}.m-tp-sum.empty{background:var(--surface);color:var(--text3);font-weight:600}
.m-tp-sum .insp-visit-night{margin-left:auto}
.m-tp-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-bottom:8px}
.m-tp-chips span{grid-column:1 / -1;font-size:11.5px;font-weight:700;color:var(--text3)}
.m-tp-chips button{height:34px;border-radius:9px;border:1.5px solid #AECBFA;background:#F4F8FE;color:#1A73E8;font-family:var(--font);font-size:13px;font-weight:800;cursor:pointer}
.m-tp-chips button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.m-tp-wheels{display:flex;justify-content:center;align-items:flex-end;gap:8px}
.m-tp-col{width:118px}
.m-tp-cap{text-align:center;font-size:11.5px;font-weight:800;color:var(--text3);margin-bottom:3px}
.m-tp-colon{font-size:26px;font-weight:800;color:var(--text2);padding-bottom:94px}
.m-tp-ww{position:relative;height:220px}
.m-tp-band{position:absolute;left:0;right:0;top:88px;height:44px;border-radius:11px;background:var(--accent-lt);border:1.5px solid #AECBFA;box-sizing:border-box;pointer-events:none}
.m-tp-wheel{position:relative;height:220px;overflow-y:auto;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%)}
.m-tp-wheel::-webkit-scrollbar{display:none}
.m-tp-pad{height:88px}
.m-tp-it{height:44px;display:flex;align-items:center;justify-content:center;gap:5px;scroll-snap-align:center;color:var(--text3);cursor:pointer}
.m-tp-it b{font-size:20px;font-weight:700;font-family:var(--mono)}
.m-tp-it small{font-size:10.5px;font-weight:700}
.m-tp-it.on{color:var(--text)}.m-tp-it.on b{font-size:24px;font-weight:800}.m-tp-it.on small{color:#1A73E8}
.m-tp-f{display:flex;align-items:center;gap:6px;margin-top:12px}
.m-tp-f .btn{flex:1;height:44px;justify-content:center;font-size:14.5px;font-weight:800}
.m-tp-clr{flex:none;border:none;background:none;color:var(--text3);font-family:var(--font);font-size:13px;font-weight:700;text-decoration:underline;padding:0 6px;cursor:pointer}/* 검수비 · 이동비 이름표 아이콘 */
.insp-cost-lb{display:inline-flex;align-items:center;gap:4px}
.insp-cost-lb .ico-svg,.insp-cost-lb svg{flex-shrink:0}
.insp-cost-lb.labor svg{color:#1A73E8}
.insp-cost-lb.travel svg{color:#E37400}
.insp-vt-m{display:inline-flex;align-items:center;gap:3px;flex-wrap:wrap}
.insp-vt-m svg{color:var(--text3)}
/* 「비용」 시트 — 보고 시트와 같은 자리 · 조금 더 높게, 내용이 길면 시트 안에서 스크롤 */
.m-iw-cost .m-iw-wx-in{height:78%}
#m-insp-cost-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
#m-insp-cost-body .insp-cost-msg{margin:0 0 8px}
/* 회차 한 줄(접힌 요약) */
.insp-vr{display:flex;align-items:center;gap:9px;width:100%;text-align:left;font-family:var(--font);background:var(--white);border:1.5px solid var(--border);border-radius:12px;padding:9px 10px;color:var(--text)}
button.insp-vr{cursor:pointer}button.insp-vr:active{background:var(--surface)}
.insp-vr-dot{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;background:var(--surface);color:var(--text3);border:1.5px dashed var(--border)}
.insp-vr.ok .insp-vr-dot{background:var(--green);color:#fff;border:none}
.insp-vr.chk{border-color:#F6C26B;background:var(--orange-lt)}.insp-vr.chk .insp-vr-dot{background:var(--orange);color:#fff;border:none}
.insp-vr.miss{border-color:#F6C26B}.insp-vr.miss .insp-vr-dot{border-color:var(--orange);color:var(--orange)}
.insp-vr-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.insp-vr-t b{font-size:13px}.insp-vr-t small{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.insp-vr.chk .insp-vr-t small{color:var(--orange)}
/* 회차 줄 — 다 적었으면 초록(최종 확인의 완료 칸과 같은 색), 「금액 확인 필요」 글자만 주황 */
.insp-vr.ok{border-color:#86efac;background:#f0fdf4}.insp-vr.ok .insp-vr-t small{color:#15803d}
.insp-vr .insp-vr-warn{color:var(--orange);font-weight:700}
.insp-vr-r{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3;flex:none}
.insp-vr-r b{font-size:14px;font-family:var(--mono)}.insp-vr-r small{font-size:10.5px;color:var(--text3)}
.insp-vr-tag{font-size:11px;font-weight:800;padding:2px 8px;border-radius:99px;background:var(--surface);color:var(--text3)}
.insp-vr.miss .insp-vr-tag{background:var(--orange-lt);color:var(--orange)}
.insp-vr-chev{flex:none;color:var(--text3);display:flex}
.insp-cost-open{display:flex!important;align-items:center;justify-content:center;gap:6px;width:100%;height:44px;margin-top:10px;font-size:14px!important;font-weight:800!important;border-radius:11px!important;color:#1A73E8;border:1.5px solid #AECBFA;background:#F4F8FE}
.insp-cost-open.need{color:var(--orange);border-color:#F6C26B;background:var(--orange-lt)}
/* 홈 검수일정 줄의 작은 "비용" 꼬리표 */
.m-ir-costmiss{flex-shrink:0;display:inline-flex;align-items:center;gap:2px;font-size:10px;font-weight:800;padding:1px 6px;border-radius:20px;background:var(--orange-lt);color:var(--orange);white-space:nowrap}
/* 검수일정 카드 — 이 발주에 함께 실어 보낼 A/S가 있으면 카드 전체를 연한 주황으로(꼬리표 대신, 주황 갈색 = A/S 「보낼 컨테이너」 색 계열) */
.mcard.m-ir-hasas{background:#FFF1DC;border-color:#F2C27A} /* 검수일정 · 진행 중인 발주 카드 공용 */
.mcard.m-ir-hasas:active{background:#FFE8C7}
/* 검수하기 사진 단계 — 「5. 제품」 아래 A/S 칸(처리사진 · A/S 완료일, mobile-shell.js mIwAsPartHtml) */
.m-iw-as{border-color:#F2C27A;margin-top:16px!important;padding-top:12px!important} /* 위 「5. 제품」 칸과 붙지 않게 */
.m-iw-as-hd{display:flex;align-items:center;gap:8px;margin-bottom:4px;min-width:0}
.m-iw-as-cnt{flex-shrink:0;margin-left:auto;padding-right:2px;font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--text3);white-space:nowrap}
/* 판정 단계 A/S 완료일 — 위 판정 결과와 점선으로 나눔 */
.m-iw-as-done{margin-top:18px;padding-top:14px;border-top:1.5px dashed var(--border2)}
.m-iw-cost-part .insp-cost-sum{margin-top:4px} /* 소제목 바로 아래 */
.m-iw-as-fin{display:flex;gap:6px;margin-top:7px}
.m-iw-as-fin button{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:4px;height:34px;border-radius:9px;font-size:12px;font-family:var(--font);cursor:pointer;white-space:nowrap}
.m-iw-as-fin button b{font-family:var(--mono)}
.m-iw-as-fin button.ok{border:1px solid #86efac;background:#f0fdf4;color:#15803d}
.m-iw-as-fin button.miss{border:1px solid #fca5a5;background:#fef2f2;color:var(--red)}
.m-iw-as-card{border:1px solid var(--border);border-radius:10px;padding:9px 10px;margin-top:8px;background:var(--white)}
.m-iw-as-h{display:flex;align-items:center;gap:5px;font-size:13px;min-width:0}
.m-iw-as-act{font-size:12px;color:var(--text2);font-weight:600;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-iw-as-act.none{color:var(--red);font-weight:700}
.m-iw-as-lbl{font-size:11.5px;font-weight:700;color:var(--text2);margin:9px 0 5px}
.m-iw-as-lbl span{font-weight:500;color:var(--text3);margin-left:4px}
.m-iw-as-th{position:relative;width:64px;height:64px;border-radius:8px;overflow:hidden;border:1px solid var(--border);flex-shrink:0}
.m-iw-as-th img{width:100%;height:100%;object-fit:cover}
.m-iw-as-th button{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;border:none;background:rgba(0,0,0,.55);color:#fff;font-size:10px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
/* 검수하기 A/S 처리사진 — 위 「5. 제품」 칸과 같은 3열 정사각형(사진 칸 묶음 .insp-sectors 밖이라 따로 맞춤) */
#m-insp-wiz .m-iw-as .insp-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#m-insp-wiz .m-iw-as .m-iw-as-th,#m-insp-wiz .m-iw-as .insp-add,#m-insp-wiz .m-iw-as .insp-ph{width:auto;height:auto;aspect-ratio:1/1;min-width:0;border-radius:9px}
#m-insp-wiz .m-iw-as .m-iw-as-th button{top:5px;right:5px;width:22px;height:22px;font-size:11px}
/* 일정 상세 — 함께 실어 보낼 A/S 목록(제품 표와 검수하기 버튼 사이) */
.m-sched-as{margin-top:12px;border:1px solid #F6D9A8;background:#FFFBF2;border-radius:10px;padding:9px 10px;display:flex;flex-direction:column;gap:6px}
.m-sched-as-hd{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:#B06000}
.m-sched-as-hd b{font-weight:800}
.m-sched-as-row{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--border);border-radius:8px;padding:8px;font-size:12.5px;cursor:pointer}
.m-sched-as-thumb{width:52px;height:52px;border-radius:8px;overflow:hidden;background:var(--surface);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.m-sched-as-thumb img{width:100%;height:100%;object-fit:cover}
.m-sched-as-row:active{background:var(--surface)}
.insp-rc-past{border:1px solid var(--border);border-radius:9px;background:var(--white);padding:6px 10px}
.insp-rc-past summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--text2);list-style:none}
.insp-rc-past summary::-webkit-details-marker{display:none}
.insp-rc-past summary::after{content:' ▸';color:var(--text3)}.insp-rc-past[open] summary::after{content:' ▾'}
.insp-rc-past .insp-rc-h{margin-top:5px}
.insp-rc-when{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.insp-rc-round{font-size:12.5px;font-weight:800;color:#fff;background:#7c3aed;border-radius:999px;padding:3px 11px}
.insp-rc-dd{font-size:12.5px;font-weight:800;color:#6d28d9}.insp-rc-dd.need{color:#b45309;font-weight:700}
.insp-rc-near{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.insp-rc-near>span{font-size:11px;font-weight:700;color:var(--text3)}
.insp-rc-near button{border:1.5px solid #c7d2fe;background:#eef2ff;color:#3730a3;border-radius:999px;padding:3px 10px;font:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
.insp-rc-near button.on{background:#4f46e5;border-color:#4f46e5;color:#fff}
#m-insp-wiz .insp-rc-near button{padding:6px 12px;font-size:12.5px}
#m-insp-wiz .insp-rc-round{font-size:13.5px}
.insp-ft-tabs{display:grid;border:1.5px solid var(--border);border-radius:11px;overflow:hidden;margin-bottom:10px;background:var(--white)}
.insp-ft-tabs.n1{grid-template-columns:1fr}.insp-ft-tabs.n2{grid-template-columns:1fr 1fr}.insp-ft-tabs.n3{grid-template-columns:repeat(3,1fr)}
.insp-ft-tabs button{display:flex;align-items:center;justify-content:center;gap:6px;border:0;border-left:1.5px solid var(--border);background:transparent;padding:10px 6px;font:inherit;font-size:13px;font-weight:800;color:var(--text2);cursor:pointer}
.insp-ft-tabs button:first-child{border-left:0}
.insp-ft-one{display:flex;align-items:center;gap:7px;flex-wrap:wrap;border-radius:11px;padding:10px 12px;margin-bottom:10px;font-size:13.5px;font-weight:800;color:#fff}
.insp-ft-one span{font-size:11.5px;font-weight:600;opacity:.9;margin-left:auto}
.insp-ft-one.fixPhoto{background:#ca8a04}.insp-ft-one.recheck{background:#7c3aed}.insp-ft-one.noFollowup{background:var(--green)}
.insp-ft-tabs button.on.noFollowup{background:var(--green);color:#fff}
.insp-ft-tabs button.on.fixPhoto{background:#ca8a04;color:#fff}
.insp-ft-tabs button.on.recheck{background:#7c3aed;color:#fff}
.insp-ft-card{border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:9px}
.insp-ft-card.fix{background:#fffbeb;border:1.5px solid #fde68a}
.insp-ft-card.recheck{background:#faf5ff;border:1.5px solid #ddd6fe}
.insp-ft-lbl{font-size:11.5px;font-weight:800;color:var(--text2)}
.insp-ft-card .insp-note{min-width:0}
.insp-ft-done{display:flex;align-items:center;justify-content:center;gap:7px;border:2px dashed #ca8a04;background:var(--white);color:#92400e;border-radius:11px;padding:11px;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.insp-ft-done.on{border:2px solid var(--green);background:var(--green-lt);color:var(--green)}
.insp-ft-done.ready{border:2px solid var(--green);background:var(--green);color:#fff}
.insp-ft-hint{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#92400e;background:var(--white);border:1.5px dashed #fcd34d;border-radius:10px;padding:10px 12px}
.insp-ft-who{font-size:11.5px;font-weight:600;opacity:.8}
.insp-ft-ok{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13px;font-weight:800;color:var(--green);background:var(--green-lt);border-radius:11px;padding:10px 12px}
.insp-ft-ok .btn{margin-left:auto;display:inline-flex;align-items:center;gap:4px}
.insp-rc-table{display:flex;flex-direction:column;gap:6px}
.insp-rc-row{display:grid;grid-template-columns:44px auto auto minmax(120px,1fr) auto;align-items:center;gap:7px;background:var(--white);border:1.5px solid var(--border);border-radius:10px;padding:7px 9px}
.insp-rc-row.pass{border-color:#bbf7d0}.insp-rc-row.again{border-color:#e9d5ff}
.insp-rc-row.now{border:2px solid #7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.insp-rc-no{font-size:12.5px;font-weight:900;color:#6d28d9;text-align:center}
.insp-rc-d{width:auto!important;height:32px!important;padding:2px 8px!important}
.insp-rc-d.empty{background:var(--white)}
.insp-rc-m{height:32px!important;min-width:0!important}
.insp-rc-out{display:inline-flex;border:1.5px solid var(--border);border-radius:8px;overflow:hidden}
.insp-rc-out button{display:inline-flex;align-items:center;gap:3px;border:0;background:var(--white);padding:5px 9px;font:inherit;font-size:12px;font-weight:800;color:var(--text2);cursor:pointer;white-space:nowrap}
.insp-rc-out button+button{border-left:1.5px solid var(--border)}
.insp-rc-out button.pass.on{background:var(--green);color:#fff}.insp-rc-out button.again.on{background:#7c3aed;color:#fff}
.insp-rc-del{border:0;background:none;color:var(--text3);cursor:pointer;padding:4px;display:flex}
.insp-rc-del:hover{color:var(--red)}
.insp-rc-tag{font-size:11.5px;font-weight:800;color:#6d28d9;white-space:nowrap}
.insp-rc-row.now .insp-rc-tag{grid-column:auto}
.insp-rc-row{grid-template-columns:44px auto auto 1fr!important;grid-template-areas:'no d out tag' 'why why why why'}
.insp-rc-row>.insp-rc-no{grid-area:no}.insp-rc-row>.insp-rc-d{grid-area:d}.insp-rc-row>.insp-rc-out{grid-area:out}
.insp-rc-row>.insp-rc-del,.insp-rc-row>.insp-rc-tag{grid-area:tag;justify-self:end}
.insp-rc-why{grid-area:why;display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding-left:51px}
.insp-rc-why button{border:1.5px solid var(--border);background:var(--white);border-radius:999px;padding:3px 10px;font:inherit;font-size:11.5px;font-weight:700;color:var(--text2);cursor:pointer}
.insp-rc-why button.on{background:#7c3aed;border-color:#7c3aed;color:#fff}
.insp-rc-etc{flex:1 1 160px;height:30px!important;min-width:0!important}
#m-insp-wiz .insp-ft-tabs button{padding:13px 4px;font-size:14px;flex-direction:column;gap:3px}
#m-insp-wiz .insp-rc-row{grid-template-columns:40px 1fr auto;grid-template-areas:'no d del' 'out out out' 'm m m' 'tag tag tag';row-gap:7px}
#m-insp-wiz .insp-rc-no{grid-area:no}#m-insp-wiz .insp-rc-d{grid-area:d;width:100%!important;height:40px!important}
#m-insp-wiz .insp-rc-out{grid-area:out;display:grid;grid-template-columns:1fr 1fr}#m-insp-wiz .insp-rc-out button{justify-content:center;padding:10px;font-size:13.5px}
#m-insp-wiz .insp-rc-m{grid-area:m;height:40px!important}#m-insp-wiz .insp-rc-del{grid-area:del}#m-insp-wiz .insp-rc-tag{grid-area:tag}
#m-insp-wiz .insp-rc-row:not(.now) .insp-rc-tag{display:none}
#m-insp-wiz .insp-ft-done{padding:14px;font-size:14px}
/* ── 검수하기(일정 상세 → 단계별 검수) ── */
.m-iw-tabs{flex-shrink:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:0 12px 10px;border-bottom:1px solid var(--border)}
.m-iw-tab{display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:0;border:1.5px solid var(--border);background:var(--white);border-radius:10px;padding:6px 6px 7px;font:inherit;color:var(--text2);text-align:left}
.m-iw-top{display:flex;align-items:center;gap:4px;min-width:0}
.m-iw-n{flex:none;width:18px;height:18px;border-radius:50%;background:var(--surface);color:var(--text2);font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.m-iw-t{font-size:11.5px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.3px}
.m-iw-d{font-size:10.5px;font-weight:600;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;min-height:13px}
.m-iw-d em{font-style:normal;font-weight:700;color:var(--red)}
.m-iw-d .insp-dots{gap:2px}.m-iw-d .insp-dots i{width:8px;height:8px}
/* 칸 전체 색으로 상태 — 끝남 초록 · 지금 할 일 노랑 · 일부 주황 · 보완 노랑 · 불합격 빨강 · 미완성 하늘 */
.m-iw-tab.st-done{border-color:#86efac;background:#f0fdf4}.m-iw-tab.st-done .m-iw-n{background:var(--green);color:#fff}.m-iw-tab.st-done .m-iw-d{color:#15803d}
.m-iw-tab.st-now{border-color:#eab308;background:#fefce8}.m-iw-tab.st-now .m-iw-n{background:#ca8a04;color:#fff}.m-iw-tab.st-now .m-iw-d{color:#854d0e}
.m-iw-tab.st-warn{border-color:#fdba74;background:#fff7ed}.m-iw-tab.st-warn .m-iw-n{background:#f59e0b;color:#fff}
.m-iw-tab.st-res-cond{border-color:#fde047;background:#fefce8}.m-iw-tab.st-res-cond .m-iw-n{background:#ca8a04;color:#fff}.m-iw-tab.st-res-cond .m-iw-d{color:#a16207;font-weight:800}
.m-iw-tab.st-res-fail{border-color:#fca5a5;background:#fef2f2}.m-iw-tab.st-res-fail .m-iw-n{background:var(--red);color:#fff}.m-iw-tab.st-res-fail .m-iw-d{color:var(--red);font-weight:800}
.m-iw-tab.st-res-wip{border-color:#7dd3fc;background:#f0f9ff}.m-iw-tab.st-res-wip .m-iw-n{background:#0284c7;color:#fff}.m-iw-tab.st-res-wip .m-iw-d{color:#0369a1;font-weight:800}
.m-iw-tab.on{box-shadow:0 0 0 2.5px var(--accent);border-color:var(--accent)}
.m-iw-n .ico-svg{display:block}
.m-iw-s{margin-left:auto;flex:none;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:900;color:#fff;background:var(--text3)}
.m-iw-s .ico-svg{display:block}
.m-iw-tab.st-done .m-iw-s{background:var(--green)}
.m-iw-tab.st-res-cond .m-iw-s{background:#ca8a04}
.m-iw-tab.st-res-fail .m-iw-s{background:var(--red)}
.m-iw-tab.st-res-wip .m-iw-s{background:#0284c7}
.m-iw-tab .m-iw-n{background:#e5e7eb!important;color:var(--text2)!important}
.m-iw-tab.st-now .m-iw-n{background:#ca8a04!important;color:#fff!important}
.m-iw-tab.on .m-iw-n{background:var(--accent)!important;color:#fff!important}
.m-sched-insp-go{display:flex!important;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:14px;height:44px;font-size:15px!important;font-weight:800!important;border-radius:11px!important}
#m-insp-wiz.moverlay{align-items:stretch!important;justify-content:stretch!important;padding:0!important;z-index:640!important}
/* 검수하기 화면(640) 안에서 여는 날짜 선택(재검수일 등)은 그 위로 */
#m-datepick.moverlay{z-index:700!important}
#m-insp-wiz .mdl{width:100%!important;max-width:none!important;height:calc(100vh / var(--m-fs, 1))!important;max-height:none!important;border-radius:0!important;
  display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);box-sizing:border-box}
#m-insp-wiz .mdl-h{flex-shrink:0}
#m-insp-wiz .mdl-title{display:flex;align-items:center;gap:6px}
.m-iw-no{font-family:var(--mono);font-weight:800;color:var(--accent)}
#m-insp-wiz .mdl-b{flex:1;min-height:0;overflow-y:auto;padding:12px 14px 20px;-webkit-overflow-scrolling:touch}
#m-insp-wiz .mdl-foot{flex-shrink:0;display:flex;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
#m-insp-wiz .mdl-foot .btn{flex:1;height:44px;font-size:14px;font-weight:700;justify-content:center}
#m-insp-wiz .mdl-foot .btn:disabled{opacity:.4}
.m-iw-info{font-size:12px;color:var(--text2);background:var(--surface);border-radius:9px;padding:8px 11px;margin-bottom:12px;line-height:1.6}
.m-iw-empty{padding:40px 10px;text-align:center;color:var(--text3);font-size:13px;line-height:1.8}
/* 검수하기 최종 확인 아래 — 검수 시간 · 비용 입력(app.js inspCostPartHtml, 검수 비용 관리와 연동) */
.insp-cost-part{margin-top:16px!important;padding-top:14px!important;border-top:1px dashed var(--border)}
.insp-cost-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.insp-cost-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.insp-cost-f>span:first-child{font-size:12.5px;font-weight:700;color:var(--text2)}
.insp-cost-inp{display:flex;align-items:center;gap:6px;height:48px;padding:0 12px;border:1.5px solid var(--border);border-radius:11px;background:var(--white)}
.insp-cost-inp:focus-within{border-color:var(--accent)}
.insp-cost-inp input{flex:1;min-width:0;width:100%;border:none;outline:none;background:transparent;font-size:18px;font-weight:800;font-family:var(--mono);color:var(--text);text-align:right;padding:0}
.insp-cost-inp input:disabled{color:var(--text3)}
.insp-cost-inp b{font-size:15px;color:var(--text3)}
.insp-cost-inp i{font-style:normal;font-size:12.5px;color:var(--text3);white-space:nowrap}
.insp-cost-msg{display:flex;align-items:center;gap:6px;margin-top:10px;padding:9px 11px;border-radius:10px;font-size:12.5px;font-weight:700;line-height:1.45;background:var(--surface);color:var(--text3)}
.insp-cost-msg.ok{background:var(--green-lt);color:var(--green)}
.insp-cost-msg.warn{background:var(--orange-lt);color:var(--orange)}
.insp-cost-msg.bad{background:var(--red-lt);color:var(--red)}
.insp-cost-msg .ico-svg{flex-shrink:0}
.insp-cost-inp.dev-warn{border-color:var(--orange);background:var(--orange-lt)}
.insp-cost-inp.dev-bad{border-color:var(--red);background:var(--red-lt)}
/* 검수 회차 카드 — 첫 검수 · 재검수마다 하나(시작 ~ 종료 → 검수시간 자동, 검수비 · 이동비 따로) */
.insp-visits{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.insp-visit{border:1.5px solid var(--border);border-radius:13px;padding:11px 12px 12px;background:var(--white)}
.insp-visit.now{border-color:var(--accent)}
.insp-visit .insp-cost-msg{margin-top:9px}
.insp-visit-h{display:flex;align-items:center;gap:7px;margin-bottom:10px;min-width:0}
.insp-visit-h b{font-size:14px;color:var(--text);white-space:nowrap}
.insp-visit-n{flex:none;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.insp-visit-d{font-size:12px;color:var(--text3);font-family:var(--mono)}
.insp-visit-sum{margin-left:auto;font-size:12px;font-weight:800;color:var(--green);white-space:nowrap}
.insp-visit-sum.todo{color:var(--accent)}
.insp-visit-time{display:flex;align-items:flex-end;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.insp-visit-t{display:flex;flex-direction:column;gap:4px;flex:1 1 0;min-width:0}
.insp-visit-t>span{font-size:12px;font-weight:700;color:var(--text2)}
.insp-visit-t input{height:44px;width:100%;min-width:0;border:1.5px solid var(--border);border-radius:11px;padding:0 8px;font-size:16px;font-weight:800;font-family:var(--mono);color:var(--text);background:var(--white);outline:none}
.insp-visit-t input:focus{border-color:var(--accent)}
.insp-visit-tilde{padding-bottom:12px;font-weight:800;color:var(--text3)}
.insp-visit-hrs{flex:1 1 100%;display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;color:var(--accent);background:var(--accent-lt);border-radius:9px;padding:7px 10px}
.insp-visit-night{margin-left:auto;font-style:normal;font-size:12px;font-weight:800;color:#fff;background:#3C3C8F;border-radius:999px;padding:2px 9px;white-space:nowrap}
.insp-visit-total .insp-visit-night{margin-left:4px;font-size:11px}
.insp-visit-hrs.empty{color:var(--text3);background:var(--surface);font-weight:600}
.insp-visit .insp-cost-inp{height:44px}
.insp-visit .insp-cost-inp input{font-size:16px}
.insp-visit-total{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:10px;padding:10px 12px;border-radius:11px;background:var(--surface);font-size:12px;color:var(--text2)}
.insp-visit-total b{margin-left:auto;font-size:16px;font-family:var(--mono);color:var(--text)}
/* 휴대폰 폭에 맞게 — 줄마다 이름표 위, 입력칸 아래 */
#m-insp-wiz .insp-part-h b{font-size:15px}
#m-insp-wiz .insp-part-h>span:not(.insp-part-n){white-space:normal}
#m-insp-wiz .insp-chk-row{flex-wrap:wrap;gap:7px;margin-bottom:12px}
#m-insp-wiz .insp-lbl{flex:1 1 100%;min-width:0!important;font-size:12.5px}
#m-insp-wiz .insp-res{flex:1;padding:10px 4px;font-size:14px;text-align:center}
#m-insp-wiz .insp-res-grid .insp-res{min-height:72px;padding:11px 2px 10px;font-size:13.5px}
#m-insp-wiz .insp-note{flex:1 1 100%;min-width:0!important;height:42px!important;font-size:14px}
.insp-note::placeholder{color:var(--text3);opacity:.55}
#m-insp-wiz .insp-cb{padding:9px 12px;font-size:13.5px}
#m-insp-wiz .insp-cb input{width:17px;height:17px}
#m-insp-wiz .insp-slicer button{padding:7px 13px;font-size:13px}
#m-insp-wiz .insp-follow-date{height:42px!important;font-size:14px}
#m-insp-wiz .insp-fix-photos{margin:4px 0 0}
/* 보완 사진 · 검수하기 1단계(사진 넣기) — 휴대폰 폭에 맞춰 3열 정사각형(고정 104px이면 2장만 들어감) */
.insp-fix-photos .insp-slots,#m-insp-wiz .insp-sectors .insp-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.insp-fix-photos .insp-ph,.insp-fix-photos .insp-add,.insp-fix-photos .insp-slot-wrap,
#m-insp-wiz .insp-sectors .insp-ph,#m-insp-wiz .insp-sectors .insp-add,#m-insp-wiz .insp-sectors .insp-slot-wrap{width:auto;height:auto;aspect-ratio:1/1;min-width:0}
.insp-fix-photos .insp-slot-wrap>*,#m-insp-wiz .insp-sectors .insp-slot-wrap>*{width:100%;height:100%}
#m-insp-wiz .insp-sub-row{padding-left:4px}
#m-insp-wiz .insp-sectors{display:flex;flex-direction:column;gap:10px}
#m-insp-wiz .insp-sec{margin:0}
#m-insp-wiz .insp-sec-h{flex-wrap:wrap}
#m-insp-wiz .insp-wx{background:transparent;border:0;padding:0}
#m-insp-wiz .insp-wx-pre{max-height:none;font-size:13.5px}
#m-insp-wiz .insp-wx-f .btn{height:40px;padding:0 22px;font-size:14px}
.insp-wx-share{display:inline-flex;align-items:center;gap:5px;background:#07c160!important;border-color:#07c160!important;color:#fff!important}
.insp-wx-share .ico-svg{display:block}
/* 복사 버튼 — 흰 바탕 + 파란 테두리(공유는 초록 꽉 찬 버튼), 누르면 잠깐 초록 "복사됨" */
.insp-wx-copy{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--white)!important;border:1.5px solid var(--accent)!important;color:var(--accent)!important;font-weight:800!important;transition:background .15s,color .15s,border-color .15s,transform .08s}
.insp-wx-copy .ico-svg{display:block}
.insp-wx-copy:active{transform:scale(.97);background:var(--accent-lt)!important}
.insp-wx-copy.done{background:#f0fdf4!important;border-color:#16a34a!important;color:#16a34a!important}
#m-insp-wiz .insp-wx-f{gap:8px;margin-top:10px}
#m-insp-wiz .insp-wx-f .insp-wx-copy,#m-insp-wiz .insp-wx-f .insp-wx-share{flex:1;height:48px!important;border-radius:12px!important;font-size:15px!important;font-weight:800!important;justify-content:center}

/* 보완 합격 = 노란 계열(판정 버튼과 같은 색) — 미완성(파랑) · 불합격(빨강)처럼 칸 전체를 그 색으로, 노란 점은 없음 */
.insp-step.res-cond,.insp-fin-row.res-cond,.insp-flow-box.res-cond,.m-iw-tab.st-res-cond{border-color:#fcd34d;background:#fffbeb}
.insp-step.res-cond .insp-step-n,.insp-fin-row.res-cond .insp-fin-n,.insp-flow-box.res-cond .insp-fin-n,.m-iw-tab.st-res-cond .m-iw-n{background:#d97706;color:#fff}
.insp-step.res-cond .insp-step-d,.insp-fin-row.res-cond .insp-fin-d,.insp-flow-box.res-cond .insp-fin-d{color:#b45309;font-weight:700}
.m-iw-tab.st-res-cond .m-iw-d{color:#b45309;font-weight:800}
.m-iw-tab.st-res-cond .m-iw-s{background:#d97706}
.insp-sum.cond{background:#fef3c7;color:#b45309} /* 보완 = 노란 계열(판정 버튼 · 상태칸과 같은 색), 노란 점 없음 */

#m-insp-wiz .insp-rc-row{grid-template-columns:40px 1fr auto!important;grid-template-areas:'no d tag' 'out out out' 'why why why'!important}
#m-insp-wiz .insp-rc-why{padding-left:0}#m-insp-wiz .insp-rc-why button{padding:7px 12px;font-size:13px}
#m-insp-wiz .insp-rc-etc{flex:1 1 100%;height:40px!important}
#m-insp-wiz .insp-rc-row>.insp-rc-del{grid-area:tag}

/* 재검수 회차 카드 — ① 이유 ② 날짜 ③ 결과를 칸으로 나눔 */
.insp-rc-table{display:flex;flex-direction:column;gap:10px}
.insp-rc-card{background:var(--white);border:1.5px solid var(--border);border-radius:12px;overflow:hidden}
.insp-rc-card.now{border:2px solid #7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.insp-rc-card.pass{border-color:#bbf7d0}
.insp-rc-ch{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f5f3ff;border-bottom:1px solid #ede9fe}
.insp-rc-card.pass .insp-rc-ch{background:#f0fdf4;border-bottom-color:#dcfce7}
.insp-rc-ch b{font-size:13.5px;color:#5b21b6}
.insp-rc-card.pass .insp-rc-ch b{color:#15803d}
.insp-rc-badge{font-size:11px;font-weight:800;border-radius:999px;padding:2px 9px;background:#ede9fe;color:#6d28d9}
.insp-rc-badge.pass{background:var(--green-lt);color:#15803d}.insp-rc-badge.now{background:#7c3aed;color:#fff}
.insp-rc-ch .insp-rc-del{margin-left:auto}
.insp-rc-sec{display:grid;grid-template-columns:22px 40px 1fr;align-items:center;gap:8px;padding:10px 12px;border-top:1px dashed #e5e7eb}
.insp-rc-ch+.insp-rc-sec{border-top:0}
.insp-rc-sn{width:20px;height:20px;border-radius:50%;background:#ede9fe;color:#6d28d9;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center}
.insp-rc-st{font-size:12px;font-weight:800;color:var(--text2)}
.insp-rc-sb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.insp-rc-sec.out{background:#fafafa}
.insp-rc-out{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;width:100%;border:0!important;border-radius:0!important;overflow:visible!important}
.insp-rc-out button{display:flex!important;flex-direction:column;align-items:center;gap:2px;border:2px solid var(--border)!important;border-radius:10px;padding:10px 6px!important;font-size:13.5px!important;font-weight:800;background:var(--white);color:var(--text2);cursor:pointer}
.insp-rc-out button small{font-size:10.5px;font-weight:600;opacity:.75}
.insp-rc-out button .ico-svg{margin-bottom:1px}
.insp-rc-out button.pass:hover{border-color:#86efac!important}.insp-rc-out button.again:hover{border-color:#c4b5fd!important}
.insp-rc-out button.pass.on{background:var(--green);border-color:var(--green)!important;color:#fff}
.insp-rc-out button.again.on{background:#7c3aed;border-color:#7c3aed!important;color:#fff}
.insp-rc-why{display:flex;flex-wrap:wrap;gap:5px;align-items:center;padding-left:0!important;width:100%}
.insp-rc-need{font-size:12px;font-weight:700;color:#b45309}
.insp-rc-d{height:34px!important}
#m-insp-wiz .insp-rc-sec{grid-template-columns:22px 1fr;grid-template-areas:'sn st' 'sb sb';row-gap:7px}
#m-insp-wiz .insp-rc-sn{grid-area:sn}#m-insp-wiz .insp-rc-st{grid-area:st}#m-insp-wiz .insp-rc-sb{grid-area:sb}
#m-insp-wiz .insp-rc-d{height:42px!important;flex:1}
#m-insp-wiz .insp-rc-out button{padding:14px 6px!important;font-size:14.5px!important}

/* 결과 버튼 — 이상 없음을 더 넓게, 높이는 낮게(아이콘 · 이름 한 줄) */
.insp-rc-out{grid-template-columns:1.6fr 1fr!important}
.insp-rc-out button{flex-direction:row!important;justify-content:center;gap:6px!important;padding:7px 8px!important}
.insp-rc-out button small{margin-left:2px}
#m-insp-wiz .insp-rc-out button{padding:10px 6px!important}
.insp-rc-out{grid-template-columns:7fr 3fr!important}
.insp-rc-out button.again small{display:none}

/* 재검수 날짜 — 칸 오른쪽 안에 달력 아이콘. 칸 어디를 눌러도 날짜 고르기(기본 아이콘은 투명하게 칸 전체에 깔기) */
.insp-rc-dwrap{position:relative;display:inline-flex;align-items:center}
.insp-rc-dwrap .insp-rc-d{padding-right:34px!important;position:relative;min-width:150px}
.insp-rc-dwrap>.ico-svg{position:absolute;right:10px;color:#7c3aed;pointer-events:none}
.insp-rc-dwrap .insp-rc-d::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;opacity:0;cursor:pointer;margin:0}
#m-insp-wiz .insp-rc-dwrap{flex:1}#m-insp-wiz .insp-rc-dwrap .insp-rc-d{width:100%!important}

/* 기타 + 직접 적는 칸은 한 묶음 — 칸이 기타 바로 오른쪽에 붙고, 줄이 모자라면 묶음째 다음 줄로 */
.insp-rc-etcgrp{display:inline-flex;align-items:center;gap:5px;flex-wrap:nowrap;min-width:0}
.insp-rc-etcgrp.open{flex:1 1 220px}
.insp-rc-etcgrp .insp-rc-etc{flex:1 1 auto;min-width:0!important;width:auto}
#m-insp-wiz .insp-rc-etcgrp.open{flex:1 1 100%}#m-insp-wiz .insp-rc-etcgrp .insp-rc-etc{flex:1 1 auto!important}

/* ── 검수하기 상태칸 v2 — 위 여백 · 가운데 정렬(아이콘 원 → 이름 → 내용), 번호 왼쪽 위 · 상태 기호 오른쪽 위 ── */
.m-iw-tabs{padding:12px 12px 12px!important;gap:6px!important;background:var(--bg,#f8f9fa)}
.m-iw-tab{position:relative;display:flex!important;flex-direction:column!important;align-items:center!important;gap:3px!important;padding:12px 4px 9px!important;border-radius:13px!important;text-align:center!important;background:var(--white);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.m-iw-tab .m-iw-n{position:absolute;top:5px;left:6px;width:16px!important;height:16px!important;font-size:9.5px!important;border-radius:50%}
.m-iw-tab .m-iw-s{position:absolute!important;top:5px;right:6px;margin:0!important;width:16px!important;height:16px!important;font-size:9.5px!important}
.m-iw-tab .m-iw-s .ico-svg{width:10px;height:10px}
.m-iw-ic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f1f3f4;color:var(--text3);margin-top:2px}
.m-iw-tab .m-iw-t{font-size:12.5px!important;font-weight:800;color:var(--text);letter-spacing:-.2px}
.m-iw-tab .m-iw-d{font-size:10.5px!important;max-width:100%;text-align:center;line-height:1.3;min-height:14px}
.m-iw-tab .m-iw-d .insp-dots{justify-content:center}
/* 상태별 아이콘 원 색 */
.m-iw-tab.st-done .m-iw-ic{background:#dcfce7;color:#16a34a}
.m-iw-tab.st-now .m-iw-ic{background:#fef3c7;color:#b45309}
.m-iw-tab.st-warn .m-iw-ic{background:#ffedd5;color:#ea580c}
.m-iw-tab.st-res-cond .m-iw-ic{background:#fef3c7;color:#d97706}
.m-iw-tab.st-res-fail .m-iw-ic{background:#fee2e2;color:#dc2626}
.m-iw-tab.st-res-wip .m-iw-ic{background:#e0f2fe;color:#0284c7}
.m-iw-tab.on{box-shadow:0 0 0 2.5px var(--accent),0 4px 10px rgba(66,133,244,.18)!important}
.m-iw-tab.on .m-iw-ic{transform:scale(1.06)}

/* ── 재검수 날짜 칸(최종) — 폭 고정 · 비어 있으면 흰 칸 · 오른쪽에 구분선 있는 달력 버튼 모양 · 안내 문구는 칸 오른쪽 ── */
.insp-rc-dwrap{position:relative;display:inline-flex!important;align-items:center;flex:0 0 auto!important}
.insp-rc-dwrap .insp-rc-d{width:170px!important;min-width:0!important;height:36px!important;padding:2px 42px 2px 10px!important;background:#f3f4f6}
.insp-rc-dwrap .insp-rc-d.empty{background:#fff!important;color:var(--text3)}
.insp-rc-cal{position:absolute;right:2px;top:2px;bottom:2px;width:32px;display:flex;align-items:center;justify-content:center;border-left:1px solid var(--border);border-radius:0 6px 6px 0;background:#f5f3ff;color:#7c3aed;pointer-events:none}
.insp-rc-need{display:inline-flex!important;align-items:center;font-size:12px;font-weight:700;color:#b45309;white-space:nowrap}
#m-insp-wiz .insp-rc-dwrap{flex:0 0 auto!important}#m-insp-wiz .insp-rc-dwrap .insp-rc-d{width:178px!important;height:42px!important;flex:none!important}
#m-insp-wiz .insp-rc-cal{width:36px}

/* ── 재검수 지난 회차 접기 · 이번 회차 순서(이유 → 날짜 → 결과) ── */
.insp-rc-fold{background:var(--white);border:1.5px solid var(--border);border-radius:12px;overflow:hidden}
.insp-rc-fold.pass{border-color:#bbf7d0}
.insp-rc-sum{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;list-style:none;min-width:0}
.insp-rc-sum::-webkit-details-marker{display:none}
.insp-rc-sum b{font-size:13px;color:#5b21b6;white-space:nowrap}
.insp-rc-fold.pass .insp-rc-sum b{color:#15803d}
.insp-rc-sum .d{font-size:12px;font-weight:700;color:var(--text2);white-space:nowrap}
.insp-rc-sum .w{font-size:12px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.insp-rc-sum .chev{display:flex;color:var(--text3);transition:transform .15s}.insp-rc-sum .insp-rc-badge{flex:none;white-space:nowrap}
.insp-rc-fold[open] .insp-rc-sum .chev{transform:rotate(90deg)}
.insp-rc-fold[open] .insp-rc-sum{border-bottom:1px solid #ede9fe;background:#faf5ff}
.insp-rc-fold.pass[open] .insp-rc-sum{background:#f0fdf4;border-bottom-color:#dcfce7}
.insp-rc-card.in-fold{border:0;border-radius:0}
.insp-rc-card.in-fold .insp-rc-ch{background:transparent;border-bottom:0;padding:6px 12px 0;justify-content:flex-end}
.insp-rc-card.in-fold .insp-rc-ch b{display:none}
.insp-rc-card.in-fold .insp-rc-del{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:700;margin-left:0}
/* 불합격 1차 재검수 이유 = 판정 사유(읽기 전용) */
.insp-rc-issue{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;font-size:12px;color:var(--text3);background:var(--red-lt);border-radius:8px;padding:6px 10px}
.insp-rc-issue .ico-svg{color:var(--red);flex-shrink:0}
.insp-rc-issue>span{font-weight:700}
.insp-rc-issue b{color:var(--red);font-weight:800;word-break:break-all}
#m-insp-wiz .insp-rc-issue{font-size:13.5px;padding:9px 11px;width:100%;box-sizing:border-box}
/* 지우기 버튼 — ① 이유 줄 오른쪽 끝 */
.insp-rc-sec.has-del{grid-template-columns:22px 40px 1fr auto}
.insp-rc-sec>.insp-rc-del{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:700;white-space:nowrap}
#m-insp-wiz .insp-rc-sec.has-del{grid-template-columns:22px 1fr auto;grid-template-areas:'sn st del' 'sb sb sb'}
#m-insp-wiz .insp-rc-sec>.insp-rc-del{grid-area:del;padding:6px;margin:-6px -4px -6px 0;border-radius:8px}
.insp-rc-card.in-fold>.insp-rc-sec:first-child{border-top:0}
.insp-rc-sec.off{opacity:.45}
.insp-rc-sec.off .insp-rc-d{cursor:not-allowed}
.insp-rc-wait{font-size:12px;font-weight:700;color:var(--text3);padding:6px 0}
#m-insp-wiz .insp-rc-sum{padding:12px}#m-insp-wiz .insp-rc-sum b{font-size:14px}

/* ── 하단바 메뉴 고르기(내정보 > 설정) ── */
.m-bb-preview{display:flex;gap:4px;background:var(--surface);border-radius:11px;padding:5px;margin-bottom:9px}
.m-bb-chip{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;border-radius:8px;font-size:10.5px;font-weight:700;color:var(--text2);position:relative;white-space:nowrap}
.m-bb-chip.on{background:#fff;color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.m-bb-chip.fixed{color:var(--text3)}
.m-bb-chip.fixed i{position:absolute;top:3px;right:5px;display:flex;opacity:.6}
.m-bb-opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.m-bb-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 2px 9px;border:1.5px solid var(--border);border-radius:11px;background:#fff;color:var(--text2);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.m-bb-opt .ico-svg{display:block}
.m-bb-opt b{position:absolute;top:-6px;right:-6px;width:19px;height:19px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.m-bb-opt b.add{background:var(--surface);color:var(--text3);border-color:var(--border)}
.m-bb-opt.on{border-color:var(--accent);background:var(--accent-lt);color:var(--accent)}
.m-bb-opt:active{transform:scale(.96)}
.m-bb-foot{display:flex;align-items:center;justify-content:space-between;margin-top:9px;font-size:10.5px;color:var(--text3)}
.m-bb-foot button{border:1px solid var(--border);background:#fff;border-radius:7px;padding:4px 10px;font:inherit;font-size:11px;font-weight:700;color:var(--text2);cursor:pointer}
/* 사이드바 메뉴(태블릿 · mRenderTabletSidebarPicker) — 사이드바 모양 그대로 세로 목록, 줄마다 ▲ ▼ ✕ */
.fgrp.m-tsb-setting{display:none!important} /* 휴대폰에선 숨김 — "진짜 태블릿"에서만 보임 */
.m-tsb-list{display:flex;flex-direction:column;gap:4px;background:var(--surface);border-radius:11px;padding:6px;margin-bottom:9px}
.m-tsb-row{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 6px 0 12px;border-radius:9px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08);font-size:13.5px;font-weight:700;color:var(--text)}
.m-tsb-row>.ico-svg{flex-shrink:0;color:var(--accent)}
.m-tsb-row>span{flex:1;min-width:0}
.m-tsb-row.fixed{background:transparent;box-shadow:none;color:var(--text3)}
.m-tsb-row.fixed>.ico-svg{color:var(--text3)}
.m-tsb-row.fixed i{display:flex;opacity:.6;margin-right:8px}
.m-tsb-btn{width:38px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text2);cursor:pointer;flex-shrink:0}
.m-tsb-btn.up .ico-svg{transform:rotate(-90deg)}
.m-tsb-btn.down .ico-svg{transform:rotate(90deg)}
.m-tsb-btn.del{color:var(--red);border-color:#fecaca}
.m-tsb-btn:disabled{opacity:.3;cursor:default}
.m-tsb-btn:not(:disabled):active{background:var(--surface)}
.m-tsb-sub{font-size:11px;color:var(--text3);margin:2px 2px 6px}

/* ── 검수일정: 지난 검수 · 미등록 ──
   감싸는 상자 없이 "구역 제목"으로만 나눈다 — 줄 카드는 아래 예정 검수와 크기 · 구분선 위치가 완전히 같다.
   지난 검수 제목은 빨간 막대 + 빨간 글씨, 줄 카드는 테두리 색만 연한 빨강(두께는 그대로). 아래에 "예정 검수" 제목 */
.m-insp-od{margin-bottom:6px}
.m-insp-sec-h{display:flex;align-items:center;gap:6px;margin:2px 0 7px;padding-left:9px;border-left:3.5px solid var(--text3);font-size:13px;font-weight:800;color:var(--text2);line-height:1.2}
.m-insp-sec-h .ico-svg{display:block;flex-shrink:0}
.m-insp-sec-h.od{border-left-color:var(--red);color:var(--red)}
.m-insp-od-n{margin-left:auto;background:var(--red);color:#fff;font-size:11.5px;font-weight:800;border-radius:999px;padding:1px 8px}
.m-insp-od-sub{font-size:11.5px;color:#b91c1c;opacity:.8;margin:-3px 0 8px 12.5px}
.m-insp-od .mcard{border-color:#fca5a5}
.m-insp-od-more{display:block;width:100%;margin:0 0 4px;padding:7px 0;border:0;background:transparent;color:var(--red);font:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
.m-insp-sec-h.up{margin-top:14px;padding-top:0}
#mh-insp-overdue:empty+#mh-my-insp-list .m-insp-sec-h.up{margin-top:2px} /* 지난 검수가 없으면 맨 위라 위 여백 없이 */
.m-insp-up-n{margin-left:auto;background:var(--surface);color:var(--text2);border:1px solid var(--border);font-size:11.5px;font-weight:800;border-radius:999px;padding:0 8px}

/* ── 하단바 아래로 화면이 비치는 문제 (휴대폰) ──
   #main 높이를 calc(100vh / var(--m-vz, 1))로 계산하면 WebView에 따라 실제 화면과 어긋나, 문서 전체가 끌려 올라가며
   하단바 아래로 내용이 보였다. 태블릿에서 쓰던 방법과 같이 #main을 화면 네 변에 붙이고(vh 계산 안 씀)
   문서 자체는 스크롤되지 않게 막는다 — 스크롤은 #page-wrap 안에서만.
   그래도 틈이 생기는 기기를 위해 하단바 아래쪽을 흰 판으로 한 번 더 덮는다. */
@media (max-width: 899.98px), (min-width: 900px) and (max-width: 1599.98px) and (pointer: coarse) {
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  body #main { position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: auto !important; }
  #page-wrap { overscroll-behavior-y: contain; }
  #m-bottombar::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 300px; background: #fff; pointer-events: none; }
  /* 드래그하는 동안(브라우저 주소창이 접히고 펴질 때 등) 하단바가 한 박자 늦게 따라와 틈이 생기지 않게
     하단바를 따로 한 층으로 올려 화면에 붙여 두고, 아래쪽도 흰 그림자로 넉넉히 칠해 둔다 */
  #m-bottombar { transform: translateZ(0); will-change: transform; box-shadow: 0 300px 0 0 #fff; }
  html { background: #fff; }
}

/* ── 검수일정: 최근 완료된 검수 + 전체 보기 ── */
#mh-insp-done{margin-top:16px}
.m-insp-sec-h.done{border-left-color:#16a34a;color:#15803d}
.m-idone-tog{cursor:pointer;padding-top:4px;padding-bottom:4px;margin-bottom:6px}
.m-idone-n{background:#dcfce7;color:#15803d;font-size:11.5px;font-weight:800;border-radius:999px;padding:1px 8px}
.m-idone-chev{margin-left:auto;display:flex;color:var(--text3);transition:transform .15s}
.m-idone-chev.open{transform:rotate(90deg)}
.m-idone-all{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;margin-top:4px;padding:11px 0;border:1px dashed var(--border2);border-radius:10px;background:#fff;color:var(--text2);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.m-idone-all b{color:#15803d}
.m-idone-all .ico-svg{display:block;color:#16a34a}
.m-idone-row{display:flex;align-items:center;gap:8px;padding:10px 11px;margin-bottom:5px;cursor:pointer}
.m-idone-mgr{flex-shrink:0;width:50px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;font-weight:700;padding:2px 6px;border-radius:5px;white-space:normal;word-break:break-word;line-height:1.25}
.m-idone-sep{width:1px;align-self:stretch;background:var(--border);flex-shrink:0}
.m-idone-fac{flex-shrink:0;font-size:11px;font-weight:700;padding:1px 5px;border-radius:4px;background:var(--surface);border:1px solid var(--border);color:var(--text2)}
.m-idone-date{display:inline-flex;align-items:center;justify-content:flex-end;gap:3px;width:62px;font-size:12.5px;font-family:var(--mono);font-weight:700;color:var(--text2);flex-shrink:0;white-space:nowrap}
.m-idone-badge{flex-shrink:0;font-size:11px;font-weight:800;padding:3px 7px;border-radius:999px;white-space:nowrap}
.m-idone-badge.ok{background:#dcfce7;color:#15803d}
.m-idone-badge.cond{background:#fef3c7;color:#b45309}
.m-idone-badge.vio{background:#ede9fe;color:#6d28d9}
.m-idone-badge.bad{background:var(--red-lt);color:var(--red)}
.m-idone-badge.gray{background:var(--surface);color:var(--text3)}
.m-idone-filters{display:flex;gap:6px;margin-bottom:8px}
/* 검색창 — 흰 바탕 + 왼쪽 돋보기 아이콘(글자는 아이콘 오른쪽부터) */
.m-idone-search{position:relative;flex:1;min-width:0;display:block}
.m-idone-search>span{position:absolute;left:11px;top:50%;transform:translateY(-50%);display:flex;color:var(--text3);pointer-events:none}
.m-idone-search .finput{width:100%;height:40px!important;font-size:13.5px;padding-left:34px!important;background:#fff!important;box-sizing:border-box}
.m-idone-filters .fsel{flex-shrink:0;width:auto;height:40px;font-size:13px}
.m-idone-cnt{font-size:11.5px;font-weight:700;color:var(--text3);margin:0 2px 6px}

/* ── 검수일정 위쪽(제목 · 담당자별/공장별 묶기 + 아래 구분선) 고정 ──
   목록을 끌어 내려도 항상 맨 위에 붙어 있게(sticky). 배경을 칠해 아래로 지나가는 카드가 비치지 않게 하고,
   본문 좌우 여백(12px)만큼 넓혀 구분선이 화면 끝까지 이어지게 한다 */
/* 진행 중인 발주(#pg-ord-list)도 같은 방식으로 위쪽 고정 */
#pg-insp-list > .sec-hd, #pg-ord-list > .sec-hd {
  /* 본문 위 여백(12px + 상태바 자리) 때문에 고정된 머리말 위로 틈이 생겨 카드가 비쳤다 —
     머리말을 그 여백만큼 위로 끌어올려 스크롤 영역 맨 위 끝에서 시작하게 하고(margin-top · top 음수),
     끌어올린 만큼은 안쪽 여백(padding-top)으로 채워 글자 위치는 그대로 둔다. 위로 틈 자체가 없다 */
  --ih-gap: calc(12px + env(safe-area-inset-top, 0px));
  position: sticky; top: calc(-1 * var(--ih-gap)); z-index: 30;
  background: var(--bg);
  margin: calc(-1 * var(--ih-gap)) -12px 10px !important;
  padding: calc(var(--ih-gap) + 10px) 12px 10px !important;
  box-shadow: 0 -80px 0 0 var(--bg);
}
/* 태블릿 — 본문 여백이 위 16px · 좌우 24px라(휴대폰은 12px) 위 12px · 좌우 12px만 덮던 머리말 위 4px와 양옆 12px 틈으로
   목록을 끌 때 카드가 비쳤다. 태블릿 여백만큼 덮는다. 머리말은 흰 바탕(태블릿 본문 바탕과 같게) */
@media (min-width: 600px) and (max-width: 1599.98px) and (min-height: 600px) and (pointer: coarse) {
  #pg-insp-list > .sec-hd, #pg-ord-list > .sec-hd {
    --ih-gap: calc(16px + env(safe-area-inset-top, 0px));
    margin: calc(-1 * var(--ih-gap)) -24px 10px !important;
    padding: calc(var(--ih-gap) + 10px) 24px 10px !important;
  }
  #pg-insp-list > .sec-hd, #pg-ord-list > .sec-hd { background: #fff; box-shadow: 0 -80px 0 0 #fff; }
}

/* 검수하기 마지막 단계 — 검수가 완전히 끝나면 닫기 버튼이 초록 「완료」로 */
#m-insp-wiz .mdl-foot .m-iw-donebtn{gap:6px;background:#16a34a!important;border-color:#16a34a!important;color:#fff!important}
#m-insp-wiz .mdl-foot .m-iw-donebtn .ico-svg{display:block}

/* ── 완료된 검수 필터 — 제품 보기 필터(#pv-filter-panel)와 같은 전체 화면 패널 ── */
@media (max-width: 899.98px), (min-width: 900px) and (max-width: 1599.98px) and (pointer: coarse) {
  #idone-filter-panel {
    position: fixed; inset: 0; z-index: 700; background: #fff;
    display: flex !important; flex-direction: column;
    transform: translateX(-100%); transition: transform .25s cubic-bezier(.4,0,.2,1);
  }
  #idone-filter-panel.open { transform: translateX(0); }
}
#idone-filter-panel .m-pill-n{font-family:var(--mono);font-size:10.5px;opacity:.65;margin-left:2px}
#idone-filter-panel .m-pill.on .m-pill-n{opacity:.9}
/* 검색창 왼쪽 필터 버튼 — 켜진 필터 수 배지 */
.m-idone-fbtn{position:relative;flex-shrink:0;width:40px;height:40px;background:#fff}
.m-idone-fbadge{display:none;position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--accent);color:#fff;font-size:10.5px;font-weight:800;align-items:center;justify-content:center;border:2px solid #fff;box-sizing:content-box}
.m-idone-fbadge.show{display:flex}

/* ── 위챗 보고: 공유 고르기 창(글 / 사진 / 글+사진 / 제품 사진만) — 아래에서 올라오는 시트 ── */
#insp-share-pick{position:fixed;inset:0;z-index:900;background:rgba(17,24,39,.45);display:none;align-items:flex-end;justify-content:center}
#insp-share-pick.show{display:flex}
.insp-sp-box{width:100%;max-width:520px;background:#fff;border-radius:18px 18px 0 0;padding:12px 14px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(0,0,0,.18)}
.insp-sp-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.insp-sp-h b{font-size:16px}
.insp-sp-opt{display:flex;align-items:center;gap:12px;width:100%;padding:12px;margin-bottom:6px;border:1.5px solid var(--border);border-radius:12px;background:#fff;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.insp-sp-opt:active{background:var(--surface)}
.insp-sp-opt:disabled{opacity:.45;cursor:not-allowed}
.insp-sp-opt>.ico-svg{margin-left:auto;color:var(--text3);flex-shrink:0}
.insp-sp-ic{width:38px;height:38px;border-radius:10px;background:#e7f8ee;color:#07a352;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.insp-sp-ic .ico-svg{display:block}
.insp-sp-t{display:flex;flex-direction:column;min-width:0}.insp-sp-t b{font-size:14.5px;font-weight:800}.insp-sp-t small{font-size:11.5px;color:var(--text3);margin-top:1px}
/* 사진 준비 중 — 공유 버튼 글자 대신 진행 상황 */
.insp-wx-share[data-busy]{font-size:0!important}
.insp-wx-share[data-busy]::after{content:attr(data-busy);font-size:13px;font-weight:800}
.insp-wx-share[data-busy] .ico-svg{display:none}



/* 일정 상세 — 검수표 PDF 한 줄(작게): [검수표 PDF] [한글|中文] [⬇ 다운] */
.m-sched-qc-row{display:flex;align-items:center;gap:6px;margin:0 0 10px;padding:5px 6px 5px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.m-sched-qc-lbl{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;color:var(--text2);margin-right:auto;white-space:nowrap}
.m-sched-qc-lbl .ico-svg{display:block}
.m-sched-qc-seg{display:inline-flex;background:#fff;border:1px solid var(--border);border-radius:8px;padding:2px;gap:2px}
.m-sched-qc-seg button{height:26px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--text3);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.m-sched-qc-seg button.on{background:var(--accent);color:#fff}
.m-sched-qc-dl{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;min-width:32px;padding:0 8px;border:0;border-radius:8px;background:var(--text);color:#fff;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;white-space:nowrap}
.m-sched-qc-dl .ico-svg{display:block}
.m-sched-qc-dl:disabled{opacity:.7}

/* 받을 사진 옆 「요청」 — 공장에 보완 사진을 요청했는지 표시 */
.insp-fix-req{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;padding:0 12px;border:1.5px solid #d97706;border-radius:8px;background:#fff;color:#b45309;font:inherit;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap}
.insp-fix-req .ico-svg{display:block}
.insp-fix-req.on{background:#d97706;border-color:#d97706;color:#fff}
#m-insp-wiz .insp-fix-row .insp-note{flex:1 1 0!important}
#m-insp-wiz .insp-fix-req{height:42px;padding:0 14px;font-size:13.5px}

/* ── 검수하기 1단계(사진 넣기) · 보완 사진 — 태블릿 배치 ──
   가로: 1 · 2 한 줄, 3 · 4 한 줄, 5는 한 줄 전체. 1~4 칸의 사진은 3열, 5는 6열, 보완 사진도 6열
   세로: 1~5 각각 한 줄, 칸마다 사진 5열(보완 사진도 5열). 휴대폰은 위의 3열 그대로 */
@media (min-width: 600px) and (max-width: 1599.98px) and (min-height: 600px) and (pointer: coarse) and (orientation: landscape) {
  #m-insp-wiz .insp-sectors { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
  #m-insp-wiz .insp-sectors > .insp-sec { min-width: 0; }
  #m-insp-wiz .insp-sectors > .insp-sec[data-sec="5"] { grid-column: 1 / -1; }
  #m-insp-wiz .insp-sectors .insp-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #m-insp-wiz .insp-sectors > .insp-sec[data-sec="5"] .insp-slots { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #m-insp-wiz .insp-fix-photos .insp-slots { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 600px) and (max-width: 1599.98px) and (min-height: 600px) and (pointer: coarse) and (orientation: portrait) {
  #m-insp-wiz .insp-sectors .insp-slots,
  #m-insp-wiz .insp-fix-photos .insp-slots { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* ── 태블릿 대시보드 "진행 중인 발주" — 상태 카테고리(전체 · 시작전 · 생산중 …)를 한 줄로, 그 위 구분선은 없앰 ──
   (app.js dashOrdFilterTabsHtml — PC 대시보드는 그대로 두 줄 허용 · 구분선 유지) */
@media (min-width: 600px) and (max-width: 1599.98px) and (min-height: 600px) and (pointer: coarse) {
  #dash-ord-body > .dash-ord-sep { display: none !important; }
  #dash-ord-body > .dash-ord-tabs {
    flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin-top: 2px;
  }
  #dash-ord-body > .dash-ord-tabs::-webkit-scrollbar { display: none; }
  /* 칸이 좁으면 버튼끼리 폭을 나눠 한 줄에 맞추고(글자는 줄바꿈 없이), 그래도 안 들어가면 옆으로 밀어서 봄 */
  #dash-ord-body > .dash-ord-tabs > .ptab { flex: 1 0 auto; justify-content: center; white-space: nowrap; padding-left: 7px; padding-right: 7px; }
}/* 세로 — 칸이 300px 남짓이라 아이콘을 빼고 간격 · 글자를 조금 줄여 여섯 개가 한 줄에 다 보이게 */
@media (min-width: 600px) and (max-width: 1599.98px) and (min-height: 600px) and (pointer: coarse) and (orientation: portrait) {
  #dash-ord-body > .dash-ord-tabs > .ptab { padding-left: 4px; padding-right: 4px; gap: 2px !important; font-size: 10.5px; }
  #dash-ord-body > .dash-ord-tabs > .ptab > span:first-child { display: none !important; }
}

/* ── 루틴 현황(관리자) — 태블릿 대시보드 박스 · 세부 팝업. PC(app/index.html)와 같은 모양(그대로 옮겨 옴) ── */
.rt-team-row{display:flex;align-items:center;gap:9px;padding:8px 8px;border-radius:9px;cursor:pointer;font-size:12.5px;transition:background .12s}
.rt-team-row+.rt-team-row{margin-top:2px}
.rt-team-row:hover{background:var(--surface)}
.rt-team-av{width:26px;height:26px;border-radius:50%;background:#e8f0fe;color:var(--accent);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rt-team-name{width:72px;flex-shrink:0;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-team-bar{display:block;flex:1;min-width:40px;height:7px;border-radius:999px;background:var(--surface);overflow:hidden;border:1px solid var(--border)}
.rt-team-bar i{display:block;height:100%;border-radius:999px}
.rt-team-rate{width:40px;text-align:right;font-family:var(--mono);font-weight:800;flex-shrink:0}
.rt-team-chips{display:flex;gap:4px;width:118px;flex-shrink:0;justify-content:flex-end}
.rt-chip{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;line-height:1.7;white-space:nowrap}
.rt-chip.miss{background:#fef2f2;color:#dc2626}
.rt-chip.open{background:var(--surface);color:var(--text3)}
.rt-team-go{color:var(--text3);font-size:15px;line-height:1;flex-shrink:0}
/* 루틴 현황 세부 팝업 */
.rt-dt-sum{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:8px;margin-bottom:14px}
.rt-dt-sum>div{border:1px solid var(--border);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.rt-dt-sum b{font-size:22px;font-family:var(--mono);line-height:1.1}
.rt-dt-sum span{font-size:11px;color:var(--text3)}
.rt-dt-box.miss b{color:#dc2626}.rt-dt-box.open b{color:var(--text2)}
.rt-dt-sec{font-size:12.5px;font-weight:800;color:var(--text);margin:12px 0 6px}
.rt-dt-sec span{font-weight:500;color:var(--text3);font-size:11px}
.rt-dt-tbl{width:100%;border-collapse:collapse;font-size:12px}
.rt-dt-tbl th{background:var(--surface);font-size:11px;font-weight:700;color:var(--text2);padding:6px 8px;text-align:left;border-bottom:1px solid var(--border)}
.rt-dt-tbl th div{font-weight:500;color:var(--text3);font-size:10px}
.rt-dt-tbl td{padding:7px 8px;border-bottom:1px solid var(--border)}
.rt-dt-tbl .c{text-align:center;width:52px}
.rt-dt-lbl{font-weight:600;color:var(--text)}
.rt-dt-auto{margin-left:6px;font-size:10px;font-weight:700;padding:0 6px;border-radius:999px;background:#f0fdf4;color:var(--green);line-height:1.7}
/* 일 · 주 · 월 탭(대시보드 박스 머리말 · 세부 팝업) */
.rt-mode-tabs{display:inline-flex;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:2px;gap:1px}
.rt-mode-tabs button{border:0;background:transparent;font:inherit;font-size:11px;font-weight:700;color:var(--text3);padding:1px 10px;border-radius:999px;cursor:pointer;line-height:1.7}
.rt-mode-tabs button.on{background:#fff;color:var(--accent);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.rt-dt-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:11.5px;color:var(--text3)}
.rt-dt-head .rt-mode-tabs button{font-size:12px;padding:3px 16px}
.rt-dt-cells{display:flex;flex-wrap:wrap;gap:4px}
.rt-dt-cell em{font-style:normal;font-size:10px;font-weight:600;margin-right:3px;opacity:.85}
.rt-dt-cell:not(.sm){width:auto!important;min-width:24px;padding:0 7px}
.rt-dt-cell.sm{width:16px!important;height:16px!important;border-radius:4px!important;font-size:9px!important}
.rt-dt-since{font-size:10px;font-weight:500;color:var(--accent);margin-top:2px}
.rt-dt-none td{color:var(--text3)}
.rt-dt-cnt{font-family:var(--mono);font-weight:700;color:var(--text2)}
.rt-dt-legend{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:10px;font-size:11px;color:var(--text2)}
.rt-dt-legend .rt-dt-cell{margin-left:6px}
.rt-dt-cell{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;font-size:12px;font-weight:800}
.rt-dt-cell.done,.rt-dt-cell.today{background:var(--green);color:#fff}
.rt-dt-cell.miss{background:#fee2e2;color:#dc2626}
.rt-dt-cell.off{background:var(--surface);color:var(--text3);font-size:10.5px;font-weight:600}
.rt-dt-cell.open{border:1.5px dashed var(--border2)}
.rt-dt-st{font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;line-height:1.8}
.rt-dt-st.done{background:#f0fdf4;color:var(--green)}
.rt-dt-st.open{background:#fff7ed;color:#c2410c}
.rt-dt-st.wait{background:var(--surface);color:var(--text3)}
.rt-dt-foot{margin-top:12px;font-size:10.5px;color:var(--text3);line-height:1.5}
/* 세부 팝업은 바텀시트가 아니라 화면 가운데 큰 창으로 */
#m-rt-team.moverlay{align-items:center!important;justify-content:center!important;padding:20px}
#m-rt-team .mdl{width:100%!important;max-width:760px!important;border-radius:16px!important;max-height:calc(88vh / var(--m-vz, 1));overflow:auto}

.rt-dt-cell.plan{border:1px solid var(--border);background:#fafafa;color:var(--text3)}
.rt-dt-pct{font-family:var(--font);font-size:10px;font-weight:500;color:var(--text3);margin-top:1px;white-space:nowrap}

.rt-team-rate.none{width:auto;min-width:40px;font-family:var(--font);font-size:11px;font-weight:600;color:var(--text3)!important}

/* 일 · 주 보기 차례 칸은 한 줄로(월 보기는 작은 칸이 줄바꿈) */
.rt-dt-cells.day,.rt-dt-cells.week{flex-wrap:nowrap}
.rt-dt-cells.week .rt-dt-cell:not(.sm){padding:0 6px;font-size:11px}
.rt-dt-cells.week .rt-dt-cell em{margin-right:2px}
#m-rt-team .mdl{max-width:860px!important}

/* 루틴 현황 세부 표 — 세로선 · 좁은 루틴 칸 · 주 보기 요일 열(요일 / 날짜 두 줄) */
.rt-dt-tbl{border:1px solid var(--border);border-radius:0}
.rt-dt-tbl th,.rt-dt-tbl td{border-right:1px solid var(--border)}
.rt-dt-tbl th:last-child,.rt-dt-tbl td:last-child{border-right:0}
.rt-dt-tbl .rt-dt-lbl-h{width:180px}
.rt-dt-tbl .rt-dt-lbl{width:180px;font-size:11.5px;line-height:1.35;word-break:keep-all}
.rt-dt-tbl th.rt-dt-day{width:50px;padding:5px 2px;line-height:1.25;font-size:11.5px}
.rt-dt-tbl th.rt-dt-day span{display:block;font-size:10px;font-weight:500;color:var(--text3)}
.rt-dt-tbl th.rt-dt-day.today{background:#e8f0fe;color:var(--accent)}
.rt-dt-tbl th.rt-dt-day.today span{color:var(--accent)}
.rt-dt-tbl th.rt-dt-day.rest{color:var(--text3)}
.rt-dt-tbl td.rt-dt-dc{width:50px;padding:6px 2px}
.rt-dt-tbl td.rt-dt-dc.na{font-size:10px;color:var(--text3);background:#fafafa}
.rt-dt-tbl td.rt-dt-dc .rt-dt-cell{width:26px;height:26px}

.rt-dt-tbl td[colspan] .rt-dt-cells{justify-content:center}

/* 루틴 현황 세부 — 일 보기: 루틴 칸을 넓게(오늘 칸은 150px) · 월 보기: 한 달을 주(월~일) 묶음으로 */
.rt-dt-tbl.day .rt-dt-lbl,.rt-dt-tbl.day .rt-dt-lbl-h{width:auto}
#m-rt-team .mdl.rt-wide{max-width:1180px!important}
.rt-dt-tbl.month .rt-dt-lbl,.rt-dt-tbl.month .rt-dt-lbl-h{width:160px}
.rt-dt-tbl td.rt-dt-month,.rt-dt-tbl th.rt-dt-month{padding:5px 6px}
.rt-mg{display:flex;gap:6px}
.rt-mw{display:grid;grid-template-columns:repeat(7,15px);gap:2px;padding:3px;border:1px solid var(--border);border-radius:6px;background:#fff;flex-shrink:0}
.rt-mw.wk{display:flex;align-items:center;justify-content:center;width:117px;min-height:21px;box-sizing:content-box}
.rt-md{width:15px;height:15px;border-radius:3px;font-size:8.5px;font-weight:700;font-family:var(--mono);display:flex;align-items:center;justify-content:center;color:var(--text3);background:#fafafa}
.rt-md.blank{visibility:hidden}
.rt-md.done{background:var(--green);color:#fff}
.rt-md.miss{background:#fee2e2;color:#dc2626}
.rt-md.open{background:#fff;border:1.5px dashed var(--border2);color:var(--text2)}
.rt-md.plan{background:#fff;border:1px solid var(--border);color:var(--text3)}
.rt-md.off{background:#e2e8f0;color:#64748b}
.rt-md.rest{background:transparent;color:#cbd5e1}
.rt-md.pre{background:repeating-linear-gradient(135deg,#f1f5f9 0 3px,#fff 3px 6px);color:#cbd5e1}
.rt-md.none{background:transparent;color:#e2e8f0}
.rt-md.today{box-shadow:0 0 0 1.5px var(--accent)}
.rt-mwk{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;white-space:nowrap;background:#fafafa;color:var(--text3)}
.rt-mwk.done{background:var(--green);color:#fff}.rt-mwk.miss{background:#fee2e2;color:#dc2626}
.rt-mwk.open{border:1.5px dashed var(--border2);background:#fff;color:var(--text2)}.rt-mwk.plan{border:1px solid var(--border);background:#fff}
.rt-mwk.none{background:transparent;color:#cbd5e1}
.rt-mg.head .rt-mw{border:0;background:transparent;padding:0 3px}
.rt-mw-lbl{grid-column:1/-1;font-size:10px;font-weight:700;color:var(--text2);text-align:center;margin-bottom:2px}
.rt-md-h{font-size:8.5px;font-weight:600;color:var(--text3);text-align:center}
.rt-md-h.rest{color:#cbd5e1}

.rt-dt-tbl.day .rt-dt-cells{justify-content:center}

/* 월 보기 — 주 묶음이 칸 폭을 꽉 채우게(주가 적은 달은 칸이 알아서 커짐). 날짜 칸은 7등분 */
.rt-mg{width:100%}
.rt-mw{flex:1 1 0;min-width:0;grid-template-columns:repeat(7,minmax(0,1fr))}
.rt-mw.wk{width:auto;box-sizing:border-box}
.rt-md{width:auto;height:auto;aspect-ratio:1/1;max-height:26px;font-size:9.5px}
.rt-md-h{font-size:9.5px}
.rt-mwk{max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* ── 업무 지시 등록(#wo-form-modal, app.js가 만드는 팝업) ──
   휴대폰: 샘플 등록(#smpp)처럼 화면 전체를 덮는 전체 화면 / 태블릿: 샘플 등록처럼 오른쪽에서 열리는 사이드 보기.
   제목 줄은 위에, 버튼 줄(취소 · 지시 등록)은 아래에 붙고 가운데 입력칸만 스크롤된다. */
@media (max-width: 899.98px), (min-width: 900px) and (max-width: 1599.98px) and (pointer: coarse) {
  #wo-form-modal.moverlay { align-items: stretch !important; justify-content: stretch !important; padding: 0 !important; }
  #wo-form-modal .mdl {
    width: calc(100vw / var(--m-vz, 1)) !important; max-width: calc(100vw / var(--m-vz, 1)) !important; height: 100% !important; max-height: none !important;
    border-radius: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important;
    overflow: hidden !important; animation: none !important; padding-bottom: env(safe-area-inset-bottom);
  }
  #wo-form-modal .mdl-h { flex-shrink: 0; padding-top: calc(14px + env(safe-area-inset-top)); }
  /* 스크롤 칸(mdl-b)의 아래 여백이 있으면 sticky 버튼 줄이 그 여백만큼 위에 멈춰서, 끌어 올릴 때 버튼 줄 밑으로
     입력칸이 비쳐 보였다 → 아래 여백은 0으로 두고 버튼 줄이 맨 아래를 꽉 막는다. 끝에서 더 끌어도 뒤 화면이 안 움직이게 */
  #wo-form-modal .mdl-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding-bottom: 0 !important; overscroll-behavior: contain; }
  #wo-form-modal .mdl-b .mdl-foot { margin-top: auto; position: sticky; bottom: 0; background: var(--white); padding-bottom: 10px; z-index: 2; }
}
@media (min-width: 600px) and (max-width: 1599.98px) and (min-height: 600px) and (pointer: coarse) {
  #wo-form-modal.moverlay { justify-content: flex-end !important; background: rgba(26,31,54,.18) !important; }
  #wo-form-modal .mdl {
    width: min(640px, calc(76vw / var(--m-vz, 1))) !important; max-width: min(640px, calc(76vw / var(--m-vz, 1))) !important;
    border-left: 1px solid var(--border); box-shadow: var(--sh2) !important;
    animation: woSideIn .26s cubic-bezier(.4,0,.2,1) !important;
  }
  #wo-form-modal .mdl-h { padding-top: 14px; }
}
@keyframes woSideIn { from { transform: translateX(100%); } to { transform: none; } }

/* ── A/S 등록(#m-as) · 견적 요청 등록(#m-pr-add-modal) — 샘플 등록(#smpp)처럼 제목 줄은 위, 버튼 줄(취소 · 저장)은
   맨 아래에 고정하고 가운데 입력칸만 스크롤한다. 버튼 줄이 HTML상 .mdl-b 안에 있어서 예전엔 내용과 함께 밀려
   맨 끝까지 내려야 보였다 → sticky로 스크롤 칸 바닥에 붙인다(스크롤 칸 아래 여백 0 — 버튼 줄 밑으로 내용이 비치지 않게) ── */
@media (max-width: 899.98px), (min-width: 900px) and (max-width: 1599.98px) and (pointer: coarse) {
  #m-as .mdl, #m-pr-add-modal .mdl { display: flex !important; flex-direction: column !important; overflow: hidden !important; }
  #m-as .mdl-h, #m-pr-add-modal .mdl-h { flex-shrink: 0; }
  #m-as .mdl > .mdl-b, #m-pr-add-modal .mdl > .mdl-b {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
    padding-bottom: 0 !important; overscroll-behavior: contain;
  }
  #m-as .mdl-b > .mdl-foot, #m-pr-add-modal .mdl-b > .mdl-foot {
    position: sticky; bottom: 0; z-index: 3; margin: auto -17px 0 !important; flex-shrink: 0;
    padding: 11px 17px calc(14px + env(safe-area-inset-bottom)) !important; background: var(--white);
  }
}

/* 업무 지시 처리 입력(#wo-act-modal — 완료 보고 · 피드백/연장 요청 · 새 기한 지정 · 반려 등) — 휴대폰: 화면 절반 높이로 고정된 시트.
   내용이 짧아도 절반, 길면 안에서 스크롤하고 아래 버튼 줄(취소 · 저장)은 맨 아래에 붙는다 */
@media (max-width: 599.98px) {
  #wo-act-modal .mdl {
    height: calc(50vh / var(--m-fs, 1)) !important; max-height: calc(50vh / var(--m-fs, 1)) !important;
    display: flex !important; flex-direction: column !important; overflow: hidden !important;
  }
  #wo-act-modal .mdl-h { flex-shrink: 0; }
  #wo-act-modal .mdl-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding-bottom: 0 !important; }
  #wo-act-modal .mdl-b .mdl-foot { margin-top: auto; position: sticky; bottom: 0; z-index: 2; background: var(--white); padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}
/* 업무 지시 상세(#wo-detail-modal) — 휴대폰: 아래에서 화면 높이의 80%까지 올라오는 시트(내용이 짧아도 80%, 길면 안에서 스크롤) */
@media (max-width: 599.98px) {
  #wo-detail-modal .mdl {
    height: calc(80vh / var(--m-vz, 1)) !important; max-height: calc(80vh / var(--m-vz, 1)) !important;
    display: flex !important; flex-direction: column !important; overflow: hidden !important;
  }
  #wo-detail-modal .mdl-h { flex-shrink: 0; }
  #wo-detail-modal .mdl-b { flex: 1 1 auto; overflow-y: auto; }
}
/* 태블릿 — 업무 지시 상세는 등록 팝업처럼 오른쪽에서 열리는 사이드 보기(위 제목 줄 고정, 내용만 스크롤 · 처리 버튼은 아래에 붙음),
   업무 지시 페이지의 카드는 2열로 */
@media (min-width: 600px) and (max-width: 1599.98px) and (min-height: 600px) and (pointer: coarse) {
  #wo-detail-modal.moverlay { align-items: stretch !important; justify-content: flex-end !important; padding: 0 !important; background: rgba(26,31,54,.18) !important; }
  #wo-detail-modal .mdl {
    width: min(640px, calc(76vw / var(--m-vz, 1))) !important; max-width: min(640px, calc(76vw / var(--m-vz, 1))) !important; height: 100% !important; max-height: none !important;
    border-radius: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important;
    border-left: 1px solid var(--border); box-shadow: var(--sh2) !important; padding-bottom: env(safe-area-inset-bottom);
    animation: woSideIn .26s cubic-bezier(.4,0,.2,1) !important;
  }
  #wo-detail-modal .mdl-h { flex-shrink: 0; }
  #wo-detail-modal .mdl-b { flex: 1 1 auto; overflow-y: auto; }
  /* 위챗 보고 · 공유 미리보기 시트 — 오른쪽 상세 사이드 보기 폭에 맞춰 그 아래 절반에 */
  #wo-wx { justify-content: flex-end; }
  #wo-wx .wo-wx-in { max-width: min(640px, calc(76vw / var(--m-vz, 1))); }

  /* #m-wo-body는 .mobile-only(display:block !important)도 달고 있어 id+class로 더 구체적으로 덮어쓴다 */
  #m-wo-body.mobile-only { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
  #m-wo-body > .m-wo-sec-hd, #m-wo-body > .wo-empty, #m-wo-body > .m-wo-settle { grid-column: 1 / -1; }
  #m-wo-body > .m-wo-sec-hd { margin: 12px 2px 0; }
  #m-wo-body > .m-wo-sec-hd:first-child { margin-top: 4px; }
  #m-wo-body .m-wo-mcard, #m-wo-body .m-wo-swipe { margin-bottom: 0; }
}

/* ── 검수하기 아래 버튼 줄 「‹ · 비용 · 보고 · 다음」 — 파일 앞쪽 .mdl-foot .btn{flex:1}이 폭을 똑같이 나눠
   「다음 · 후속 조치 ›」가 잘리던 것을 여기서(뒤에 · 더 구체적으로) 바로잡음.
   이전 · 다음 = 각진 네모(진행), 비용 · 보고 = 둥근 알약 · 아이콘 위 글자 아래(도구)로 모양을 나눔 */
#m-insp-wiz .mdl-foot{align-items:center;gap:7px}
#m-insp-wiz .mdl-foot .btn.m-iw-prevbtn{flex:0 0 44px;width:44px;padding:0;font-size:24px;line-height:1;border-radius:11px}
#m-insp-wiz .mdl-foot .btn.btn-p{flex:1 1 auto;min-width:0;padding:0 10px;font-size:14px;white-space:nowrap;border-radius:11px}
#m-insp-wiz .mdl-foot .btn.m-iw-side{flex:0 0 56px;width:56px;height:46px;padding:0;border-radius:23px;flex-direction:column;gap:1px;font-size:11px;font-weight:800;line-height:1.1;position:relative;box-shadow:0 1px 3px rgba(0,0,0,.12)}
#m-insp-wiz .mdl-foot .btn.m-iw-side .ico-svg,#m-insp-wiz .mdl-foot .btn.m-iw-side svg{display:block}
#m-insp-wiz .mdl-foot .btn.m-iw-wxbtn{color:#15803d;border-color:#86efac;background:#f3fcf6}
#m-insp-wiz .mdl-foot .btn.m-iw-costbtn{color:#1A73E8;border-color:#AECBFA;background:#F4F8FE}
#m-insp-wiz .mdl-foot .btn.m-iw-costbtn.need{color:var(--orange);border-color:#F6C26B;background:var(--orange-lt)}
#m-insp-wiz .mdl-foot .btn.m-iw-costbtn i{position:absolute;top:3px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--red);border:1.5px solid #fff}
/* 크기 조정 — 비용 · 보고 칸을 키우고(76px) 다음은 남는 폭만. 다음은 "다음 ›" 위 · 다음 단계 이름 아래 두 줄이라 좁아도 안 잘림 */
#m-insp-wiz .mdl-foot .btn.m-iw-side{flex:0 0 76px;width:76px;height:52px;border-radius:26px;font-size:12px;gap:2px}
#m-insp-wiz .mdl-foot .btn.m-iw-prevbtn{height:52px}
#m-insp-wiz .mdl-foot .btn.btn-p{height:52px}
#m-insp-wiz .mdl-foot .btn.m-iw-nextbtn{flex-direction:column;gap:0;line-height:1.15;padding:0 6px}
#m-insp-wiz .mdl-foot .btn.m-iw-nextbtn b{font-size:15px;font-weight:800}
#m-insp-wiz .mdl-foot .btn.m-iw-nextbtn small{font-size:10.5px;font-weight:600;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#m-insp-wiz .mdl-foot .btn.m-iw-costbtn i{right:12px}
/* 종료 빠른 버튼 +4 ~ +8시간 5개 — 한 줄에 */
.m-tp-chips{grid-template-columns:repeat(5,minmax(0,1fr))}
.m-tp-chips button{font-size:12.5px;padding:0}

/* 크기 다시 조정 — 다음(완료)은 84px로 고정, 남는 폭은 비용 · 보고가 나눠 가짐(최대 130px) */
#m-insp-wiz .mdl-foot .btn.btn-p{flex:0 0 84px;width:84px}
#m-insp-wiz .mdl-foot .btn.m-iw-side{flex:1 1 0;width:auto;min-width:76px;max-width:130px;font-size:12.5px}
#m-insp-wiz .mdl-foot .btn.m-iw-side svg{width:19px;height:19px}
#m-insp-wiz .mdl-foot .btn.m-iw-costbtn i{right:auto;left:calc(50% + 8px)}
#m-insp-wiz .mdl-foot{justify-content:space-between}
/* 중간 크기 — 다음(완료) 100px, 비용 · 보고는 남는 폭(약 83px) */
#m-insp-wiz .mdl-foot .btn.btn-p{flex:0 0 100px;width:100px}

/* 한 줄 · 낮게(44px) — 비용 · 보고는 아이콘 옆에 글자, 다음은 "다음 ›" 한 줄(다음 단계 이름은 숨김) */
#m-insp-wiz .mdl-foot .btn.m-iw-prevbtn,#m-insp-wiz .mdl-foot .btn.btn-p{height:44px}
#m-insp-wiz .mdl-foot .btn.m-iw-side{height:44px;border-radius:22px;flex-direction:row;gap:5px;font-size:13.5px}
#m-insp-wiz .mdl-foot .btn.m-iw-side svg{width:17px;height:17px}
#m-insp-wiz .mdl-foot .btn.m-iw-costbtn i{top:6px;left:auto;right:8px}
#m-insp-wiz .mdl-foot .btn.m-iw-nextbtn{flex-direction:row}
#m-insp-wiz .mdl-foot .btn.m-iw-nextbtn small{display:none}
/* 최종 확인 아래 — 시간 · 비용 한 줄 요약(누르면 비용 시트) */
.insp-cost-sum{display:flex;align-items:center;gap:7px;width:100%;margin-top:12px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--border);background:var(--white);font-family:var(--font);color:var(--text2);text-align:left;cursor:pointer}
.insp-cost-sum:active{background:var(--surface)}
.insp-cost-sum .lb{font-size:12.5px;font-weight:800;color:var(--text);white-space:nowrap}
.insp-cost-sum .tx{flex:1;min-width:0;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.insp-cost-sum .tx b{color:var(--text);font-size:13.5px}
.insp-cost-sum svg{flex-shrink:0;color:var(--text3)}
.insp-cost-sum.ok>svg:first-child{color:var(--green)}
.insp-cost-sum.need{border-color:#F6C26B;background:var(--orange-lt)}.insp-cost-sum.need .tx,.insp-cost-sum.need>svg{color:var(--orange);font-weight:700}
.insp-cost-sum.chk{border-color:#F6C26B}.insp-cost-sum.chk .tx{color:var(--orange)}
/* 시간 · 비용 — 입력함은 최종 확인의 완료 칸(초록), 미입력(아직 입력 전 · 지난 회차 검수비 미입력)은 「아직 끝나지 않았어요」 칸(노랑 점선)과 같은 색 */
.insp-cost-sum.ok{border-color:#86efac;background:#f0fdf4}.insp-cost-sum.ok .tx,.insp-cost-sum.ok .tx b,.insp-cost-sum.ok>svg{color:#15803d}
.insp-cost-sum.empty,.insp-cost-sum.need{border:1.5px dashed #eab308;background:#fefce8}.insp-cost-sum.empty .tx,.insp-cost-sum.empty .lb,.insp-cost-sum.empty>svg,.insp-cost-sum.need .tx,.insp-cost-sum.need .lb,.insp-cost-sum.need>svg{color:#854d0e;font-weight:800}
.insp-cost-sum .ck{flex-shrink:0;font-style:normal;font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:99px;background:var(--orange-lt);color:var(--orange)}
.insp-cost-sum.chk .tx{color:var(--text2)}

/* 회차 카드 안 — 검수비 + 이동비 = 회차 합계 */
.insp-visit-sub{display:flex;align-items:center;gap:6px;margin-top:9px;padding:8px 10px;border-radius:10px;background:var(--surface);font-size:12.5px;color:var(--text2)}
.insp-visit-sub .f{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.insp-visit-sub .f i{font-style:normal;font-family:var(--mono);font-weight:700}
.insp-visit-sub .f:first-child svg{color:#1A73E8}.insp-visit-sub .f:nth-child(3) svg{color:#E37400}
.insp-visit-sub .op{color:var(--text3);font-weight:800}
.insp-visit-sub b{margin-left:auto;font-size:16px;font-family:var(--mono);color:var(--text)}
/* 전체 합계 — 회차별 줄 + 모두 더한 합계 */
.insp-visit-total{display:block!important;padding:10px 12px!important}
.insp-visit-total .vt-l{display:flex;align-items:baseline;gap:8px;font-size:12.5px;color:var(--text2);padding:2px 0}
.insp-visit-total .vt-l small{font-size:11px;color:var(--text3);font-family:var(--mono)}
.insp-visit-total .vt-l b{margin-left:auto;font-size:13px;font-family:var(--mono);color:var(--text2)}
.insp-visit-total .vt-sum{display:flex;align-items:center;gap:8px;margin-top:6px;padding-top:8px;border-top:1.5px dashed var(--border)}
.insp-visit-total .vt-sum .t{display:flex;flex-direction:column;font-size:14px;font-weight:800;color:var(--text);line-height:1.25}
.insp-visit-total .vt-sum .t small{font-size:10.5px;font-weight:600;color:var(--text3)}
.insp-visit-total .vt-sum b{margin-left:auto;font-size:19px;font-family:var(--mono);color:var(--text)}
.insp-visit-total .vt-m{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:5px;font-size:11.5px;color:var(--text2)}.insp-visit-sub .lb{margin-left:auto;font-size:11px;font-weight:700;color:var(--text3);white-space:nowrap}
.insp-visit-sub .lb+b{margin-left:4px}

/* 회차 한 줄 — 오른쪽을 "검수시간 · 비용" 한 줄로(비용이 맨 오른쪽) */
.insp-vr-r{flex-direction:row!important;align-items:baseline!important;gap:8px}
.insp-vr-r small{font-size:12px!important;color:var(--text2)!important;white-space:nowrap}
.insp-vr-r small em{font-style:normal;font-size:10.5px;font-weight:800;color:#fff;background:#3C3C8F;border-radius:99px;padding:1px 6px;margin-left:2px}
.insp-vr-r b{font-size:15px!important}
/* 펼친 회차 머리줄 — 누르면 접힘(오른쪽 위쪽 화살표) */
.insp-visit-fold{cursor:pointer;margin:-4px -4px 8px;padding:4px;border-radius:9px}
.insp-visit-fold:active{background:var(--surface)}
.insp-visit-foldic{margin-left:auto;display:flex;color:var(--text3);transform:rotate(-90deg)}
/* 합계 목록 회차 줄 — "검수비 ¥300 + 이동비 ¥100"이 길어져도 한 줄 */
.insp-visit-total .vt-l{flex-wrap:nowrap}
.insp-visit-total .vt-l>span{white-space:nowrap}
.insp-visit-total .vt-l small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* 회차 합계 줄 — 검수비 · 이동비 글자가 들어가 조금 촘촘하게 */
.insp-visit-sub{gap:4px;font-size:12px;padding:8px 9px}
.insp-visit-sub .f{gap:2px;color:var(--text2)}
.insp-visit-sub .f i{color:var(--text);margin-left:1px}
.insp-visit-sub b{font-size:15px}

/* 「비용」 버튼 — 늘 노랑 계열(입력 여부로 파랑 ↔ 주황 바뀌지 않음).
   검수일이 지났는데 검수비가 0원인 회차가 있으면: 글자가 "⚠ 미입력"으로 바뀌고, 진한 주황 테두리가 천천히 깜빡임(빨간 점 대신) */
#m-insp-wiz .mdl-foot .btn.m-iw-costbtn{color:#B06000;border-color:#F6C26B;background:#FEF7E0}
#m-insp-wiz .mdl-foot .btn.m-iw-costbtn i{display:none}
#m-insp-wiz .mdl-foot .btn.m-iw-costbtn.need{color:#fff;border-color:#E37400;background:#E37400;animation:mIwCostNeed 1.6s ease-in-out infinite}
@keyframes mIwCostNeed{0%,100%{box-shadow:0 0 0 0 rgba(227,116,0,.45)}50%{box-shadow:0 0 0 5px rgba(227,116,0,0)}}
/* 미입력일 때만 비용 버튼을 넓혀 "⚠ 비용 미입력"이 한 줄에 들어가게(보고 버튼이 그만큼 좁아짐) */
#m-insp-wiz .mdl-foot .btn.m-iw-costbtn.need{flex:0 0 112px;width:112px;max-width:none;font-size:12.5px;gap:3px;white-space:nowrap}
#m-insp-wiz .mdl-foot .btn.m-iw-costbtn.need~.m-iw-wxbtn{min-width:60px}#m-insp-wiz .mdl-foot .btn.m-iw-costbtn.need{flex:0 0 104px;width:104px}
#m-insp-wiz .mdl-foot .btn.m-iw-costbtn.need~.m-iw-wxbtn{min-width:0;font-size:12.5px}

/* 비용 입력됨 — 청록 + 체크(보고의 초록과 구분) */
#m-insp-wiz .mdl-foot .btn.m-iw-costbtn.done{color:#0F766E;border-color:#5EEAD4;background:#F0FDFA}
#m-insp-wiz .mdl-foot .btn.m-iw-costbtn.done{color:#fff;border-color:#0F766E;background:#0F766E}

/* 금액 표시 기준 — 기준보다 많이 적음(low) 파랑 · 많이 큼(high) 빨강 */
.insp-cost-msg.low{background:#E8F0FE;color:#1A73E8}
.insp-cost-msg.high{background:var(--red-lt);color:var(--red)}
.insp-cost-inp.dev-low{border-color:#1A73E8;background:#E8F0FE}
.insp-cost-inp.dev-high{border-color:var(--red);background:var(--red-lt)}

/* 홈 — 휴대폰만: 진행 중인 발주 ↔ 업무 지시 줄 ↔ 검수일정 사이 여백을 아래쪽(검수일정 ↔ 제품 보기 ↔ 일정 관리) 8px과 같게 */
@media (max-width: 599.98px) {
  #mh-ord-card, #mh-quick-row { margin-bottom: 8px; }
}

/* ── 소재/등급 — 폼 칸(고른 칩 + 「＋ 소재 선택」)과 선택 창(바텀시트, mOpenMatPicker) ── */
.m-mat-field { align-items: center; }
.m-mat-sel { display: inline-flex; align-items: center; gap: 6px; }
.m-mat-x { font-size: 10px; opacity: .6; }
.m-mat-add {
  height: 32px; padding: 0 14px; border-radius: 999px; border: 1.5px dashed var(--accent);
  background: #fff; color: var(--accent); font-size: 12.5px; font-weight: 800; font-family: var(--font); cursor: pointer;
}
#m-matpick {
  position: fixed; inset: 0; z-index: 5000; background: rgba(32,33,36,.45);
  display: none; align-items: flex-end; justify-content: center;
}
#m-matpick.show { display: flex; }
.m-mp-sheet {
  width: 100%; max-width: 640px; height: calc(82vh / var(--m-vz, 1)); background: #fff; border-radius: 18px 18px 0 0;
  display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom);
  animation: mMpUp .24s cubic-bezier(.4,0,.2,1);
}
@keyframes mMpUp { from { transform: translateY(100%); } to { transform: none; } }
.m-mp-grab { width: 38px; height: 4px; border-radius: 4px; background: #dadce0; margin: 8px auto 0; flex-shrink: 0; }
.m-mp-h { display: flex; align-items: center; padding: 8px 16px 6px; font-size: 15px; font-weight: 800; flex-shrink: 0; }
.m-mp-x { margin-left: auto; border: none; background: none; font-size: 16px; color: var(--text3); padding: 4px 6px; cursor: pointer; }
.m-mp-search { padding: 0 16px; flex-shrink: 0; }
.m-mp-search input {
  width: 100%; height: 40px; box-sizing: border-box; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 0 12px; font-size: 14px; font-family: var(--font); outline: none; background: var(--surface);
}
.m-mp-search input:focus { border-color: var(--accent); background: #fff; }
.m-mp-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px 8px; flex-shrink: 0; scrollbar-width: none; }
.m-mp-tabs::-webkit-scrollbar { display: none; }
.m-mp-tab {
  flex-shrink: 0; height: 30px; padding: 0 12px; border-radius: 999px; border: none; background: #f1f3f4; color: var(--text2);
  font-size: 12.5px; font-weight: 700; font-family: var(--font); display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
}
.m-mp-tab i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.m-mp-tab.on { background: var(--text); color: #fff; }
.m-mp-body { flex: 1; overflow-y: auto; padding: 0 16px 12px; border-top: 1px solid var(--border); }
.m-mp-l1 { font-size: 13px; font-weight: 800; margin: 16px 0 2px; color: var(--text); }
.m-mp-grp { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 700; color: var(--text3); margin: 12px 0 7px; }
.m-mp-leaf { margin-top: 10px; }
.m-mp-empty { text-align: center; color: var(--text3); font-size: 13px; padding: 36px 0; }
.m-mp-foot { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); flex-shrink: 0; }
.m-mp-cnt { font-size: 13px; font-weight: 800; color: var(--accent); flex-shrink: 0; }
.m-mp-sum { font-size: 12px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.m-mp-ok {
  margin-left: auto; flex-shrink: 0; height: 38px; padding: 0 22px; border-radius: 999px; border: none;
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 800; font-family: var(--font); cursor: pointer;
}
/* A/S 카드의 처리내용 — 내용이 있으면 업무 지시 "완료 기준"(app.js .wo-hl)과 같은 노란 형광펜 밑줄로 강조.
   비어 있을 때의 빨간 "아직 처리내용 없음"은 mobile-render.js mAsCardHtml 그대로 */
.m-as-hl {
  background: linear-gradient(transparent 60%, #fde68a 60%); padding: 0 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  color: var(--text); font-weight: 700;
}

/* 진행 중인 A/S 탭(전체 · 답변대기 · 배정 전 · 진행중) — 4개로 늘어 한 줄 전체를 쓰고, 공장별 · 회사별 묶기는 아래 줄 오른쪽으로 (2026-10-21) */
.m-as-cat-row { flex-wrap: wrap; row-gap: 6px; }
.m-as-cat-row > .m-as-seg { flex: 1 1 100%; }
.m-as-cat-row > .m-as-seg button { min-width: 0; white-space: nowrap; }

/* 대시보드 배치 편집 — 적용 대상(회사 기본값 / 계정별) 고르기(관리자) */
.dl-target{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.dl-target:empty{display:none}
.dl-target-l{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--text)}
.dl-target{flex-direction:column;align-items:stretch}
.dl-target-hd{display:flex;align-items:center;justify-content:space-between}
.dl-target-legend{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text3)}
.dl-target-btns{display:flex;flex-wrap:wrap;gap:6px}
.dl-target-btn{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 13px;border-radius:999px;border:1.5px solid var(--border);background:#fff;color:var(--text2);font-size:12.5px;font-weight:600;font-family:var(--font);cursor:pointer;white-space:nowrap}
.dl-target-btn:hover{border-color:var(--accent);color:var(--accent)}
.dl-target-btn.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.dl-own-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block;flex-shrink:0}
.dl-target-btn.on .dl-own-dot{background:#fff}
.dl-target > .btn,.dl-target > .dl-target-note{align-self:flex-start}
.dl-target-note{font-size:11.5px;color:var(--text3)}
.dl-blocked-chip{opacity:.75;gap:5px}
.dl-blocked-note{font-size:11.5px;color:var(--text3);margin-top:6px;line-height:1.5}

/* 견적 요청 — 등록 폼 구역 제목 · 담은 제품 목록 · 묶음 관리 */
.m-pr-sec{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:800;color:var(--text);margin:4px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.m-pr-sec-sub{font-size:11px;font-weight:500;color:var(--text3)}
.m-pr-pend{display:flex;align-items:center;gap:10px;padding:7px 8px;border:1px solid var(--border);border-radius:10px;background:#fff;margin-bottom:6px;cursor:pointer}
.m-pr-pend-th{width:42px;height:42px;border-radius:8px;background:var(--surface);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;color:var(--text3)}
.m-pr-pend-th img{width:100%;height:100%;object-fit:cover}
.m-pr-pend-tx{flex:1;min-width:0}
.m-pr-pend-tx .nm{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-pr-pend-tx .sub{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.m-pr-pend-x{border:0;background:transparent;color:var(--text3);font-size:14px;padding:6px;cursor:pointer;flex-shrink:0}
.m-pr-more-btn{display:block;width:100%;padding:10px 0;margin:2px 0 6px;border:1.5px dashed var(--accent);border-radius:10px;background:var(--accent-lt);color:var(--accent);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.m-pr-grp-link{display:flex;align-items:center;gap:6px;width:100%;margin:2px 0 10px;padding:8px 10px;border:1.5px solid #c7d7fe;background:#f3f6ff;border-radius:10px;color:var(--accent);font:inherit;font-size:12px;font-weight:700;cursor:pointer;text-align:left}
.m-pr-grp-link span{flex:1;min-width:0}
/* 대시보드 진행 중인 견적 · SAMPLE · A/S — [목록 | 갤러리] 보기(app.js setDashView · dashGalCard).
   PC(app/index.html)와 같은 스타일 — 태블릿에는 이 스타일이 없어 갤러리 카드가 맨 글자로 깨져 보였다 */
.dash-view-seg{display:inline-flex;padding:2px;border-radius:7px;background:var(--surface);border:1px solid var(--border)}
.dash-view-seg button{width:26px;height:22px;padding:0;border:none;border-radius:5px;background:transparent;color:var(--text3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.dash-view-seg button:focus{outline:none}
.dash-view-seg button span{display:flex}
.dash-view-seg button.on{background:#fff;color:var(--accent);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.dash-gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:4px 2px 6px}
.dash-gal-card{border:1px solid var(--border);border-radius:10px;background:#fff;overflow:hidden;cursor:pointer;display:flex;flex-direction:row;align-items:stretch;min-width:0}
.dash-gal-cover{width:72px;height:72px;aspect-ratio:1/1;flex-shrink:0;align-self:center;margin:6px 0 6px 6px;border-radius:7px;background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--text3);overflow:hidden}
.dash-gal-cover img{width:100%;height:100%;object-fit:cover;display:block}
.dash-gal-body{flex:1;padding:6px 9px;display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0}
.dash-gal-top{display:flex;align-items:flex-start;gap:6px;min-width:0}
.dash-gal-top .dash-gal-title{flex:1;min-width:0}
.dash-gal-badge{flex-shrink:0;font-size:11px;line-height:17px}
.dash-gal-k{font-size:10px;font-weight:600;color:var(--text3);padding:0 5px;border-radius:4px;background:var(--surface);flex-shrink:0}
.dash-gal-title{font-size:12px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-gal-meta{display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden;white-space:nowrap}
.dash-gal-sub{font-size:10.5px;color:var(--text3);overflow:hidden;text-overflow:ellipsis}
.dash-gal-foot{display:flex;align-items:center;gap:6px;font-size:11px;white-space:nowrap;overflow:hidden}
.dash-gal-date{font-family:var(--mono);color:var(--text3)}
.dash-gal-pill{font-size:10px;font-weight:700;padding:1px 8px;border-radius:20px}
@media (max-width: 599.98px) { .dash-gal{grid-template-columns:minmax(0,1fr)} } /* 휴대폰은 한 줄에 하나 */