/* ============================================================
   유성엔텍 시스템 — Design System v2
   deep-forest sidebar · white cards · emerald brand
   ============================================================ */
:root {
  /* brand */
  --brand-50:  #ecfdf7;
  --brand-100: #d1faec;
  --brand-200: #a5f3d9;
  --brand-400: #2dd4a7;
  --brand-500: #10b98a;
  --brand-600: #0d9273;
  --brand-700: #0f7663;
  --brand-800: #115e51;

  /* ink */
  --ink-900: #0f1c1a;
  --ink-700: #334c48;
  --ink-500: #5e716e;
  --ink-400: #8a9a97;

  /* surfaces */
  --page-bg:   #f4f7f6;
  --card-bg:   #ffffff;
  --line:      #e4eae8;
  --line-soft: #eef2f1;

  /* sidebar */
  --side-bg:     #0e1f1b;
  --side-bg-2:   #132a24;
  --side-ink:    #b8ccc6;
  --side-ink-dim:#6d8580;
  --side-active: #10b98a;

  /* data-viz (validated: CVD ΔE 21.2) */
  --viz-sales:  #2a78d6;  /* 매출 */
  --viz-cost:   #e34948;  /* 매입 */
  --viz-margin: #1baf7a;  /* 마진 */
  --viz-jiip:   #8a9a97;  /* 지입(보조) */
  --viz-grid:   #e7ebea;
  --viz-axis:   #8a9a97;

  /* status */
  --good:     #0ca30c;
  --warning:  #b97d0a;
  --critical: #d03b3b;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(15, 28, 26, .05);
  --shadow-md: 0 1px 3px rgba(15, 28, 26, .06), 0 8px 24px -12px rgba(15, 28, 26, .12);
  --font: 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'Segoe UI', 'Malgun Gothic', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--page-bg);
  color: var(--ink-900);
  line-height: 1.55;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

.app-container { display: flex; min-height: 100vh; }

/* ============ 사이드바 ============ */
.sidebar {
  width: 240px;
  background: linear-gradient(180deg, var(--side-bg) 0%, var(--side-bg-2) 100%);
  color: var(--side-ink);
  display: flex;
  flex-direction: column;
  position: fixed;
  height: 100vh;
  overflow-y: auto;
  z-index: 10;
}

.logo {
  padding: 22px 20px 18px;
  display: flex;
  align-items: center;
  gap: 11px;
}

.logo .logo-mark {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 15px;
  letter-spacing: -0.5px;
  box-shadow: 0 4px 12px -4px rgba(16, 185, 138, .5);
  flex-shrink: 0;
}

.logo h1 {
  font-size: 16px;
  font-weight: 700;
  color: #f2f7f5;
  letter-spacing: -0.2px;
}

.logo .co-sub {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--side-ink-dim);
  letter-spacing: .4px;
  margin-top: 1px;
}

.menu { list-style: none; flex: 1; padding: 6px 12px; }

.menu-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .8px;
  color: var(--side-ink-dim);
  padding: 16px 10px 7px;
  text-transform: uppercase;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9.5px 11px;
  margin: 1px 0;
  color: var(--side-ink);
  text-decoration: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .15s, color .15s;
  position: relative;
}

.menu-item svg {
  width: 17px; height: 17px;
  flex-shrink: 0;
  stroke: currentColor;
  opacity: .75;
}

.menu-item:hover { background: rgba(255,255,255,.06); color: #e9f2ef; }

.menu-item.active {
  background: rgba(16, 185, 138, .14);
  color: #7ce8c3;
  font-weight: 600;
}
.menu-item.active svg { opacity: 1; }
.menu-item.active::before {
  content: '';
  position: absolute;
  left: -12px; top: 20%;
  height: 60%; width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--side-active);
}

.divider { height: 1px; background: rgba(255,255,255,.07); margin: 12px 10px; }

.footer-info {
  padding: 16px 22px;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: 11px;
  color: var(--side-ink-dim);
  line-height: 1.7;
}

/* ============ 메인 콘텐츠 ============ */
.main-content {
  margin-left: 240px;
  flex: 1;
  padding: 34px 38px 48px;
  width: calc(100% - 240px);
}

/* 서브페이지(iframe 내부): 사이드바 없음 */
.no-sidebar .main-content { margin-left: 0; width: 100%; }

.page-header { margin-bottom: 26px; }

.page-header .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .6px;
  color: var(--brand-600);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.page-header h2 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--ink-900);
  margin-bottom: 5px;
}

.subtitle { color: var(--ink-500); font-size: 13.5px; }

/* ============ 카드 ============ */
.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 18px;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}

