/* v1.3.239 — 화면 전면 교체: 상단바 · 왼쪽 메뉴 · 본문 틀
   시안: docs/UI_FINAL_REFERENCE_V2.png (+ UI_FINAL_REFERENCE.png)
   이 파일은 업무 기능과 무관한 "보이는 모양"만 담는다. 버튼 id·data 속성은 app.js 가 그대로 쓴다.
   옛 .topbar / .sidebar-nav / 옛 홈 패널 CSS 와 섞지 않는다 — index.html 에서 해당 마크업을 없앴다. */

html.vn{
  --vn-top:calc(var(--ui117-topbar-size,44px) + 14px);
  --vn-side:194px;
  --vn-navy:#0b2a63;
  --vn-navy-2:#0a2253;
  --vn-navy-3:#0d2f70;
  --vn-blue:#1f6bff;
  --vn-blue-2:#2f7bff;
  --vn-bg:#eef3fa;
  --vn-card:#ffffff;
  --vn-line:#e1e8f3;
  --vn-ink:#14233f;
  --vn-sub:#6b7a93;
  --vn-red:#e5484d;
  --vn-red-bg:#fdeceb;
  --vn-orange:#f59f00;
  --vn-orange-bg:#fff3d6;
  --vn-green:#12a05c;
  --vn-green-bg:#e3f6ec;
  --vn-radius:12px;
  --vn-shadow:0 1px 2px rgba(15,35,80,.05),0 4px 14px rgba(15,35,80,.04);
  --vn-menu-font:calc(var(--ui117-menu-font,14px) + 1px);
}
html.vn[data-theme="dark"]{
  --vn-bg:#0c1424;
  --vn-card:#131d33;
  --vn-line:#223152;
  --vn-ink:#e8eefb;
  --vn-sub:#93a4c4;
  --vn-red-bg:#3a1c22;
  --vn-orange-bg:#3a2e14;
  --vn-green-bg:#12301f;
}
@media (max-width:1500px){ html.vn{--vn-side:178px;} }
@media (max-width:1280px){ html.vn{--vn-side:164px;} }

html.vn body{background:var(--vn-bg)!important;}
html.vn .vn-ic{width:1.2em;height:1.2em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-.2em;flex:none;}
html.vn [hidden]{display:none!important;}

/* ───────────── 상단바 ───────────── */
html.vn body #vnTop{
  position:fixed!important;top:0!important;left:0!important;right:0!important;
  height:var(--vn-top)!important;min-height:var(--vn-top)!important;width:auto!important;
  z-index:60!important;display:flex!important;align-items:center;gap:10px;
  padding:0 14px!important;margin:0!important;box-sizing:border-box;
  background:linear-gradient(90deg,#0a2658 0%,#0b2c68 60%,#0a2658 100%)!important;
  color:#fff!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 2px 10px rgba(5,15,40,.25)!important;
  font-size:var(--ui119-topbar-font,14px);
}
html.vn.vn body #vnTop > *{flex:none;}
html.vn.vn body #vnTop .vn-spacer{flex:1 1 auto;min-width:6px;}
html.vn.vn body #vnTop .vn-brand{display:flex;align-items:center;gap:10px;min-width:0;margin-right:6px;}
html.vn.vn body #vnTop .vn-brand-mark{width:34px;height:34px;display:grid;place-items:center;color:#3da1ff;font-size:30px;}
html.vn.vn body #vnTop .vn-brand-mark .vn-ic{width:1em;height:1em;fill:#1f8bff;stroke:#7cc3ff;stroke-width:1.2;}
html.vn.vn body #vnTop .vn-brand-name{font-size:20px;font-weight:800;letter-spacing:-.03em;color:#fff;white-space:nowrap;}
html.vn.vn body #vnTop .vn-ver{
  border:1px solid rgba(255,255,255,.22)!important;background:rgba(255,255,255,.08)!important;color:#dce8ff!important;
  border-radius:6px!important;padding:3px 8px!important;font-size:12.5px!important;font-weight:600!important;min-height:0!important;height:auto!important;line-height:1.3;cursor:pointer;
}
html.vn.vn body #vnTop .vn-ver.stale{background:#7a2d12!important;border-color:#ffb27a!important;color:#fff!important;}

