/* ============================================================
   ES 재고관리 — 메뉴 구성 (사이트맵)   v81
   원본: 개발 인계 소스 src/menu.css + src/menu.html
   · 클래스명은 원본 그대로 유지하고 #menuv2 아래로만 스코프
   · v64 셸(page-header · crumb · page-title · chip · page-tabs · btn · main · card · badge)은
     전역이 아니므로 이 파일에서 화면 전용으로 다시 선언한다
   ============================================================ */

#menuv2 {
  /* ---- 토큰 (원본 tokens.css 그대로) ---- */
  --panel:#ffffff; --panel-sub:#fbfaf2; --panel-alt:#f6f5ec;
  --line:#dcd8c0; --line-soft:#e8e5d1; --line-faint:#edebdb;
  --text:#1c2430; --text-mid:#3a4030; --sub:#6b7160; --muted:#98a08a;
  --faint:#c6c8b4; --slate:#4f5644;
  --accent:#5a6636; --accent-hover:#4d5434; --accent-fg:#4d5434;
  --accent-bg:#ecead7; --accent-bg-2:#f5f4e7; --accent-line:#c9c5a1;
  --ok:#4d7c2f; --ok-fg:#3f6626; --ok-bg:#e9f0e0; --ok-line:#cbdcb6;
  --warn:#b8860b; --warn-fg:#8f6708; --warn-bg:#faf1dc; --warn-line:#e6d3a3;
  --danger:#a8442a; --danger-fg:#8c3721; --danger-bg:#f7e7e1; --danger-line:#e3c2b6;
  --info:#5b6b4a; --info-bg:#eef0e6; --neutral-bg:#eceade;
  --r-sm:0; --r:0; --r-md:0; --r-lg:0; --r-xl:0; --r-pill:99px;
  --bg:#eef0e6; --gap:12px; --pad-page:16px;
  --font:'ES Emoji', 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', system-ui, sans-serif;
  --fs-title:20px; --fs-card:13.5px; --fs-body:12.5px; --fs-sm:11.5px; --fs-xs:10.5px;
  font-family: var(--font); color: var(--text); font-size: 13.5px; background: var(--bg);
}
#menuv2 * { box-sizing: border-box; }

/* ---------- 페이지 헤더 (v64 셸) ---------- */
#menuv2 .page-header { position: sticky; top: var(--mmtop, 0px); z-index: 40;
  background: var(--panel); border-bottom: 1px solid var(--line); }
#menuv2 .page-header__row { display: flex; align-items: flex-end; gap: 14px;
  padding: 11px var(--pad-page) 0; flex-wrap: wrap; }
#menuv2 .crumb { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm);
  color: var(--muted); font-weight: 600; }
#menuv2 .page-title { margin: 0; font-size: var(--fs-title); font-weight: 800; letter-spacing: -.4px; color: var(--text); }
#menuv2 .chip { border-radius: var(--r-sm); padding: 2px 8px; font-size: var(--fs-sm); font-weight: 700; }
#menuv2 .chip--accent { background: var(--accent-bg); color: var(--accent-fg); }
#menuv2 .page-tabs { display: flex; gap: 2px; padding: 8px var(--pad-page) 0; overflow: auto; }
#menuv2 .page-tabs__item { padding: 7px 12px 9px; border: 0; background: none; box-shadow: inset 0 -2px 0 0 transparent;
  font: inherit; font-size: var(--fs-body); font-weight: 700; color: var(--sub); cursor: pointer; white-space: nowrap; }
#menuv2 .page-tabs__item:hover { color: var(--text); }
#menuv2 .page-tabs__item.is-active { color: var(--text); box-shadow: inset 0 -2px 0 0 var(--accent); }

/* ---------- 버튼 ---------- */
#menuv2 .btn { display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--panel); padding: 7px 12px; border-radius: var(--r);
  font: inherit; font-size: 12.5px; font-weight: 400; color: var(--text);
  cursor: pointer; white-space: nowrap; box-shadow: none; text-transform: none; }
#menuv2 .btn:hover { border-color: #c9c5a1; background: #f6f5ec; }
#menuv2 .btn--primary { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 700; padding: 7px 15px; }
#menuv2 .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* ---------- 본문 · 카드 · 배지 ---------- */
#menuv2 .main { width: 100%; margin: 0; padding: var(--pad-page) var(--pad-page) 90px;
  display: flex; flex-direction: column; gap: var(--gap); }
#menuv2 .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 13px 15px; }
#menuv2 .badge { display: inline-block; font-size: var(--fs-xs); font-weight: 800;
  border-radius: var(--r-sm); padding: 2px 7px; white-space: nowrap; }
#menuv2 .badge--ok { background: var(--ok-bg); color: var(--ok-fg); }
#menuv2 .badge--warn { background: var(--warn-bg); color: var(--warn-fg); }

/* ============================================================
   원본 menu.css (클래스명 그대로)
   ============================================================ */
#menuv2 .menu-hero { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:2px; }
#menuv2 .menu-hero__stats { display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
#menuv2 .menu-stat { min-width:96px; padding:10px 13px; border:1px solid var(--line); border-radius:11px; background:var(--panel); text-align:right; }
#menuv2 .menu-stat__label { display:block; font-size:10.5px; color:var(--sub); font-weight:600; white-space:nowrap; }
#menuv2 .menu-stat__n { display:block; font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:3px; letter-spacing:-.4px; }

