/* ===== ERP1 이카운트 클래식 테마 ===== */
/* item.html 리포트 디자인에 쓴 서체(Noto Sans KR/IBM Plex Mono)가 이뻐서 사이트 전체 기본
   서체로 확장 적용 — @import는 파일 맨 앞에 있어야 적용됨(CSS 스펙 규칙) */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root {
  --bg:       #e0e4ec;
  --surface:  #ffffff;
  --surface2: #f0f2f5;
  --border:   #c8cdd5;
  --accent:   #2d5fa0;
  --accent2:  #155a1a;
  --warn:     #7a4f00;
  --danger:   #a01a1a;
  --text:     #222222;
  --text2:    #445566;
  --text3:    #667788;
  --mono:     'IBM Plex Mono', 'Courier New', Courier, monospace;
  --sans:     'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', system-ui, sans-serif;
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 6px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.10);
  --shadow:    0 2px 8px rgba(0,0,0,0.12);
  --shadow-lg: 2px 2px 8px rgba(0,0,0,0.18);
}
/* 라이트모드 토글 시에도 ERP1 유지 */
body.light-mode {
  --bg:       #e0e4ec;
  --surface:  #ffffff;
  --surface2: #f0f2f5;
  --border:   #c8cdd5;
  --accent:   #2d5fa0;
  --accent2:  #155a1a;
  --warn:     #7a4f00;
  --danger:   #a01a1a;
  --text:     #222222;
  --text2:    #445566;
  --text3:    #667788;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  font-size: 12px;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  animation: pageFadeIn 0.18s ease-out;
}
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }
/* display:none↔flex/block로 여닫는 모달·오버레이 공용 페이드인 — transition은 display 값
   자체를 애니메이션할 수 없어서(뚝 끊겨 보임), display가 none에서 바뀌는 순간 새로 재생되는
   animation을 씀. 각 페이지의 오버레이 규칙에 `animation: fadeInOverlay .15s ease;`만
   추가하면 이 keyframes를 그대로 재사용함(사이트 전체 공용) */
@keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } }

/* ── 공통 배지 ── */
.grade { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; }
.grade-A { background: rgba(52,211,153,0.15); color: var(--accent2); }
.grade-B { background: rgba(79,142,247,0.15); color: var(--accent); }
.grade-C { background: rgba(245,158,11,0.15); color: var(--warn); }
.grade-D { background: rgba(248,113,113,0.15); color: var(--danger); }
.badge { display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 99px; white-space: nowrap; }
.badge.in     { background: rgba(52,211,153,0.12); color: var(--accent2); border: 1px solid rgba(52,211,153,0.25); }
.badge.wait   { background: rgba(245,158,11,0.12);  color: var(--warn);    border: 1px solid rgba(245,158,11,0.25); }
.badge.done   { background: rgba(79,142,247,0.12);  color: var(--accent);  border: 1px solid rgba(79,142,247,0.25); }
.badge.part   { background: rgba(74,85,104,0.2);    color: var(--text3);   border: 1px solid var(--border); }
.badge.coming { background: rgba(248,113,113,0.12); color: var(--danger);  border: 1px solid rgba(248,113,113,0.25); }

/* ── 공통 detail 카드 ── */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.65rem; margin-bottom: 1rem; }
.detail-field { background: var(--surface2); border-radius: 8px; padding: 0.6rem 0.8rem; }
.detail-field.full { grid-column: 1 / -1; }
.detail-field-label { font-size: 0.63rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.28rem; }
body.light-mode .detail-field-label { color: var(--text3); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; }
body.light-mode .detail-field-value { color: var(--text); font-weight: 400; }
body.light-mode .detail-notes { color: var(--text2); line-height: 1.6; }
body.light-mode .modal-title { font-weight: 600; }
body.light-mode .modal-mgmt { color: var(--text3); }
.detail-field-value { font-size: 0.82rem; color: var(--text); font-weight: 500; }
.detail-notes { font-size: 0.79rem; color: var(--text2); line-height: 1.65; white-space: pre-wrap; }

