:root {
  --bg-900: #0f172a;
  --bg-800: #040b1b;
  --bg-700: #1a2436;
  --bg-600: #232e42;
  --bg-500: #303964;
  --accent-blue:    #3b82f6;
  --accent-cyan:    #06b6d4;
  --accent-emerald: #10b981;
  --accent-violet:  #8b5cf6;
  --accent-amber:   #f59e0b;
  --accent-red:     #ef4444;
  --text-primary:   #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted:     #475569;
  --border: #2a3458;
}

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

body {
  background: var(--bg-900);
  color: var(--text-primary);
  font-family: 'Noto Sans KR', sans-serif;
  min-height: 100vh;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
body.loaded { opacity:1; transform:translateY(0); }

body::-webkit-scrollbar       { width:8px; }
body::-webkit-scrollbar-thumb { background:#1a2436; border:1px solid var(--border); border-radius:4px; }
body::-webkit-scrollbar-track { background:var(--bg-900); }

/* ── 페이지 래퍼 ── */
.page-wrapper { padding:24px; }

/* ── 헤더 ── */
.mp-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:28px; padding-bottom:20px;
  border-bottom:1px solid var(--border);
}
.mp-header-left  { display:flex; align-items:center; gap:14px; }
.mp-header-right { display:flex; align-items:center; gap:10px; }

.mp-logo { font-size: 40px; margin-left:20px; }
.mp-logo i { color: #0ec95e; }

.mp-title    { font-size:20px; font-weight:700; color:var(--text-primary); letter-spacing:-0.3px; }
.mp-subtitle { font-size:14px; color:var(--text-secondary); margin-top:2px; }

.live-badge {
  display:flex; align-items:center; gap:6px;
  background:rgba(16,185,129,0.12); border:1px solid rgba(16,185,129,0.3);
  border-radius:5px; padding:5px 12px;
  font-size:14px; color:var(--accent-emerald); font-weight:500;
}
.live-dot {
  width:7px; height:7px; background:var(--accent-emerald);
  border-radius:50%; animation:pulse 2s infinite;
}
.mp-clock {
  font-size:14px;
  color:var(--text-secondary); background:var(--bg-700);
  padding:6px 12px; border-radius:4px; border:1px solid var(--border);
}

@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.5; transform:scale(0.8); }
}

/* ── 섹션 라벨 ── */
.section-label {
  display:flex; align-items:center; gap:8px;
  margin-bottom:14px; margin-top:24px;
}
.section-label:first-of-type { margin-top:0; }
.section-dot { width:4px; height:16px; border-radius:2px; }
.section-label span {
  font-size:14px; font-weight:500; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--text-muted);
}

/* ── 컨트롤 바 ── */
.control-bar {
  background:var(--bg-800); 
  border:1px solid var(--border);
  border-radius:5px; 
  padding:18px 22px;
  display:flex; 
  align-items:center; 
  justify-content:space-between;
  margin-bottom:4px;
  position:relative; 
  overflow:hidden;
}
.control-bar::before {
  
}
.control-bar-left  { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.control-bar-right { display:flex; align-items:center; gap:14px; }

/* ── 뱃지 ── */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 12px;
  background:var(--bg-700); border:1px solid var(--border);
  border-radius:4px; font-size:14px; color:var(--text-secondary);
}
.ok   { color:var(--accent-emerald); border-color:rgba(16,185,129,0.3);  background:rgba(16,185,129,0.06);  }
.warn { color:var(--accent-amber);   border-color:rgba(245,158,11,0.3);  background:rgba(245,158,11,0.06);  }
.err  { color:var(--accent-red);     border-color:rgba(239,68,68,0.3);   background:rgba(239,68,68,0.06);   }

/* ── select ── */
select {
  background:var(--bg-700); color:var(--text-primary);
  border:1px solid var(--border); border-radius:4px;
  padding:6px 12px; font-size:14px; outline:none;
  font-family:'Noto Sans KR',sans-serif; cursor:pointer;
  transition:border-color 0.2s;
}
select:focus { border-color:var(--accent-blue); }

/* ── 알림음 토글 ── */
.sound-label {
  display:flex; align-items:center; gap:6px;
  font-size:14px; color:var(--text-secondary); cursor:pointer;
}

