/* ============================================
   팩플로우 모바일 전용 스타일 (iOS 스타일)
   ============================================ */

:root {
  --m-bg: #F2F2F7;
  --m-card: #FFFFFF;
  --m-text: #000000;
  --m-text2: #3C3C43;
  --m-text3: #8E8E93;
  --m-bdr: #C6C6C8;
  --m-sep: #E5E5EA;
  /* 브랜드 통일: m-blue 는 navy 브랜드 컬러로 alias — iOS 기본색(#007AFF) 사용 종료 */
  --m-blue: #1E3A5F;
  --m-green: #059669;
  --m-red: #DC2626;
  --m-orange: #D97706;
  --m-purple: #AF52DE;
  --m-yellow: #FFCC00;
  --m-pri: #1E3A5F;
  --m-pri-light: #EFF6FF;
  --m-safe-top: env(safe-area-inset-top, 0);
  --m-safe-bot: env(safe-area-inset-bottom, 0);
  --m-tab-h: 58px;
  --m-hdr-h: 52px;
}

/* 리셋 */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  background: var(--m-bg);
  color: var(--m-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}

/* ============= 레이아웃 ============= */
.m-app {
  min-height: 100vh;
  padding-top: calc(var(--m-hdr-h) + var(--m-safe-top));
  padding-bottom: calc(var(--m-tab-h) + var(--m-safe-bot) + 12px);
}

.m-hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(var(--m-hdr-h) + var(--m-safe-top));
  padding: var(--m-safe-top) 16px 0;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  border-bottom: 0.5px solid var(--m-bdr);
}

.m-hdr-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.m-hdr-left, .m-hdr-right {
  font-size: 17px;
  color: var(--m-blue);
  min-width: 70px;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-weight: 500;
}

.m-hdr-right {
  justify-content: flex-end;
}

/* ============= 하단 탭 바 ============= */
.m-tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--m-tab-h) + var(--m-safe-bot));
  padding-bottom: var(--m-safe-bot);
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 0.5px solid var(--m-bdr);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  z-index: 100;
}

.m-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  color: var(--m-text3);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.1s;
  border-top: 2px solid transparent;
}

.m-tab-label {
  line-height: 1.2;
}

.m-tab-ico { display:none; }

.m-tab.on {
  color: var(--m-blue);
  border-top-color: var(--m-blue);
  background: rgba(0,122,255,0.04);
}

/* ============= 페이지 ============= */
.m-page {
  display: none;
  padding: 14px;
}

.m-page.on {
  display: block;
}

/* ============= 카드 ============= */
.m-card {
  background: var(--m-card);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.m-card-t {
  font-size: 13px;
  font-weight: 600;
  color: var(--m-text3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

/* KPI 카드 2x2 */
.m-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.m-kpi {
  background: var(--m-card);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.m-kpi-label {
  font-size: 12px;
  color: var(--m-text3);
  font-weight: 500;
  margin-bottom: 4px;
}

.m-kpi-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--m-text);
  line-height: 1.2;
}

.m-kpi-sub {
  font-size: 11px;
  color: var(--m-text3);
  margin-top: 2px;
}

.m-kpi.blue .m-kpi-value { color: var(--m-blue); }
.m-kpi.red .m-kpi-value { color: var(--m-red); }
.m-kpi.green .m-kpi-value { color: var(--m-green); }
.m-kpi.orange .m-kpi-value { color: var(--m-orange); }

/* ============= 버튼 ============= */
.m-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  border: none;
  background: var(--m-blue);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 10px;
  transition: opacity 0.1s;
  letter-spacing: -0.2px;
}

.m-btn:active {
  opacity: 0.7;
}

.m-btn.green { background: var(--m-green); }
.m-btn.red { background: var(--m-red); }
.m-btn.orange { background: var(--m-orange); }
.m-btn.gray { background: var(--m-card); color: var(--m-blue); border: 1px solid var(--m-sep); }
.m-btn.outline { background: transparent; color: var(--m-blue); border: 1px solid var(--m-blue); }

.m-btn-lg {
  padding: 16px 22px;
  font-size: 17px;
  font-weight: 700;
}

.m-btn-sm {
  padding: 8px 14px;
  font-size: 14px;
}

.m-btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ============= 리스트 카드 ============= */
.m-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.m-item {
  background: var(--m-card);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  cursor: pointer;
  transition: transform 0.1s;
}

.m-item:active {
  transform: scale(0.98);
}

.m-item-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}