/* 상단 탭 미리보기 */
#menuv2 .menu-gnb { display:flex; align-items:center; gap:2px; padding:0 14px; height:54px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  overflow-x:auto; scrollbar-width:none; }
#menuv2 .menu-gnb::-webkit-scrollbar { height:0; }
#menuv2 .menu-gnb__item { display:flex; align-items:center; gap:7px; height:54px; padding:0 13px;
  border:0; background:none; font:inherit; font-size:13.5px; font-weight:600;
  color:var(--sub); cursor:pointer; white-space:nowrap; box-shadow:inset 0 -2px 0 0 transparent; }
#menuv2 .menu-gnb__item:hover { color:var(--text); }
#menuv2 .menu-gnb__item.is-active { color:var(--text); box-shadow:inset 0 -2px 0 0 var(--accent); }
#menuv2 .menu-gnb__dot { width:6px; height:6px; border-radius:var(--r-pill); background:var(--danger); }

/* 그룹 카드 */
#menuv2 .menu-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; min-width:0; }
#menuv2 .menu-group { background:var(--panel); border:1.5px solid var(--line); border-radius:14px; overflow:hidden; min-width:0; }
#menuv2 .menu-group.is-active { border-color:var(--accent-line); }
#menuv2 .menu-group__head { display:flex; align-items:flex-start; gap:11px; padding:14px 15px; border-bottom:1px solid var(--line-soft); }
#menuv2 .menu-group__ico { width:38px; height:38px; flex:none; border-radius:11px; font-size:17px;
  display:flex; align-items:center; justify-content:center; }
#menuv2 .menu-group__title { font-size:13.5px; font-weight:700; letter-spacing:-.2px; }
#menuv2 .menu-group__hint { display:block; font-size:11.5px; color:var(--muted); margin-top:3px; word-break:keep-all; }
#menuv2 .menu-group__n { flex:none; font-size:10.5px; font-weight:800; border-radius:5px; padding:2px 7px;
  background:var(--neutral-bg); color:var(--slate); white-space:nowrap; }
#menuv2 .menu-items { display:flex; flex-direction:column; }
#menuv2 .menu-item { display:flex; align-items:flex-start; gap:10px; padding:11px 15px;
  border-bottom:1px solid var(--line-faint); min-width:0; width:100%; text-align:left;
  border-left:0; border-right:0; border-top:0; background:none; font:inherit; color:inherit; }
#menuv2 button.menu-item { cursor:pointer; }
#menuv2 button.menu-item:hover { background:var(--accent-bg-2); }
#menuv2 .menu-item:last-child { border-bottom:0; }
#menuv2 .menu-item.is-soon { background:var(--panel-sub); }
#menuv2 .menu-item__ico { flex:none; font-size:13.5px; margin-top:1px; }
#menuv2 .menu-item__body { flex:1; min-width:0; }
#menuv2 .menu-item__name { font-size:12.5px; font-weight:700; }
#menuv2 .menu-item__name.is-soon { color:var(--muted); }
#menuv2 .menu-item__desc { display:block; font-size:11.5px; color:var(--sub); margin-top:3px; line-height:1.55; word-break:keep-all; }
#menuv2 .menu-item__subs { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
#menuv2 .menu-sub { font-size:10.5px; font-weight:600; border-radius:5px; padding:2px 7px;
  background:var(--panel-alt); color:var(--slate); white-space:nowrap; }
#menuv2 button.menu-sub { border:0; font-family:inherit; cursor:pointer; }
#menuv2 button.menu-sub:hover { background:var(--accent-bg); color:var(--accent-fg); }
#menuv2 .menu-badge { flex:none; font-size:10.5px; font-weight:800; border-radius:4px; padding:1px 6px; white-space:nowrap; }
#menuv2 .menu-badge--n     { background:var(--danger); color:#fff; border-radius:var(--r-pill); padding:1px 6px; }
#menuv2 .menu-badge--admin { background:var(--neutral-bg); color:var(--slate); }
#menuv2 .menu-badge--soon  { background:#fff4e6; color:var(--warn-fg); }
#menuv2 .menu-badge--doc   { background:var(--accent-bg); color:var(--accent-fg); }
#menuv2 .menu-quick { display:flex; align-items:center; gap:6px; padding:10px 15px;
  background:var(--panel-sub); border-top:1px solid var(--line-soft); flex-wrap:wrap; }
#menuv2 .menu-quick__label { font-size:10.5px; font-weight:800; color:var(--muted);  white-space:nowrap; }
#menuv2 .menu-quick__chip { padding:4px 10px; border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--panel); font:inherit; font-size:10.5px; font-weight:600;
  color:var(--slate); white-space:nowrap; }
#menuv2 button.menu-quick__chip { cursor:pointer; }
#menuv2 button.menu-quick__chip:hover { border-color:var(--accent-line); background:var(--accent-bg); color:var(--accent-fg); }

/* 구현 현황 표 */
#menuv2 .menu-status { width:100%; border-collapse:collapse; min-width:640px; }
#menuv2 .menu-status th { background:var(--panel-alt); border-bottom:1px solid var(--line);
  padding:9px 10px; font-size:12.5px; color:var(--slate); font-weight:700; text-align:left; white-space:nowrap; }
#menuv2 .menu-status td { border-bottom:1px solid var(--line-faint); padding:8px 10px; font-size:12.5px; }
#menuv2 .menu-status tr.is-soon td { background:var(--panel-sub); color:var(--muted); }