/* ── 요약 카드 ── */
.summary-card {
  background:var(--bg-800); border:1px solid var(--border);
  border-radius:5px; padding:22px 26px;
  display:flex; gap:0; margin-bottom:4px;
  position:relative; overflow:hidden;
}
.summary-card::before {
  
}
.summary-item {
  flex:1; padding:0 24px;
  border-right:1px solid var(--border);
}
.summary-item:first-child { padding-left:0; }
.summary-item:last-child  { border-right:none; }
.summary-label {
  font-size:14px; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:1px; margin-bottom:10px;
}
.summary-value {
  font-size:26px; font-weight:700; font-variant-numeric:tabular-nums;
  letter-spacing:-1px; color:var(--text-primary);
}
.summary-item:nth-child(1) .summary-label { color:var(--accent-cyan); }
.summary-item:nth-child(1) .summary-value { color:var(--accent-cyan); }
.summary-item:nth-child(2) .summary-label { color:var(--accent-emerald); }
.summary-item:nth-child(3) .summary-label { color:var(--accent-amber); }
.summary-item:nth-child(4) .summary-label { color:var(--accent-violet); }

/* ── 차트 영역 ── */
.chart-row {
  display:flex; gap:14px; margin-bottom:4px;
}
.chart-wrap {
  flex:1; background:var(--bg-800); border:1px solid var(--border);
  border-radius:5px; padding:14px 16px;
  position:relative; overflow:hidden;
}

#chart-price, #chart-spread, #chart-pressure {
    border: 1px solid var(--border);
}

.chart-label {
  font-size:14px; color:var(--text-muted); font-weight:600;
  letter-spacing:0.8px; text-transform:uppercase;
}
canvas { width:100%; height:56px; display:block; border-radius:4px; background:var(--bg-900); }

/* ── 테이블 그리드 ── */
.tables-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:14px; margin-top:4px;
}

.table-wrap {
    background:var(--bg-800); 
    border:1px solid var(--border);
    border-radius:5px; 
    overflow:hidden;
    height: 665px;        /* 높이 고정 (필수) */
    overflow-y: auto;     /* 세로 내용이 넘칠 때만 스크롤바 생성 */
    overflow-x: hidden;   /* 가로 스크롤은 숨김 (선택) */
}


table { 
    width:100%; 
    border-collapse:collapse; 
    font-size:14px; 
    table-layout:fixed; 
}

.section-header th {
  background:var(--bg-700) !important;
  color:var(--text-primary) !important;
  font-size:14px; padding:12px 15px; text-align:center;
  font-weight:600; letter-spacing:1px; text-transform:uppercase;
  border-bottom:1px solid var(--border);
}
th, td {
  border:none; border-bottom:1px solid rgba(48,57,100,0.35);
  padding:10px 14px; transition:all 0.4s ease;
  height:40px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
th {
  background:var(--bg-800); color:var(--text-muted);
  width:140px; text-align:left; font-weight:500;
  font-size:14px; text-transform:uppercase;
}
td {
  background:var(--bg-800); font-variant-numeric:tabular-nums;
  color:var(--text-secondary);
}
tr:last-child th, tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--bg-700); color:var(--text-primary); }

/* ── 가격 컬러 ── */
.price-base   { color:var(--text-secondary); }
.price-up     { color:#34d399 !important; }
.price-down   { color:#f87171 !important; }
.rate-positive{ color:var(--accent-cyan) !important; }
.rate-negative{ color:var(--accent-amber) !important; }
.volume-base  { color:var(--text-muted); }
.volume-surge { color:#facc15 !important; font-weight:bold; text-shadow:0 0 10px rgba(250,204,21,0.4); }

/* ── 임팩트 글로우 ── */
.glow-up      { box-shadow:0 0 12px rgba(52,211,153,0.35); background:rgba(52,211,153,0.08) !important; color:#34d399 !important; }
.glow-down    { box-shadow:0 0 12px rgba(248,113,113,0.35); background:rgba(248,113,113,0.08) !important; color:#f87171 !important; }
.glow-big-up  { box-shadow:0 0 24px rgba(52,211,153,0.6); background:rgba(52,211,153,0.15) !important; color:#34d399 !important; font-weight:900; }
.glow-big-down{ box-shadow:0 0 24px rgba(248,113,113,0.6); background:rgba(248,113,113,0.15) !important; color:#f87171 !important; font-weight:900; }

/* ── 데몬 상태 ── */
.status-work  { color:var(--accent-emerald) !important; }
.status-idle  { color:var(--accent-amber) !important; }
.status-warn  { color:var(--accent-amber) !important; }
.status-error { color:var(--accent-red) !important; }

/* ── 모니터링 도움말 ── */
.Monitoring_help {
  line-height: 25px;
  color:#c5c5c5;
  border-top: 1px solid var(--border);
  font-size:13px; 
   margin-top:24px; padding-top:20px;
}

/* ── 푸터 ── */
.page-footer {
  margin-top:20px; padding-top:20px;
  border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.footer-info  { font-size:14px; color:var(--text-muted); }
.footer-tags  { display:flex; gap:8px; }
.footer-tag   {
  font-size:14px; color:var(--text-muted);
  background:var(--bg-700); border:1px solid var(--border);
  border-radius:4px; padding:3px 10px;
}