a.card-link { text-decoration: none; color: inherit; display: block; }
.card.hoverable:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.card-header {
  padding: 16px 20px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-header .card-ico {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--brand-50);
  color: var(--brand-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.card-header .card-ico svg { width: 17px; height: 17px; }

.card-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.2px;
}

.card-body { padding: 14px 20px 20px; }
.card-body p { margin-bottom: 12px; color: var(--ink-500); font-size: 13px; }

.card-body ul {
  margin: 10px 0 14px;
  padding-left: 2px;
  list-style: none;
  color: var(--ink-700);
  font-size: 12.5px;
}
.card-body ul li {
  margin: 5px 0;
  padding-left: 18px;
  position: relative;
}
.card-body ul li::before {
  content: '';
  position: absolute;
  left: 2px; top: 7px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand-400);
}

.note { font-size: 12px; color: var(--ink-400); margin-top: 10px; }

/* ============ 스탯 타일 ============ */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.stat-tile {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px 14px;
}

.stat-tile .label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-500);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
}
.stat-tile .label svg { width: 13px; height: 13px; opacity: .6; }

.stat-tile .value {
  font-size: 25px;
  font-weight: 750;
  letter-spacing: -0.6px;
  color: var(--ink-900);
  line-height: 1.15;
}
.stat-tile .value .unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-400);
  margin-left: 3px;
  letter-spacing: 0;
}
.stat-tile.accent .value { color: var(--brand-600); }

/* 구형 마크업 호환 */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.stat-item { display: flex; flex-direction: column; gap: 4px; }
.stat-item .label { font-size: 12px; color: var(--ink-500); }
.stat-item .value { font-size: 21px; font-weight: 700; color: var(--ink-900); letter-spacing: -0.4px; }

.info-card { grid-column: 1 / -1; }

/* ============ 버튼 ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  background: #fff;
  color: var(--ink-700);
  border: 1px solid var(--line);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
  box-shadow: var(--shadow-sm);
  line-height: 1.4;
}
.btn:hover { border-color: var(--brand-400); color: var(--brand-700); background: var(--brand-50); }

.btn-primary {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
}
.btn-primary:hover {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}

.btn-danger { background: var(--critical); border-color: var(--critical); color: #fff; }
.btn-danger:hover { background: #b52f2f; border-color: #b52f2f; color: #fff; }

.button-group { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============ 필터 바 ============ */
.filter-bar {
  background: var(--card-bg);
  border: 1px solid var(--line);
  padding: 16px 20px;
  border-radius: var(--radius);
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}

.filter-group { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; }

.filter-item { display: flex; flex-direction: column; gap: 5px; }

.filter-item label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-500);
}

.filter-item input,
.filter-item select {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--ink-900);
  min-width: 150px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}

.filter-item input:focus,
.filter-item select:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(16, 185, 138, .13);
}

.filter-item input[type="checkbox"] {
  min-width: 0;
  width: 15px; height: 15px;
  accent-color: var(--brand-600);
  cursor: pointer;
}

/* ============ 그리드 컨테이너 ============ */
.grid-container {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.grid-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.grid-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.2px;
}

.grid-header .count {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-700);
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  padding: 3px 10px;
  border-radius: 99px;
}

#dataGrid { width: 100%; height: 600px; }

/* ============ ag-Grid 테마 커스텀 ============ */
.ag-theme-alpine {
  --ag-font-family: var(--font);
  --ag-font-size: 13px;
  --ag-foreground-color: var(--ink-900);
  --ag-secondary-foreground-color: var(--ink-500);
  --ag-header-foreground-color: var(--ink-500);
  --ag-header-background-color: #f8faf9;
  --ag-background-color: #ffffff;
  --ag-odd-row-background-color: #ffffff;
  --ag-border-color: var(--line-soft);
  --ag-row-border-color: var(--line-soft);
  --ag-row-hover-color: var(--brand-50);
  --ag-selected-row-background-color: #e9fbf4;
  --ag-checkbox-checked-color: var(--brand-600);
  --ag-range-selection-border-color: var(--brand-500);
  --ag-alpine-active-color: var(--brand-600);
  --ag-borders: none;
  --ag-header-column-resize-handle-color: var(--line);
}
.ag-theme-alpine .ag-header-cell-label { font-weight: 600; font-size: 12px; }
.ag-theme-alpine .ag-root-wrapper { border: none; }

