/* design-system.css — SYULS ERP 통일 디자인 시스템
   적용 위치: index.html에서 가장 마지막에 로드 (다른 인라인 스타일 override)
   원칙: 색상/버튼/테이블/카드/입력/알림 통일. 메뉴별 인라인 스타일은 점진적으로 제거 */

/* ───────── 디자인 토큰 ───────── */
:root{
  /* Brand */
  --ds-brand:#0C447C;
  --ds-brand-light:#185FA5;
  --ds-brand-pale:#dbeafe;

  /* Semantic */
  --ds-ok:#16a34a;
  --ds-warn:#d97706;
  --ds-danger:#dc2626;
  --ds-info:#0891b2;

  /* Surface */
  --ds-bg:#f1f5f9;
  --ds-card:#fff;
  --ds-table-head:#f1f5f9;
  --ds-line:#e2e8f0;

  /* Text */
  --ds-ink-1:#0f172a;
  --ds-ink-2:#334155;
  --ds-ink-3:#64748b;
  --ds-ink-4:#94a3b8;

  /* Radius / Shadow */
  --ds-r-sm:6px;
  --ds-r-md:8px;
  --ds-r-lg:12px;
  --ds-shadow-1:0 1px 3px rgba(15,23,42,.06);
  --ds-shadow-2:0 4px 12px rgba(15,23,42,.08);
}