html.vn.vn body #vnTop .vn-history{display:flex;gap:8px;align-items:center;margin:0 0 0 6px;}
html.vn.vn body #vnTop .vn-nav-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;min-height:0!important;padding:0 13px!important;
  border:1px solid rgba(255,255,255,.2)!important;border-radius:8px!important;background:rgba(255,255,255,.1)!important;color:#fff!important;
  font-size:14px;font-weight:600;box-shadow:none!important;cursor:pointer;white-space:nowrap;
}
html.vn.vn body #vnTop .vn-nav-btn:hover:not(:disabled){background:rgba(255,255,255,.2)!important;}
html.vn.vn body #vnTop .vn-nav-btn:disabled{opacity:.4;cursor:default;}

html.vn.vn body #vnTop .vn-roles{display:flex;align-items:center;gap:10px;margin:0 0 0 4px;padding:0!important;border:0!important;background:transparent!important;}
html.vn.vn body #vnTop .vn-role-tabs{display:flex;border:1px solid rgba(255,255,255,.22);border-radius:8px;overflow:hidden;background:rgba(255,255,255,.06);}
html.vn.vn body #vnTop .vn-role-tabs button{
  min-width:62px;height:36px;padding:0 14px!important;border:0!important;border-radius:0!important;background:transparent!important;color:#e5edff!important;
  font-size:14.5px;font-weight:700;cursor:pointer;box-shadow:none!important;min-height:0!important;
}
html.vn.vn body #vnTop .vn-role-tabs button + button{border-left:1px solid rgba(255,255,255,.14)!important;}
html.vn.vn body #vnTop .vn-role-tabs button.active,html.vn.vn body #vnTop .vn-role-tabs button[aria-pressed="true"]{background:var(--vn-blue)!important;color:#fff!important;}
html.vn.vn body #vnTop .vn-mode{display:flex;align-items:center;gap:8px;color:#e5edff;white-space:nowrap;}
html.vn.vn body #vnTop .vn-mode > span{font-size:14px;font-weight:700;color:#e5edff;}
html.vn.vn body #vnTop .vn-mode select,html.vn.vn body #vnTop .vn-station select,html.vn.vn body #vnTop .vn-station-select{
  height:36px;min-height:0!important;border-radius:8px!important;border:1px solid rgba(255,255,255,.25)!important;background:rgba(255,255,255,.1)!important;color:#fff!important;
  padding:0 10px!important;font-size:14px;font-weight:700;cursor:pointer;
}
html.vn.vn body #vnTop .vn-mode select option,html.vn.vn body #vnTop .vn-station select option,html.vn.vn body #vnTop .vn-station-select option{color:#111;background:#fff;}
html.vn.vn body #vnTop .vn-station select,html.vn.vn body #vnTop .vn-station-select{background:#fff!important;color:#102040!important;border-color:#fff!important;min-width:132px;}
html.vn.vn body #vnTop .vn-station{display:flex;align-items:center;margin:0;}

html.vn.vn body #vnTop .vn-bell{
  position:relative;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 8px!important;border:0!important;background:transparent!important;color:#fff!important;
  font-size:14px;font-weight:700;cursor:pointer;box-shadow:none!important;min-height:0!important;
}
html.vn.vn body #vnTop .vn-bell .vn-bell-ic{position:relative;display:inline-grid;place-items:center;font-size:24px;}
html.vn.vn body #vnTop .vn-badge{
  position:absolute;top:-7px;right:-9px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:#ff3b30;color:#fff;
  font-size:11.5px;font-weight:800;line-height:19px;text-align:center;box-sizing:border-box;border:0;
}
html.vn.vn body #vnTop .vn-search{position:relative;display:flex;align-items:center;height:36px;width:min(13vw,190px);border-radius:18px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);margin:0;}
html.vn.vn body #vnTop .vn-search-btn{width:36px;height:34px;border:0!important;background:transparent!important;color:#fff!important;font-size:19px;cursor:pointer;padding:0!important;min-height:0!important;box-shadow:none!important;}
html.vn.vn body #vnTop .vn-search input{flex:1;min-width:0;height:34px;border:0!important;background:transparent!important;color:#fff!important;font-size:14px;padding:0 12px 0 0!important;outline:none;box-shadow:none!important;}
html.vn.vn body #vnTop .vn-search input::placeholder{color:#bfd0f0;}
html.vn.vn body #vnTop .vn-search-list{position:absolute;top:calc(100% + 8px);right:0;width:300px;max-height:380px;overflow:auto;background:var(--vn-card);color:var(--vn-ink);border:1px solid var(--vn-line);border-radius:12px;box-shadow:0 12px 32px rgba(10,25,60,.3);padding:6px;z-index:80;}
html.vn.vn body #vnTop .vn-search-list button{display:flex;width:100%;align-items:center;gap:10px;padding:9px 10px!important;border:0!important;border-radius:8px!important;background:transparent!important;color:inherit!important;text-align:left;font-size:14px;font-weight:600;cursor:pointer;min-height:0!important;box-shadow:none!important;}
html.vn.vn body #vnTop .vn-search-list button:hover,html.vn.vn body #vnTop .vn-search-list button.on{background:#e8f0ff!important;color:#1448c4!important;}
html.vn.vn body #vnTop .vn-search-list .vn-search-empty{padding:12px;color:var(--vn-sub);font-size:13px;}

