@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
/* Inter — Pretendard에 없는 베트남어 성조 글자(ế ơ ư ă …)만 채운다.
   폴백은 글자 단위라 한글·영문은 Pretendard 그대로 쓰이고, 베트남어 서브셋(약 10KB)만
   실제로 그 글자가 화면에 있을 때 내려온다. Pretendard의 라틴이 Inter 기반이라
   한 단어 안에서 섞여도 이질감이 없다. @import는 모든 규칙보다 앞에 와야 한다. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
/* ══════════════════════════════════════════════════════════════════════
   MARBL Works — Cupertino Edition
   설계 원칙 (Apple HIG)
   · 재질(material)로 층을 나눈다 — 선이 아니라 투명도와 흐림으로.
   · 위계는 색이 아니라 크기·굵기·간격이 만든다.
   · 강조색은 아껴 쓴다. 지면은 조용하고 숫자는 또렷하다.
   · 모든 움직임은 설명이다. 장식이 아니다.
   ⚠ 클래스 이름·구조 규칙(display 토글, grid 열 수)은 원본 그대로다.
     JS가 참조하는 훅이므로 여기서 바꾸지 않는다.
   ══════════════════════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

:root{
  /* ── 지면 ── iOS grouped background 계열 */
  --bg:#F2F2F7;--bg2:#F2F2F7;
  --surface:#FFFFFF;--surface2:#F2F2F7;--surface3:#FAFAFC;

  /* ── 채움(fill) ── Apple systemFill. 선 대신 이걸로 묶는다 ── */
  --fill:rgba(118,118,128,.12);--fill2:rgba(118,118,128,.08);--fill3:rgba(118,118,128,.05);

  /* ── 구분선 ── 헤어라인. 절대 진하지 않다 ── */
  --border:rgba(60,60,67,.10);--border2:rgba(60,60,67,.16);

  /* ── 의미색 ── 기본형은 '면', 2형은 '글자'(옅은 칩 위에서도 4.5:1) ── */
  --red:#BE3125;--red2:#96251C;          /* Marbling Red — 브랜드·행동·경고·삭제 */
  --navy:#1C1C1E;--navy2:#2C2C2E;
  --green:#248A3D;--green2:#1B6B2F;      /* Yield Green — 정상·합격·완료 */
  --blue:#0071E3;--blue2:#0056B3;        /* Cold Blue — 냉동 */
  --orange:#9A5B00;--orange2:#7D4900;    /* Caution Amber — 주의·임박 */
  --purple:#5B4FC7;--teal:#00727F;       /* Cold Teal — 링크·정보·냉장 */
  --accent:#00727F;--accent2:#008C9C;    /* 링크·포커스·선택. 행동 버튼에는 쓰지 않는다 */
  --brand:#BE3125;

  /* ── 글자 ── Apple label 계층 ── */
  --text:#1C1C1E;--text1:#1C1C1E;--text2:#5C5C61;--text3:#8E8E93;
  --white:#1C1C1E;            /* 다크판에서 '가장 밝은 글자'였던 자리 → 잉크 */

  --sidebar-w:268px;
  --zone:#00727F;

  /* ── 깊이 ── 넓고 얕게. 그림자는 종이가 뜬 만큼만 ── */
  --sh-1:0 1px 2px rgba(0,0,0,.04);
  --sh-2:0 1px 2px rgba(0,0,0,.04),0 8px 24px -14px rgba(0,0,0,.16);
  --sh-3:0 32px 80px -24px rgba(0,0,0,.30),0 2px 10px rgba(0,0,0,.05);
  --sh-pop:0 12px 40px -12px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.05);
  --nm-in:inset 0 0 0 1px rgba(60,60,67,.05);

  /* ── 모서리 ── 연속 곡률에 가깝게 넉넉히 ── */
  --r-xs:7px;--r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:24px;--r-pill:980px;

  /* ── 가속 ── 애플의 감속 곡선 ── */
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.25,.46,.45,.94);

  /* ── 활자 ── 한글·영문 Pretendard, 베트남어 성조는 Inter가 보충 ── */
  --f-sans:'Pretendard Variable',Pretendard,Inter,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Segoe UI',Roboto,'Malgun Gothic',sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,'SF Mono','Cascadia Mono','Segoe UI Mono',Menlo,Consolas,monospace;

  /* ── 재질 ── */
  --mat:saturate(180%) blur(24px);
}

html,body{height:100%;
  font-family:var(--f-sans);
  background:var(--bg);color:var(--text);}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'tnum';letter-spacing:-.002em;line-height:1.55;
  /* 한글은 어절 단위로 끊는다 — '한국대형마/트'처럼 글자 중간에서 잘리지 않게 */
  word-break:keep-all;overflow-wrap:break-word;}

::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(60,60,67,.22);border-radius:var(--r-pill);
  border:2px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:rgba(60,60,67,.38);background-clip:content-box;}

/* ══ 아이콘 ══ */
.ico{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-.19em;}
.ico-sm{width:14px;height:14px;} .ico-lg{width:22px;height:22px;} .ico-xl{width:32px;height:32px;}
.btn .ico,.tb-btn .ico{width:15px;height:15px;}

/* ══ 존 정체성 · 마블링 룰 ══
   존을 색으로 칠하지 않는다. 얇은 결 하나로만 알린다 */
body{--zone:#00727F;}             /* 사무실 — 차가운 쪽 */
body.tz-factory{--zone:#BE3125;}  /* 공장 — 따뜻한 쪽 */
.marbl-rule,.marbl-mark{height:3px;border-radius:var(--r-pill);
  background:repeating-linear-gradient(90deg,var(--zone) 0 10px,rgba(60,60,67,.13) 10px 15px);}
.marbl-mark{width:44px;}

/* ══════════════════ 모드 선택 ══════════════════ */
.mode-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;
  background:
    radial-gradient(ellipse 60% 50% at 22% 18%,rgba(190,49,37,.07) 0%,transparent 62%),
    radial-gradient(ellipse 55% 45% at 80% 78%,rgba(0,114,127,.07) 0%,transparent 62%),
    var(--bg);}
.mode-logo-row{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.mode-logo-icon{font-size:40px;}
.mode-logo-title{font-size:34px;font-weight:700;color:var(--text);letter-spacing:-.018em;}
.mode-logo-title span{color:var(--brand);}
.mode-version{font-size:11px;font-weight:600;background:var(--fill);border:none;color:var(--text2);
  padding:4px 10px;border-radius:var(--r-pill);margin-left:8px;letter-spacing:0;}
.mode-tagline{font-size:15px;color:var(--text2);text-align:center;margin-bottom:44px;letter-spacing:-.006em;}
.mode-zone-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;width:100%;max-width:720px;margin-bottom:16px;}
.zone-card{background:var(--surface);border:none;border-radius:var(--r-xl);padding:34px 24px;text-align:center;cursor:pointer;
  position:relative;overflow:hidden;box-shadow:var(--sh-2);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease);}
.zone-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .38s var(--ease);}
.zone-card:hover{transform:translateY(-4px) scale(1.012);box-shadow:var(--sh-pop);}
.zone-card:active{transform:scale(.985);transition-duration:.12s;}
.zc-office::before{background:radial-gradient(ellipse 70% 100% at 50% 0%,rgba(0,113,227,.10),transparent 70%);}
.zc-factory::before{background:radial-gradient(ellipse 70% 100% at 50% 0%,rgba(190,49,37,.10),transparent 70%);}
.zc-warehouse::before{background:radial-gradient(ellipse 70% 100% at 50% 0%,rgba(36,138,61,.10),transparent 70%);}
.zone-card:hover::before{opacity:1;}
.zone-card-icon{font-size:34px;margin-bottom:12px;}
.zone-card .ico-lg{width:28px;height:28px;margin-bottom:14px;color:var(--text2);}
.zc-office .ico-lg{color:var(--blue);} .zc-factory .ico-lg{color:var(--red);} .zc-warehouse .ico-lg{color:var(--green);}
.zone-card-zone{font-size:11px;font-weight:600;letter-spacing:.11em;margin-bottom:6px;}
.zcz-office{color:var(--blue2);}
.zcz-factory{color:var(--red2);}
.zcz-warehouse{color:var(--green2);}
.zone-card-title{font-size:21px;font-weight:700;color:var(--text);margin-bottom:6px;letter-spacing:-.013em;}
.zone-card-sub{font-size:13px;color:var(--text2);line-height:1.5;}
.mode-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:720px;}
.mode-row2-single{grid-template-columns:1fr;}
.mode-row2-single .mode-r2-card{justify-content:center;}
.mode-r2-card{background:var(--surface);border:none;border-radius:var(--r-md);padding:16px 18px;cursor:pointer;
  display:flex;align-items:center;gap:13px;box-shadow:var(--sh-1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .2s;}
.mode-r2-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);background:#fff;}
.mode-r2-card:active{transform:scale(.985);transition-duration:.1s;}
.mode-r2-card .ico-lg{color:var(--text2);}
.mr2-icon{font-size:20px;}
.mr2-title{font-size:14px;font-weight:600;color:var(--text);letter-spacing:-.008em;}
.mr2-sub{font-size:12px;color:var(--text3);margin-top:1px;}

/* ══════════════════ 어드민 레이아웃 ══════════════════ */
.admin-wrap{display:none;height:100vh;flex-direction:column;}

/* 상단 바 — 유리 재질. 아래 내용이 비쳐 지나간다 */
.topbar{height:60px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;z-index:100;
  background:rgba(250,250,252,.78);-webkit-backdrop-filter:var(--mat);backdrop-filter:var(--mat);
  border-bottom:1px solid var(--border);}
.topbar-left{display:flex;align-items:center;gap:11px;}
.topbar-logo{font-size:17px;font-weight:700;color:var(--text);letter-spacing:-.013em;}
.topbar-logo span{color:var(--brand);}
.topbar-zone{font-size:11px;padding:4px 11px;border-radius:var(--r-pill);font-weight:600;letter-spacing:-.004em;}
/* ⚠ body에도 .tz-factory가 붙는다. 배지 스타일은 반드시 .topbar-zone으로 좁힌다 */
.topbar-zone.tz-office{background:rgba(0,113,227,.11);color:var(--blue2);}
.topbar-zone.tz-factory{background:rgba(190,49,37,.11);color:var(--red2);}
.topbar-zone.tz-warehouse{background:rgba(36,138,61,.11);color:var(--green2);}
.topbar-right{display:flex;align-items:center;gap:6px;}
.tb-btn{background:var(--fill2);border:none;border-radius:var(--r-sm);padding:8px 14px;font-size:13px;font-weight:500;
  color:var(--text2);cursor:pointer;font-family:inherit;letter-spacing:-.006em;
  transition:background .18s var(--ease-out),color .18s var(--ease-out),transform .12s var(--ease);
  display:flex;align-items:center;gap:5px;white-space:nowrap;}
