/* ==========================================================================
   NASDAQ 급등주 탐지 시스템 — 디자인 시스템 (Merchant OS 레퍼런스 기반)
   [1단계] 디자인 토큰 정의
   원칙: 라이트 SaaS 테마 / 흰 카드 + 슬레이트 배경 + 인디고-바이올렛 포인트.
   ⚠️ 대비(contrast) 최우선: 모든 본문·라벨 텍스트는 흰 배경 대비 WCAG AA(4.5:1)
      이상을 만족하도록 톤을 잡음. 배경색에 글자가 묻히지 않게 함.
   ========================================================================== */
:root {
  color-scheme: light;

  /* ---- 배경 계층 ---- */
  --app-bg: #f6f8fb;           /* 페이지 배경 (아주 옅은 쿨그레이, slate-50 근사) */
  --card-bg: #ffffff;          /* 카드/패널 배경 (순백) */
  --card-bg-2: #f7f9fc;        /* 살짝 눌린 배경 (입력창/서브헤더) */
  --card-bg-3: #eef2f7;        /* 더 진한 눌림 (호버/트랙) */
  --sidebar-bg: #ffffff;       /* 사이드바 배경 */

  /* ---- 테두리/분할선 ---- */
  --line: #eaeef4;             /* 기본 테두리 (아주 옅음, 레퍼런스 f1f5f9 근사) */
  --line-2: #d7dee8;           /* 진한 테두리/입력창 */

  /* ---- 텍스트 (대비 검증됨: 흰 배경 #fff 기준 명암비) ---- */
  --ink-1: #0f172a;            /* 제목/최강조   (대비 ~16:1) */
  --ink-2: #1e293b;            /* 본문 강조     (대비 ~13:1) */
  --ink-3: #334155;            /* 본문          (대비 ~9.5:1) */
  --ink-4: #52607a;            /* 보조 텍스트   (대비 ~6.5:1, AA 통과) — 기존 #64748b보다 진하게 */
  --ink-5: #64708a;            /* 흐린/라벨     (대비 4.5:1↑ AA 통과) — 기존 #94a3b8은 3:1 미만이라 상향 */

  /* ---- 브랜드/포인트 (Merchant OS: 인디고-바이올렛) ---- */
  --brand: #7c5cfc;            /* 브랜드 포인트 (보라-인디고) */
  --brand-strong: #6842f5;     /* 브랜드 강조/버튼 hover */
  --brand-ink: #5b3fd6;        /* 브랜드 텍스트 (흰 배경 대비 AA) */
  --brand-tint: #f1edff;       /* 브랜드 연한 틴트 배경 */

  /* ---- 시맨틱 (손익/상태) — 흰 배경 위 텍스트용으로 충분히 진한 톤 ---- */
  --up: #059669;               /* 상승/양수 텍스트 (emerald-600, 대비 AA) */
  --up-tint: #ecfdf5;          /* 상승 틴트 배경 */
  --down: #c81e2d;             /* 하락/음수 텍스트 (틴트 배경 위에서도 AA 확보) */
  --down-tint: #fef2f2;        /* 하락 틴트 배경 */
  --warn: #d97706;             /* 경고 텍스트 (amber-600, 대비 AA) */
  --warn-tint: #fef3c7;        /* 경고 틴트 배경 */

  /* ---- 형태 토큰 ---- */
  --radius-sm: 10px;
  --radius: 14px;              /* 기본 카드 라운드 */
  --radius-lg: 16px;           /* 큰 카드 (rounded-2xl 근사) */
  --radius-pill: 9999px;

  /* ---- 그림자 (레퍼런스: 극도로 옅은 확산) ---- */
  --shadow-xs: 0 1px 2px rgba(15,23,42,.04);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.03);
  --shadow-md: 0 4px 20px rgba(15,23,42,.05);
  --shadow-lg: 0 10px 30px rgba(15,23,42,.07);

  /* ---- 간격 ---- */
  --gap: 1.5rem;               /* 카드 간격 24px (gap-6) */

  /* ---- 타이포 (2단계에서 폰트 로드 후 적용) ---- */
  --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Pretendard', 'Malgun Gothic', sans-serif;
  --tracking-tight: -0.02em;   /* 제목 타이트 자간 */
}
body {
  font-family: var(--font-sans);
  background: var(--app-bg);
  color: var(--ink-3);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}
