/**
 * page-engine 구조 CSS — 셸 엔진이 슬롯에 렌더하는 요소의 **기능·최소 기본값**만 담는다.
 * (docs/0013 §5 — 장식·테마는 전량 템플릿 소유. 템플릿은 .erp-* 셀렉터로 오버라이드)
 * 메뉴 패널의 fixed 포지셔닝·z-index 는 keep-alive/클리핑 계약의 일부라 여기 고정한다.
 */

/* ---- 메뉴바 ---- */
.erp-menu-loading { font-size: 12px; opacity: 0.55; }
.erp-menu-error { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #dc2626; }
.erp-menu-retry { font: inherit; padding: 1px 8px; border: 1px solid #fca5a5; border-radius: 4px; background: #fff; color: inherit; cursor: pointer; }
.erp-menu-root { font: inherit; font-size: 13px; padding: 4px 10px; border: 0; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; white-space: nowrap; }

/* 캐스케이드 패널 — body 직속 fixed (overflow 클리핑 회피, iframe z-10 위) */
.erp-menu-panel {
  position: fixed;
  z-index: 60;
  overflow-y: auto;
  padding: 4px 0;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
  font-size: 13px;
}
.erp-menu-item { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 12px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.erp-menu-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-menu-arrow { flex: none; font-size: 10px; opacity: 0.45; }
.erp-menu-sep { margin: 4px 0; border: 0; border-top: 1px solid #e2e8f0; }

/* ---- 공통버튼 ---- */
.erp-cmd { font: inherit; font-size: 13px; padding: 4px 12px; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; color: inherit; cursor: pointer; }
.erp-cmd:disabled { cursor: not-allowed; opacity: 0.4; }
.erp-status { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; opacity: 0.65; }
.erp-log-toggle { font: inherit; font-size: 12px; padding: 3px 10px; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; color: inherit; cursor: pointer; margin-left: auto; flex: none; }

/* ---- 탭스트립 ---- */
.erp-tab { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 4px 12px; font-size: 13px; cursor: pointer; }
.erp-tab-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; }
.erp-tab-dot.is-loading { background: #cbd5e1; animation: erp-pulse 1.2s ease-in-out infinite; }
.erp-tab-dot.is-ready { background: #10b981; }
.erp-tab-dot.is-failed { background: #ef4444; }
.erp-tab-dot.is-fallback { background: #fbbf24; }
@keyframes erp-pulse { 50% { opacity: 0.35; } }
.erp-tab-label { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-tab-close { font: inherit; border: 0; background: transparent; color: inherit; opacity: 0.5; cursor: pointer; padding: 0 2px; border-radius: 3px; }
.erp-tab-close:hover { opacity: 1; }

/* ---- 상태 배너·워크스페이스 ---- */
.erp-alert { display: flex; align-items: center; gap: 12px; padding: 6px 16px; font-size: 12px; }
.erp-alert.is-fallback { background: #fffbeb; color: #92400e; border-bottom: 1px solid #fde68a; }
.erp-alert.is-failed { background: #fef2f2; color: #b91c1c; border-bottom: 1px solid #fecaca; }
.erp-alert-reload { font: inherit; padding: 1px 8px; border: 1px solid #fca5a5; border-radius: 4px; background: #fff; color: inherit; cursor: pointer; }

/* ---- 사용자 영역 ---- */
.erp-user-name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-logout { font: inherit; font-size: 12px; padding: 2px 8px; border: 1px solid #cbd5e1; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; }
/* 테마 드롭다운 (docs/0017 §8-1) — 배색은 템플릿이 .erp-theme-pick(+option) 으로 재정의 */
.erp-theme-pick { font: inherit; font-size: 12px; padding: 2px 6px; max-width: 9rem; border: 1px solid #cbd5e1; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; }
.erp-theme-pick:disabled { cursor: wait; opacity: 0.6; }

/* ---- 트리 메뉴 — docked(워크스페이스 좌측 패널) / pinned(템플릿 tree 슬롯) (docs/0001 §2-1) -----
   docked: 셸이 열림 동안 workspace 에 [data-erp-tree-open] 을 세운다 → `--erp-tree-offset` 이 켜지고
   탭 iframe(인라인 left/width: var(--erp-tree-offset, 0px))·랜딩(.erp-home)이 패널 폭만큼 비켜 선다
   — 폼을 덮지 않고, iframe 노드·src 는 그대로다(keep-alive 무접촉). 폭은 `--erp-tree-w`(기본 260px ·
   템플릿이 workspace 나 그 상위에서 재정의). 닫힘 = display:none(슬라이드 전환·그림자 없음).
   z 20 은 계약으로 남긴다 — 캐스케이드 패널(z 60) 아래.
   pinned: 템플릿 슬롯 안 정적 패널(항상 .is-open) — 슬롯이 flex column 이면 남는 높이를 채운다.
   배색·장식은 템플릿이 .erp-menu-tree* 로 재정의한다(0013 §5.3). */
[data-erp-tree-open] { --erp-tree-offset: var(--erp-tree-w, 260px); }
.erp-menu-tree {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--erp-tree-w, 260px);
  max-width: 100%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e2e8f0;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
}
.erp-menu-tree:not(.is-open) { display: none; }
.erp-menu-tree.is-pinned { position: static; width: auto; flex: 1; min-height: 0; border-right: 0; }
.erp-menu-tree-head { display: flex; align-items: center; justify-content: space-between; flex: none; padding: 6px 8px 6px 12px; border-bottom: 1px solid #e2e8f0; font-size: 12px; font-weight: 600; }
.erp-menu-tree-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 0; }
.erp-menu-tree-list { list-style: none; margin: 0; padding: 0; }
.erp-menu-tree-item:not(.is-expanded) > .erp-menu-tree-list { display: none; }
.erp-menu-tree-row { display: flex; align-items: center; gap: 2px; padding-right: 6px; }
.erp-menu-tree-toggle, .erp-menu-tree-spacer { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 22px; padding: 0; border: 0; background: transparent; color: inherit; opacity: 0.5; font-size: 10px; line-height: 1; }
.erp-menu-tree-toggle { cursor: pointer; }
.erp-menu-tree-node { flex: 1; min-width: 0; text-align: left; padding: 3px 8px 3px 4px; border: 0; border-radius: 3px; background: transparent; color: inherit; font: inherit; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-menu-tree-node:hover { background: #f1f5f9; }
.erp-menu-tree-node.is-folder { font-weight: 500; }
.erp-menu-tree-node.is-active { background: #e2e8f0; font-weight: 600; }
.erp-menu-tree-sep { margin: 4px 10px; border-top: 1px solid #e2e8f0; }
.erp-menu-tree-loading { padding: 12px; font-size: 12px; opacity: 0.55; }
.erp-menu-tree-error { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; font-size: 12px; color: #dc2626; }
.erp-menu-tree-retry { font: inherit; padding: 1px 8px; border: 1px solid #fca5a5; border-radius: 4px; background: #fff; color: inherit; cursor: pointer; }
/* 툴바 [메뉴] — erp-cmd 장식 상속 · 열림 상태는 중립 기본값(템플릿이 재정의) */
.erp-menu-btn { margin-right: 4px; }
.erp-menu-btn.is-on { background: #e2e8f0; }

/* ---- 랜딩(홈) 대시보드 (docs/0032) ------------------------------------------
   기하는 여기(엔진 소유), 배색은 템플릿이 .erp-* 로 오버라이드한다(0013 §5.3).
   기본 배색은 활성 main.html 의 슬레이트 계열에 맞춘 **중립값**이다 — 참조 원본의
   Bootstrap 팔레트가 아니라 현행 셸과 어울리는 쪽이 기준이다(기하는 0032 §6 준수).

   🔴 `display` 를 여기서 명시하는 것이 계약이다: shell 의 applyVisibility 는 복원값으로
   '' 를 쓰므로 **클래스 기본값이 곧 표시값**이다(구 .erp-workspace-empty{display:flex} 선례). */
.erp-home {
  /* iframe 과 같은 absolute 계층 — 정적 자식이면 z:0 비활성 iframe 아래로 깔린다 */
  position: absolute;
  inset: 0;
  /* 트리 도킹 오프셋 — inset 뒤에 와야 left 만 덮는다(닫힘 = 0px) */
  left: var(--erp-tree-offset, 0px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* 스크롤은 안쪽에서만 — 최소화 바가 스크롤을 따라 사라지지 않게 하는 구조의 핵심 */
.erp-home-scroll { flex: 1; min-height: 0; overflow: auto; padding: 20px; }
/* 🔴 `grid-auto-rows: 1fr` + 기본 stretch = **전 카드 같은 높이**. 높이가 불확정인 그리드에서
   `1fr` 행은 「가장 큰 행의 max-content」로 함께 결정되므로, 실질 기준은 제일 높은 카드(달력)다.
   종전 `align-items: start`(카드마다 제 키)는 카드 밑단이 들쭉날쭉해 대시보드로 읽히지 않았다.
   자연 높이가 기준보다 낮은 카드는 늘어난 만큼을 **본문이 흡수**한다(아래 flex:1 계열). */
.erp-home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-auto-rows: 1fr; gap: 20px; }

.erp-home-card { display: flex; flex-direction: column; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; padding: 20px; box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08); transition: box-shadow 0.2s ease, opacity 0.2s ease; }
.erp-home-card:hover { box-shadow: 0 4px 8px rgba(15, 23, 42, 0.12); }
.erp-home-card.is-wide { grid-column: span 2; }
.erp-home-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #e2e8f0; cursor: move; user-select: none; }
.erp-home-card-t { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; font-weight: 600; }
.erp-home-card-ic { flex: none; font-size: 16px; }
.erp-home-card-tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-home-card-tools { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.erp-home-card-act { font: inherit; font-size: 12px; padding: 2px 8px; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; color: inherit; cursor: pointer; }
.erp-home-card-act:hover { background: #f1f5f9; }
.erp-home-card-min { font: inherit; font-size: 14px; line-height: 1; padding: 3px 8px; border: 0; border-radius: 4px; background: transparent; color: #64748b; cursor: pointer; }
.erp-home-card-min:hover { background: #f1f5f9; color: #0f172a; }
/* 본문이 카드의 남는 높이를 전부 받는다 — 각 카드가 이 안에서 제 방식대로 채운다 */
.erp-home-card-b { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }

/* 드래그 상태 — 테두리 대신 outline 으로 표시해 배치가 흔들리지 않게 한다 */
.erp-home-card.is-dragging { opacity: 0.5; }
.erp-home-card.is-dragover { outline: 2px dashed #2563eb; outline-offset: -2px; background: #f8fafc; }

/* 최소화 바 — `.erp-home` **내부 flex 형제**(0032 §3 H2). fixed 로 만들면 탭 활성 시
   iframe 위에 잔류하고 메뉴 캐스케이드 패널(z-60)까지 덮는다. 형제 배치는 .erp-home 의
   display:none 에 함께 숨고 z-index 자체가 필요 없다. */
.erp-home-minbar { display: flex; flex: none; gap: 10px; flex-wrap: wrap; padding: 10px 20px; border-top: 1px solid #e2e8f0; background: #f8fafc; }
.erp-home-minbar.is-empty { display: none; }
.erp-home-card.is-min { width: 250px; flex: none; padding: 0; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15); }
.erp-home-card.is-min .erp-home-card-h { margin: 0; padding: 10px 14px; border-bottom: 0; border-radius: 8px; background: #1e293b; color: #fff; cursor: pointer; }
.erp-home-card.is-min .erp-home-card-t { font-size: 13px; }
.erp-home-card.is-min .erp-home-card-min { color: #cbd5e1; }
.erp-home-card.is-min .erp-home-card-act { display: none; }
.erp-home-card.is-min .erp-home-card-b { display: none; }

/* [홈] — erp-cmd 장식을 상속하고 margin 으로 기능 버튼군과 분리한다 */
.erp-home-btn { margin-right: 10px; }

/* 카드 본문 공통 */
.erp-home-note { flex: none; font-size: 12px; color: #64748b; margin-bottom: 8px; }

/* 달력 */
.erp-home-cal-cap { flex: none; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.erp-home-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-content: start; flex: 1; }
.erp-home-cal-h { text-align: center; font-size: 11px; font-weight: 600; color: #64748b; padding: 4px 0; }
.erp-home-cal-d { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 13px; }
.erp-home-cal-d.is-other { color: #cbd5e1; }
.erp-home-cal-d.is-today { background: #2563eb; color: #fff; font-weight: 600; }
.erp-home-cal-d.has-event::after { content: ''; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: #dc2626; }
.erp-home-cal-d.is-today.has-event::after { background: #fff; }

/* 공지 */
.erp-home-notice { display: flex; flex-direction: column; flex: 1; list-style: none; margin: 0; padding: 0; }
.erp-home-notice-i { display: flex; flex-direction: column; justify-content: center; flex: 1; padding: 10px 0; border-bottom: 1px solid #e2e8f0; }
.erp-home-notice-i:last-child { border-bottom: 0; }
.erp-home-notice-t { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 3px; }
.erp-home-notice-t > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-home-notice-m { font-size: 11px; color: #64748b; }
.erp-home-badge { flex: none; padding: 1px 5px; border-radius: 3px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 600; }

/* 매출 */
/* 고정 높이를 버리고 카드가 준 높이를 채운다. min-height 는 0-size init 가드가 발화할
   최소선이자 축·범례가 뭉개지지 않는 하한 — 크기 변화는 ResizeObserver 가 chart.resize() 로 잇는다 */
.erp-home-chart { width: 100%; flex: 1; min-height: 180px; }
.erp-home-sales-fb { width: 100%; flex: 1; border-collapse: collapse; font-size: 12px; }
.erp-home-sales-fb th, .erp-home-sales-fb td { padding: 3px 6px; border-bottom: 1px solid #e2e8f0; text-align: left; }
.erp-home-sales-fb .is-num { text-align: right; font-variant-numeric: tabular-nums; }

/* 빠른 메뉴 */
.erp-home-quick { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 12px; flex: 1; }
.erp-home-quick-i { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px 8px; border: 0; border-radius: 6px; background: #f1f5f9; color: inherit; font: inherit; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; }
.erp-home-quick-i:hover { background: #2563eb; color: #fff; transform: translateY(-2px); }
.erp-home-quick-ic { font-size: 30px; line-height: 1; }
.erp-home-quick-l { font-size: 13px; font-weight: 500; }

/* 전자결재 */
.erp-home-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; flex: none; margin-bottom: 14px; }
.erp-home-tile { padding: 14px 8px; border-radius: 6px; background: #f1f5f9; text-align: center; }
.erp-home-tile-n { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.erp-home-tile-l { font-size: 11px; color: #64748b; margin-top: 2px; }
.erp-home-tile.is-wait .erp-home-tile-n { color: #dc2626; }
.erp-home-tile.is-ing .erp-home-tile-n { color: #2563eb; }
.erp-home-appr { display: flex; flex-direction: column; flex: 1; list-style: none; margin: 0; padding: 0; }
.erp-home-appr-i { display: flex; align-items: center; flex: 1; gap: 8px; padding: 7px 0; border-bottom: 1px solid #e2e8f0; font-size: 12px; }
.erp-home-appr-i:last-child { border-bottom: 0; }
.erp-home-appr-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-home-appr-s { flex: none; padding: 1px 6px; border-radius: 3px; background: #e2e8f0; font-size: 11px; }
.erp-home-appr-d { flex: none; color: #64748b; font-variant-numeric: tabular-nums; }

/* 식단표 */
.erp-home-menu { width: 100%; flex: 1; border-collapse: collapse; font-size: 12px; }
.erp-home-menu th { padding: 5px 4px; border-bottom: 1px solid #e2e8f0; font-size: 12px; font-weight: 600; color: #64748b; }
.erp-home-menu td { padding: 4px; text-align: center; color: #475569; }
.erp-home-menu th.is-today { background: #2563eb; color: #fff; border-radius: 4px 4px 0 0; }
.erp-home-menu td.is-today { background: #eff6ff; color: #1e293b; font-weight: 500; }