.tb-btn:hover{background:var(--fill);color:var(--text);}
.tb-btn:active{transform:scale(.96);}
.tb-alert{background:rgba(190,49,37,.11);color:var(--red2);font-weight:600;animation:palert 2.4s var(--ease-out) infinite;}
.tb-alert:hover{background:rgba(190,49,37,.18);color:var(--red2);}
@keyframes palert{0%,100%{opacity:1;}50%{opacity:.55;}}
.admin-body{display:flex;flex:1;overflow:hidden;}

/* 사이드바 — 애플 사이드바 재질 + 알약 선택 */
.sidebar{width:var(--sidebar-w);display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;
  background:rgba(248,248,250,.72);-webkit-backdrop-filter:var(--mat);backdrop-filter:var(--mat);
  border-right:1px solid var(--border);padding-bottom:18px;}
.sb-profile{padding:22px 22px 16px;margin-bottom:6px;}
.sbp-zone{font-size:11px;letter-spacing:.11em;color:var(--text3);font-weight:600;margin-bottom:5px;}
.sbp-name{font-size:19px;font-weight:700;color:var(--text);letter-spacing:-.013em;}
.sbp-status{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text3);margin-top:5px;}
.live-dot{width:7px;height:7px;border-radius:50%;flex:none;}
.ld-on{background:var(--green);box-shadow:0 0 0 3px rgba(36,138,61,.14);animation:blink 2.6s var(--ease-out) infinite;}
.ld-off{background:var(--text3);}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.35;}}
.sb-sec{padding:14px 0 4px;}
.sb-sec-label{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;letter-spacing:.07em;
  color:var(--text3);font-weight:600;padding:0 22px;margin-bottom:8px;cursor:pointer;user-select:none;
  transition:color .18s;}
.sb-sec-label:hover{color:var(--text2);}
.sb-sec-arrow{font-size:9px;transition:transform .32s var(--ease);opacity:.55;}
.sb-sec.collapsed .sb-sec-arrow{transform:rotate(-90deg);}
.sb-sec.collapsed .sb-sec-items{display:none;}
.sb-divider{font-size:10px;letter-spacing:.07em;color:var(--text3);opacity:.6;padding:10px 20px 3px;margin-top:4px;
  border-top:1px solid var(--border);}
.sb-item{display:flex;align-items:center;gap:11px;padding:11px 14px;margin:2px 12px;font-size:14.5px;font-weight:450;
  color:var(--text2);cursor:pointer;border:none;background:none;width:calc(100% - 24px);text-align:left;
  font-family:inherit;border-radius:var(--r-sm);letter-spacing:-.008em;
  transition:background .16s var(--ease-out),color .16s var(--ease-out);}
.sb-item:hover{background:var(--fill2);color:var(--text);}
.sb-item.active{background:var(--fill);color:var(--text);font-weight:600;}
.si-icon{display:inline-flex;align-items:center;justify-content:center;width:19px;flex-shrink:0;color:var(--text3);
  transition:color .16s;}
.si-icon .ico{width:17px;height:17px;}
.sb-item:hover .si-icon{color:var(--text2);}
.sb-item.active .si-icon{color:var(--zone);}
.si-badge{margin-left:auto;background:var(--red);color:#fff;border-radius:var(--r-pill);
  min-width:19px;padding:1px 6px;font-size:11px;font-weight:600;text-align:center;line-height:17px;}
.si-badge-g{background:var(--green);}
.si-badge-b{background:var(--blue);}

.main-content{flex:1;overflow-y:auto;padding:36px 40px 56px;background:var(--bg);
  scroll-behavior:smooth;overscroll-behavior:contain;}

/* ══════════════════ 페이지 공통 ══════════════════ */
.page{display:none;}
.page.active{display:block;animation:pagein .42s var(--ease) both;}
@keyframes pagein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.page-hd{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:30px;flex-wrap:wrap;gap:14px;
  position:relative;padding-top:18px;}
.page-hd::before{content:'';position:absolute;top:0;left:0;width:44px;height:3px;border-radius:var(--r-pill);
  background:repeating-linear-gradient(90deg,var(--zone) 0 10px,rgba(60,60,67,.13) 10px 15px);}
/* 큰 제목 — 애플의 large title 리듬 */
.page-title{font-size:32px;font-weight:700;color:var(--text);letter-spacing:-.017em;line-height:1.2;}
.page-title .sub{font-size:14px;color:var(--text3);font-weight:400;margin-left:10px;letter-spacing:-.006em;}
.page-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
h1,h2,h3{letter-spacing:-.014em;}
code,.mono{font-family:var(--f-mono);font-size:.92em;letter-spacing:0;}

/* 숫자는 자리를 지킨다 */
td,th,input[type=number],.kpi-num,.kpi-value,.stat-num,.money,.num,.mob-oamt,.mob-price,.np-display,.sw-value{
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum';}
td.num,th.num,.ta-r{text-align:right;}

/* ══════════════════ 버튼 ══════════════════
   위계는 셋뿐이다: 채운 것 / 옅게 물든 것 / 아무것도 아닌 것 */
.btn{padding:10px 19px;border-radius:var(--r-sm);border:none;cursor:pointer;font-size:14px;font-weight:600;
  font-family:inherit;letter-spacing:-.008em;min-height:40px;
  transition:background .18s var(--ease-out),color .18s var(--ease-out),transform .12s var(--ease),box-shadow .18s;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;}
.btn:active{transform:scale(.965);}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 1px 2px rgba(190,49,37,.20);}
.btn-primary:hover{background:var(--red2);}
.btn-green{background:var(--green);color:#fff;box-shadow:0 1px 2px rgba(36,138,61,.20);}
.btn-green:hover{background:var(--green2);}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 1px 2px rgba(0,113,227,.22);}
.btn-blue:hover{background:var(--blue2);}
.btn-ghost{background:var(--fill2);color:var(--text2);border:none;}
.btn-ghost:hover{background:var(--fill);color:var(--text);}
.btn-sm{padding:7px 13px;font-size:12.5px;min-height:32px;border-radius:var(--r-xs);}
.btn-danger{background:rgba(190,49,37,.10);color:var(--red2);border:none;}
.btn-danger:hover{background:var(--red);color:#fff;}
*:focus-visible{outline:3px solid rgba(0,114,127,.42);outline-offset:2px;border-radius:var(--r-xs);}

/* ══════════════════ KPI ══════════════════ */
.kpi-grid{display:grid;gap:18px;margin-bottom:28px;}
.kpi-4{grid-template-columns:repeat(4,1fr);}
.kpi-5{grid-template-columns:repeat(5,1fr);}
.kpi-6{grid-template-columns:repeat(6,1fr);}
.kpi-3{grid-template-columns:repeat(3,1fr);}
.kpi-card{background:var(--surface);border:none;border-radius:var(--r-xl);padding:24px 24px 22px 27px;
  position:relative;overflow:hidden;box-shadow:var(--sh-2);}
.kpi-clickable{cursor:pointer;transition:transform .32s var(--ease),box-shadow .32s var(--ease);}
.kpi-clickable:hover{transform:translateY(-3px);box-shadow:var(--sh-pop);}
.kpi-clickable:active{transform:scale(.985);transition-duration:.1s;}
/* 좌측 색 레일 — 얼룩이 아니라 지표다 */
.kpi-card::after{content:'';position:absolute;top:20px;bottom:20px;left:0;width:3px;height:auto;
  border-radius:0 var(--r-pill) var(--r-pill) 0;opacity:.9;}
.kpi-label{font-size:13.5px;color:var(--text2);margin-bottom:11px;font-weight:500;letter-spacing:-.005em;}
.kpi-value{font-size:clamp(27px,2.3vw,38px);font-weight:700;line-height:1.08;letter-spacing:-.018em;
  overflow-wrap:anywhere;}
.kpi-sub{font-size:13px;color:var(--text3);margin-top:7px;}
.kpi-red .kpi-value{color:var(--red2);}      .kpi-red::after{background:var(--red);}
.kpi-green .kpi-value{color:var(--green2);}  .kpi-green::after{background:var(--green);}
.kpi-blue .kpi-value{color:var(--blue2);}    .kpi-blue::after{background:var(--blue);}
.kpi-accent .kpi-value{color:var(--accent);} .kpi-accent::after{background:var(--accent);}
.kpi-orange .kpi-value{color:var(--orange);} .kpi-orange::after{background:var(--orange);}
.kpi-purple .kpi-value{color:var(--purple);} .kpi-purple::after{background:var(--purple);}

/* ══════════════════ 표 ══════════════════
   iOS 리스트의 리듬 — 선은 최소한, 행은 넉넉하게 */
.table-card{background:var(--surface);border:none;border-radius:var(--r-xl);overflow:hidden;margin-bottom:24px;
  box-shadow:var(--sh-2);}
.table-card-header{padding:20px 24px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap;}
.table-card-title{font-size:18px;font-weight:600;color:var(--text);letter-spacing:-.012em;}
.table-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;}
th,table thead th,.table-card thead th{font-size:12px;color:var(--text3);font-weight:600;text-align:left;
  padding:13px 20px;background:var(--surface3);border-bottom:1px solid var(--border);
  white-space:nowrap;letter-spacing:.03em;}
td{font-size:14px;padding:16px 20px;border-bottom:1px solid var(--border);vertical-align:middle;
  color:var(--text);letter-spacing:-.006em;}
/* 데이터 표는 줄바꿈 대신 가로 스크롤 — 날짜·번호가 두 줄로 접히면 행 리듬이 깨진다.
   .tbl-wrap이 이미 overflow-x를 잡고 있다. 길게 풀어써야 하는 칸은 .td-wrap을 준다 */
.tbl-wrap td,.tbl-wrap th{white-space:nowrap;}
.tbl-wrap td.td-wrap,.tbl-wrap th.td-wrap{white-space:normal;min-width:180px;}
table tbody tr{transition:background .16s var(--ease-out);}
table tbody tr:last-child td,tr:last-child td{border-bottom:none;}
table tbody tr:hover,tr:hover td{background:var(--fill3);}

/* ══════════════════ 폼 ══════════════════
   입력은 '파인 자리'다. 테두리보다 채움으로 알린다 */