h1, h2, h3, h4, .kpi-num { letter-spacing: var(--tracking-tight); }

.nav-link { transition: all .15s; }
.nav-link.active { color: var(--brand-ink); background: var(--brand-tint); }

/* 대분류 네비 */
.nav-group-btn { transition: all .15s; }
.nav-group-btn.nav-group-active { color: var(--brand-ink); background: var(--brand-tint); }
.nav-dropdown { animation: navFade .12s ease-out; }
@keyframes navFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.nav-sub { transition: background .12s; }

/* 카드 hover */
.signal-card { transition: transform .12s, box-shadow .12s; }
.signal-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,.10); }

/* 게이지 바 */
.gauge-track { background: rgba(148,163,184,.15); border-radius: 9999px; overflow: hidden; }
.gauge-fill { height: 100%; border-radius: 9999px; transition: width .4s ease; }

/* 스크롤바 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--card-bg-2); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-5); }

/* 차트 컨테이너 */
#chart-container { width: 100%; height: 420px; }

table.data-table th { position: sticky; top: 0; background: var(--card-bg-2); }
table.data-table tbody tr:hover { background: var(--brand-tint); }

.spinner { border: 3px solid rgba(124,92,252,.2); border-top-color: var(--brand); border-radius: 50%; width: 28px; height: 28px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.fade-in { animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* v8 강조 네비 */
.nav-link.nav-accent { border: 1px solid rgba(217,119,6,.3); }
.nav-link.nav-accent.active { background: var(--warn-tint); color: var(--warn); }

/* v8 업로드 드롭존 */
.upload-dropzone { border: 2px dashed var(--line-2); background: var(--card-bg-2); transition: all .15s; }
.upload-dropzone:hover { border-color: var(--warn); background: var(--warn-tint); }
.upload-dropzone.dragover { border-color: var(--warn); background: var(--warn-tint); transform: scale(1.01); }

/* v8 결과 카드 */
.result-card { transition: box-shadow .12s; }
.result-card:hover { box-shadow: 0 8px 28px rgba(15,23,42,.12); }

/* 매수/매도 방향 뱃지 — 흰 배경 대비 AA 확보 (틴트 배경 + 진한 텍스트) */
.badge-buy { background: var(--down-tint); border: 1px solid rgba(220,38,38,.28); color: var(--down); padding: .25rem .7rem; border-radius: 9999px; font-weight: 700; font-size: .8rem; }
.badge-hold { background: #eef1f6; border: 1px solid var(--line-2); color: var(--ink-3); padding: .25rem .7rem; border-radius: 9999px; font-weight: 700; font-size: .8rem; }
.badge-avoid { background: #eef1f6; border: 1px solid var(--line-2); color: var(--ink-4); padding: .25rem .7rem; border-radius: 9999px; font-weight: 700; font-size: .8rem; }

/* 매수 박스(빨강계열) / 매도 박스(파랑계열) — 한눈에 구분 */
.trade-buy { background: var(--down-tint); border: 1px solid rgba(220,38,38,.28); }
.trade-sell { background: #eff6ff; border: 1px solid rgba(37,99,235,.28); }

/* ========================================================================
   소프트 화이트 테마 오버라이드
   — app.js의 slate 유틸리티 클래스를 라이트 팔레트로 재매핑.
   — 손익 강조색(emerald/rose/red/green/amber/indigo/blue/sky)은 건드리지 않음.
   ======================================================================== */

/* 배경: 어두운 slate → 흰색/연회색 카드 */
.bg-slate-950 { background-color: var(--app-bg) !important; }
.bg-slate-900 { background-color: var(--card-bg) !important; }
.bg-slate-800 { background-color: var(--card-bg-2) !important; }
.bg-slate-700 { background-color: var(--card-bg-3) !important; }
.bg-slate-600 { background-color: #dbe2ea !important; }
.bg-slate-500 { background-color: #cbd5e1 !important; }
.bg-gray-800 { background-color: var(--card-bg-2) !important; }
.bg-gray-50  { background-color: var(--card-bg-2) !important; }

/* 반투명 배경 계열 (슬래시 알파) */
[class*="bg-slate-900/"] { background-color: rgba(255,255,255,.75) !important; }
[class*="bg-slate-800/"] { background-color: rgba(241,245,249,.7) !important; }
[class*="bg-slate-950/"] { background-color: rgba(244,246,251,.8) !important; }

/* 텍스트: 밝은 slate → 진회색, 흐린 slate → 중간회색 */
.text-slate-100 { color: var(--ink-1) !important; }
.text-slate-200 { color: var(--ink-2) !important; }
.text-slate-300 { color: var(--ink-3) !important; }
.text-slate-400 { color: var(--ink-4) !important; }
.text-slate-500 { color: var(--ink-5) !important; }
.text-slate-600 { color: var(--ink-4) !important; }  /* 기존 #a3b0c2는 대비 부족 → ink-4로 상향 */
.text-white     { color: var(--ink-1) !important; }  /* 흰 배경 위 흰 글자 방지 (기본) */
/* 단, 색 배경(버튼/뱃지 등) 위의 흰 글자는 흰색 유지해야 함 — 진한 배경에 어두운 글자가 묻히는 역-대비 방지.
   bg-*-500/600/700 계열 요소 안의 .text-white 를 다시 흰색으로 복원 */
[class*="bg-emerald-5"] .text-white, [class*="bg-emerald-6"] .text-white, [class*="bg-emerald-7"] .text-white,
[class*="bg-blue-5"] .text-white, [class*="bg-blue-6"] .text-white, [class*="bg-blue-7"] .text-white,
[class*="bg-indigo-5"] .text-white, [class*="bg-indigo-6"] .text-white, [class*="bg-indigo-7"] .text-white,
[class*="bg-violet-5"] .text-white, [class*="bg-violet-6"] .text-white,
[class*="bg-sky-5"] .text-white, [class*="bg-sky-6"] .text-white,
[class*="bg-rose-5"] .text-white, [class*="bg-rose-6"] .text-white,
[class*="bg-red-5"] .text-white, [class*="bg-red-6"] .text-white,
[class*="bg-slate-6"] .text-white, [class*="bg-slate-7"] .text-white,
[class*="bg-emerald-5"].text-white, [class*="bg-emerald-6"].text-white, [class*="bg-emerald-7"].text-white,
[class*="bg-blue-5"].text-white, [class*="bg-blue-6"].text-white, [class*="bg-blue-7"].text-white,
[class*="bg-indigo-5"].text-white, [class*="bg-indigo-6"].text-white, [class*="bg-indigo-7"].text-white,
[class*="bg-violet-5"].text-white, [class*="bg-violet-6"].text-white,
[class*="bg-sky-5"].text-white, [class*="bg-sky-6"].text-white,
[class*="bg-rose-5"].text-white, [class*="bg-rose-6"].text-white,
[class*="bg-red-5"].text-white, [class*="bg-red-6"].text-white,
[class*="bg-slate-6"].text-white, [class*="bg-slate-7"].text-white {
  color: #ffffff !important;
}
.text-gray-800  { color: var(--ink-2) !important; }
.text-gray-700  { color: var(--ink-3) !important; }
.text-gray-600  { color: var(--ink-3) !important; }
.text-gray-500  { color: var(--ink-4) !important; }
.text-gray-400  { color: var(--ink-5) !important; }
/* 어두운 글자(라이트 위 흰 글자 방지용)는 그대로 두되, slate-900는 이미 진하므로 유지 */
.text-slate-900 { color: var(--ink-1) !important; }

/* 손익/상태 밝은색(300/400)은 라이트 배경에서 대비 부족 → 진한 톤으로 통일.
   (다크 테마 잔재. 흰/틴트 카드 위에서 WCAG AA 확보) */
.text-emerald-300, .text-emerald-400, .text-green-300, .text-green-400 { color: #047857 !important; } /* tint 배경 위 AA 확보 (#059669는 3.58 부족) */
.text-rose-300, .text-rose-400, .text-red-300, .text-red-400 { color: var(--down) !important; }
.text-amber-300, .text-amber-400, .text-yellow-300, .text-yellow-400 { color: #b45309 !important; } /* warn-tint 위 AA */
.text-blue-300, .text-blue-400, .text-sky-300, .text-sky-400 { color: #2563eb !important; }
.text-indigo-300, .text-indigo-400, .text-violet-300, .text-violet-400, .text-purple-300, .text-purple-400 { color: var(--brand-ink) !important; }

/* 손익 텍스트 500/600 — 흰/연한 배경 위에서 WCAG AA(4.5:1) 확보용 진한 톤.
   (측정: emerald-600 #059669 = 3.54:1 부족 → #047857로, rose-600 #e11d48 = 4.41:1 부족 → #be123c로) */
.text-emerald-500, .text-emerald-600, .text-green-500, .text-green-600 { color: #047857 !important; }
.text-rose-500, .text-rose-600, .text-red-500, .text-red-600 { color: #be123c !important; }
.text-amber-500, .text-amber-600, .text-yellow-500, .text-yellow-600 { color: #b45309 !important; }

/* 어두운 시맨틱 틴트 배경(bg-*-900/xx)은 라이트 틴트로 재매핑 */
[class*="bg-emerald-900/"], [class*="bg-green-900/"] { background-color: var(--up-tint) !important; }
[class*="bg-rose-900/"], [class*="bg-red-900/"] { background-color: var(--down-tint) !important; }
[class*="bg-amber-900/"], [class*="bg-yellow-900/"] { background-color: var(--warn-tint) !important; }
[class*="bg-blue-900/"], [class*="bg-sky-900/"] { background-color: #eff6ff !important; }
[class*="bg-indigo-900/"], [class*="bg-violet-900/"], [class*="bg-purple-900/"] { background-color: var(--brand-tint) !important; }
[class*="border-emerald-800/"], [class*="border-green-800/"] { border-color: #a7f3d0 !important; }
[class*="border-rose-800/"], [class*="border-red-800/"] { border-color: #fecaca !important; }

/* 밝은 계열 반투명 틴트(bg-*-400/500/600 + /xx)도 옅은 tint로 재매핑.
   (활성 탭 bg-emerald-600/20 등에서 진한 시맨틱 텍스트가 배경에 묻히던 문제 해결 — 대비 1.0 → AA) */
[class*="bg-emerald-400/"], [class*="bg-emerald-500/"], [class*="bg-emerald-600/"],
[class*="bg-green-400/"], [class*="bg-green-500/"], [class*="bg-green-600/"] { background-color: var(--up-tint) !important; }
[class*="bg-rose-400/"], [class*="bg-rose-500/"], [class*="bg-rose-600/"],
[class*="bg-red-400/"], [class*="bg-red-500/"], [class*="bg-red-600/"] { background-color: var(--down-tint) !important; }
[class*="bg-amber-400/"], [class*="bg-amber-500/"], [class*="bg-amber-600/"],
[class*="bg-yellow-400/"], [class*="bg-yellow-500/"], [class*="bg-yellow-600/"] { background-color: var(--warn-tint) !important; }
[class*="bg-blue-400/"], [class*="bg-blue-500/"], [class*="bg-blue-600/"],
[class*="bg-sky-400/"], [class*="bg-sky-500/"], [class*="bg-sky-600/"] { background-color: #eff6ff !important; }
[class*="bg-indigo-400/"], [class*="bg-indigo-500/"], [class*="bg-indigo-600/"],
[class*="bg-violet-400/"], [class*="bg-violet-500/"], [class*="bg-violet-600/"],
[class*="bg-purple-400/"], [class*="bg-purple-500/"], [class*="bg-purple-600/"] { background-color: var(--brand-tint) !important; }
[class*="bg-slate-600/"], [class*="bg-slate-500/"], [class*="bg-slate-400/"] { background-color: var(--card-bg-3) !important; }

/* 테두리: 어두운 slate → 연회색 */
.border-slate-800 { border-color: var(--line) !important; }
.border-slate-700 { border-color: var(--line) !important; }
.border-slate-600 { border-color: var(--line-2) !important; }
.border-slate-500 { border-color: var(--line-2) !important; }
.border-gray-200  { border-color: var(--line) !important; }
.border-gray-300  { border-color: var(--line-2) !important; }
.border-gray-100  { border-color: var(--line) !important; }
.border-gray-600  { border-color: var(--line-2) !important; }
[class*="border-slate-800/"] { border-color: var(--line) !important; }
[class*="border-slate-700/"] { border-color: var(--line) !important; }
.divide-slate-800 > * { border-color: var(--line) !important; }

/* 입력창: 다크 배경 → 흰 배경 + 진회색 글자 */
input, select, textarea {
  background-color: #ffffff !important;
  color: var(--ink-2) !important;
  border-color: var(--line-2) !important;
}
input::placeholder, textarea::placeholder { color: var(--ink-5) !important; }

/* 카드에 은은한 그림자 + 라운드 (Merchant OS: 옅은 확산 그림자 + 큰 라운드) */
.bg-slate-900, [class*="bg-slate-900/"] {
  box-shadow: var(--shadow-sm);
}
/* 3단계: 카드 라운드 전역 통일.
   - 주 컨테이너(bg-slate-900) rounded-lg/xl/2xl → 16px 큰 라운드
   - 중첩 카드(bg-slate-800) rounded-lg/xl → 14px (살짝 작게 해서 층위 구분) */
.bg-slate-900.rounded-lg, .bg-slate-900.rounded-xl, .bg-slate-900.rounded-2xl,
[class*="bg-slate-900/"].rounded-lg, [class*="bg-slate-900/"].rounded-xl, [class*="bg-slate-900/"].rounded-2xl {
  border-radius: var(--radius-lg);
}
.bg-slate-800.rounded-lg, .bg-slate-800.rounded-xl,
[class*="bg-slate-800/"].rounded-lg, [class*="bg-slate-800/"].rounded-xl {
  border-radius: var(--radius);
}
/* 3단계: 큰 카드에 부드러운 hover 상승 — 클릭 가능한 카드 UX 통일 */
.bg-slate-900.cursor-pointer:hover, [class*="bg-slate-900/"].cursor-pointer:hover {
  box-shadow: var(--shadow-md);
}

/* KPI 지표 카드 (홈 요약 행) — Merchant OS 스타일 */
.kpi-card { box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s; }
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* ── 4단계: 상단 네비게이션 (Merchant OS 톤 — 흰 헤더 + 브랜드 인디고 강조) ── */
/* 헤더 배경: 반투명 흰색 + 하단 보더 */
header.bg-slate-900\/80, header[class*="bg-slate-900/"] {
  background-color: rgba(255,255,255,.85) !important;
  border-bottom-color: var(--line) !important;
  box-shadow: none !important;
}
/* 네비 링크 기본색 (라이트에서 읽히도록 ink-4) */
.nav-link, .nav-group-btn { color: var(--ink-4) !important; font-weight: 500; transition: color .12s, background .12s; }
/* hover:text-white → 라이트에선 브랜드 잉크 + 옅은 브랜드 배경 */
.nav-link:hover, .nav-group-btn:hover { color: var(--brand-ink) !important; background: var(--brand-tint) !important; }
/* 활성 링크/그룹 → 브랜드 톤 통일 */
.nav-link.active { color: var(--brand-ink) !important; background: var(--brand-tint) !important; font-weight: 600; }
.nav-group-btn.nav-group-active { color: var(--brand-ink) !important; background: var(--brand-tint) !important; font-weight: 600; }
/* 로고 옆 amber 강조는 유지하되 대비 위해 살짝 진하게 */
header .text-amber-400 { color: #b45309 !important; }
/* 드롭다운: 라이트 카드 + 옅은 그림자 (검은 그림자 제거) */
.nav-dropdown { box-shadow: var(--shadow-lg) !important; border-color: var(--line) !important; }
.nav-sub .text-slate-200 { color: var(--ink-2) !important; }

/* 뱃지 라이트 보정 */
.badge-hold { color: #475569 !important; }
.badge-avoid { color: #64748b !important; }

/* ── 5단계: 버튼/배지 컴포넌트 폴리시 (Merchant OS: 부드러운 상호작용) ── */
/* 색 배경 버튼(bg-*-500/600 등)에 공통 transition + hover 미세 상승 */
button[class*="bg-emerald-"], button[class*="bg-blue-"], button[class*="bg-indigo-"],
button[class*="bg-violet-"], button[class*="bg-sky-"], button[class*="bg-rose-"],
button[class*="bg-red-"], button[class*="bg-amber-"], button[class*="bg-slate-7"],
a[class*="bg-emerald-6"], a[class*="bg-indigo-6"], a[class*="bg-blue-6"] {
  transition: transform .1s ease, box-shadow .12s ease, filter .12s ease;
}
button[class*="bg-emerald-"]:hover, button[class*="bg-blue-"]:hover, button[class*="bg-indigo-"]:hover,
button[class*="bg-violet-"]:hover, button[class*="bg-sky-"]:hover, button[class*="bg-rose-"]:hover,
button[class*="bg-red-"]:hover, button[class*="bg-amber-"]:hover {
  box-shadow: var(--shadow-sm);
  filter: brightness(1.03);
}
button[class*="bg-emerald-"]:active, button[class*="bg-blue-"]:active, button[class*="bg-indigo-"]:active,
button[class*="bg-rose-"]:active, button[class*="bg-amber-"]:active, button[class*="bg-sky-"]:active {
  transform: translateY(1px);
}
/* 비활성/텍스트 버튼도 부드럽게 */
button:not([class*="bg-"]) { transition: color .12s, background .12s; }

/* 흰 글자를 쓰는 색 배경 버튼 중 대비가 아슬한 톤은 진하게 보정 (WCAG AA 확보).
   - emerald-500/600(#059669) + 흰글자 = 3.77 → #047857로 (4.5+)
   - green 동일 처리. (뱃지/보더용 emerald는 대상 아님 — .text-white 동반 시에만) */
.bg-emerald-500.text-white, .bg-emerald-600.text-white,
.bg-green-500.text-white, .bg-green-600.text-white {
  background-color: #047857 !important;
}
/* 그 hover 도 대비 유지 (더 밝아지지 않게) — 흰 글자 버튼 한정 */
.bg-emerald-500.text-white:hover, .bg-emerald-600.text-white:hover,
.bg-green-500.text-white:hover, .bg-green-600.text-white:hover {
  background-color: #065f46 !important;
}

/* 스크롤바 라이트 */
::-webkit-scrollbar-track { background: var(--card-bg-2) !important; }
::-webkit-scrollbar-thumb { background: #cbd5e1 !important; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8 !important; }

/* 테이블 헤더 라이트 */
table.data-table th { background: var(--card-bg-2) !important; color: var(--ink-3) !important; }
table.data-table tbody tr:hover { background: rgba(59,130,246,.05) !important; }

/* 드롭존 라이트 */
.upload-dropzone { border-color: var(--line-2) !important; background: var(--card-bg-2) !important; }

/* 호버 배경(어두운 hover는 라이트에서 반전) */
.hover\:bg-slate-800:hover { background-color: var(--card-bg-3) !important; }
.hover\:bg-slate-700:hover { background-color: #e2e8f0 !important; }
[class*="hover\:bg-slate-900\/"]:hover { background-color: rgba(241,245,249,.9) !important; }
[class*="hover\:bg-slate-800\/"]:hover { background-color: rgba(226,232,240,.9) !important; }