/* ====== 프로핏 그린 테마 (Profit Green) ====== */
:root {
  --bg-color: #f0fdf4; /* 아주 연한 민트 배경 */
  --sidebar-bg: #ffffff;
  --card-bg: #ffffff;
  --border-color: #dcfce7; /* 연한 그린 보더 */
  --accent-color: #059669; /* 에메랄드 그린 (메인) */
  --accent-hover: #047857; /* 다크 그린 (호버) */
  --text-main: #1e293b; /* 짙은 네이비 (가독성) */
  --text-sub: #64748b; /* 회색 (부수적 텍스트) */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05);
}

body {
  font-family: 'Spoqa Han Sans Neo', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-main);
  margin: 0;
  overflow-x: hidden;
}

/* Bootstrap Overrides */
.modal-content { background-color: var(--card-bg); border: 1px solid var(--border-color); box-shadow: var(--shadow-md); }
.modal-title-custom { color: var(--accent-color); font-weight: 800; }
.form-control { background-color: #fff; border: 1px solid #e2e8f0; color: var(--text-main); font-size: 0.9rem !important; }
.form-control:focus { border-color: var(--accent-color); box-shadow: 0 0 0 0.25rem rgba(5, 150, 105, 0.2); }

.card-icon { width: 48px; height: 48px; stroke-width: 2.5px; margin-bottom: 10px; transition: transform 0.2s ease; }
.hover-card:hover .card-icon { transform: scale(1.1); }

/* ====== 레이아웃 ====== */
.header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; background: var(--card-bg); border-bottom: 1px solid var(--border-color);
  position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm);
}

/* ====== 헤더 로고 스타일 ====== */
.header-logo {
  height: 28px; /* 헤더 높이에 맞춘 적절한 크기 */
  width: auto;
  object-fit: contain;
  border-radius: 6px; /* 로고 모서리를 살짝 부드럽게 */
}
.profile-wrap {
  display: flex;
  align-items: center;
  gap: 5px; 
}
.profile-name { font-size: 1.1rem; font-weight: 700; color: var(--accent-color); }
.clock-text { color: var(--accent-color); font-family: monospace; font-weight: 700; }
.container-flex { display: flex; min-height: calc(100vh - 73px); }

/* ====== 사이드바 ====== */
.sidebar {
  width: 240px; background: var(--sidebar-bg); border-right: 1px solid var(--border-color);
  padding: 24px 0; flex-shrink: 0;
}
.sidebar-menu { list-style: none; padding: 0 12px; margin: 0; }
.sidebar-menu li { margin-bottom: 8px; }
.sidebar-menu a, .sidebar-menu a:visited {
  display: block; padding: 12px 16px; border-radius: 8px;
  color: var(--text-sub) !important; /* 기본 회색 고정 */
  text-decoration: none; font-weight: 500; transition: 0.2s; cursor: pointer;
}

.sidebar-menu a:hover, .sidebar-menu a.active {
  background: #ecfdf5; 
  color: var(--accent-color) !important;
  font-weight: 700;
}

/* 사이드바 닫기 버튼 기본 숨김 */
.btn-close-sidebar {
  display: none;
}

/* ====== 메인 콘텐츠 ====== */
.main { flex: 1; padding: 32px; overflow-y: auto; }

/* 카드 스타일 */
.stat-card {
  background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 24px;
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px;
  box-shadow: var(--shadow-sm); transition: transform 0.2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-title { font-size: 0.95rem; color: var(--text-sub); font-weight: 600; }
.stat-value { font-size: 2rem; font-weight: 800; color: var(--text-main); margin: 0; }

/* 테이블 및 박스 스타일 */
.content-box { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 24px; margin-top: 24px; box-shadow: var(--shadow-sm); }
.table { color: var(--text-main); margin-bottom: 0; }
.table th { background: #f0fdf4; color: var(--accent-color); border-bottom: 1px solid var(--border-color); border-top: none; font-weight: 700; }
.table td { border-bottom: 1px solid #e2e8f0; vertical-align: middle; background: var(--card-bg); }
.table-hover tbody tr:hover td { background-color: #f8fafc; }

/* 배지 및 텍스트 유틸리티 */
.badge-soft { padding: 4px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
.status-wait { background: #dcfce7; color: #15803d; }
.status-done { background: #f1f5f9; color: #64748b; }
.profit-plus { color: #dc2626; font-weight: 700; font-size: 0.85rem; }
.profit-minus { color: #2563eb; font-weight: 700; font-size: 0.85rem; }

/* 버튼 및 입력창 */
.btn-primary-custom { background: var(--accent-color); color: #fff; font-weight: 700; border: none; transition: background 0.2s; }
.btn-primary-custom:hover { background: var(--accent-hover); color: #fff; }
.input-interest { background: #f8fafc; border: 1px solid #e2e8f0; color: var(--text-main); width: 100%; padding: 6px; text-align: right; border-radius: 6px; font-weight: 600; }
.input-interest:focus { outline: 2px solid var(--accent-color); background: #fff; }

/* placeholder 스타일 공통 적용 */
input::placeholder {
  font-size: 0.8rem;
  color: #b0b8c4;  
  opacity: 0.8;
}

/* ====== 차트 가로 스크롤 레이아웃 ====== */
.chart-scroll-wrapper {
  width: 100%;
  overflow-x: auto;   /* 가로 스크롤은 필요할 때만 노출 */
  overflow-y: hidden; /* 불필요한 세로 스크롤 완전 차단 */
  -webkit-overflow-scrolling: touch;
}

.chart-container-inner {
  height: 300px; 
  position: relative;
}

.btn-demo-exit { color: #f97316 !important; border-color: #f97316 !important; background-color: transparent !important; font-weight: 600; transition: all 0.2s ease; }
.btn-demo-exit:hover { background-color: #f97316 !important; color: #ffffff !important; }

/* 반응형 */
@media (max-width: 768px) {
  .header {
    flex-direction: column;    /* 위아래 두 줄로 강제 분리 */
    align-items: flex-start;   /* 좌측 정렬 */
    gap: 12px;                 /* 두 줄 사이의 간격 */
    padding: 20px 20px;
  }

  .header > div:last-child {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .container-flex { flex-direction: column; }
  .sidebar {
    position: fixed;      
    top: 0;               
    left: 0;
    width: 260px;         
    height: 100vh;        
    z-index: 1100;
    background: var(--sidebar-bg);
    box-shadow: 10px 0 20px rgba(0,0,0,0.1);
    padding-top: 80px;
    display: none;
    border-right: 1px solid var(--border-color);
  }
  
  .sidebar.open { display: block; }
  .btn-close-sidebar {
    display: block;
    position: absolute;
    top: 15px;      
    left: 15px; 
    background: none;
    border: none;
    font-size: 1.5rem; 
    color: var(--accent-color);
    line-height: 1;
    cursor: pointer;
    z-index: 1200;
    padding: 5px;   
  }

  .main { padding: 16px; }
  .stat-value { font-size: 1.6rem; }
}

.hamburger { display: none; background: none; border: none; flex-direction: column; justify-content: center; gap: 4px; cursor: pointer; }
.hamburger span { width: 18px; height: 2px; background: var(--accent-color); border-radius: 2px; }
@media (max-width: 768px) { .hamburger { display: flex; } }