/* ───────── 버튼 통일 (역할별 색상 고정) ───────── */
/* 사장님 결정사항: 저장=녹색, 삭제=빨강, 주요 액션=파랑 */
.btn,
button.btn-sm,
button.btn-primary,
button.btn-success,
button.btn-warning,
button.btn-danger,
button.btn-secondary,
button.btn-ghost{
  border:0;border-radius:var(--ds-r-md);font-weight:600;cursor:pointer;letter-spacing:-.2px;
  transition:transform .1s,box-shadow .1s,opacity .1s;font-family:inherit
}
.btn-primary{background:var(--ds-brand) !important;color:#fff !important}
.btn-success{background:var(--ds-ok) !important;color:#fff !important}
.btn-warning{background:var(--ds-warn) !important;color:#fff !important}
.btn-danger {background:var(--ds-danger) !important;color:#fff !important}
.btn-secondary{background:#475569 !important;color:#fff !important}
.btn-ghost{background:#fff !important;color:var(--ds-ink-2) !important;border:1px solid var(--ds-line) !important}
.btn-ghost:hover{background:#f8fafc !important;border-color:#cbd5e1 !important}

/* 버튼 크기 통일 (사장님 요구: 항목별 크기 통일) */
.btn-sm{padding:6px 12px !important;font-size:12px !important;line-height:1.4 !important;border-radius:var(--ds-r-sm) !important}
.btn-md, .btn:not(.btn-sm):not(.btn-lg){padding:8px 16px;font-size:13px;line-height:1.5;border-radius:var(--ds-r-md)}
.btn-lg{padding:10px 20px !important;font-size:14px !important;line-height:1.5 !important}

button:hover{transform:translateY(-1px);box-shadow:var(--ds-shadow-1)}
button:active{transform:translateY(0)}
button:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ───────── 입력 컨트롤 ───────── */
.form-control{
  padding:7px 10px;border:1px solid var(--ds-line);border-radius:var(--ds-r-sm);
  font-size:13px;color:var(--ds-ink-1);background:#fff;font-family:inherit;
  transition:border-color .15s,box-shadow .15s
}
.form-control:focus{
  border-color:var(--ds-brand-light);outline:none;
  box-shadow:0 0 0 3px rgba(24,95,165,.12)
}
.form-control:read-only,.form-control[readonly]{background:#f1f5f9;color:var(--ds-ink-2)}
.form-control:disabled{background:#f8fafc;color:var(--ds-ink-3);cursor:not-allowed}

/* dirty 상태 (미저장) */
.form-control.dirty,
input.dirty{background:#fff7ed !important;border-color:#fdba74 !important;font-weight:600}

/* 숫자/금액 입력 우측정렬 + tabular-nums */
.form-control.num,
input[type="number"].form-control,
input.amount,
input.qty{
  text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"
}

/* 검색 입력 통일 (사장님 요구: 모든 메뉴에 검색 기능) */
.ds-search{
  padding:7px 12px 7px 32px;border:1px solid var(--ds-line);border-radius:var(--ds-r-sm);
  font-size:13px;color:var(--ds-ink-1);background:#fff
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>")
    no-repeat 10px center;
  width:240px;font-family:inherit;transition:border-color .15s,box-shadow .15s
}
.ds-search:focus{border-color:var(--ds-brand-light);outline:none;box-shadow:0 0 0 3px rgba(24,95,165,.12)}

/* 연/월 셀렉터 폭 통일 */
.form-control.year,
select.year{width:90px !important}
.form-control.month,
select.month{width:74px !important}

/* ───────── 테이블 ───────── */
table.ds-table,
.ds-table{
  width:100%;border-collapse:collapse;font-size:13px;background:#fff
}
.ds-table thead th{
  background:var(--ds-table-head);
  padding:10px 12px;text-align:left;font-weight:700;
  color:var(--ds-ink-2);border-bottom:1px solid var(--ds-line);
  white-space:nowrap;font-size:13px
}
.ds-table tbody td{
  padding:10px 12px;border-bottom:1px solid var(--ds-line);color:var(--ds-ink-1);font-size:13px
}
.ds-table tbody tr:hover{background:#f8fafc}
.ds-table .num{text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.ds-table .center{text-align:center}

/* ───────── 알림 / 배지 ───────── */
.ds-alert{
  padding:12px 16px;border-radius:var(--ds-r-md);font-size:13px;display:flex;
  align-items:center;gap:10px;border-left:4px solid currentColor;line-height:1.55
}
.ds-alert-info   {background:#ecfeff;color:#0e7490}
.ds-alert-success{background:#dcfce7;color:#166534}
.ds-alert-warn   {background:#fef3c7;color:#92400e}
.ds-alert-danger {background:#fee2e2;color:#991b1b}

.ds-badge{
  display:inline-block;padding:3px 10px;border-radius:12px;font-size:11px;
  font-weight:700;letter-spacing:.3px;line-height:1.4
}
.ds-badge-blue  {background:var(--ds-brand-pale);color:var(--ds-brand)}
.ds-badge-green {background:#dcfce7;color:#15803d}
.ds-badge-amber {background:#fef3c7;color:#92400e}
.ds-badge-red   {background:#fee2e2;color:#991b1b}
.ds-badge-gray  {background:#f1f5f9;color:var(--ds-ink-3)}

/* dirty 배너 (cost.js 통일 → 다른 메뉴에도 동일) */
.ds-dirty-banner{
  background:var(--ds-danger);color:#fff;padding:10px 14px;border-radius:var(--ds-r-md);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-weight:700;font-size:13px;animation:ds-pulse 1.5s ease-in-out infinite;margin-bottom:10px
}
.ds-dirty-banner button{
  background:#fff;color:#991b1b;border:0;padding:6px 14px;border-radius:5px;
  font-weight:700;cursor:pointer;font-size:12px
}
@keyframes ds-pulse{0%,100%{opacity:1}50%{opacity:.7}}

/* ───────── 빈 상태 ───────── */
.ds-empty{
  padding:48px 24px;text-align:center;color:var(--ds-ink-4);
  background:#f8fafc;border:1px dashed var(--ds-line);border-radius:var(--ds-r-md);
  font-size:13px;line-height:1.55
}
.ds-empty .ic{font-size:36px;margin-bottom:10px;opacity:.4}
.ds-empty .ttl{font-size:14px;font-weight:700;color:var(--ds-ink-3);margin-bottom:6px}

/* ───────── KPI 카드 ───────── */
.ds-kpi{
  background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-r-md);
  padding:14px 18px;border-top:3px solid var(--ds-brand)
}
.ds-kpi.success{border-top-color:var(--ds-ok)}
.ds-kpi.warn   {border-top-color:var(--ds-warn)}
.ds-kpi.danger {border-top-color:var(--ds-danger)}
.ds-kpi .label{font-size:12px;color:var(--ds-ink-3);font-weight:600;margin-bottom:6px;letter-spacing:.3px}
.ds-kpi .value{font-size:24px;font-weight:800;color:var(--ds-ink-1);letter-spacing:-.5px;line-height:1.1;font-variant-numeric:tabular-nums}
.ds-kpi .sub{font-size:11px;color:var(--ds-ink-3);margin-top:4px}

/* ───────── 페이지 카드 헤더 (메뉴 페이지 공통) ───────── */
.ds-page-card{
  background:#fff;border-radius:var(--ds-r-lg);border:1px solid var(--ds-line);
  box-shadow:var(--ds-shadow-1);overflow:hidden;margin-bottom:14px
}
.ds-page-card-header{
  padding:14px 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-bottom:1px solid var(--ds-line);background:#fff
}
.ds-page-title{font-size:16px;font-weight:700;color:var(--ds-brand);letter-spacing:-.3px}
.ds-spacer{flex:1}

/* ───────── 모달 ───────── */
.ds-modal-box{
  background:#fff;border-radius:var(--ds-r-lg);
  box-shadow:0 20px 60px rgba(15,23,42,.18);
  border:1px solid var(--ds-line);overflow:hidden
}
.ds-modal-box.size-sm{max-width:420px}
.ds-modal-box.size-md{max-width:560px}
.ds-modal-box.size-lg{max-width:780px}
.ds-modal-box.size-xl{max-width:980px}
.ds-modal-head{
  padding:14px 18px;border-bottom:1px solid var(--ds-line);
  font-weight:700;color:var(--ds-brand);font-size:16px;letter-spacing:-.3px
}
.ds-modal-body{padding:18px}
.ds-modal-foot{
  padding:12px 18px;border-top:1px solid var(--ds-line);
  display:flex;justify-content:flex-end;gap:8px;background:#f8fafc
}

/* ───────── 검색 결과 행 강조 (검색어 매칭) ───────── */
.ds-search-hit mark{background:#fef3c7;color:inherit;padding:0 2px;border-radius:2px;font-weight:700}
.ds-search-no-match{display:none !important}

/* ───────── 표 컬럼 정렬 (헤더 클릭) ───────── */
th.ds-sortable{
  position:relative;padding-right:22px !important;
  transition:background .12s
}
th.ds-sortable:hover{background:#e2e8f0 !important}
th.ds-sortable::after{
  content:"";position:absolute;right:8px;top:50%;
  transform:translateY(-50%);
  width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-bottom:5px solid var(--ds-ink-4);
  margin-top:-4px;opacity:.4
}
th.ds-sortable::before{
  content:"";position:absolute;right:8px;top:50%;
  transform:translateY(-50%);
  width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--ds-ink-4);
  margin-top:4px;opacity:.4
}
th.ds-sort-asc{background:#dbeafe !important;color:var(--ds-brand) !important}
th.ds-sort-asc::after{border-bottom-color:var(--ds-brand);opacity:1}
th.ds-sort-asc::before{display:none}
th.ds-sort-desc{background:#dbeafe !important;color:var(--ds-brand) !important}
th.ds-sort-desc::before{border-top-color:var(--ds-brand);opacity:1}
th.ds-sort-desc::after{display:none}