.form-group{margin-bottom:20px;}
.form-label{font-size:13.5px;color:var(--text2);margin-bottom:8px;font-weight:500;display:block;letter-spacing:-.006em;}
.req{color:var(--red2);}
.form-input,.form-select,.form-textarea{width:100%;background:var(--fill2);border:1px solid transparent;
  border-radius:var(--r-md);padding:13px 16px;font-size:15px;color:var(--text);font-family:inherit;
  letter-spacing:-.007em;box-shadow:var(--nm-in);
  transition:background .18s var(--ease-out),border-color .18s var(--ease-out),box-shadow .18s var(--ease-out);}
.form-input:hover,.form-select:hover,.form-textarea:hover{background:var(--fill);}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;background:var(--surface);
  border-color:var(--accent);box-shadow:0 0 0 4px rgba(0,114,127,.14);}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text3);}
.form-select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:32px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:14px;}
.form-select option{background:var(--surface);color:var(--text);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.form-textarea{resize:vertical;min-height:84px;line-height:1.55;}
.search-input{background:var(--fill2);border:1px solid transparent;border-radius:var(--r-sm);padding:10px 15px;
  font-size:13.5px;color:var(--text);font-family:inherit;width:230px;letter-spacing:-.006em;
  transition:background .18s,border-color .18s,box-shadow .18s,width .3s var(--ease);}
.search-input::placeholder{color:var(--text3);}
.search-input:focus{outline:none;background:var(--surface);border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(0,114,127,.14);width:280px;}
.filter-sel{background:var(--fill2);border:1px solid transparent;border-radius:var(--r-sm);padding:9px 30px 9px 13px;
  font-size:13.5px;color:var(--text2);font-family:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:13px;
  transition:background-color .18s;}
.filter-sel:hover{background-color:var(--fill);}
.filter-sel:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(0,114,127,.14);}
.filter-sel option{background:var(--surface);color:var(--text);}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);}
input[type=date],input[type=time]{font-family:inherit;}

/* ══════════════════ 칩 ══════════════════
   옅게 물든 알약. 굵기는 낮추고 색으로만 구분한다 */
.chip{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:var(--r-pill);
  font-size:12.5px;font-weight:600;letter-spacing:-.004em;line-height:1.5;white-space:nowrap;}
.chip-돼지{background:rgba(154,91,0,.12);color:var(--orange2);}
.chip-소{background:rgba(190,49,37,.12);color:var(--red2);}
.chip-닭{background:rgba(154,91,0,.12);color:var(--orange);}
.chip-접수{background:rgba(190,49,37,.12);color:var(--red2);}
.chip-준비중{background:rgba(154,91,0,.12);color:var(--orange);}
.chip-출하지시{background:rgba(0,113,227,.12);color:var(--blue2);}
.chip-출하완료{background:rgba(0,114,127,.12);color:var(--teal);}
.chip-배송완료{background:rgba(36,138,61,.13);color:var(--green2);}
.chip-취소{background:var(--fill);color:var(--text3);}
.chip-반품{background:rgba(91,79,199,.12);color:var(--purple);}
.chip-활성{background:rgba(36,138,61,.13);color:var(--green2);}
.chip-비활성{background:var(--fill);color:var(--text3);}
.chip-정상{background:rgba(36,138,61,.13);color:var(--green2);}
.chip-주의{background:rgba(154,91,0,.12);color:var(--orange);}
.chip-위험{background:rgba(190,49,37,.12);color:var(--red2);}
.chip-합격{background:rgba(36,138,61,.13);color:var(--green2);}
.chip-불합격{background:rgba(190,49,37,.12);color:var(--red2);}
.chip-슬라이스{background:rgba(0,113,227,.12);color:var(--blue2);}
.chip-대패{background:rgba(91,79,199,.12);color:var(--purple);}
.chip-통살{background:rgba(36,138,61,.13);color:var(--green2);}
.chip-다짐육{background:rgba(91,79,199,.12);color:var(--purple);}
.chip-큐브{background:rgba(0,114,127,.12);color:var(--teal);}
.chip-양념{background:rgba(190,49,37,.12);color:var(--red2);}
.chip-스트립{background:rgba(154,91,0,.12);color:var(--orange2);}

/* ══════════════════ 모달 ══════════════════
   시트처럼 올라온다. 뒤는 흐려지고 조용해진다 */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:500;display:none;
  align-items:center;justify-content:center;padding:24px;
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);}
.modal-overlay.open{display:flex;animation:fadein .28s var(--ease-out) both;}
@keyframes fadein{from{opacity:0;}to{opacity:1;}}
.modal-box{background:var(--surface);border:none;border-radius:var(--r-xl);width:540px;max-width:100%;
  max-height:88vh;overflow-y:auto;box-shadow:var(--sh-3);animation:sheetin .46s var(--ease) both;}
@keyframes sheetin{from{opacity:0;transform:translateY(18px) scale(.96);}to{opacity:1;transform:none;}}
.modal-box.md-lg{width:720px;}
.modal-box.md-sm{width:400px;}
.modal-head{padding:24px 28px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;
  justify-content:space-between;position:sticky;top:0;z-index:1;background:var(--surface);}
.modal-head h3{font-size:19px;font-weight:700;color:var(--text);letter-spacing:-.014em;}
.modal-close{background:var(--fill2);border:none;color:var(--text3);font-size:15px;cursor:pointer;
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;
  transition:background .18s,color .18s,transform .12s var(--ease);}
.modal-close:hover{background:var(--fill);color:var(--text);}
.modal-close:active{transform:scale(.9);}
.modal-body{padding:28px;}
.modal-footer{padding:18px 28px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:9px;
  position:sticky;bottom:0;background:var(--surface);}

/* ══════════════════ 빠른 실행 · 알림 배너 ══════════════════ */
.role-quick-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:24px;padding:15px 18px;
  background:var(--surface);border:none;border-radius:var(--r-md);box-shadow:var(--sh-1);}
.rq-label{font-size:12px;color:var(--text3);font-weight:600;margin-right:4px;white-space:nowrap;}
.rq-btn{display:flex;align-items:center;gap:7px;padding:9px 17px;background:var(--fill2);border:none;
  border-radius:var(--r-pill);color:var(--text2);font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;
  letter-spacing:-.007em;transition:background .18s var(--ease-out),color .18s,transform .12s var(--ease);}
.rq-btn:hover{background:var(--fill);color:var(--text);}
.rq-btn:active{transform:scale(.96);}
.alert-banner{border-radius:var(--r-lg);padding:17px 21px;margin-bottom:22px;display:flex;align-items:center;gap:12px;}
.ab-red{background:rgba(190,49,37,.08);border:none;}
.ab-green{background:rgba(36,138,61,.08);border:none;}
.ab-blue{background:rgba(0,113,227,.07);border:none;}
.ab-orange{background:rgba(154,91,0,.08);border:none;}
.ab-icon{font-size:0;line-height:0;flex-shrink:0;}
.ab-red .ab-icon{color:var(--red2);} .ab-green .ab-icon{color:var(--green2);}
.ab-blue .ab-icon{color:var(--blue2);} .ab-orange .ab-icon{color:var(--orange);}
.ab-icon .ico{width:20px;height:20px;}
.ab-text{flex:1;}
.ab-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:2px;letter-spacing:-.01em;}
.ab-sub{font-size:13px;color:var(--text2);letter-spacing:-.005em;}

/* ══════════════════ 토스트 · 넛지 ══════════════════ */
.toast{position:fixed;bottom:26px;right:26px;z-index:9999;border:none;border-radius:var(--r-md);
  padding:14px 18px;font-size:13.5px;font-weight:500;color:var(--text);max-width:330px;letter-spacing:-.007em;
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:var(--mat);backdrop-filter:var(--mat);
  box-shadow:var(--sh-pop),inset 0 0 0 1px var(--border);
  transform:translateY(24px) scale(.96);opacity:0;pointer-events:none;
  transition:transform .46s var(--ease),opacity .3s var(--ease-out);}
.toast.show{transform:none;opacity:1;pointer-events:auto;}
.t-success{box-shadow:var(--sh-pop),inset 0 0 0 1px rgba(36,138,61,.35);}
.t-error{box-shadow:var(--sh-pop),inset 0 0 0 1px rgba(190,49,37,.35);}
.t-info{box-shadow:var(--sh-pop),inset 0 0 0 1px rgba(0,113,227,.35);}
.t-warn{box-shadow:var(--sh-pop),inset 0 0 0 1px rgba(154,91,0,.35);}
.next-step-nudge{position:fixed;bottom:26px;left:50%;transform:translate(-50%,24px) scale(.96);z-index:9998;
  border:none;border-radius:var(--r-md);padding:12px 12px 12px 18px;display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:var(--mat);backdrop-filter:var(--mat);
  box-shadow:var(--sh-pop),inset 0 0 0 1px var(--border);max-width:92vw;opacity:0;pointer-events:none;
  transition:transform .46s var(--ease),opacity .3s var(--ease-out);}
.next-step-nudge.show{transform:translate(-50%,0) scale(1);opacity:1;pointer-events:auto;}
.nsn-msg{font-size:13.5px;color:var(--text);white-space:nowrap;letter-spacing:-.007em;}
.nsn-close{background:var(--fill2);border:none;color:var(--text3);cursor:pointer;font-size:12px;
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;
  transition:background .18s,color .18s;}
.nsn-close:hover{background:var(--fill);color:var(--text);}

/* ══════════════════ 그리드 · 카드 · 진행바 ══════════════════ */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-bottom:20px;}
.grid-sidebar{display:grid;grid-template-columns:330px 1fr;gap:16px;}
.info-card{background:var(--surface);border:none;border-radius:var(--r-xl);padding:26px;box-shadow:var(--sh-2);}
.info-card-title{font-size:14px;font-weight:600;color:var(--text2);margin-bottom:15px;letter-spacing:-.006em;}
.progress-bar{height:7px;background:var(--fill);border-radius:var(--r-pill);overflow:hidden;margin-top:8px;}
.progress-fill{height:100%;border-radius:var(--r-pill);transition:width .9s var(--ease);}
.pf-red{background:var(--red);}
.pf-green{background:var(--green);}
.pf-blue{background:var(--blue);}
.pf-orange{background:var(--orange);}

/* ══════════════════ CAS 저울 ══════════════════
   계기는 계기답게. 유리 밑의 물리 장치처럼 보여야 한다 */
.scale-widget{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:26px;
  text-align:center;position:relative;box-shadow:var(--sh-2);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);}
