/* ============================================================
   투자 대시보드 공용 CSS
   기반: dacomms/dashboard 고객용 화면(/apps)의 디자인 체계
   (팔레트·레이아웃·컴포넌트 값을 그대로 따르고, 다크 전용 리터럴은 변수로 바꿈)
   기본 다크, 라이트는 html[data-theme="light"] 덮어쓰기
   ============================================================ */

:root {
  --bg-base:      #181C1F;
  --bg-surface:   #1D2024;
  --bg-elevated:  #222529;
  --bg-hover:     #2B3036;
  --border:       rgba(255,255,255,0.11);
  --border-light: rgba(255,255,255,0.18);
  --row-line:     rgba(255,255,255,0.04);
  --primary:      #3B82F6;
  --primary-hover:#2563EB;
  --primary-text: #60A5FA;
  --primary-glow: rgba(59,130,246,0.15);
  --nav-active-bg: rgba(59,130,246,0.45);
  --nav-active-text: #EAF2FF;
  --success:      #10B981;
  --warning:      #F59E0B;
  --danger:       #EF4444;
  --text-primary:   #F5F8FF;
  --text-secondary: #D3DAEE;
  --text-muted:     #AEB8D2;
  /* 주가 등락 (한국 관례: 상승 빨강, 하락 파랑) */
  --up:   #F0616D;
  --down: #4C8DF6;
  --sidebar-w:     240px;
  --sidebar-w-col: 60px;
  --header-h:      60px;
  --shadow-dropdown: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-card-hover: 0 4px 20px rgba(0,0,0,0.25);
  --overlay-bg: rgba(0,0,0,0.55);
  --chart-grid: rgba(255,255,255,0.07);
  --tooltip-body: #E0E4F0;
}
html[data-theme="light"] {
  --bg-base:      #F5F7FA;
  --bg-surface:   #FFFFFF;
  --bg-elevated:  #FFFFFF;
  --bg-hover:     #EEF1F6;
  --border:       rgba(15,23,42,0.08);
  --border-light: rgba(15,23,42,0.16);
  --row-line:     rgba(15,23,42,0.05);
  --primary:      #2563EB;
  --primary-hover:#1D4ED8;
  --primary-text: #2563EB;
  --primary-glow: rgba(37,99,235,0.10);
  --nav-active-bg: rgba(37,99,235,0.16);
  --nav-active-text: #2563EB;
  --success:      #059669;
  --warning:      #D97706;
  --danger:       #DC2626;
  --text-primary:   #111827;
  --text-secondary: #374151;
  --text-muted:     #4B5563;
  --up:   #D92D3A;
  --down: #1D5FD8;
  --shadow-dropdown: 0 8px 24px rgba(15,23,42,0.10);
  --shadow-card-hover: 0 4px 20px rgba(15,23,42,0.08);
  --overlay-bg: rgba(15,23,42,0.45);
  --chart-grid: rgba(15,23,42,0.10);
  --tooltip-body: #374151;
}

/* ---------- 기본 ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  background:var(--bg-base); color:var(--text-primary); min-height:100vh; display:flex; font-size:14px; }
a { color:inherit; }
.muted { color:var(--text-muted); }
.num { font-variant-numeric:tabular-nums; }
.num-up { color:var(--up); } .num-down { color:var(--down); } .num-flat { color:var(--text-muted); }

/* ---------- 사이드바 ---------- */
.sidebar { width:var(--sidebar-w); height:100vh; position:fixed; top:0; left:0; background:var(--bg-surface);
  border-right:1px solid var(--border); display:flex; flex-direction:column; z-index:100; transition:width .25s ease; overflow:hidden; }