/* ── 토스트 ── */
.toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  font-size: 0.83rem; padding: 0.65rem 1.25rem; border-radius: 10px;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1), opacity 0.3s; opacity: 0; z-index: 100000; white-space: nowrap;
  box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.12));
}
.toast.show  { transform: translateX(-50%) translateY(0); opacity: 1; }
body.light-mode .toast { background: var(--acrylic, rgba(255,255,255,0.9)); backdrop-filter: blur(20px); border-color: rgba(0,0,0,0.1); color: var(--text); }
.toast.success { border-color: var(--accent2); }
.toast.error   { border-color: var(--danger);  }
.toast.warn    { border-color: var(--warn);    }
.toast.loading { border-color: #2d5fa0; color: var(--text); }
.toast.loading::before { content: ''; display: inline-block; width: 10px; height: 10px; border: 2px solid #2d5fa0; border-top-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; margin-right: 7px; vertical-align: middle; }

/* ── 스피너 ── */
@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ── 공용 로딩 애니메이션 (요청사항: "지금 사용중인 로딩 애니메이션이 어디에 몇개 사용중이니"
   → "공용 스타일/함수로 정리해줘") — 예전엔 페이지마다 spinner CSS/keyframe을 각자 복사해서
   썼는데(dashboard.css, inventory.css, item.css, comments-ui.js, dm-chat.js 등 6곳 이상 중복),
   이 파일이 거의 모든 페이지에서 로드되므로 여기 한 곳에 공용 컴포넌트를 두고 새 기능은
   전부 이걸 재사용하도록 함. 기존 페이지별 .spinner/.cp-spinner 등은 그대로 두되 중복
   @keyframes 선언만 제거하고 이 파일의 spin/pulse를 그대로 씀 ── */

/* 원형 스피너 — <div class="sl-spinner"></div>, 크기는 .sm/.lg로 조절 */
.sl-spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(127,127,127,0.25); border-top-color: var(--accent, #2d5fa0);
  border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle;
}
.sl-spinner.sm { width: 10px; height: 10px; border-width: 1.5px; }
.sl-spinner.lg { width: 28px; height: 28px; border-width: 3px; }

/* 가로 진행률 바 — <div class="sl-progress-track"><div class="sl-progress-fill" style="width:40%"></div></div> */
.sl-progress-track { width: 100%; height: 8px; background: var(--surface2, #e2e8f0); border-radius: 99px; overflow: hidden; }
.sl-progress-fill  { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent, #2d5fa0), #4f8ef7); border-radius: 99px; transition: width 0.15s ease; }

/* 화면중앙 대형 업로드 진행률 오버레이 — public/js/upload-progress.js가 이 클래스들로
   DOM을 만들어서 붙였다 뗌(showUploadOverlay/updateUploadOverlay/hideUploadOverlay) */
.sl-upload-overlay { position: fixed; inset: 0; z-index: 999999; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; }
.sl-upload-card { background: var(--surface, #fff); border-radius: 16px; padding: 2rem 2.6rem; min-width: 280px; text-align: center; box-shadow: 0 16px 48px rgba(0,0,0,0.35); }
.sl-upload-label { font-size: 14px; font-weight: 700; color: var(--text, #1a3a6e); margin-bottom: 1.1rem; }
.sl-upload-track { width: 240px; height: 14px; background: var(--surface2, #e2e8f0); border-radius: 99px; overflow: hidden; margin: 0 auto; }
.sl-upload-fill  { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent, #2d5fa0), #4f8ef7); border-radius: 99px; transition: width 0.15s ease; }
.sl-upload-pct   { margin-top: 0.9rem; font-size: 26px; font-weight: 800; color: var(--accent, #2d5fa0); }

/* ── 원형 로딩 오버레이 ── */
/* z-index: 팝업(showModal, 99999)보다 위여야 함 — 요청사항 "할당국내영업 적용시 0% 100% 애니메이션": 저장이
   끝날 때까지 팝업이 열린 채(async onClick) 로딩 화면(예전 9999)을 덮어서 진행률이 안 보였음 */
#globalLoadingOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100001;
  background: var(--bg);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#globalLoadingOverlay.show {
  display: flex;
  animation: overlayFadeIn 0.2s ease forwards;
}
#globalLoadingOverlay.hide {
  display: flex;
  animation: overlayFadeOut 0.45s ease forwards;
}
@keyframes overlayFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes overlayFadeOut { from { opacity: 1; } to { opacity: 0; } }

.loading-circle-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.loading-track {
  fill: none;
  stroke: var(--surface2);
  stroke-width: 7;
}
.loading-progress-circle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 314.16; /* 2 * PI * 50 */
  stroke-dashoffset: 314.16;
  transition: stroke-dashoffset 0.15s ease;
  filter: drop-shadow(0 0 6px rgba(79,142,247,0.55));
}
.loading-center-text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  z-index: 1;
}
.loading-percent {
  font-family: var(--mono);
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
  min-width: 3.5ch;
  text-align: center;
}
.loading-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@keyframes approvalBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── 공용 팝업(모달) 디자인 — 요청사항: "사이트에 사용하는 모든 팝업 디자인 새롭게 만든걸로
   전체 교체하고, 한 화면에 여러개의 팝업이 동시에 뜰수있으니 안겹치도록 미리 조치". 실제 큐
   처리(동시에 여러 개 뜨면 순차적으로 보여주기)는 public/js/modal.js(showModal)가 담당하고,
   여기 있는 클래스는 그 결과물의 시각 스타일만 담당함. 재고관리 카드뷰 안내창에서 쓴 톤을
   그대로 사이트 공용 표준으로 승격시킴 */
/* ※ mobile.html용 복사본이 public/css/modal.css에 있음 — 여기 .skl-modal-* 수정시 같이 고칠 것 */
.skl-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 99999; opacity: 0; pointer-events: none; transition: opacity .15s ease;
  padding: 1rem;
}
.skl-modal-overlay.skl-modal-show { opacity: 1; pointer-events: auto; }
.skl-modal-card {
  background: #fff; border-radius: 14px; padding: 22px 24px;
  width: 420px; max-width: 92vw; max-height: 85vh; overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  color: #1a1a1a; font-family: 'Malgun Gothic', var(--sans, sans-serif);
}
.skl-modal-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; color: #0078d4; }
.skl-modal-sub { font-size: 0.78rem; color: #888; margin-bottom: 14px; }
.skl-modal-list { font-size: 0.78rem; color: #445; line-height: 1.7; padding-left: 18px; margin: 0 0 12px; }
.skl-modal-list li.skl-modal-hl { list-style: none; margin: 2px 0 2px -18px; padding: 4px 8px; background: #fff8e1; border-radius: 6px; }
.skl-modal-list li.skl-modal-hl b { color: #a15c00; }
.skl-modal-check-label { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: #667; margin: 4px 0 10px; cursor: pointer; }
.skl-modal-btn-row { display: flex; gap: 8px; margin-top: 16px; }
.skl-modal-btn-row button { font-family: inherit; }
.skl-modal-btn-primary { flex: 1; padding: 9px; border: none; border-radius: 8px; background: #0078d4; color: #fff; font-weight: 600; cursor: pointer; }
.skl-modal-btn-secondary { padding: 9px 16px; border: 1px solid #ccd6e6; border-radius: 8px; background: #fff; color: #556; font-weight: 600; cursor: pointer; }
@media (max-width: 480px) { .skl-modal-btn-row { flex-wrap: wrap; } .skl-modal-btn-row button { flex: 1 1 auto; white-space: nowrap; } } /* 좁은 화면에서 버튼 3개 이상이면 "확인"이 세로로 찌그러지던 문제(2026-09-30) */

/* stacked 팝업(공지/알림성) — 요청사항: "공지 여러개가 나란히 보이게, 갯수 많으면 겹쳐놔도 되지".
   exclusive 모달(.skl-modal-overlay)과 달리 배경 하나를 여러 카드가 같이 쓰고, 카드들이 flex-wrap
   으로 나란히 놓이다가 다 못 들어가면 자연스럽게 줄바꿈(=겹치듯 아래로 쌓임)됨 */
.skl-modal-stack-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 99990; opacity: 0; pointer-events: none; transition: opacity .15s ease;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 16px; padding: 1.25rem; overflow-y: auto;
}
.skl-modal-stack-overlay.skl-modal-stack-show { opacity: 1; pointer-events: auto; }
.skl-modal-stack-card {
  opacity: 0; transform: scale(0.94); transition: opacity .15s ease, transform .15s ease;
  margin: auto 0; /* flex-wrap 특성상 마지막 줄이 한쪽으로 쏠리지 않게 */
}
.skl-modal-stack-card.skl-modal-show { opacity: 1; transform: scale(1); }