/* 하단 고정 합계행 */
.ag-theme-alpine .ag-floating-bottom {
  border-top: 2px solid var(--brand-200);
  font-weight: 700;
}
.ag-theme-alpine .ag-floating-bottom .ag-cell { background: #f4faf8; }

/* ============ 업로드 영역 ============ */
.upload-area {
  background: var(--card-bg);
  border: 1.5px dashed #c8d6d2;
  border-radius: var(--radius);
  padding: 56px 40px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
}
.upload-area:hover { border-color: var(--brand-500); background: #fbfefd; }
.upload-area.dragover { border-color: var(--brand-500); background: var(--brand-50); }

.upload-area .up-ico {
  width: 52px; height: 52px;
  margin: 0 auto 16px;
  border-radius: 14px;
  background: var(--brand-50);
  color: var(--brand-600);
  display: flex; align-items: center; justify-content: center;
}
.upload-area .up-ico svg { width: 24px; height: 24px; }

.upload-area h3 { font-size: 16px; font-weight: 700; color: var(--ink-900); margin-bottom: 6px; }
.upload-area p { color: var(--ink-500); font-size: 13px; }
.upload-area input[type="file"] { display: none; }

/* 진행 바 */
.progress-track {
  background: var(--line-soft);
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
  margin-top: 12px;
}
.progress-fill {
  background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
  height: 100%;
  width: 0%;
  border-radius: 99px;
  transition: width .3s;
}

/* ============ 차트 ============ */
.chart-container {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  margin-top: 18px;
}
.chart-container h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 14px;
  letter-spacing: -0.2px;
}
.chart-container canvas { max-height: 380px; }

/* ============ 알림 ============ */
.alert {
  padding: 11px 15px;
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
  font-size: 13px;
  border: 1px solid;
  display: flex;
  align-items: center;
  gap: 8px;
}
.alert-info    { background: #eff8ff; color: #1c5cab; border-color: #cde2fb; }
.alert-success { background: #effaf3; color: #116329; border-color: #c9ecd4; }
.alert-warning { background: #fff8e8; color: #8a5b00; border-color: #f5e3b0; }

/* ============ 모달 ============ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 28, 26, .45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.modal-box {
  background: #fff;
  padding: 26px 28px;
  border-radius: 14px;
  max-width: 420px;
  width: calc(100% - 48px);
  box-shadow: 0 24px 64px -16px rgba(15, 28, 26, .3);
}
.modal-box h3 { margin-bottom: 12px; font-size: 16px; }
.modal-box p { color: var(--ink-500); font-size: 13.5px; }

/* ============ 뷰포트 맞춤 레이아웃 (페이지 스크롤 제거, 스크롤은 그리드 내부 하나만) ============ */
body.fit-page { height: 100vh; overflow: hidden; }
body.fit-page .app-container { height: 100%; }
body.fit-page .main-content {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  padding-bottom: 22px;
}
body.fit-page .page-header,
body.fit-page .filter-bar,
body.fit-page .alert,
body.fit-page .stat-row,
body.fit-page .card,
body.fit-page .tab-bar { flex-shrink: 0; }

/* 남은 높이를 채우는 그리드 컨테이너 */
.grid-container.fill {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.grid-container.fill .grid-header { flex-shrink: 0; }
.grid-container.fill > .ag-theme-alpine { flex: 1; min-height: 0; }
body.fit-page #dataGrid { height: auto; }

/* 남은 높이를 채우는 차트 컨테이너 */
.chart-container.fill {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-top: 0;
}
.chart-container.fill .chart-wrap { position: relative; flex: 1; min-height: 0; }
.chart-container.fill canvas { max-height: none; }

/* 필터바 우측 인라인 요약 스탯 (별도 타일 행 없이 필터와 같은 줄) */
.filter-flex {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  flex-wrap: wrap;
}
.stat-inline-row { display: flex; gap: 30px; align-items: end; padding: 0 8px 3px 0; flex-wrap: wrap; }
.stat-inline .label { display: block; font-size: 12px; font-weight: 500; color: var(--ink-500); margin-bottom: 2px; }
.stat-inline .value { font-size: 21px; font-weight: 750; letter-spacing: -.5px; color: var(--ink-900); line-height: 1.2; white-space: nowrap; }
.stat-inline .value .unit { font-size: 12px; font-weight: 500; color: var(--ink-400); margin-left: 2px; letter-spacing: 0; }
.stat-inline.accent .value { color: var(--brand-600); }

/* 그리드 카드 헤더 안 인라인 탭 (별도 탭 행 제거용) */
.tab-bar.inline { margin-bottom: 0; border: none; box-shadow: none; background: transparent; padding: 0; }
.grid-note { font-size: 12px; color: var(--ink-400); }

/* 그리드 카드 안 차트 영역 */
.grid-container.fill > .chart-wrap { flex: 1; min-height: 0; position: relative; padding: 14px 18px 8px; }

/* ============ 탭 바 ============ */
.tab-bar {
  display: flex;
  gap: 4px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px;
  width: max-content;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.tab-btn {
  padding: 8px 20px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-500);
  cursor: pointer;
  transition: all .15s;
}
.tab-btn:hover:not(.active) { background: var(--brand-50); color: var(--brand-700); }
.tab-btn.active { background: var(--brand-600); color: #fff; }

/* ============ 반응형 ============ */
@media (max-width: 768px) {
  .sidebar { width: 62px; }
  .logo h1, .menu-item span:not(.icon), .menu-label, .footer-info { display: none; }
  .menu-item { justify-content: center; padding: 11px; }
  .main-content { margin-left: 62px; width: calc(100% - 62px); padding: 20px; }
  .no-sidebar .main-content { margin-left: 0; width: 100%; }
  .dashboard { grid-template-columns: 1fr; }
  .filter-group { flex-direction: column; align-items: stretch; }
  .filter-item input, .filter-item select { width: 100%; }
}