.sidebar.collapsed { width:var(--sidebar-w-col); }
.sidebar-logo { height:var(--header-h); display:flex; align-items:center; padding:0 14px; border-bottom:1px solid var(--border); gap:10px; flex-shrink:0; }
.brand { display:flex; align-items:center; gap:9px; text-decoration:none; flex:1; min-width:0; }
.brand-mark { width:28px; height:28px; border-radius:8px; background:var(--primary-glow); color:var(--primary-text);
  display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.brand-name { font-size:15px; font-weight:700; white-space:nowrap; }
.sidebar-toggle { width:28px; height:28px; border-radius:7px; border:1px solid var(--border); background:transparent;
  color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sidebar.collapsed .brand-name, .sidebar.collapsed .sidebar-org-text { display:none; }
.sidebar.collapsed .brand { display:none; }   /* 접힌 폭(60px)에는 펼치기 버튼만 */
.sidebar.collapsed .sidebar-logo { justify-content:center; padding:0; }
.sidebar.collapsed .toggle-icon { transform:rotate(180deg); }
.sidebar-org { margin:12px 10px; padding:10px 11px; background:var(--bg-elevated); border-radius:10px; border:1px solid var(--border); }
.sidebar-org-label { font-size:11.5px; color:var(--text-muted); margin-bottom:6px; }
.mode-switch { display:flex; gap:4px; }
.mode-switch a { flex:1; text-align:center; padding:5px 0; border-radius:7px; font-size:13px; font-weight:600;
  color:var(--text-secondary); text-decoration:none; border:1px solid transparent; }
.mode-switch a:hover { background:var(--bg-hover); }
.mode-switch a.active { background:var(--primary-glow); color:var(--primary-text); border-color:rgba(59,130,246,0.22); }
.sidebar.collapsed .sidebar-org { display:none; }
.sidebar-nav { flex:1; overflow-y:auto; overflow-x:hidden; padding:6px 0; }
.nav-section-label { font-size:13px; font-weight:600; color:var(--text-muted); padding:14px 18px 5px; white-space:nowrap; }
.sidebar.collapsed .nav-section-label { visibility:hidden; height:10px; padding:0; }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 10px 9px 18px; margin:1px 7px; border-radius:8px;
  font-size:14px; color:var(--text-secondary); transition:all .18s; text-decoration:none; white-space:nowrap;
  position:relative; border:1px solid transparent; }
.nav-item:hover { background:var(--bg-elevated); color:var(--text-primary); }
.nav-item.active { background:var(--nav-active-bg); color:var(--nav-active-text); font-weight:600; border-color:rgba(59,130,246,0.2); }
.nav-item i { font-size:15px; width:18px; text-align:center; flex-shrink:0; }
.sidebar.collapsed .nav-item { padding:9px; margin:2px 7px; justify-content:center; }
.sidebar.collapsed .nav-label { opacity:0; width:0; overflow:hidden; }
.nav-badge { margin-left:auto; background:var(--danger); color:#fff; font-size:10px; font-weight:700; padding:2px 6px; border-radius:10px; }
.sidebar.collapsed .nav-badge { position:absolute; top:4px; right:6px; padding:1px 4px; }
.sidebar-overlay { display:none; position:fixed; inset:0; background:var(--overlay-bg); z-index:99; }
.sidebar-overlay.show { display:block; }

/* ---------- 본문·상단바 ---------- */
.main-wrap { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; min-width:0;
  overflow-x:hidden; transition:margin-left .25s ease; }
.main-wrap.collapsed { margin-left:var(--sidebar-w-col); }
.topbar { height:var(--header-h); background:var(--bg-surface); border-bottom:1px solid var(--border); display:flex;
  align-items:center; padding:0 24px; gap:10px; position:sticky; top:0; z-index:50; }
.topbar-titles { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-title { font-size:16px; font-weight:700; }
.topbar-subtitle { font-size:12.5px; color:var(--text-muted); font-weight:400; margin-left:6px; }
.topbar-btn { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:var(--bg-elevated); border:1px solid var(--border); color:var(--text-secondary); font-size:15px; cursor:pointer; text-decoration:none; }
.topbar-btn:hover { color:var(--text-primary); background:var(--bg-hover); }
.topbar-sep { width:1px; height:24px; background:var(--border); }
.topbar-meta { font-size:12px; color:var(--text-muted); white-space:nowrap; }
.mobile-menu-btn { display:none; }
.content { padding:24px; }

/* ---------- 레이아웃 그리드 ---------- */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.kpi-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.chart-grid { display:grid; grid-template-columns:2fr 1fr; gap:14px; margin-bottom:20px; }
.bottom-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:14px; margin-bottom:20px; }
.half-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px; }
.stack > * + * { margin-top:20px; }

/* ---------- 카드 ---------- */
.card { background:var(--bg-elevated); border:1px solid var(--border); border-radius:14px; padding:20px; min-width:0; }
.card + .card { margin-top:0; }
.card-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.card-title { font-size:15px; font-weight:700; }
.card-sub { font-size:12px; color:var(--text-muted); margin-top:2px; }
.card.flush { padding:0; overflow:hidden; }
.card.flush .card-header { padding:16px 20px 0; }
.chart-box { position:relative; height:260px; }
.chart-box.tall { height:320px; }
.section-gap { margin-bottom:20px; }

/* KPI 타일 */
.kpi-card { background:var(--bg-elevated); border:1px solid var(--border); border-radius:14px; padding:18px;
  transition:border-color .2s, box-shadow .2s; min-width:0; }
.kpi-card:hover { border-color:var(--border-light); box-shadow:var(--shadow-card-hover); }
.kpi-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.kpi-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-size:15px; background:var(--primary-glow); color:var(--primary-text); }
.kpi-metric { font-size:11.5px; font-weight:600; color:var(--text-secondary); margin-bottom:3px; }
.kpi-value { font-size:24px; font-weight:700; letter-spacing:-0.5px; line-height:1.15; font-variant-numeric:tabular-nums; }
.kpi-label { font-size:12.5px; color:var(--text-muted); margin-top:2px; }
.kpi-sub { font-size:12px; color:var(--text-muted); margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.kpi-change { font-size:12px; font-weight:600; padding:2px 7px; border-radius:5px; }
.bar-mini { height:5px; border-radius:3px; background:var(--bg-hover); margin-top:8px; overflow:hidden; }
.bar-fill { height:100%; border-radius:3px; background:var(--primary); }

/* 상태 배지 (상태는 초록·노랑·빨강, 저알파 배경 + 원색 글자) */
.badge { font-size:11px; font-weight:700; padding:3px 8px; border-radius:6px; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.badge.good { background:rgba(16,185,129,.12); color:var(--success); }
.badge.warn { background:rgba(245,158,11,.12); color:var(--warning); }
.badge.bad  { background:rgba(239,68,68,.12); color:var(--danger); }
.badge.info { background:var(--primary-glow); color:var(--primary-text); }
.badge.neutral { background:var(--bg-hover); color:var(--text-secondary); }
.badge.buy  { background:rgba(240,97,109,.12); color:var(--up); }
.badge.sell { background:rgba(76,141,246,.12); color:var(--down); }

/* 진단 항목 (좌측 색 띠 = 상태) */
.diag-list { display:flex; flex-direction:column; gap:10px; }
.diag-item { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border);
  border-left-width:3px; border-radius:10px; background:var(--bg-surface); }
.diag-item.good { border-left-color:var(--success); }
.diag-item.warn { border-left-color:var(--warning); }
.diag-item.bad  { border-left-color:var(--danger); }
.diag-main { flex:1; min-width:0; }
.diag-title { font-size:13.5px; font-weight:600; }
.diag-desc { font-size:12px; color:var(--text-muted); margin-top:2px; }

/* ---------- 표 ---------- */
.table-responsive { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--border-light) transparent; }
.data-table { width:100%; border-collapse:collapse; font-size:14px; }
.data-table th { padding:10px 12px; text-align:left; font-size:12px; font-weight:600; letter-spacing:.3px;
  color:var(--text-muted); border-bottom:1px solid var(--border); white-space:nowrap; }