html.vn.vn body #vnTop .vn-user{position:relative;margin:0 0 0 2px;}
html.vn.vn body #vnTop .vn-user > summary{list-style:none;display:flex;align-items:center;gap:8px;height:36px;padding:0 6px;cursor:pointer;color:#fff;border-radius:8px;}
html.vn.vn body #vnTop .vn-user > summary::-webkit-details-marker{display:none;}
html.vn.vn body #vnTop .vn-user > summary:hover{background:rgba(255,255,255,.1);}
html.vn.vn body #vnTop .vn-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#3b8cff,#1f6bff);display:grid;place-items:center;font-size:19px;color:#fff;border:2px solid rgba(255,255,255,.7);}
html.vn.vn body #vnTop .vn-user-role{font-size:14.5px;font-weight:700;color:#fff!important;white-space:nowrap;}
html.vn.vn body #vnTop .vn-caret{font-size:13px;opacity:.85;}
html.vn.vn body #vnTop .vn-user-panel{position:absolute;right:0;top:calc(100% + 10px);width:290px;max-height:calc(100vh - var(--vn-top) - 24px);overflow:auto;background:var(--vn-card);color:var(--vn-ink);border:1px solid var(--vn-line);border-radius:12px;box-shadow:0 14px 36px rgba(10,25,60,.32);padding:10px;z-index:80;}
html.vn.vn body #vnTop .vn-user-head{padding:6px 8px 10px;border-bottom:1px solid var(--vn-line);margin-bottom:6px;display:grid;gap:2px;}
html.vn.vn body #vnTop .vn-user-head small{color:var(--vn-sub);font-size:12px;}
html.vn.vn body #vnTop .vn-user-head strong{font-size:15px;color:var(--vn-ink);}
html.vn.vn body #vnTop .vn-user-panel .vn-menu-item{display:block;width:100%;text-align:left;padding:10px 10px!important;border:0!important;border-radius:8px!important;background:transparent!important;color:var(--vn-ink)!important;font-size:14px;font-weight:600;cursor:pointer;min-height:0!important;box-shadow:none!important;}
html.vn.vn body #vnTop .vn-user-panel .vn-menu-item:hover{background:#eaf1ff!important;}
html.vn.vn body #vnTop .vn-menu-sep{height:1px;background:var(--vn-line);margin:6px 0;}
html.vn.vn body #vnTop .vn-user-panel .ui-setting-cluster{display:grid;gap:8px;padding:2px 4px;color:var(--vn-ink);}
html.vn.vn body #vnTop .vn-user-panel .ui-setting-cluster label{display:grid;gap:4px;font-size:13px;color:var(--vn-ink);}
html.vn.vn body #vnTop .vn-user-panel select,html.vn.vn body #vnTop .vn-user-panel input{width:100%;min-height:32px;border:1px solid var(--vn-line);border-radius:8px;background:var(--vn-card);color:var(--vn-ink);padding:0 8px;font-size:13px;}
html.vn.vn body #vnTop .vn-user-panel summary{cursor:pointer;font-size:13.5px;font-weight:700;display:flex;justify-content:space-between;gap:8px;color:var(--vn-ink);}
html.vn.vn body #vnTop .vn-user-panel .ui-setting-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px;}
html.vn.vn body #vnTop .demo-data-badge{margin:0;padding:3px 8px;border-radius:6px;background:#ffb020;color:#3b2500;font-size:12px;font-weight:800;}
html.vn.vn body #vnTop .vn-logout{height:36px;min-height:0!important;padding:0 6px 0 14px!important;border:0!important;border-left:1px solid rgba(255,255,255,.2)!important;border-radius:0!important;background:transparent!important;color:#fff!important;font-size:14px;font-weight:700;cursor:pointer;box-shadow:none!important;white-space:nowrap;}
html.vn.vn body #vnTop .vn-logout .mobile-logout-label{display:none;}