.scale-widget.sw-connected{border-color:rgba(36,138,61,.35);}
.scale-widget.sw-measuring{border-color:rgba(0,114,127,.55);animation:sw-pulse 1.1s var(--ease-out) infinite;}
@keyframes sw-pulse{0%,100%{box-shadow:var(--sh-2),0 0 0 0 rgba(0,114,127,.22);}
  50%{box-shadow:var(--sh-2),0 0 0 7px rgba(0,114,127,0);}}
.sw-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;}
.sw-model{font-size:12.5px;color:var(--text3);font-weight:600;letter-spacing:.02em;}
.sw-status{font-size:12.5px;font-weight:600;}
.sws-on{color:var(--green2);}
.sws-off{color:var(--text3);}
.sw-display{background:linear-gradient(180deg,#101112,#000);border-radius:var(--r-lg);padding:24px 20px;
  margin-bottom:18px;box-shadow:inset 0 2px 12px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.5);}
.sw-value{font-size:60px;font-weight:700;color:#3BE87A;letter-spacing:2px;line-height:1;
  font-family:var(--f-mono);
  text-shadow:0 0 18px rgba(59,232,122,.45);}
.sw-unit-row{display:flex;justify-content:space-between;margin-top:7px;}
.sw-unit-label{font-size:12px;color:rgba(59,232,122,.7);letter-spacing:.06em;}
.sw-stable{font-size:12px;color:rgba(59,232,122,.7);font-weight:700;letter-spacing:.06em;}
.sw-btns{display:flex;gap:10px;justify-content:center;}
.sw-btn{background:var(--fill2);border:none;border-radius:var(--r-sm);padding:10px 18px;font-size:13.5px;
  font-weight:600;color:var(--text2);cursor:pointer;font-family:inherit;min-height:40px;
  transition:background .18s var(--ease-out),color .18s,transform .12s var(--ease);}