.data-table td { padding:10px 12px; color:var(--text-secondary); border-bottom:1px solid var(--row-line); }
.data-table tbody tr:hover td { background:var(--bg-hover); }
.data-table td.num-up { color:var(--up); }
.data-table td.num-down { color:var(--down); }
.data-table td.num-flat { color:var(--text-muted); }
.data-table .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.data-table td.name { color:var(--text-primary); font-weight:600; min-width:110px; }
.data-table td.name a { text-decoration:none; }
.data-table td.name a:hover { color:var(--primary-text); }
.data-table .code { font-size:12px; color:var(--text-muted); font-weight:400; margin-left:4px; }
.card.flush .data-table th:first-child, .card.flush .data-table td:first-child { padding-left:20px; }
.card.flush .data-table th:last-child, .card.flush .data-table td:last-child { padding-right:20px; }

/* ---------- 버튼·입력·탭 ---------- */
.btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:8px; border:none; cursor:pointer;
  font-size:13px; font-weight:600; transition:all .18s; font-family:inherit; text-decoration:none; white-space:nowrap; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-hover); box-shadow:0 0 12px rgba(59,130,246,0.3); }
.btn-ghost { background:var(--bg-elevated); color:var(--text-secondary); border:1px solid var(--border-light); }
.btn-ghost:hover { color:var(--text-primary); background:var(--bg-hover); }
.btn-sm { padding:5px 10px; font-size:12.5px; }
.input { background:var(--bg-base); border:1px solid var(--border-light); border-radius:8px; color:var(--text-primary);
  padding:8px 12px; font-size:14px; font-family:inherit; min-width:0; }