.m-item-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--m-text);
  letter-spacing: -0.3px;
}

.m-item-sub {
  font-size: 13px;
  color: var(--m-text2);
  margin-bottom: 8px;
}

.m-item-meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--m-text3);
  margin-top: 8px;
}

/* ============= 진행률 바 ============= */
.m-progress {
  height: 6px;
  background: var(--m-sep);
  border-radius: 3px;
  overflow: hidden;
  margin: 8px 0;
}

.m-progress-bar {
  height: 100%;
  background: var(--m-blue);
  border-radius: 3px;
  transition: width 0.3s;
}

.m-progress-bar.green { background: var(--m-green); }
.m-progress-bar.orange { background: var(--m-orange); }
.m-progress-bar.red { background: var(--m-red); }

/* ============= 배지 ============= */
.m-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--m-sep);
  color: var(--m-text2);
}

.m-badge.blue { background: #E3F2FD; color: var(--m-blue); }
.m-badge.green { background: #E8F5E9; color: var(--m-green); }
.m-badge.red { background: #FFEBEE; color: var(--m-red); }
.m-badge.orange { background: #FFF3E0; color: var(--m-orange); }
.m-badge.purple { background: #F3E5F5; color: var(--m-purple); }
.m-badge.gray { background: var(--m-sep); color: var(--m-text2); }

/* ============= 검색/필터 ============= */
.m-search {
  background: var(--m-card);
  border-radius: 10px;
  min-height: 48px;
  padding: 0 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.m-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px; /* iOS zoom 방지: 16px 미만이면 focus 시 페이지 zoom */
  color: var(--m-text);
  min-height: 44px;
  padding: 10px 0;
}

.m-search input::placeholder {
  color: var(--m-text3);
}

.m-filter-row {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.m-filter-row::-webkit-scrollbar { display: none; }

.m-filter-btn {
  padding: 7px 16px;
  border-radius: 20px;
  background: var(--m-card);
  color: var(--m-text2);
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.m-filter-btn.on {
  background: var(--m-blue);
  color: #fff;
}

/* ============= 입력 폼 ============= */
.m-form {
  padding: 8px 0;
}

.m-form-row {
  margin-bottom: 16px;
}

.m-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--m-text2);
  margin-bottom: 6px;
}

.m-label .req {
  color: var(--m-red);
  margin-left: 2px;
}

.m-input, .m-select, .m-textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--m-sep);
  border-radius: 10px;
  font-size: 16px;
  background: var(--m-card);
  color: var(--m-text);
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.m-input:focus, .m-select:focus, .m-textarea:focus {
  outline: none;
  border-color: var(--m-blue);
}

/* === 필수값 누락 시각 강조 (Phase 8) ===
   mSaveOrder() 가 빈 필수 필드에 .err 클래스 + aria-invalid=true 부여.
   사용자가 input/change 이벤트 시 자동 해제. */
.m-input.err, .m-select.err, .m-textarea.err,
.m-input[aria-invalid="true"], .m-select[aria-invalid="true"], .m-textarea[aria-invalid="true"] {
  border-color: var(--m-red, #FF3B30);
  background-color: rgba(255, 59, 48, 0.04);
}
.m-input.err:focus, .m-select.err:focus, .m-textarea.err:focus {
  border-color: var(--m-red, #FF3B30);
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.15);
}

.m-select {
  background: var(--m-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238E8E93' d='M6 8L0 0h12z'/%3E%3C/svg%3E") no-repeat right 14px center;
  padding-right: 36px;
}

.m-textarea {
  min-height: 80px;
  resize: vertical;
  line-height: 1.4;
}

.m-form-row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* 회사 선택 라디오 */
.m-radio-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.m-radio {
  padding: 12px 14px;
  border: 1.5px solid var(--m-sep);
  border-radius: 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--m-text2);
}

.m-radio.on {
  border-color: var(--m-blue);
  background: var(--m-pri-light);
  color: var(--m-blue);
}

/* ============= 모달 (풀스크린) ============= */
.m-modal {
  position: fixed;
  inset: 0;
  background: var(--m-bg);
  z-index: 1000;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.m-modal.on {
  transform: translateY(0);
}

.m-modal-hdr {
  position: sticky;
  top: 0;
  height: calc(var(--m-hdr-h) + var(--m-safe-top));
  padding: var(--m-safe-top) 16px 0;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.5px solid var(--m-bdr);
  z-index: 10;
}

.m-modal-body {
  flex: 1;
  padding: 18px 16px calc(80px + var(--m-safe-bot));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.m-modal-cancel, .m-modal-save {
  font-size: 16px;
  color: var(--m-blue);
  font-weight: 500;
  cursor: pointer;
  padding: 6px 4px;
}

.m-modal-save {
  font-weight: 700;
}

.m-modal-title {
  font-size: 17px;
  font-weight: 700;
}

/* ============= 자동완성 드롭다운 ============= */
.m-autocomplete {
  position: relative;
}

.m-ac-list {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--m-card);
  border: 1px solid var(--m-sep);
  border-radius: 10px;
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.m-ac-item {
  padding: 12px 14px;
  border-bottom: 0.5px solid var(--m-sep);
  cursor: pointer;
  font-size: 15px;
}

.m-ac-item:last-child { border-bottom: none; }
.m-ac-item:active { background: var(--m-sep); }

/* ============= 토스트 ============= */
.m-toast {
  position: fixed;
  bottom: calc(var(--m-tab-h) + var(--m-safe-bot) + 20px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  white-space: nowrap;
  max-width: 90%;
}

.m-toast.show {
  opacity: 1;
}

/* ============= 빈 상태 ============= */
.m-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--m-text3);
}

.m-empty-ico {
  font-size: 48px;
  opacity: 0.5;
  margin-bottom: 12px;
}

.m-empty-msg {
  font-size: 15px;
  margin-bottom: 4px;
}

.m-empty-sub {
  font-size: 13px;
  color: var(--m-text3);
}

/* ============= 로그인 화면 (모바일) ============= */
.m-login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 28px;
  background: var(--m-bg);
}

.m-login-title {
  font-size: 36px;
  font-weight: 800;
  text-align: center;
  color: var(--m-pri);
  margin-bottom: 8px;
  letter-spacing: -1px;
}

.m-login-sub {
  font-size: 14px;
  color: var(--m-text3);
  text-align: center;
  margin-bottom: 44px;
}

.m-login-card {
  background: var(--m-card);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  margin-bottom: 16px;
}

/* iOS safe area 대응 */
@supports (padding: env(safe-area-inset-top)) {
  .m-hdr {
    padding-top: env(safe-area-inset-top);
    height: calc(var(--m-hdr-h) + env(safe-area-inset-top));
  }
}

/* 스크롤바 숨김 */
.m-app::-webkit-scrollbar { display: none; }
.m-app { scrollbar-width: none; }

/* 태블릿 중앙 정렬 */
@media (min-width: 640px) {
  .m-app, .m-hdr, .m-tabbar, .m-modal {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
  body {
    background: #000;
  }
  .m-app {
    background: var(--m-bg);
    min-height: 100vh;
  }
}

/* ============================================
   작업지시 카드 (현장 조회 + accordion)
   ============================================ */
.m-wo-card{
  background:var(--m-card,#fff);
  border:1px solid var(--m-bdr,#E5E7EB);
  border-radius:12px;
  padding:14px;
  margin-bottom:10px;
  cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
.m-wo-card:active{ background:var(--m-bg,#F9FAFB); }
.m-wo-card.open{
  border-color:#E8913A;
  box-shadow:0 2px 12px rgba(232,145,58,.12);
}

.m-wo-card-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:6px; gap:8px;
}
.m-wo-no{
  font-size:12px; font-weight:700; letter-spacing:.3px;
  color:var(--m-text3,#9CA3AF);
}
.m-wo-badges{ display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }

.m-wo-client{
  font-size:16px; font-weight:800; color:var(--m-text,#0F172A); line-height:1.3;
}
.m-wo-product{
  font-size:13px; color:var(--m-text2,#475569); margin-top:2px;
}
.m-wo-meta{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  margin-top:6px; font-size:12px; color:var(--m-text2,#475569);
}
.m-wo-meta b{ color:var(--m-text,#0F172A); font-size:13px; }

.m-wo-row-thumb{ display:flex; gap:10px; align-items:flex-start; }
.m-wo-thumb{
  width:56px; height:56px; object-fit:cover; border-radius:10px; flex-shrink:0;
}
.m-wo-text{ flex:1; min-width:0; }

/* 진행률 + 타임라인 */
.m-wo-progress-row{ margin-top:10px; }
.m-wo-progress-foot{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:6px;
}
.m-wo-pct{
  font-size:11px; font-weight:700; color:var(--m-text3,#9CA3AF);
}

.m-wo-timeline{ display:flex; align-items:center; gap:0; }
.m-wo-timeline-more{
  font-size:10px; color:var(--m-text3,#9CA3AF); margin-left:4px; font-weight:600;
}
.m-wo-timeline-label{
  font-size:11px; color:var(--m-text2,#475569);
  margin-left:6px; font-weight:600;
}
.m-wo-empty-proc{ font-size:11px; color:var(--m-text3,#9CA3AF); }

/* 공정 도트 (타임라인 + 상세) */
.m-wo-dot{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  background:#9CA3AF; margin-right:4px; flex-shrink:0;
}
.m-wo-dot.done{  background:#10B981; }
.m-wo-dot.doing{ background:#3B82F6; box-shadow:0 0 0 3px rgba(59,130,246,.2); }
.m-wo-dot.hold{  background:#F59E0B; }
.m-wo-dot.wait{  background:#9CA3AF; }

/* 펼침/접기 라벨 */
.m-wo-expand-label{
  text-align:right; margin-top:8px; font-size:11px;
  color:#E8913A; font-weight:700;
  min-height:24px; line-height:24px;
}

/* ============================================
   accordion 내부
   ============================================ */
.m-wo-accordion{
  margin-top:10px; padding:12px;
  background:var(--m-bg,#F9FAFB);
  border-radius:10px;
  border:1px solid var(--m-bdr,#E5E7EB);
  cursor:default;
}
.m-wo-section-t{
  font-size:11px; font-weight:800; letter-spacing:.3px;
  color:var(--m-text3,#9CA3AF);
  text-transform:uppercase;
  margin:12px 0 6px;
}
.m-wo-section-t:first-child{ margin-top:0; }

.m-wo-detail-img{ text-align:center; margin-bottom:10px; }
.m-wo-detail-img img{
  max-width:100%; max-height:200px; border-radius:8px;
  opacity:0; transition:opacity .25s;
}

.m-wo-detail-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:8px 12px;
  margin-bottom:4px;
}
.m-wo-detail-item{ min-width:0; }
.m-wo-detail-lbl{
  font-size:10px; color:var(--m-text3,#9CA3AF); font-weight:700;
  text-transform:uppercase; letter-spacing:.3px; margin-bottom:2px;
}
.m-wo-detail-val{
  font-size:13px; color:var(--m-text,#0F172A); font-weight:600;
  word-break:break-all;
}

.m-wo-detail-note{
  padding:10px; background:#fff;
  border:1px solid var(--m-bdr,#E5E7EB); border-radius:8px;
  font-size:13px; color:var(--m-text2,#475569);
  white-space:pre-wrap; word-break:break-all;
}

.m-wo-link-btn{
  display:inline-flex; align-items:center; gap:4px;
  padding:6px 12px; border-radius:999px;
  background:#3B82F6; color:#fff !important;
  font-size:12px; font-weight:700; text-decoration:none;
  min-height:28px;
}

/* 공정 진행 행 (세로 타임라인) */
.m-wo-proc-row{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; background:#fff;
  border:1px solid var(--m-bdr,#E5E7EB); border-radius:8px;
  margin-bottom:6px;
  min-height:48px;
}
.m-wo-proc-body{ flex:1; min-width:0; }
.m-wo-proc-name{
  font-size:13px; font-weight:700; color:var(--m-text,#0F172A);
}
.m-wo-proc-meta{
  font-size:11px; color:var(--m-text3,#9CA3AF); margin-top:2px;
}
.m-wo-proc-st{
  font-size:11px; font-weight:700;
  padding:3px 8px; border-radius:999px;
  background:#F3F4F6; color:#6B7280;
  flex-shrink:0;
}
.m-wo-proc-st.done{  background:#D1FAE5; color:#065F46; }
.m-wo-proc-st.doing{ background:#DBEAFE; color:#1E40AF; }
.m-wo-proc-st.hold{  background:#FEF3C7; color:#92400E; }
.m-wo-proc-st.wait{  background:#F3F4F6; color:#6B7280; }

/* 변경이력 */
.m-wo-log{
  padding:8px 10px; background:#fff;
  border:1px solid var(--m-bdr,#E5E7EB); border-radius:8px;
  margin-bottom:6px;
}
.m-wo-log-when{
  font-size:11px; color:var(--m-text3,#9CA3AF); font-weight:600;
}
.m-wo-log-what{
  font-size:13px; color:var(--m-text2,#475569); margin-top:2px;
}

/* accordion 내부 버튼 터치 영역 보장 */
.m-wo-accordion .m-btn{ min-height:44px; margin-top:10px; }

/* ============================================
   헤더 ⋮ 메뉴 (PC전환 / 새로고침 / 로그아웃)
   ============================================ */
.m-hdr-menu{
  position:fixed; top:calc(var(--m-hdr-h,52px) + 4px); right:8px;
  background:#fff; border:1px solid var(--m-bdr,#E5E7EB);
  border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.12);
  z-index:1000; min-width:200px; padding:6px;
}
.m-hdr-menu-item{
  display:block; width:100%; padding:12px 14px; text-align:left;
  background:transparent; border:0; border-radius:8px;
  font-size:14px; font-weight:600; color:var(--m-text,#0F172A);
  cursor:pointer; min-height:44px;
}
.m-hdr-menu-item:hover{ background:var(--m-bg,#F9FAFB); }
.m-hdr-menu-item.danger{ color:var(--m-red,#DC2626); }
@media (min-width:640px){
  .m-hdr-menu{ right:calc(50% - 250px); }
}

/* purple KPI 추가 (완료대기) */
.m-kpi.purple .m-kpi-value{ color:#8B5CF6; }

/* ============================================
   Packflow mobile production theme
   Representative/sales view: status, work orders, clients, item price.
   ============================================ */
:root{
  --m-bg:#F6F3EE;
  --m-card:#FFFCF7;
  --m-text:#172033;
  --m-text2:#475467;
  --m-text3:#858C99;
  --m-bdr:#E6DED2;
  --m-sep:#ECE3D7;
  --m-blue:#2563EB;
  --m-green:#10B981;
  --m-red:#DC2626;
  --m-orange:#E8913A;
  --m-purple:#7C3AED;
  --m-yellow:#F59E0B;
  --m-pri:#1E3A5F;
  --m-pri-light:#EEF4FF;
}

body,
button,
input,
select,
textarea{
  font-family:"Pretendard Variable","Pretendard","Apple SD Gothic Neo","Noto Sans KR",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  font-feature-settings:"ss01","tnum","kern";
  letter-spacing:-.012em;
}

body{
  font-weight:450;
  line-height:1.52;
}

html,body{
  background:
    radial-gradient(circle at 10% 0%, rgba(232,145,58,.18), transparent 18rem),
    radial-gradient(circle at 90% 10%, rgba(37,99,235,.10), transparent 18rem),
    var(--m-bg);
}

.m-app{
  background:
    radial-gradient(circle at 0% 0%, rgba(232,145,58,.16), transparent 18rem),
    linear-gradient(180deg,#FFF9EF 0%,#F6F3EE 34%,#F3EFE8 100%);
}

.m-hdr{
  background:rgba(255,252,247,.88);
  border-bottom:1px solid rgba(30,58,95,.10);
}
.m-hdr-title{
  color:var(--m-pri);
  font-weight:760;
  letter-spacing:-.028em;
}
.m-hdr-left,
.m-hdr-right{
  color:var(--m-pri);
}

.m-home-hero{
  position:relative;
  overflow:hidden;
  margin:2px 0 16px;
  padding:22px 20px;
  border-radius:24px;
  color:#fff;
  background:
    radial-gradient(circle at 92% 18%, rgba(232,145,58,.55), transparent 9rem),
    linear-gradient(135deg,#1E3A5F 0%,#132A45 68%,#0C1726 100%);
  box-shadow:0 20px 48px rgba(30,58,95,.24);
}
.m-home-hero::after{
  content:"";
  position:absolute;
  right:-70px;
  bottom:-86px;
  width:180px;
  height:180px;
  border-radius:50%;
  border:30px solid rgba(255,255,255,.08);
}
.m-home-kicker{
  color:#FFD7A7;
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
  margin-bottom:10px;
}
.m-home-title{
  position:relative;
  z-index:1;
  font-size:23px;
  line-height:1.25;
  font-weight:760;
  letter-spacing:-.032em;
}
.m-home-sub{
  position:relative;
  z-index:1;
  margin-top:8px;
  color:rgba(255,255,255,.72);
  font-size:13px;
  font-weight:600;
}

.m-page{
  padding:14px 14px 18px;
}

.m-card,
.m-kpi,
.m-item,
.m-search,
.m-wo-card,
.m-login-card,
.m-modal-body .m-card{
  background:rgba(255,252,247,.94);
  border:1px solid rgba(30,58,95,.10);
  box-shadow:0 10px 28px rgba(30,58,95,.08);
}

.m-kpi-grid{
  gap:11px;
}
.m-kpi{
  position:relative;
  overflow:hidden;
  min-height:112px;
  border-radius:20px;
  padding:16px;
}
.m-kpi::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  height:5px;
  background:var(--m-pri);
}
.m-kpi.blue::before{background:linear-gradient(90deg,#1E3A5F,#2563EB);}
.m-kpi.purple::before{background:linear-gradient(90deg,#7C3AED,#A78BFA);}
.m-kpi.orange::before{background:linear-gradient(90deg,#E8913A,#F59E0B);}
.m-kpi.red::before{background:linear-gradient(90deg,#DC2626,#F97316);}
.m-kpi-label{
  font-size:12px;
  color:var(--m-text3);
  font-weight:800;
}
.m-kpi-value{
  font-size:29px;
  font-weight:780;
  letter-spacing:-.035em;
}

.m-card-t{
  color:var(--m-pri);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
}

.m-search{
  border-radius:18px;
  padding:12px 14px;
}
.m-search::before{
  content:"";
  width:16px;
  height:16px;
  flex:0 0 16px;
  background:currentColor;
  color:#98A2B3;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat;
}

.m-filter-row{
  gap:8px;
}
.m-filter-btn{
  min-height:36px;
  border:1px solid rgba(30,58,95,.10);
  background:rgba(255,252,247,.9);
  color:#667085;
}
.m-filter-btn.on{
  background:var(--m-pri);
  color:#fff;
  border-color:var(--m-pri);
  box-shadow:0 10px 20px rgba(30,58,95,.18);
}

.m-btn{
  background:linear-gradient(135deg,var(--m-pri),#2563EB);
  border-radius:16px;
  box-shadow:0 12px 24px rgba(30,58,95,.18);
}
.m-btn.green{background:linear-gradient(135deg,#059669,#10B981);}
.m-btn.red{background:linear-gradient(135deg,#B91C1C,#DC2626);}
.m-btn.gray{
  background:#fff;
  color:var(--m-pri);
  border:1px solid rgba(30,58,95,.12);
  box-shadow:none;
}
.m-order-create{
  width:auto;
  margin-left:auto;
  padding:11px 16px;
  font-size:14px;
  border-radius:999px;
}

.m-item{
  border-radius:20px;
}
.m-item-title{
  color:var(--m-text);
  font-weight:720;
  letter-spacing:-.024em;
}

.m-badge{
  border-radius:999px;
  font-weight:900;
}
.m-badge.blue{background:#DBEAFE;color:#1D4ED8;}
.m-badge.green{background:#D1FAE5;color:#047857;}
.m-badge.orange{background:#FFEDD5;color:#C2410C;}
.m-badge.red{background:#FEE2E2;color:#B91C1C;}
.m-badge.gray{background:#F2F4F7;color:#667085;}

.m-progress{
  height:8px;
  background:#ECE3D7;
}
.m-progress-bar{
  background:linear-gradient(90deg,#E8913A,#2563EB);
}
.m-progress-bar.green{background:linear-gradient(90deg,#059669,#10B981);}
.m-progress-bar.orange{background:linear-gradient(90deg,#E8913A,#F59E0B);}
.m-progress-bar.red{background:linear-gradient(90deg,#DC2626,#F97316);}

.m-wo-card{
  border-radius:24px;
  padding:16px;
}
.m-wo-card.open{
  border-color:rgba(232,145,58,.62);
  box-shadow:0 16px 38px rgba(232,145,58,.16);
}
.m-wo-no{
  color:var(--m-orange);
  font-weight:900;
}
.m-wo-client{
  font-size:18px;
  letter-spacing:-.026em;
  font-weight:760;
}
.m-wo-product{
  color:#344054;
  font-weight:700;
}
.m-wo-accordion{
  background:#FFF8ED;
  border-color:rgba(232,145,58,.22);
  border-radius:18px;
}
.m-wo-proc-row,
.m-wo-detail-note,
.m-wo-log{
  border-radius:14px;
  border-color:rgba(30,58,95,.10);
}
.m-wo-link-btn{
  background:linear-gradient(135deg,var(--m-pri),#2563EB);
  border-radius:999px;
}

.m-tabbar{
  left:10px;
  right:10px;
  bottom:10px;
  height:calc(var(--m-tab-h) + var(--m-safe-bot));
  border:1px solid rgba(30,58,95,.12);
  border-radius:24px;
  background:rgba(255,252,247,.92);
  box-shadow:0 18px 45px rgba(30,58,95,.18);
  overflow:hidden;
}
.m-tab{
  border-top:0;
  border-radius:18px;
  margin:8px 4px;
  padding:8px 0;
  color:#7A8493;
}
.m-tab.on{
  color:#fff;
  background:linear-gradient(135deg,var(--m-pri),#2563EB);
  border-top-color:transparent;
}

.m-modal{
  background:var(--m-bg);
}
.m-modal-hdr{
  background:rgba(255,252,247,.92);
  border-bottom:1px solid rgba(30,58,95,.10);
}
.m-input,
.m-select,
.m-textarea{
  background:rgba(255,252,247,.96);
  border-color:rgba(30,58,95,.13);
  border-radius:16px;
}
.m-input:focus,
.m-select:focus,
.m-textarea:focus{
  border-color:var(--m-orange);
  box-shadow:0 0 0 3px rgba(232,145,58,.18);
}

.m-login{
  background:
    radial-gradient(circle at 20% 6%, rgba(232,145,58,.22), transparent 18rem),
    linear-gradient(180deg,#FFF8ED,#F1F5F9);
}
.m-login-title{
  color:var(--m-pri);
  font-size:42px;
  letter-spacing:-.036em;
  font-weight:760;
}
.m-login-sub{
  color:#667085;
  font-weight:700;
}

@media (prefers-color-scheme: dark){
  :root{
    --m-bg:#101828;
    --m-card:#182230;
    --m-text:#F8FAFC;
    --m-text2:#CBD5E1;
    --m-text3:#94A3B8;
    --m-bdr:#253246;
    --m-sep:#253246;
    --m-pri-light:#172554;
  }
  html,body,.m-app{
    background:#101828;
  }
  .m-hdr,
  .m-tabbar,
  .m-modal-hdr{
    background:rgba(16,24,40,.9);
  }
  .m-card,
  .m-kpi,
  .m-item,
  .m-search,
  .m-wo-card,
  .m-login-card,
  .m-modal-body .m-card{
    background:rgba(24,34,48,.94);
    border-color:#253246;
  }
  .m-wo-accordion{
    background:#111827;
    border-color:#253246;
  }
  .m-input,
  .m-select,
  .m-textarea{
    background:#182230;
    border-color:#253246;
  }
}

@media (min-width:640px){
  body{
    background:
      radial-gradient(circle at 10% 0%, rgba(232,145,58,.18), transparent 18rem),
      radial-gradient(circle at 90% 12%, rgba(37,99,235,.12), transparent 18rem),
      #111827;
  }
  .m-app{
    box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 90px rgba(0,0,0,.38);
  }
  .m-tabbar{
    right:calc(50% - 240px);
    left:calc(50% - 240px);
  }
}

/* === Phase 3 모바일 UX 안전장치 === */
/* 1) 모달이 .on 없으면 pointer-events 차단 — translateY(100%) 로 viewport 밖이지만
      iOS 일부 케이스에서 z-index:1000 fixed 가 페이지 클릭을 가로채는 회귀를 막는다.
      .on 일 때 자동으로 auto 복원. */
.m-modal{ pointer-events:none; }
.m-modal.on{ pointer-events:auto; }
/* 2) 자동완성 dropdown 은 모달 위에 떠야 한다 (모달 헤더 z:10 보다 큼). */
.m-modal .m-ac-list{ z-index:50; }
/* 3) 파일 input(.hidden) 이 form 안에서 inline-block 잔재로 layout 변경하지 않도록 */
input[type="file"].hidden{ position:absolute; left:-9999px; }

/* === Phase 4 터치 타깃 44px + safe-area + 탭바 겹침 ===
   iOS HIG / Material 최소 터치 영역 44x44. 색/모양은 그대로 두고 padding 으로 보강. */
.m-tab{ min-height:44px; }
.m-hdr{
  /* hdr 자체는 52px, .m-hdr-right/Left 의 클릭 영역만 키운다 */
}
.m-hdr-right, .m-hdr-left{
  min-height:44px;
  min-width:44px;
  padding:0 8px;
}
.m-filter-btn{ min-height:44px; padding:10px 16px; }
.m-modal-cancel, .m-modal-save{
  min-height:44px;
  min-width:48px;
  padding:10px 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.m-btn-sm{ min-height:44px; }
.m-order-create{ min-height:44px; }
.m-radio{ min-height:44px; display:flex; align-items:center; justify-content:center; }
.m-wo-link-btn{ min-height:44px; padding:10px 16px; display:inline-flex; align-items:center; }
/* a 태그 일반 (전화 등) — 카드 안 작은 링크는 44 보다 작아도 OK 인 경우가 있어
   m-wo-link-btn 한정으로만 보강 */

/* 하단 탭바 safe-area + 컨텐츠 padding-bottom 확보 (떠있는 탭바 ~68px 가림 방지) */
.m-app{
  /* 탭바 height(58) + 떠있는 margin(10) + safe-area + 16px 여백 */
  padding-bottom: calc(var(--m-tab-h) + var(--m-safe-bot) + 26px);
}
/* 토스트 — 탭바 위로 살짝 더 띄우기 (떠있는 탭바 그림자와 안 겹치게) */
.m-toast{
  bottom: calc(var(--m-tab-h) + var(--m-safe-bot) + 28px);
}

/* === Phase 5 가로 overflow 방어 (360~430 viewport) ===
   현재 진단상 overflow 0 이지만 긴 거래처명/제품명/메모 입력 시 회귀 가능.
   카드/리스트 자식의 flex shrink + text overflow 보강. */
/* flex item 의 min-width:0 가 없으면 자식 텍스트가 컨테이너를 밀어낸다 */
.m-wo-row-thumb > *,
.m-item-hdr > *,
.m-wo-meta > *,
.m-wo-detail-item,
.u-mapp-row-between-top > *,
.u-mapp-col-flex1{
  min-width:0;
}
/* 길이 긴 한 줄 텍스트는 ellipsis 처리 */
.m-item-title,
.m-wo-client,
.m-wo-product,
.m-wo-no{
  overflow:hidden;
  text-overflow:ellipsis;
  /* white-space:nowrap 는 다중라인이 의도된 영역에서 안 좋음 — wo-client/product 는 wrap 가능 */
}
.m-wo-no{ white-space:nowrap; }
/* word-break 보강 — 영문/숫자 연속이 viewport 밖으로 나가지 않도록 */
.m-wo-detail-val,
.m-wo-detail-note,
.m-card,
.m-empty-msg,
.m-toast{
  overflow-wrap:break-word;
  word-break:break-word;
}
/* 모달 컨텐츠 가로 안전 */
.m-modal-body{
  box-sizing:border-box;
  max-width:100%;
}
/* 마지막 안전망 — html 자체 가로 스크롤 차단 */
html{ overflow-x:hidden; }

/* === Phase 6 모달 스크롤 + sticky 헤더 ===
   현재 .m-modal 과 .m-modal-body 두 곳에 overflow-y:auto 가 있어 iOS 에서
   이중 스크롤 / scroll trap 가능. 컨테이너는 hidden, body 만 스크롤. */
.m-modal{
  overflow:hidden; /* flex column 자체는 스크롤하지 않음 */
  /* 100dvh 지원되면 dynamic viewport 로 — iOS 주소창 변화 대응 */
  height:100vh;
  max-height:100vh;
}
@supports (height: 100dvh){
  .m-modal{ height:100dvh; max-height:100dvh; }
}
.m-modal-hdr{
  flex:0 0 auto;
  /* 이미 position:sticky 지만 flex container 안에서 sticky 가 무효일 수 있어
     명시적으로 flex:0 0 auto + 그리고 sticky 보강. */
  position:sticky;
  top:0;
}
.m-modal-body{
  flex:1 1 auto;
  min-height:0; /* flex 자식 스크롤 핵심 */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
/* 모달 풋터 sticky 영역이 필요하면 .m-modal-foot 추가 사용. 현재 작업지시 모달은
   상단 저장/취소가 헤더에 있으므로 별도 풋터 미사용 (body 안 버튼은 그대로). */

/* === Last-defined .hidden: !important to win over ID selectors and later-loaded CSS.
   m-app.js 는 #mApp / #mHdrMenu / .m-ac-list / 파일 input 등을 class="hidden" 로 토글한다.
   PC style.css 끝에 동일 패턴 (style.css 마지막 줄 참조). === */
.hidden{display:none!important}