.sw-btn:hover{background:var(--fill);color:var(--text);}
.sw-btn:active{transform:scale(.95);}
.sw-btn-apply{background:var(--green);color:#fff;border:none;}
.sw-btn-apply:hover{background:var(--green2);color:#fff;}
.sw-history{margin-top:15px;max-height:120px;overflow-y:auto;}
.sw-hist-item{display:flex;justify-content:space-between;font-size:13px;color:var(--text3);padding:7px 0;
  border-bottom:1px solid var(--border);}
.sw-hist-item:last-child{border-bottom:none;}

/* ══════════════════ 수량 키패드 ══════════════════ */
.np-display{background:var(--fill2);border:1px solid transparent;border-radius:var(--r-lg);padding:20px 22px;
  font-size:38px;font-weight:700;color:var(--text);text-align:right;margin-bottom:12px;letter-spacing:-.018em;
  font-family:var(--f-mono);box-shadow:var(--nm-in);}
.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.np-key{background:var(--surface);border:none;border-radius:var(--r-md);padding:19px;font-size:23px;font-weight:500;
  color:var(--text);cursor:pointer;text-align:center;font-family:inherit;box-shadow:var(--sh-1);
  transition:background .12s var(--ease-out),transform .1s var(--ease),color .12s;}
.np-key:hover{background:var(--surface3);}
.np-key:active{background:var(--red);color:#fff;transform:scale(.93);}
.np-zero{grid-column:span 2;}
.np-del{background:var(--fill2);font-size:16px;box-shadow:none;}
.np-half{background:rgba(154,91,0,.10);color:var(--orange);font-size:13px;font-weight:600;box-shadow:none;}
.np-qrow{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px;}
.np-qbtn{background:var(--fill2);border:none;border-radius:var(--r-sm);padding:9px;text-align:center;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--text2);font-family:inherit;
  transition:background .12s,color .12s,transform .1s var(--ease);}
.np-qbtn:hover{background:var(--fill);}
.np-qbtn:active{background:var(--red);color:#fff;transform:scale(.94);}

/* ══════════════════ 터치 현장 ══════════════════
   장갑 낀 손이 누른다. 크게, 확실하게 */
.touch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.touch-big-btn,.tbb,.touch-tile{min-height:150px;}
.touch-big-btn{background:var(--surface);border:none;border-radius:var(--r-xl);padding:40px 22px;text-align:center;
  cursor:pointer;user-select:none;box-shadow:var(--sh-2);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.touch-big-btn:hover{transform:translateY(-3px);box-shadow:var(--sh-pop);}
.touch-big-btn:active{transform:scale(.955);transition-duration:.1s;}
.tbb-icon{font-size:0;margin-bottom:17px;color:var(--zone);}
.tbb-icon .ico{width:36px;height:36px;stroke-width:1.5;}
.tbb-title{font-size:19px;font-weight:600;color:var(--text);letter-spacing:-.012em;}
.tbb-sub{font-size:13.5px;color:var(--text2);margin-top:6px;}
.tbb-red{background:rgba(190,49,37,.05);}    .tbb-red .tbb-icon{color:var(--red);}
.tbb-green{background:rgba(36,138,61,.05);}  .tbb-green .tbb-icon{color:var(--green);}
.tbb-blue{background:rgba(0,113,227,.05);}   .tbb-blue .tbb-icon{color:var(--blue);}
.tbb-orange{background:rgba(154,91,0,.05);}  .tbb-orange .tbb-icon{color:var(--orange);}
.tbb-purple{background:rgba(91,79,199,.05);} .tbb-purple .tbb-icon{color:var(--purple);}
.tbb-teal{background:rgba(0,114,127,.05);}   .tbb-teal .tbb-icon{color:var(--teal);}

/* ══════════════════ 태그 · 프리셋 ══════════════════ */
.tag-row{display:flex;gap:7px;}
.tag-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;min-height:24px;}
.tag-chip{background:rgba(190,49,37,.09);border:none;border-radius:var(--r-pill);padding:4px 10px;font-size:12px;
  color:var(--red2);display:inline-flex;align-items:center;gap:5px;font-weight:500;}
.tag-del{cursor:pointer;color:var(--text3);font-size:13px;line-height:1;transition:color .15s;}
.tag-del:hover{color:var(--red2);}
.preset-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;}
.preset-btn{background:var(--fill2);border:none;border-radius:var(--r-pill);padding:7px 14px;font-size:13px;
  color:var(--text2);cursor:pointer;font-family:inherit;font-weight:500;
  transition:background .16s var(--ease-out),color .16s,transform .1s var(--ease);}
.preset-btn:hover{background:var(--fill);color:var(--text);}
.preset-btn:active{transform:scale(.95);}
.preset-btn.sel{background:rgba(0,113,227,.13);color:var(--blue2);font-weight:600;}

/* ══════════════════ 모바일 오버레이 ══════════════════
   화면 안의 아이폰. 베젤과 무게가 있어야 실물처럼 읽힌다 */
.mob-overlay{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:800;display:none;
  align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);}
.mob-overlay.open{display:flex;animation:fadein .3s var(--ease-out) both;}
.mob-frame{width:394px;max-width:98vw;height:88vh;max-height:844px;background:var(--surface3);
  border-radius:42px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 48px 100px -24px rgba(0,0,0,.55),0 0 0 9px #1C1C1E,0 0 0 10px #3A3A3C;
  animation:sheetin .55s var(--ease) both;}
.mob-topbar{background:var(--navy);padding:16px 18px 13px;flex-shrink:0;}
.mob-tb-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px;}
.mob-tb-title{font-size:16px;font-weight:700;color:#fff;letter-spacing:-.013em;}
.mob-tb-title span{color:var(--accent);}
.mob-tb-badge{background:rgba(255,255,255,.13);border:none;border-radius:var(--r-pill);padding:3px 10px;
  font-size:11px;color:#fff;font-weight:500;}
.mob-tb-info{font-size:11.5px;color:rgba(255,255,255,.62);}
.mob-tb-close{background:rgba(255,255,255,.13);border:none;border-radius:50%;width:27px;height:27px;color:#fff;
  cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;flex:none;
  transition:background .18s,transform .12s var(--ease);}
.mob-tb-close:hover{background:rgba(255,255,255,.22);}
.mob-tb-close:active{transform:scale(.9);}
.mob-inner{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.mob-bbar-wrap{flex-shrink:0;display:none;}
.mob-bbar{padding:12px 16px 22px;display:flex;gap:9px;border-top:1px solid var(--border);
  background:rgba(255,255,255,.88);-webkit-backdrop-filter:var(--mat);backdrop-filter:var(--mat);}
.mob-prev{flex:1;background:var(--fill2);border:none;border-radius:var(--r-md);padding:14px;font-size:14px;
  font-weight:600;color:var(--text2);font-family:inherit;cursor:pointer;letter-spacing:-.008em;
  transition:background .18s,transform .12s var(--ease);}
.mob-prev:active{transform:scale(.97);background:var(--fill);}
.mob-next{flex:2;background:var(--red);border:none;border-radius:var(--r-md);padding:14px;font-size:14px;
  font-weight:600;color:#fff;font-family:inherit;cursor:pointer;letter-spacing:-.008em;
  box-shadow:0 1px 3px rgba(190,49,37,.28);transition:background .18s,transform .12s var(--ease);}
.mob-next:active{transform:scale(.97);background:var(--red2);}
.mob-next.submit{background:var(--green);box-shadow:0 1px 3px rgba(36,138,61,.28);}
.mob-next.submit:active{background:var(--green2);}

/* ── 어두운 머리판 ──
   거래처 앱·기사 앱 상단 띠는 일부러 남긴 어두운 면이다. 앱의 경계를 만든다.
   토큰을 이 안에서만 뒤집으면 자손 전체가 한 번에 맞는다 */
.mob-topbar,.mob-dash-header{
  --text:#FFFFFF;--text2:rgba(255,255,255,.72);--text3:rgba(255,255,255,.55);
  --white:#FFFFFF;--accent:#FF7A6B;--accent2:#FF9C90;--brand:#FF7A6B;
  --surface:rgba(255,255,255,.10);--surface2:rgba(255,255,255,.13);
  --surface3:rgba(255,255,255,.07);--fill:rgba(255,255,255,.15);--fill2:rgba(255,255,255,.10);
  --border:rgba(255,255,255,.14);--border2:rgba(255,255,255,.22);
  color:#FFFFFF;}
.mob-dash-header{background:linear-gradient(165deg,#2C2C2E 0%,#1C1C1E 55%,#141416 100%);
  padding:24px 18px 20px;color:#fff;}
.mob-dash-header .mob-stat-v{color:#FFFFFF;}

/* ══ 모바일 내부 ══ */
.mob-stats-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-top:18px;}
.mob-stat-card{background:rgba(255,255,255,.11);border-radius:var(--r-md);padding:13px 6px;text-align:center;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
.mob-stat-v{font-size:21px;font-weight:700;color:#fff;letter-spacing:-.017em;}
.mob-stat-l{font-size:11px;color:rgba(255,255,255,.62);margin-top:3px;}
.mob-order-btn{width:100%;background:var(--red);border:none;border-radius:var(--r-md);padding:16px;font-size:16px;
  font-weight:600;color:#fff;font-family:inherit;cursor:pointer;margin-top:18px;letter-spacing:-.011em;
  display:flex;align-items:center;justify-content:center;gap:7px;box-shadow:0 4px 16px -4px rgba(190,49,37,.6);
  transition:transform .14s var(--ease),background .18s;}
.mob-order-btn:active{transform:scale(.975);background:var(--red2);}
.mob-sec{padding:18px 16px 0;}
.mob-sec-label{font-size:12px;font-weight:600;color:var(--text3);margin-bottom:10px;letter-spacing:.02em;}
.mob-ocard{background:#fff;border:none;border-radius:var(--r-md);padding:15px;margin-bottom:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 6px 18px -12px rgba(0,0,0,.18);}
.mob-ocard-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;}
.mob-ono{font-size:11px;color:var(--text3);font-family:var(--f-mono);}
.mob-st{font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--r-pill);}
.mst-접수{background:rgba(190,49,37,.11);color:var(--red2);}
.mst-준비중{background:rgba(154,91,0,.11);color:var(--orange2);}
.mst-출하지시{background:rgba(0,113,227,.11);color:var(--blue2);}
.mst-출하완료{background:rgba(0,114,127,.11);color:var(--teal);}
.mst-취소{background:var(--fill);color:var(--text3);}
.mob-oitem{font-size:15px;font-weight:600;color:var(--text);margin-bottom:3px;letter-spacing:-.011em;}
.mob-ometa{font-size:12.5px;color:var(--text2);}
.mob-ofooter{display:flex;justify-content:space-between;align-items:center;margin-top:11px;padding-top:11px;
  border-top:1px solid var(--border);}
.mob-odate{font-size:12px;color:var(--text3);}
.mob-oamt{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.013em;}
.mob-oactions{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;}
.mob-edit-btn{background:rgba(0,113,227,.10);border:none;border-radius:var(--r-xs);padding:6px 12px;font-size:12px;
  font-weight:600;color:var(--blue2);cursor:pointer;font-family:inherit;
  transition:background .16s,transform .12s var(--ease);}
.mob-edit-btn:active{transform:scale(.94);background:rgba(0,113,227,.18);}
.mob-cancel-btn{background:var(--fill2);border:none;border-radius:var(--r-xs);padding:6px 12px;font-size:12px;
  font-weight:600;color:var(--red2);cursor:pointer;font-family:inherit;
  transition:background .16s,transform .12s var(--ease);}
.mob-cancel-btn:active{transform:scale(.94);background:rgba(190,49,37,.12);}
.mob-confirm-btn{background:var(--green);border:none;border-radius:var(--r-sm);padding:11px 12px;font-size:13px;
  font-weight:600;color:#fff;cursor:pointer;font-family:inherit;width:100%;margin-top:10px;letter-spacing:-.008em;
  box-shadow:0 1px 3px rgba(36,138,61,.28);transition:background .18s,transform .12s var(--ease);}
.mob-confirm-btn:active{transform:scale(.97);background:var(--green2);}
.mob-confirmed-tag{font-size:12px;color:var(--green2);font-weight:600;margin-top:9px;display:flex;
  align-items:center;gap:5px;}
.mob-reorder-btn{background:rgba(0,114,127,.10);border:none;border-radius:var(--r-xs);padding:6px 12px;font-size:12px;
  font-weight:600;color:var(--teal);cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:4px;
  transition:background .16s,transform .12s var(--ease);}
.mob-reorder-btn:active{transform:scale(.94);background:rgba(0,114,127,.18);}
.mob-reorder-btn .ico{width:13px;height:13px;}
.mob-showall-btn{width:100%;background:var(--fill2);border:none;border-radius:var(--r-md);padding:14px;font-size:13.5px;
  font-weight:600;color:var(--text2);font-family:inherit;cursor:pointer;margin:2px 0 12px;letter-spacing:-.008em;
  transition:background .18s,transform .12s var(--ease);}
.mob-showall-btn:active{transform:scale(.98);background:var(--fill);}

/* ── 스텝 바 ── */
.mob-step-bar{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;flex-shrink:0;
  background:rgba(255,255,255,.88);-webkit-backdrop-filter:var(--mat);backdrop-filter:var(--mat);}
.mob-sd{display:flex;flex-direction:column;align-items:center;flex:none;}
.mob-sc{width:27px;height:27px;border-radius:50%;background:var(--fill);color:var(--text3);font-size:12px;
  font-weight:600;display:flex;align-items:center;justify-content:center;
  transition:background .32s var(--ease),color .32s var(--ease),transform .32s var(--ease);}
.mob-sc.act{background:var(--red);color:#fff;transform:scale(1.1);box-shadow:0 2px 8px -2px rgba(190,49,37,.6);}
.mob-sc.dn{background:var(--green);color:#fff;}
.mob-sl{font-size:10.5px;color:var(--text3);margin-top:5px;white-space:nowrap;}
.mob-sl.act{color:var(--red2);font-weight:600;}
.mob-sline{flex:1;height:2px;background:var(--fill);margin:0 4px 16px;border-radius:var(--r-pill);
  transition:background .4s var(--ease);}
.mob-sline.dn{background:var(--green);}
.mob-fbody{flex:1;overflow-y:auto;padding:16px;background:var(--bg);-webkit-overflow-scrolling:touch;}
.mob-fcard{background:#fff;border-radius:var(--r-lg);padding:18px;margin-bottom:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px -16px rgba(0,0,0,.2);}
.mob-fcard h3{font-size:17px;font-weight:700;color:var(--text);margin-bottom:3px;letter-spacing:-.013em;}
.mob-fcard p{font-size:12.5px;color:var(--text2);margin-bottom:16px;line-height:1.5;}

/* ── 날짜 선택 ── */
.mob-date-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory;}
.mob-date-scroll::-webkit-scrollbar{display:none;}
.mob-dpill{min-width:58px;border:none;border-radius:var(--r-md);padding:9px 6px;text-align:center;cursor:pointer;
  flex-shrink:0;background:var(--fill2);scroll-snap-align:start;
  transition:background .22s var(--ease-out),transform .14s var(--ease),box-shadow .22s;}
.mob-dpill:active{transform:scale(.94);}
.mob-dpill.sel{background:var(--red);box-shadow:0 4px 12px -4px rgba(190,49,37,.55);}
.mob-dp-m{font-size:10px;color:var(--text3);}
.mob-dp-d{font-size:19px;font-weight:700;color:var(--text);letter-spacing:-.017em;}
.mob-dp-w{font-size:10px;color:var(--text3);}
.mob-dpill.sel .mob-dp-d,.mob-dpill.sel .mob-dp-m,.mob-dpill.sel .mob-dp-w{color:#fff;}

/* ── 제품 선택 ── */
.mob-pcat{margin-bottom:14px;}
.mob-pcat-label{font-size:11.5px;font-weight:600;color:var(--text3);margin-bottom:8px;letter-spacing:.02em;}
.mob-pchips{display:flex;flex-wrap:wrap;gap:7px;}
.mob-pchip{border:none;border-radius:var(--r-pill);padding:9px 15px;font-size:13px;font-weight:500;cursor:pointer;
  background:var(--fill2);color:var(--text);letter-spacing:-.007em;
  transition:background .2s var(--ease-out),color .2s,transform .14s var(--ease),box-shadow .2s;}
.mob-pchip:active{transform:scale(.95);}
.mob-pchip.sel{background:var(--red);color:#fff;box-shadow:0 4px 12px -4px rgba(190,49,37,.55);}
.mob-pchip-pr{font-size:10.5px;color:var(--text3);display:block;margin-top:2px;font-weight:400;}
.mob-pchip.sel .mob-pchip-pr{color:rgba(255,255,255,.75);}
.mob-no-prod{text-align:center;padding:24px;color:var(--text3);font-size:13px;}

/* ── 장바구니형 리스트 ── */
.mob-item-list{padding:0 16px 6px;}
.mob-item-row{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--border);}
.mob-item-row:last-child{border-bottom:none;}
.mob-item-thumb{width:50px;height:50px;flex-shrink:0;border-radius:var(--r-md);background:var(--fill2);
  display:flex;align-items:center;justify-content:center;font-size:22px;}
.mob-item-info{flex:1;min-width:0;}
.mob-item-name{font-size:14px;font-weight:600;color:var(--text);line-height:1.35;letter-spacing:-.01em;}
.mob-item-price{font-size:12.5px;color:var(--text2);font-weight:500;margin-top:3px;}
.mob-item-qty{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.mob-iq-btn{width:31px;height:31px;border-radius:50%;border:none;background:var(--fill2);color:var(--red);
  font-size:17px;font-weight:500;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding:0;transition:background .16s,transform .12s var(--ease);}
.mob-iq-btn:active{background:rgba(190,49,37,.14);transform:scale(.9);}
.mob-iq-input{width:52px;text-align:center;border:1px solid transparent;background:var(--fill2);
  border-radius:var(--r-sm);padding:7px 2px;font-size:14px;font-weight:600;font-family:inherit;color:var(--text);}
.mob-iq-input:focus{outline:none;background:#fff;border-color:var(--red);
  box-shadow:0 0 0 3px rgba(190,49,37,.14);}

/* ── 컷팅 ── */
.mob-cut-g{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;}
.mob-cpill{border:none;border-radius:var(--r-sm);padding:11px 3px;text-align:center;cursor:pointer;
  background:var(--fill2);transition:background .2s var(--ease-out),transform .14s var(--ease),box-shadow .2s;}
.mob-cpill:active{transform:scale(.94);}
.mob-cpill.sel{background:var(--blue);box-shadow:0 4px 12px -4px rgba(0,113,227,.55);}
.mob-cpmm{font-size:13px;font-weight:700;color:var(--text);letter-spacing:-.012em;}
.mob-cplab{font-size:10px;color:var(--text3);margin-top:2px;}
.mob-cpill.sel .mob-cpmm,.mob-cpill.sel .mob-cplab{color:#fff;}

/* ── 수량 ── */
.mob-qty-bar{background:var(--fill2);border-radius:var(--r-md);padding:15px 17px;display:flex;align-items:center;
  justify-content:space-between;margin-bottom:12px;}
.mob-qty-lbl{font-size:12px;color:var(--text3);}
.mob-qty-num{font-size:30px;font-weight:700;color:var(--text);letter-spacing:-.019em;}
.mob-qty-unit{font-size:13px;color:var(--text3);}
.mob-kpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.mob-kp{background:#fff;border:none;border-radius:var(--r-md);padding:16px;font-size:21px;font-weight:500;
  color:var(--text);cursor:pointer;text-align:center;font-family:inherit;box-shadow:var(--sh-1);
  transition:background .12s,color .12s,transform .1s var(--ease);}
.mob-kp:active{background:var(--red);color:#fff;transform:scale(.93);}
.mob-kp-zero{grid-column:span 2;}
.mob-kp-del{background:var(--fill2);font-size:16px;box-shadow:none;}
.mob-kp-half{background:rgba(154,91,0,.09);color:var(--orange2);font-size:13px;font-weight:600;box-shadow:none;}
.mob-qrow{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px;}
.mob-qbtn{border:none;border-radius:var(--r-sm);padding:8px;text-align:center;cursor:pointer;font-size:12.5px;
  font-weight:600;background:var(--fill2);color:var(--text2);font-family:inherit;
  transition:background .12s,color .12s,transform .1s var(--ease);}
.mob-qbtn:active{background:var(--red);color:#fff;transform:scale(.94);}

/* ── 포장 ── */
.mob-pack-g{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.mob-pb{border:none;border-radius:var(--r-md);padding:14px 10px;cursor:pointer;background:var(--fill2);
  text-align:center;transition:background .2s var(--ease-out),transform .14s var(--ease),box-shadow .2s;}
.mob-pb:active{transform:scale(.96);}
.mob-pb.sel{background:var(--green);box-shadow:0 4px 12px -4px rgba(36,138,61,.5);}
.mob-pb-icon{font-size:17px;margin-bottom:5px;}
.mob-pb-name{font-size:13px;font-weight:600;color:var(--text);letter-spacing:-.008em;}
.mob-pb.sel .mob-pb-name,.mob-pb.sel .mob-pb-icon{color:#fff;}

/* ── 주문 확인 요약 ── */
.mob-sum-box{background:#1C1C1E;border-radius:var(--r-lg);padding:18px;margin-bottom:12px;color:#fff;}
.mob-sum-t{font-size:12px;color:rgba(255,255,255,.55);margin-bottom:12px;letter-spacing:.02em;}
.mob-sum-row{display:flex;justify-content:space-between;padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.10);font-size:13px;gap:14px;}
.mob-sum-row:last-child{border-bottom:none;}
.mob-sum-k{color:rgba(255,255,255,.60);flex:none;}
.mob-sum-v{font-weight:600;text-align:right;}
.mob-total-box{background:rgba(190,49,37,.08);border:none;border-radius:var(--r-md);padding:16px 17px;
  display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.mob-total-l{font-size:13px;color:var(--red2);font-weight:600;}
.mob-total-v{font-size:22px;font-weight:700;color:var(--red2);letter-spacing:-.018em;}
.mob-ok-hint{background:rgba(36,138,61,.07);border:none;border-radius:var(--r-md);padding:13px 15px;font-size:12.5px;
  color:var(--green2);line-height:1.55;}

/* ── 완료 ── */
.mob-done{padding:44px 20px;text-align:center;background:var(--bg);min-height:100%;
  animation:pagein .5s var(--ease) both;}
.mob-done-icon{font-size:60px;margin-bottom:16px;}
.mob-done-title{font-size:26px;font-weight:700;color:var(--text);margin-bottom:8px;letter-spacing:-.018em;}
.mob-done-sub{font-size:13px;color:var(--text2);margin-bottom:22px;line-height:1.5;}
.mob-done-no{background:#fff;border:none;border-radius:var(--r-md);padding:13px 18px;font-size:15px;font-weight:600;
  font-family:var(--f-mono);letter-spacing:2px;margin-bottom:18px;
  box-shadow:var(--sh-1);}
.mob-done-detail{background:#fff;border:none;border-radius:var(--r-lg);padding:16px;width:100%;margin-bottom:20px;
  text-align:left;box-shadow:var(--sh-1);}
.mdd-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);
  font-size:12.5px;gap:14px;}
.mdd-row:last-child{border-bottom:none;}
.mdd-k{color:var(--text3);flex:none;}
.mdd-v{font-weight:600;color:var(--text);text-align:right;}
.mob-done-home{width:100%;background:var(--navy);border:none;border-radius:var(--r-md);padding:15px;font-size:14px;
  font-weight:600;color:#fff;font-family:inherit;cursor:pointer;margin-bottom:9px;letter-spacing:-.008em;
  transition:transform .12s var(--ease),background .18s;}
.mob-done-home:active{transform:scale(.975);background:#000;}
.mob-done-again{width:100%;background:rgba(190,49,37,.09);border:none;border-radius:var(--r-md);padding:14px;
  font-size:14px;font-weight:600;color:var(--red2);font-family:inherit;cursor:pointer;letter-spacing:-.008em;
  transition:transform .12s var(--ease),background .18s;}
.mob-done-again:active{transform:scale(.975);background:rgba(190,49,37,.16);}

/* ── 모바일 로그인 ── */
.mob-login-wrap{padding:36px 18px;background:var(--bg);min-height:100%;}
.mob-login-card{background:#fff;border-radius:var(--r-xl);padding:24px;box-shadow:var(--sh-2);}
.mob-code-inp{width:100%;background:var(--fill2);border:1px solid transparent;border-radius:var(--r-md);
  padding:15px 17px;font-size:19px;font-weight:600;letter-spacing:5px;color:var(--text);font-family:inherit;
  text-transform:uppercase;margin-bottom:12px;text-align:center;
  transition:background .18s,border-color .18s,box-shadow .18s;}
.mob-code-inp::placeholder{letter-spacing:1px;font-weight:400;color:var(--text3);}
.mob-code-inp:focus{outline:none;background:#fff;border-color:var(--red);box-shadow:0 0 0 4px rgba(190,49,37,.13);}
.mob-login-btn{width:100%;background:var(--red);border:none;border-radius:var(--r-md);padding:16px;font-size:15px;
  font-weight:600;color:#fff;font-family:inherit;cursor:pointer;letter-spacing:-.01em;
  box-shadow:0 4px 16px -6px rgba(190,49,37,.6);transition:transform .12s var(--ease),background .18s;}
.mob-login-btn:active{transform:scale(.975);background:var(--red2);}
.mob-demo-g{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px;}
.mob-demo-btn{background:var(--fill2);border:none;border-radius:var(--r-sm);padding:11px;text-align:center;
  cursor:pointer;transition:background .16s,transform .12s var(--ease);}
.mob-demo-btn:active{background:var(--fill);transform:scale(.96);}
.mob-db-code{font-size:13px;font-weight:600;color:var(--text);letter-spacing:1px;}
.mob-db-name{font-size:11px;color:var(--text3);margin-top:2px;}

/* ── 모바일 모달 · 확인 시트 ── */
.mob-edit-modal{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:900;display:none;
  align-items:center;justify-content:center;padding:20px;
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);}
.mob-edit-modal.open{display:flex;animation:fadein .26s var(--ease-out) both;}
.mob-edit-box{background:#fff;border-radius:var(--r-xl);width:368px;max-width:100%;max-height:86vh;overflow-y:auto;
  box-shadow:var(--sh-3);animation:sheetin .46s var(--ease) both;}
.mob-edit-head{padding:20px 20px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;
  align-items:center;position:sticky;top:0;z-index:1;background:#fff;}
.mob-edit-head h3{font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.014em;}
.mob-edit-close{background:var(--fill2);border:none;font-size:14px;cursor:pointer;color:var(--text3);
  width:29px;height:29px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;
  transition:background .18s,color .18s;}
.mob-edit-close:hover{background:var(--fill);color:var(--text);}
.mob-edit-body{padding:18px 20px;}
.mob-ef-group{margin-bottom:15px;}
.mob-ef-label{font-size:12.5px;font-weight:600;color:var(--text2);margin-bottom:6px;display:block;
  letter-spacing:-.005em;}
.mob-ef-input,.mob-ef-select{width:100%;background:var(--fill2);border:1px solid transparent;
  border-radius:var(--r-sm);padding:11px 13px;font-size:14px;color:var(--text);font-family:inherit;
  transition:background .18s,border-color .18s,box-shadow .18s;}
.mob-ef-select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:32px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:14px;}
.mob-ef-input:focus,.mob-ef-select:focus{outline:none;background:#fff;border-color:var(--red);
  box-shadow:0 0 0 4px rgba(190,49,37,.13);}
.mob-edit-footer{padding:14px 20px 18px;border-top:1px solid var(--border);display:flex;gap:8px;
  position:sticky;bottom:0;background:#fff;}
.mob-ef-save{flex:2;background:var(--red);border:none;border-radius:var(--r-md);padding:13px;font-size:14px;
  font-weight:600;color:#fff;font-family:inherit;cursor:pointer;letter-spacing:-.008em;
  box-shadow:0 1px 3px rgba(190,49,37,.28);transition:transform .12s var(--ease),background .18s;}
.mob-ef-save:active{transform:scale(.97);background:var(--red2);}
.mob-ef-cancel{flex:1;background:var(--fill2);border:none;border-radius:var(--r-md);padding:13px;font-size:14px;
  font-weight:600;color:var(--text2);font-family:inherit;cursor:pointer;letter-spacing:-.008em;
  transition:transform .12s var(--ease),background .18s;}
.mob-ef-cancel:active{transform:scale(.97);background:var(--fill);}
.mob-confirm{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:910;display:none;
  align-items:center;justify-content:center;padding:20px;
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);}
.mob-confirm.open{display:flex;animation:fadein .26s var(--ease-out) both;}
.mob-confirm-box{background:#fff;border-radius:var(--r-xl);width:300px;max-width:100%;padding:28px 24px 22px;
  text-align:center;box-shadow:var(--sh-3);animation:sheetin .46s var(--ease) both;}
.mc-icon{font-size:38px;margin-bottom:12px;}
.mob-confirm-box .ico{width:34px;height:34px;color:var(--red);margin-bottom:14px;stroke-width:1.6;}
.mc-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:7px;letter-spacing:-.014em;}
.mc-sub{font-size:13px;color:var(--text2);margin-bottom:22px;line-height:1.5;}
.mc-yes{width:100%;background:var(--red);border:none;border-radius:var(--r-md);padding:14px;font-size:14px;
  font-weight:600;color:#fff;font-family:inherit;cursor:pointer;margin-bottom:8px;letter-spacing:-.008em;
  transition:transform .12s var(--ease),background .18s;}
.mc-yes:active{transform:scale(.97);background:var(--red2);}
.mc-no{width:100%;background:var(--fill2);border:none;border-radius:var(--r-md);padding:14px;font-size:14px;
  font-weight:600;color:var(--text2);font-family:inherit;cursor:pointer;letter-spacing:-.008em;
  transition:transform .12s var(--ease),background .18s;}
.mc-no:active{transform:scale(.97);background:var(--fill);}

/* ══════════════════ 생산 모니터 ══════════════════ */
.prod-monitor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:24px;}
.prod-monitor-card{background:var(--surface);border:none;border-radius:var(--r-xl);padding:24px 24px 22px 27px;
  position:relative;overflow:hidden;box-shadow:var(--sh-2);}
.pmc-bar{position:absolute;top:20px;bottom:20px;left:0;width:3px;height:auto;
  border-radius:0 var(--r-pill) var(--r-pill) 0;}
.pmc-red .pmc-bar{background:var(--red);}
.pmc-green .pmc-bar{background:var(--green);}
.pmc-blue .pmc-bar{background:var(--blue);}
.pmc-label{font-size:13.5px;color:var(--text2);margin-bottom:9px;font-weight:500;}
.pmc-value{font-size:31px;font-weight:700;margin-bottom:3px;letter-spacing:-.018em;}
.pmc-sub{font-size:13px;color:var(--text3);}

/* ══════════════════ 키오스크 ══════════════════ */
.kiosk-mode .sidebar{display:none!important;}
.kiosk-mode .main-content{width:100%;}
.kiosk-mode #topbar-alert-btn,
.kiosk-mode #topbar-switch-zone-btn,
.kiosk-mode .topbar-right .tb-btn[onclick="openMobOverlay()"],
.kiosk-mode .topbar-right .tb-btn[onclick="backToMode()"]{display:none!important;}
.kiosk-badge{font-size:11.5px;font-weight:600;color:#fff;background:var(--brand);border-radius:var(--r-pill);
  padding:4px 11px;margin-left:10px;}
.kiosk-exit-link{font-size:11.5px;color:var(--text3);cursor:pointer;margin-left:12px;
  border-bottom:1px solid currentColor;padding-bottom:1px;}
.kiosk-exit-link:hover{color:var(--text2);}

/* ══════════════════ 반응형 ══════════════════ */
@media(max-width:1400px){.kpi-6{grid-template-columns:repeat(3,1fr);}}
@media(max-width:1240px){.kpi-5{grid-template-columns:repeat(3,1fr);}.grid-sidebar{grid-template-columns:300px 1fr;}}
@media(max-width:1100px){.grid-sidebar{grid-template-columns:1fr;}.kpi-4{grid-template-columns:repeat(2,1fr);}
  .touch-grid,.prod-monitor-grid,.grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:900px){
  :root{--sidebar-w:216px;}
  .kpi-4,.kpi-5,.kpi-6,.kpi-3{grid-template-columns:1fr 1fr;}
  .main-content{padding:24px 20px 40px;}
  .page-title{font-size:24px;}
  .grid-2{grid-template-columns:1fr;}}
@media(max-width:640px){
  .mode-zone-cards,.mode-row2{grid-template-columns:1fr;}
  .kpi-4,.kpi-5,.kpi-6,.kpi-3,.grid-3,.touch-grid,.prod-monitor-grid,.form-row,.form-row3{grid-template-columns:1fr;}
  .toast{left:16px;right:16px;bottom:16px;max-width:none;}
  .mob-frame{width:100%;height:100%;max-height:none;border-radius:0;box-shadow:none;}}

@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;scroll-behavior:auto!important;}}

/* ══════════════════ 세그먼티드 컨트롤 ══════════════════
   JS(updateLangBtns)가 inline으로 font-weight·opacity만 바꾼다.
   그 두 값만으로 상태가 읽히게 설계했다 — JS는 건드리지 않는다 */
.seg-ctl{display:flex;align-items:center;gap:2px;background:var(--fill2);border-radius:var(--r-pill);padding:3px;}
.seg-ctl button{background:none;border:none;font-family:inherit;font-size:12px;font-weight:600;color:var(--text);
  cursor:pointer;padding:4px 11px;border-radius:var(--r-pill);opacity:.45;letter-spacing:.01em;
  transition:opacity .2s var(--ease-out),background .2s var(--ease-out);}
.seg-ctl button:hover{background:rgba(255,255,255,.6);}
.seg-ctl button.seg-on{opacity:1;}

/* ══════════════════ 다크 잔재 보정 ══════════════════
   v10이 밝은 지면으로 넘어올 때 합계행·안내박스 몇 군데가 다크판 배경(#1C1C1E)으로
   남아, 그 위에 어두운 의미색 글자가 얹혀 읽히지 않았다.
   행 하나하나 고치는 대신 '어두운 면'을 밝은 강조면으로 한 번에 뒤집는다.
   ⚠ tr만 잡는다 — 의도적으로 어두운 버튼(인쇄 등)은 그대로 둔다 */
tr[style*="#1C1C1E"],tr[style*="#1c1c1e"]{
  background:var(--surface3)!important;
  box-shadow:inset 0 1px 0 var(--border2),inset 0 -1px 0 var(--border2);}
tr[style*="#1C1C1E"] td,tr[style*="#1C1C1E"] th{font-weight:700;}
tr[style*="#1C1C1E"] td[style*="color:#fff"],tr[style*="#1C1C1E"] th[style*="color:#fff"]{color:var(--text)!important;}
@media print{.sidebar,.topbar,.toast,.next-step-nudge{display:none!important;}
  .main-content{padding:0;overflow:visible;}
  .table-card,.kpi-card,.info-card{box-shadow:none;border:1px solid #ddd;}}

/* ══════════════════════════════════════════════════════════
   [ADD] 앱 셸 오버라이드 — 4개 앱 분리 배포용
   프로토타입에선 주문앱·기사앱이 '화면 속 폰 프레임'이었다.
   독립 앱에서는 그 프레임이 곧 페이지다 — 풀뷰포트 반응형으로 뒤집는다.
   ══════════════════════════════════════════════════════════ */
body[data-app="client"] .mob-overlay,body[data-app="driver"] .mob-overlay{
  position:static;inset:auto;background:var(--bg);display:block;
  -webkit-backdrop-filter:none;backdrop-filter:none;min-height:100dvh;}
body[data-app="client"] .mob-frame,body[data-app="driver"] .mob-frame{
  width:100%;max-width:none;height:100dvh;max-height:none;border-radius:0;box-shadow:none;margin:0;}
@media(min-width:640px){
  body[data-app="client"] .mob-frame,body[data-app="driver"] .mob-frame{
    max-width:480px;margin:0 auto;box-shadow:0 0 0 1px var(--border);}
}
body[data-app="client"] .mob-tb-close,body[data-app="driver"] .mob-tb-close{display:none;}
/* 존 고정 앱 — 존 전환 없음 */
body[data-app="sales"] #topbar-switch-zone-btn,
body[data-app="production"] #topbar-switch-zone-btn{display:none;}

/* ══════════════════════════════════════════════════════════
   [ADD] 관리앱 모바일 대응 — 판매(sales)·생산(production) 전용
   · 폰·태블릿에서 관리 앱을 실사용 가능하게 만드는 블록.
   · 모든 규칙은 body[data-app] 스코프 × 미디어쿼리 안에만 있다 —
     데스크톱 레이아웃과 주문앱(client)·기사앱(driver)·프로토타입에는 영향이 없다.
   · 스코프는 :where()로 감싸 특이도를 올리지 않는다 —
     .active(선택 항목)·:hover 같은 기존 상태 규칙이 계속 이기게 하기 위함.
   · kpi 열 수(1열)·토스트 폭·form-row 1열은 기존 640px 블록이 이미 처리한다 — 중복하지 않는다.
   ══════════════════════════════════════════════════════════ */

/* ── 태블릿(≤900px) — 사이드바 축소폭(216px)은 유지, 터치 타깃·줄바꿈만 보강 ── */
@media(max-width:900px){
  /* 상단바 — 버튼이 많으면 다음 줄로 흘러내리게. 높이는 내용이 정한다 */
  body:where([data-app="sales"],[data-app="production"]) .topbar{
    height:auto;min-height:60px;flex-wrap:wrap;padding:8px 14px;row-gap:6px;}
  body:where([data-app="sales"],[data-app="production"]) .topbar-right{
    flex-wrap:wrap;justify-content:flex-end;row-gap:6px;}
  body:where([data-app="sales"],[data-app="production"]) .tb-btn{min-height:44px;}
  /* 사이드바 항목 — 터치 타깃 44px 확보 */
  body:where([data-app="sales"],[data-app="production"]) .sb-item{min-height:44px;}
  /* 페이지 머리 — 제목과 액션을 세로로 쌓는다 */
  body:where([data-app="sales"],[data-app="production"]) .page-hd{
    flex-direction:column;align-items:flex-start;gap:12px;}
  body:where([data-app="sales"],[data-app="production"]) .page-actions{width:100%;}
}

/* ── 폰(≤640px) — 사이드바를 상단 가로 알약 레일로 뒤집는다 ── */
@media(max-width:640px){
  body:where([data-app="sales"],[data-app="production"]) .admin-body{flex-direction:column;}

  /* 세로 사이드바 → 한 줄 가로 레일. 화면 높이를 잡아먹지 않게 max-height로 묶는다 */
  body:where([data-app="sales"],[data-app="production"]) .sidebar{
    width:100%;max-height:64px;flex-direction:row;align-items:center;gap:6px;
    padding:9px 12px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;border-right:none;border-bottom:1px solid var(--border);
    scrollbar-width:thin;}
  body:where([data-app="sales"],[data-app="production"]) .sidebar::-webkit-scrollbar{height:4px;}

  /* 레일에서 프로필·구분선·섹션 라벨은 숨긴다 */
  body:where([data-app="sales"],[data-app="production"]) .sb-profile,
  body:where([data-app="sales"],[data-app="production"]) .sb-divider,
  body:where([data-app="sales"],[data-app="production"]) .sb-sec-label{display:none;}

  /* 섹션 상자를 해체(display:contents)해 항목이 레일에 직접 흐르게 한다.
     ⚠ 접힘 토글(라벨)이 숨겨지므로 접힌 채 시작하는 섹션도 강제로 펼친다 —
       마지막 셀렉터가 기존 `.sb-sec.collapsed .sb-sec-items{display:none}`보다 특이도가 높다 */
  body:where([data-app="sales"],[data-app="production"]) .sidebar #sidebar-menu, /* 메뉴 래퍼도 해체 — 이게 빠지면 래퍼가 한 덩어리 블록으로 남아 레일이 안 흐른다 */
  body:where([data-app="sales"],[data-app="production"]) .sidebar .sb-sec,
  body:where([data-app="sales"],[data-app="production"]) .sidebar .sb-sec-items,
  body:where([data-app="sales"],[data-app="production"]) .sidebar .sb-sec.collapsed .sb-sec-items{
    display:contents;}

  /* 메뉴 항목 — 가로 알약. 줄바꿈 없이 옆으로 스크롤해 넘긴다 */
  body:where([data-app="sales"],[data-app="production"]) .sb-item{
    width:auto;flex:none;margin:0;padding:0 15px;min-height:44px;white-space:nowrap;
    font-size:13.5px;gap:7px;border-radius:var(--r-pill);background:var(--fill3);}

  /* 본문 — 여백·제목 축소 */
  body:where([data-app="sales"],[data-app="production"]) .main-content{padding:16px 14px 44px;}
  body:where([data-app="sales"],[data-app="production"]) .page-hd{margin-bottom:20px;}
  body:where([data-app="sales"],[data-app="production"]) .page-title{font-size:22px;}
  body:where([data-app="sales"],[data-app="production"]) .page-title .sub{
    display:block;margin-left:0;margin-top:3px;font-size:13px;}
  body:where([data-app="sales"],[data-app="production"]) .kpi-grid{gap:12px;margin-bottom:20px;}
  body:where([data-app="sales"],[data-app="production"]) .kpi-card{padding:18px 18px 16px 21px;}
  body:where([data-app="sales"],[data-app="production"]) .grid-2,
  body:where([data-app="sales"],[data-app="production"]) .grid-3{gap:12px;}
  body:where([data-app="sales"],[data-app="production"]) .info-card{padding:20px 16px;}

  /* 상단바 — 더 촘촘히 */
  body:where([data-app="sales"],[data-app="production"]) .topbar{padding:6px 10px;}
  body:where([data-app="sales"],[data-app="production"]) .topbar-logo{font-size:15px;}
  body:where([data-app="sales"],[data-app="production"]) .tb-btn{padding:8px 11px;font-size:12.5px;}

  /* 표 — 가로 스크롤은 기본 규칙(.tbl-wrap)이 이미 담당. 셀 여백·글자만 소폭 조인다 */
  body:where([data-app="sales"],[data-app="production"]) .table-card-header{padding:14px 16px 12px;}
  body:where([data-app="sales"],[data-app="production"]) td{padding:12px 14px;font-size:13.5px;}
  body:where([data-app="sales"],[data-app="production"]) th,
  body:where([data-app="sales"],[data-app="production"]) table thead th,
  body:where([data-app="sales"],[data-app="production"]) .table-card thead th{
    padding:11px 14px;font-size:11.5px;}

  /* 버튼 터치 타깃 — 일반 44px, 표 안 소형 버튼도 최소 36px */
  body:where([data-app="sales"],[data-app="production"]) .btn{min-height:44px;}
  body:where([data-app="sales"],[data-app="production"]) .btn-sm{min-height:36px;}

  /* 모달 — 화면 폭을 꽉 채우고 세로는 92dvh까지 */
  body:where([data-app="sales"],[data-app="production"]) .modal-overlay{padding:10px;}
  body:where([data-app="sales"],[data-app="production"]) .modal-box{width:100%;max-height:92dvh;}
  body:where([data-app="sales"],[data-app="production"]) .modal-head{padding:18px 18px 14px;}
  body:where([data-app="sales"],[data-app="production"]) .modal-body{padding:18px 16px;}
  body:where([data-app="sales"],[data-app="production"]) .modal-footer{padding:12px 16px 16px;}
  /* .mob-edit-box는 현재 주문앱 마크업에만 있다 — 관리앱에 이식될 때만 매칭되도록 스코프 안에 둔다 */
  body:where([data-app="sales"],[data-app="production"]) .mob-edit-box{width:100%;max-height:92dvh;}
}

/* [ADD] 폼 검증 상태 */
.form-input.invalid,.form-select.invalid,.form-textarea.invalid,.mob-ef-input.invalid,.mob-ef-select.invalid{
  border-color:var(--red)!important;box-shadow:0 0 0 3px rgba(190,49,37,.14)!important;}

/* [ADD] 알림 센터 — 관리 앱 상단바 벨 + 드롭다운 */
#nc-bell{position:relative;}
#nc-badge{position:absolute;top:1px;right:1px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-pill);
  background:var(--red);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;}
#nc-badge:empty{display:none;}
#nc-panel{position:fixed;top:64px;right:14px;z-index:1200;width:320px;max-height:380px;overflow-y:auto;
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-pop);display:none;}
#nc-panel.open{display:block;animation:ncin .22s var(--ease) both;}
@keyframes ncin{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.nc-head{padding:12px 16px 8px;font-size:13px;font-weight:700;color:var(--text);}
.nc-item{display:flex;gap:10px;align-items:flex-start;padding:10px 16px;border-top:1px solid var(--border);}
.nc-dot{flex:none;width:8px;height:8px;border-radius:50%;margin-top:5px;}
.nc-body{min-width:0;}
.nc-msg{font-size:13px;line-height:1.45;color:var(--text);word-break:break-all;}
.nc-time{font-size:11px;color:var(--text3);margin-top:2px;}
.nc-empty{padding:30px 0;text-align:center;font-size:13px;color:var(--text3);}
.nc-clear{display:block;width:calc(100% - 12px);margin:6px;padding:10px;border:none;cursor:pointer;
  background:var(--fill2);border-radius:var(--r-sm);font-size:12.5px;font-weight:600;color:var(--text2);}
.nc-clear:hover{background:var(--fill);}
@media (max-width:640px){#nc-panel{width:calc(100vw - 24px);right:12px;}}

/* ══════════════════════════════════════════════════════════
   [ADD] 모바일 앱 다크모드 — 주문앱(client)·기사앱(driver) 한정
   · 시스템 설정(prefers-color-scheme)만 따른다 — 토글 없음.
   · 모든 규칙이 body[data-app="client"/"driver"] 스코프 × 미디어쿼리 안 —
     관리 앱(sales·production)·프로토타입·런처는 body에 data-app이 없거나
     다른 값이라 한 줄도 닿지 않는다. 라이트 고정 그대로.
   · 어두운 머리판(.mob-topbar/.mob-dash-header)은 원래 어두운 면이고
     토큰을 자기 요소에 직접 재선언하므로 여기 오버라이드가 침범하지 못한다.
     ≥640px 데스크톱 프레임 테두리는 이미 var(--border)라 토큰만 뒤집으면 따라온다.
   ══════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark){

  /* ── 토큰 뒤집기 — iOS 다크 팔레트. 의미색은 검정 위에서 한 단계 밝게 ── */
  body[data-app="client"],body[data-app="driver"]{
    color-scheme:dark;   /* 네이티브 셀렉트·날짜 피커·키보드도 다크로 */
    --bg:#000;--bg2:#000;
    --surface:#1C1C1E;--surface2:#2C2C2E;--surface3:#151517;
    --fill:rgba(120,120,128,.24);--fill2:rgba(120,120,128,.18);--fill3:rgba(120,120,128,.12);
    --border:rgba(84,84,88,.48);--border2:rgba(84,84,88,.65);
    --text:#F2F2F7;--text1:#F2F2F7;--text2:#B8B8BF;--text3:#8E8E93;
    --navy:#2C2C2E;
    --red:#FF6B5E;--red2:#FF8A80;
    --green:#32D74B;--green2:#5CE07A;
    --blue:#409CFF;--blue2:#6CB2FF;
    --orange:#E0A526;--orange2:#EDBA4A;
    --teal:#4DD0DE;--accent:#4DD0DE;--purple:#8E7CFF;
    /* 그림자는 검정 위에서 죽는다 — 헤어라인 링 + 깊은 검정으로 대체 */
    --sh-1:0 0 0 1px rgba(255,255,255,.06);
    --sh-2:0 0 0 1px rgba(255,255,255,.07),0 8px 24px -14px rgba(0,0,0,.55);
    --sh-3:0 0 0 1px rgba(255,255,255,.09),0 32px 80px -24px rgba(0,0,0,.75);
    --sh-pop:0 0 0 1px rgba(255,255,255,.09),0 12px 40px -12px rgba(0,0,0,.65);
  }

  /* ── 하드코딩 흰 면 → 다크 면. 색 채운 버튼 위 흰 글자는 그대로 둔다 ── */
  body:where([data-app="client"],[data-app="driver"]) .mob-ocard,
  body:where([data-app="client"],[data-app="driver"]) .mob-fcard,
  body:where([data-app="client"],[data-app="driver"]) .mob-login-card,
  body:where([data-app="client"],[data-app="driver"]) .mob-done-no,
  body:where([data-app="client"],[data-app="driver"]) .mob-done-detail,
  body:where([data-app="client"],[data-app="driver"]) .mob-edit-box,
  body:where([data-app="client"],[data-app="driver"]) .mob-edit-head,
  body:where([data-app="client"],[data-app="driver"]) .mob-edit-footer,
  body:where([data-app="client"],[data-app="driver"]) .mob-confirm-box{
    background:var(--surface);}

  /* 카드(#1C1C1E) 안에 앉는 키패드·입력 포커스면 — 한 단계 밝게 */
  body:where([data-app="client"],[data-app="driver"]) .mob-kp,
  body:where([data-app="client"],[data-app="driver"]) .mob-iq-input:focus,
  body:where([data-app="client"],[data-app="driver"]) .mob-code-inp:focus,
  body:where([data-app="client"],[data-app="driver"]) .mob-ef-input:focus,
  body:where([data-app="client"],[data-app="driver"]) .mob-ef-select:focus{
    background:var(--surface2);}

  /* 반투명 흰 유리 바 → 다크 유리. blur·border는 원 규칙이 그대로 유지 */
  body:where([data-app="client"],[data-app="driver"]) .mob-bbar,
  body:where([data-app="client"],[data-app="driver"]) .mob-step-bar{
    background:rgba(28,28,30,.88);}
  body:where([data-app="client"],[data-app="driver"]) .toast{
    background:rgba(44,44,46,.82);}

  /* 홈 버튼 눌림 — 라이트의 '더 어둡게(#000)'는 검정 지면에서 사라진다 → 밝게 */
  body:where([data-app="client"],[data-app="driver"]) .mob-done-home:active{
    background:#3A3A3C;}
}