.input:focus { outline:none; border-color:var(--primary); }
.filter-bar { background:var(--bg-elevated); border:1px solid var(--border); border-radius:12px; padding:14px 18px;
  margin-bottom:16px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.filter-bar .spacer { flex:1; }
.seg { display:inline-flex; border:1px solid var(--border-light); border-radius:7px; overflow:hidden; }
.seg a { padding:5px 12px; font-size:13px; text-decoration:none; color:var(--text-muted); background:var(--bg-elevated);
  border-right:1px solid var(--border-light); }
.seg a:last-child { border-right:none; }
.seg a:hover { background:var(--primary-glow); color:var(--primary-text); }
.seg a.active { background:var(--primary); color:#fff; }

/* ---------- 안내·빈 상태·오류 ---------- */
.page-guide { display:flex; gap:10px; align-items:flex-start; background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:10px; padding:14px 18px; margin-bottom:20px; font-size:14px; line-height:1.6; color:var(--text-secondary); }
.page-guide i { color:var(--primary-text); margin-top:3px; }
.empty-state { text-align:center; padding:40px 20px; color:var(--text-muted); font-size:13px; line-height:1.6; }
.empty-state i { font-size:28px; display:block; margin-bottom:10px; opacity:.45; }
.empty-state .empty-title { font-size:14px; font-weight:600; color:var(--text-secondary); margin-bottom:4px; }
.error-card { display:flex; align-items:center; gap:12px; padding:16px; border-radius:10px; background:rgba(239,68,68,0.08);
  border:1px solid rgba(239,68,68,0.2); color:var(--danger); font-size:13px; margin-bottom:20px; }
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--text-secondary); }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.legend i { width:12px; height:2px; border-radius:1px; display:inline-block; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:13.5px; }
.kv dt { color:var(--text-muted); }
.kv dd { color:var(--text-primary); font-variant-numeric:tabular-nums; }

/* ---------- 로그인 ---------- */
body.login-page { align-items:center; justify-content:center; padding:16px; }
.login-card { width:100%; max-width:380px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:16px; padding:28px; }
.login-card h1 { font-size:18px; font-weight:700; margin:14px 0 4px; }
.login-card p { font-size:13px; color:var(--text-muted); margin-bottom:20px; }
.login-card .input { width:100%; margin-bottom:12px; }
.login-card .btn { width:100%; justify-content:center; padding:10px; }

/* ---------- 반응형 (기본 규칙보다 뒤에 둬야 덮어씀) ---------- */
@media (min-width:769px) {
  .topbar { position:fixed; top:0; right:0; left:var(--sidebar-w); transition:left .25s ease; }
  .main-wrap.collapsed .topbar { left:var(--sidebar-w-col); }
  .content { padding-top:calc(var(--header-h) + 24px); }
}
@media (max-width:1200px) { .kpi-grid, .kpi-grid.cols-3 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:1000px) { .chart-grid, .bottom-grid, .half-grid { grid-template-columns:1fr; } }
@media (max-width:768px) {
  .sidebar { transform:translateX(-240px); width:240px !important; transition:transform .25s ease; }
  .sidebar.mobile-open { transform:translateX(0); box-shadow:4px 0 24px rgba(0,0,0,0.5); }
  .sidebar.collapsed .brand-name, .sidebar.collapsed .sidebar-org-text, .sidebar.collapsed .nav-label { display:initial; opacity:1; width:auto; }
  .main-wrap, .main-wrap.collapsed { margin-left:0; padding-top:var(--header-h); }
  .kpi-grid, .kpi-grid.cols-3 { grid-template-columns:1fr 1fr; }
  .content { padding:16px; }
  .mobile-menu-btn { display:flex !important; }
  .topbar { position:fixed; top:0; left:0; right:0; padding:0 16px; }
  .sidebar-toggle, .topbar-meta, .topbar-subtitle { display:none; }
}
@media (max-width:480px) { .kpi-grid, .kpi-grid.cols-3 { grid-template-columns:1fr; } }