/* ───────────── 왼쪽 메뉴 ───────────── */
html.vn body .vn-side{
  position:fixed!important;top:var(--vn-top)!important;left:0!important;bottom:0!important;width:var(--vn-side)!important;height:auto!important;
  z-index:55!important;display:flex!important;flex-direction:column;box-sizing:border-box;margin:0!important;padding:10px 10px 12px!important;
  background:linear-gradient(180deg,#0b2a63 0%,#0a2455 100%)!important;color:#fff!important;border:0!important;
  overflow-y:auto;overflow-x:hidden;
}
html.vn .vn-menu{display:block!important;flex:0 0 auto;padding:0!important;margin:0!important;background:transparent!important;border:0!important;}
html.vn .vn-menu-sec{margin:0 0 8px;}
html.vn .vn-menu-sec + .vn-menu-sec{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);}
html.vn .vn-menu-label{
  display:flex;align-items:center;justify-content:space-between;width:100%;padding:6px 8px 8px!important;border:0!important;background:transparent!important;
  color:#b6c7ea!important;font-size:calc(var(--vn-menu-font) - 1px);font-weight:600;cursor:pointer;min-height:0!important;box-shadow:none!important;text-align:left;
}
html.vn .vn-menu-label .vn-menu-caret{font-size:13px;transition:transform .15s;opacity:.8;}
html.vn .vn-menu-sec.closed .vn-menu-caret{transform:rotate(-90deg);}
html.vn .vn-menu-item-btn{
  position:relative;display:flex!important;align-items:center;gap:12px;width:100%;height:auto;min-height:44px;margin:2px 0!important;padding:0 12px!important;
  border:0!important;border-radius:10px!important;background:transparent!important;color:#e7efff!important;
  font-size:var(--vn-menu-font);font-weight:600;text-align:left;cursor:pointer;box-shadow:none!important;white-space:nowrap;letter-spacing:-.01em;
}
html.vn .vn-menu-item-btn .vn-ic{font-size:23px;width:1em;height:1em;flex:none;color:#d3e1ff;}
html.vn .vn-menu-item-btn > span{overflow:hidden;text-overflow:ellipsis;}
html.vn .vn-menu-item-btn:hover{background:rgba(255,255,255,.1)!important;}
html.vn .vn-menu-item-btn.active{background:var(--vn-blue)!important;color:#fff!important;box-shadow:0 4px 12px rgba(31,107,255,.4)!important;}
html.vn .vn-menu-item-btn.active .vn-ic{color:#fff;}
html.vn .vn-menu-item-btn.attention::after{content:"";position:absolute;right:12px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#ff5a4f;}
html.vn .vn-menu-dot,html.vn .vn-menu-item-btn .nav-badge{margin-left:auto;min-width:18px;height:18px;border-radius:9px;background:#ff3b30;color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center;padding:0 5px;}
/* 기타 메뉴 그림은 색을 입혀 구분(시안) */
html.vn .vn-menu-sec[data-vn-sec="more"] .vn-menu-item-btn .vn-ic{color:#8fb4ff;}
html.vn .vn-menu-item-btn[data-menu-key="market"] .vn-ic{color:#5fd0a0!important;}
html.vn .vn-menu-item-btn[data-menu-key="tank"] .vn-ic,html.vn .vn-menu-item-btn[data-menu-key="closing"] .vn-ic{color:#ff8a80!important;}
html.vn .vn-menu-item-btn[data-menu-key="cash"] .vn-ic{color:#ffc247!important;}
html.vn .vn-menu-item-btn[data-menu-key="delivery"] .vn-ic{color:#ffb061!important;}
html.vn .vn-menu-item-btn[data-menu-key="payments"] .vn-ic{color:#6fb8ff!important;}
html.vn .vn-menu-item-btn[data-menu-key="operations"] .vn-ic{color:#7aa8ff!important;}
html.vn .vn-menu-item-btn[data-menu-key="stock"] .vn-ic,html.vn .vn-menu-item-btn[data-menu-key="goods"] .vn-ic{color:#ffb44d!important;}
html.vn .vn-menu-item-btn[data-menu-key="setup"] .vn-ic{color:#c3cfe6!important;}
html.vn .vn-menu-item-btn.active .vn-ic{color:#fff!important;}

html.vn .vn-quick{
  position:static!important;display:grid!important;gap:8px;margin:12px 0 0!important;padding:12px 0 0!important;background:transparent!important;
  border-top:1px solid rgba(255,255,255,.14)!important;left:auto!important;right:auto!important;bottom:auto!important;
}
html.vn .vn-quick .quick-btn{
  display:grid!important;grid-template-columns:24px 1fr!important;align-items:center;gap:8px!important;min-height:50px!important;padding:6px 10px!important;border:0!important;border-radius:10px!important;
  color:#fff!important;text-align:left;cursor:pointer;box-shadow:none!important;
}
html.vn .vn-quick .quick-btn.camera{background:linear-gradient(135deg,#7a35d4,#8f43e6)!important;}
html.vn .vn-quick .quick-btn.file{background:linear-gradient(135deg,#0a6fe8,#2b8cff)!important;}
html.vn .vn-quick .quick-btn .vn-ic{font-size:21px;}
html.vn .vn-quick .quick-btn strong{display:block;font-size:13.5px;font-weight:800;color:#fff!important;line-height:1.2;}
html.vn .vn-quick .quick-btn small{display:block;font-size:11px;color:#e3ecff!important;line-height:1.2;white-space:normal;}

/* ───────────── 본문 틀 ───────────── */
html.vn.vn body #mainContent#mainContent{
  position:fixed!important;top:var(--vn-top)!important;left:var(--vn-side)!important;right:0!important;bottom:0!important;
  width:auto!important;height:auto!important;max-width:none!important;margin:0!important;box-sizing:border-box;
  padding:14px 16px 24px!important;background:var(--vn-bg)!important;overflow-y:auto!important;overflow-x:hidden!important;
}
html.vn.vn body #mainContent#mainContent > .view{padding-top:0!important;}
html.vn .vn-hamburger,html.vn .vn-tabbar,html.vn .vn-scrim,html.vn .vn-logout-item,html.vn .vn-logout-sep{display:none!important;}

/* 작은 PC · 태블릿 가로 */
@media (max-width:1560px){
  html.vn .vn-brand-name{font-size:19px;}
  html.vn .vn-nav-btn{padding:0 11px!important;}
  html.vn .vn-mode > span{display:none;}
  html.vn .vn-search{width:170px;}
  html.vn #vnTop{gap:8px;padding:0 12px!important;}
}
@media (max-width:1400px){
  html.vn .vn-nav-btn span{display:none;}
  html.vn .vn-nav-btn{padding:0 11px!important;}
  html.vn .vn-bell > .vn-bell-text{display:none;}
  html.vn .vn-user-role{max-width:68px;overflow:hidden;text-overflow:ellipsis;}
}
@media (max-width:1180px){
  html.vn .vn-search{width:36px;background:transparent;border-color:transparent;}
  html.vn .vn-search input{display:none;}
  html.vn .vn-ver{display:none!important;}
  html.vn .vn-role-tabs button{min-width:48px;padding:0 9px!important;}
}


/* ───────────── 폰 (960px 미만) — 시안 모바일 ─────────────
   상단: 로고·버전 · 알림 · 사용자 · ☰   /  하단: 홈 · 업무 · 검색 · 알림 · 메뉴   /  ☰·메뉴 = 왼쪽 메뉴가 서랍으로 열림 */
@media (max-width:959px){
  html.vn{--vn-top:52px;--vn-side:0px;--vn-tab:62px;}
  html.vn.vn body #vnTop{padding:0 8px 0 12px!important;gap:6px;}
  html.vn.vn body #vnTop .vn-brand{margin:0;gap:7px;flex:1 1 auto;min-width:0;}
  html.vn.vn body #vnTop .vn-brand-mark{width:28px;height:28px;font-size:26px;}
  html.vn.vn body #vnTop .vn-brand-name{font-size:16px;overflow:hidden;text-overflow:ellipsis;}
  html.vn.vn body #vnTop .vn-ver{display:inline-block!important;font-size:11px!important;padding:2px 6px!important;}
  html.vn.vn body #vnTop .vn-history,html.vn.vn body #vnTop .vn-roles,html.vn.vn body #vnTop .vn-station,html.vn.vn body #vnTop .vn-search,html.vn.vn body #vnTop .vn-spacer,html.vn.vn body #vnTop .vn-logout,html.vn.vn body #vnTop .vn-caret,html.vn.vn body #vnTop .vn-user-role,html.vn.vn body #vnTop .vn-bell-text,html.vn.vn body #vnTop .demo-data-badge,html.vn.vn body #vnTop .app-runtime-message{display:none!important;}
  html.vn.vn body #vnTop .vn-hamburger{display:inline-grid!important;order:99;place-items:center;width:40px;height:40px;padding:0!important;border:0!important;background:transparent!important;color:#fff!important;font-size:26px;cursor:pointer;min-height:0!important;box-shadow:none!important;}
  html.vn.vn body #vnTop .vn-bell{padding:0 6px!important;order:90;}
  html.vn.vn body #vnTop .vn-user{order:95;margin:0;}
  html.vn.vn body #vnTop .vn-user > summary{padding:0 2px;}
  html.vn.vn body #vnTop .vn-avatar{width:30px;height:30px;font-size:17px;}
  html.vn.vn body #vnTop .vn-user-panel{position:fixed;left:auto;right:8px;top:calc(var(--vn-top) + 6px);width:min(92vw,320px);max-height:calc(100dvh - var(--vn-top) - var(--vn-tab) - 18px);}
  html.vn.vn body #vnTop .vn-logout-item,html.vn.vn body #vnTop .vn-logout-sep{display:block!important;}
  html.vn.vn body #vnTop .vn-logout-item{color:var(--vn-red)!important;}

  html.vn body .vn-side{
    top:var(--vn-top)!important;bottom:var(--vn-tab)!important;width:min(82vw,300px)!important;
    transform:translateX(-102%);transition:transform .22s ease;z-index:62!important;padding:10px 12px 14px!important;
    box-shadow:6px 0 24px rgba(5,15,40,.35);
  }
  html.vn.vn-drawer-open body .vn-side{transform:none;}
  html.vn .vn-scrim{display:block!important;position:fixed;left:0;right:0;top:var(--vn-top);bottom:var(--vn-tab);background:rgba(8,18,40,.5);z-index:61;}
  html.vn .vn-scrim[hidden]{display:none!important;}
  html.vn .vn-menu-item-btn{min-height:48px;font-size:15.5px;}

  html.vn.vn body #mainContent#mainContent{
    left:0!important;bottom:calc(var(--vn-tab) + env(safe-area-inset-bottom,0px))!important;
    padding:10px 10px 18px!important;
  }

  html.vn .vn-tabbar{
    display:grid!important;grid-template-columns:repeat(auto-fit,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:63;
    height:calc(var(--vn-tab) + env(safe-area-inset-bottom,0px));padding:0 4px env(safe-area-inset-bottom,0px);box-sizing:border-box;
    background:var(--vn-card);border-top:1px solid var(--vn-line);box-shadow:0 -4px 16px rgba(15,35,80,.08);
  }
  html.vn .vn-tabbar button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;height:100%;padding:0!important;border:0!important;border-radius:0!important;
    background:transparent!important;color:var(--vn-sub)!important;font-size:12px;font-weight:700;cursor:pointer;min-height:0!important;box-shadow:none!important;
  }
  html.vn .vn-tabbar button em{font-style:normal;font-size:12px;line-height:1;}
  html.vn .vn-tabbar .vn-tab-ic{position:relative;display:grid;place-items:center;font-size:24px;line-height:1;}
  html.vn .vn-tabbar button.active{color:var(--vn-blue)!important;}
  html.vn .vn-tabbar .vn-tab-badge{position:absolute;top:-6px;right:-10px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ff3b30;color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center;box-sizing:border-box;}
}

/* hidden 속성은 항상 이긴다(상단바 규칙이 id 까지 올려 둔 것보다 뒤에 둔다) */
html.vn.vn body #vnTop [hidden],html.vn.vn body [hidden]{display:none!important;}

/* 관리자 '화면 모드 = 폰' 미리보기 틀은 새 상단바 아래에서 시작한다 */
html.vn body #adminPhoneFrame{top:var(--vn-top)!important;z-index:50;}

/* ───────────── 세차 모드(세차장 앱·주유소 앱의 세차 모드): 새 틀을 숨기고 세차 화면만 크게 ───────────── */
html.vn body.carwash-mode #vnTop,
html.vn body.carwash-mode #vnSide,
html.vn body.carwash-mode #vnTabbar,
html.vn body.carwash-mode #vnScrim{display:none!important;}
html.vn.vn body.carwash-mode #mainContent#mainContent{
  position:fixed!important;left:0!important;top:0!important;right:0!important;bottom:0!important;
  width:100%!important;height:100vh!important;margin:0!important;padding:10px!important;max-width:none!important;overflow:auto!important;
}