:root {
  --primary-color: #1E5149;
  --primary-hover: #153c36;
  --primary-light: #edf2f1;
  --text-main: #111827;
  --text-muted: #6B7280;
  --border-color: #E5E7EB;
  --bg-color: #F9FAFB;
  --white: #FFFFFF;
  --danger: #dc2626;

  --header-height: 52px;
}

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

body {
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  color: var(--text-main);
  background-color: var(--bg-color);
  line-height: 1.5;
  letter-spacing: -0.02em;
  font-size: 14px;
  overflow: hidden;
}

.app-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
}

/* --- Integrated Header Style --- */
.main-header {
  background-color: var(--white);
  border-bottom: 1px solid var(--border-color);
  z-index: 100;
  height: var(--header-height);
}

.header-container {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1.5rem;
}

.brand h1 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
  margin-right: 1rem;
}
.brand h1 span { color: var(--primary-color); }

/* --- Integrated Nav --- */
.integrated-nav {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-group {
  display: flex;
  align-items: center;
  height: 100%;
}

.gnb-trigger {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  padding: 0 1rem;
  cursor: pointer;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.lnb-shelf {
  display: none; 
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.75rem;
  height: 60%;
  border-left: 1px solid var(--border-color);
  margin-left: 0.25rem;
  animation: fadeIn 0.2s ease-out;
}

.nav-group:hover .lnb-shelf,
.nav-group.is-showing-shelf .lnb-shelf {
  display: flex;
}

.lnb-item {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  white-space: nowrap;
}

.lnb-item.active {
  color: var(--primary-color);
  background-color: var(--primary-light);
  font-weight: 700;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-5px); }
  to { opacity: 1; transform: translateX(0); }
}

/* --- Header Actions --- */
.header-actions { display: flex; gap: 0.3rem; align-items: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0 0.8rem;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  height: 28px;
  line-height: 1;
}

.btn i, .btn svg { width: 12px !important; height: 12px !important; }

.btn-primary { background-color: var(--primary-color); color: var(--white); border: 1px solid var(--primary-color); }
.btn-outline { background-color: transparent; color: var(--text-muted); border: 1px solid var(--border-color); }

/* --- Content Area & Standardized Layout --- */
.content-area {
  flex: 1;
  padding: 2rem; /* benchmark: 좌, 우, 하단 2rem 공백 통일 */
  overflow-y: auto;
  background-color: var(--bg-color);
}

.view-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* --- Search Filter Bar --- */
.search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  background-color: var(--white);
  padding: 1.5rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  align-items: flex-end;
}

.search-item { display: flex; flex-direction: column; gap: 0.4rem; }
.search-item.flex-1 { flex: 1; }
.search-item label { font-size: 11px; font-weight: 800; color: var(--text-muted); }
.search-item input, 
.search-item select {
  height: 32px;
  padding: 0 2.5rem 0 0.75rem; /* Increased right padding for arrow */
  border: 1px solid var(--border-color);
  border-radius: 3px;
  font-size: 13px;
  outline: none;
  appearance: none; /* Modern arrow styling */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

.search-item input {
  padding-right: 0.75rem;
}

.btn-reset {
  height: 32px !important;
  padding: 0 0.8rem !important;
  font-size: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  border-radius: 4px !important;
}

/* --- Table (Box-less Design) --- */
.table-container {
  background-color: var(--white);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  border-left: none;
  border-right: none;
  overflow: auto;
  max-height: calc(100vh - 240px); /* Adjusting for bottom spacing */
}

table { width: 100%; border-collapse: collapse; }
th, td {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  text-align: left;
  white-space: nowrap; /* Force single line for all info */
}
th {
  background-color: #FAFAFA;
  font-weight: 700;
  color: var(--text-muted);
  font-size: 12px;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: inset 0 -1px 0 var(--border-color);
  text-transform: uppercase;
}
td { font-size: 14px; }
tbody tr:hover { background-color: #F9FAFB; }

/* --- Dashboard Style --- */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.stat-card { background-color: var(--white); padding: 1.5rem; border: 1px solid var(--border-color); border-radius: 8px; }
.stat-card .value { font-size: 2.2rem; font-weight: 800; color: var(--primary-color); margin-top: 0.5rem; }
.dashboard-layout-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.dashboard-card { 
  background-color: var(--white); 
  border: 1px solid var(--border-color); 
  border-radius: 8px; 
  padding: 1.5rem; 
  display: flex; 
  flex-direction: column; 
  min-height: 360px; /* Increased height for better chart view */
}
.dashboard-card canvas {
  flex: 1;
  width: 100% !important;
  max-height: 280px;
}
.dashboard-section-title { padding: 0 0 1rem 0; font-size: 1.1rem; font-weight: 700; color: var(--text-main); }

.hidden { display: none !important; }
.text-nowrap { white-space: nowrap; }
.btn-sm { padding: 0.25rem 0.5rem; font-size: 11px; height: 24px; }