/* ============================================================================
   AIGP — 공통 테마 (자비스/HUD)
   ----------------------------------------------------------------------------
   왜 이 파일이 있는가
     페이지 15개가 각자 <style>을 1,000줄씩 들고 있었고(dashboard 1,186 /
     portfolio 1,761 / risk 1,126), --primary 같은 토큰이 5개 파일에 따로
     정의돼 4가지 변종으로 갈라져 있었다. 한쪽만 고치면 나머지가 어긋난다.
     토큰을 여기 한 곳에 모으고, 각 페이지의 <style> **뒤에** 링크해 덮어쓴다.

   디자인 방향
     기존: 인디고→바이올렛 그라데이션 + 글래스모피즘(blur 24px) = AI 생성 UI의
           전형. Tailwind 기본 팔레트라 한눈에 알아본다.
     변경: 근검정 평면 표면 + 얇은 선 + 저채도 시안/앰버 액센트.
           색은 **데이터에만** 쓰고 크롬(사이드바·카드)은 무채색으로 물러난다.
           숫자는 등폭(tabular-nums)으로 자릿수를 정렬한다 — 계기판의 기본.

   팔레트 검증 (dataviz validate_palette.js, surface #0b0e11, dark)
     카테고리 8색  모든 검사 통과 (명도대역·채도·CVD 8.4·일반시야 19.3·대비 3:1+)
     상태색 대비    good 5.77 / warning 10.55 / serious 7.34 / critical 4.03
     액센트 대비    cyan #22d3ee 10.71 / amber #fbbf24 11.59
     손익색 대비    상승 #10B981 7.63 / 하락 #F43F5E 5.27  (기존 의미 유지)
   눈대중이 아니라 스크립트로 계산한 값이다. 색을 바꾸면 반드시 재검증할 것.

   주의: 상승=초록 / 하락=빨강 (미국식)을 그대로 둔다. 한국식(상승=빨강)으로
   뒤집으면 기존 화면을 읽던 감각과 충돌하므로 별도 결정이 필요하다.
============================================================================ */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* ── 표면 ── 평면. 그라데이션 없음 */
  --bg:            #07090b;   /* 바탕 */
  --surface:       #0b0e11;   /* 패널 (팔레트 검증 기준면) */
  --surface-2:     #11151a;   /* 패널 안쪽 */
  --surface-3:     #171c22;   /* 호버/강조 */

  /* ── 선 ── 얇고 또렷하게. blur 대신 선으로 경계를 만든다 */
  --line:          rgba(148,172,196,.14);
  --line-strong:   rgba(148,172,196,.26);
  --line-accent:   rgba(34,211,238,.38);

  /* ── 텍스트 ── */
  --text:          #e7eef5;
  --text-sub:      #8fa3b5;
  --text-dim:      #5d6e7e;

  /* ── 액센트 ── 시안=주, 앰버=주의 환기 */
  --primary:       #22d3ee;
  --primary-dim:   rgba(34,211,238,.12);
  --accent:        #fbbf24;
  --accent-dim:    rgba(251,191,36,.12);

  /* ── 의미색 ── 손익·상태 */
  --success:       #10b981;   /* 상승 */
  --danger:        #f43f5e;   /* 하락 */
  --warning:       #fab219;
  --serious:       #ec835a;
  --critical:      #d03b3b;

  /* ── 차트 카테고리 8색 (고정 순서, 절대 순환시키지 말 것) ──
     순서 자체가 CVD 안전장치다. 9번째 계열은 새 색을 만들지 말고
     '기타'로 접거나 small multiples로 쪼갠다. */
  --series-1: #3987e5;  /* blue    */
  --series-2: #d95926;  /* orange  */
  --series-3: #199e70;  /* aqua    */
  --series-4: #c98500;  /* yellow  */
  --series-5: #d55181;  /* magenta */
  --series-6: #008300;  /* green   */
  --series-7: #9085e9;  /* violet  */
  --series-8: #e66767;  /* red     */

  /* ── 기존 토큰 별칭 ── 15개 페이지가 이 이름들을 쓰고 있다.
     전부 치환하는 대신 여기서 새 값으로 연결해 한 번에 갈아끼운다. */
  --glass-bg:      var(--surface);
  --glass-border:  var(--line);
  --glass-shadow:  none;
  --card-inner:    var(--surface-2);
  --gc: var(--surface); --gb: var(--line); --sh: none;
  --in: var(--surface-2); --sub: var(--text-sub); --warn: var(--warning);
  --t: var(--text); --d: var(--danger); --s: var(--success);

  --radius:        6px;   /* 글래스 시절 11~16px → 각지게 */
  --radius-sm:     4px;
}

/* 라이트 모드는 쓰지 않는다. 토글이 남아 있어도 다크로 고정한다 —
   HUD 룩은 밝은 바탕에서 성립하지 않고, 두 벌을 유지하면 또 갈라진다. */
[data-theme="light"] { color-scheme: dark; }

/* ── 바탕 ───────────────────────────────────────────────────────────────── */
body {
  background: var(--bg) !important;
  color: var(--text);
  font-feature-settings: "tnum" 1, "cv01" 1;
}

/* 아주 옅은 격자 — HUD의 바탕 질감. 과하면 노이즈가 되므로 1.5% 알파.
   z-index는 반드시 음수여야 한다. 0으로 두면 positioned 요소(여기선 fixed)가
   쌓임 맥락에서 카드(position:relative, z-index:auto)보다 위로 올라가고,
   48px 격자선이 글자를 가로질러 **금액에 취소선이 그어진 것처럼** 보인다
   (2026-10-07: NAV ₩851,212,252에 가로줄이 그어져 '삭제됨'으로 읽혔다). */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(148,172,196,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,172,196,.015) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ── 글래스 제거 ─────────────────────────────────────────────────────────
   blur는 GPU도 먹고 글자 선명도도 떨어뜨린다. 평면 + 1px 선으로 바꾼다. */
.glass-card, .sidebar, .card, .panel, .stat-card, .metric-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
.glass-card:hover, .card:hover { border-color: var(--line-strong) !important; }

/* ── 사이드바 ───────────────────────────────────────────────────────────── */
.sidebar { border-right: 1px solid var(--line) !important; border-radius: 0 !important; }
.sb-logo-mark {
  background: transparent !important;
  border: 1px solid var(--line-accent) !important;
  color: var(--primary) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}
.sb-nav-item { border-radius: var(--radius-sm) !important; }
.sb-nav-item:hover {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
.sb-nav-item.active {
  background: var(--primary-dim) !important;
  color: var(--primary) !important;
  border-color: var(--line-accent) !important;
  box-shadow: inset 2px 0 0 var(--primary) !important;
}
.sb-section-label { color: var(--text-dim) !important; }

/* 하단 액션 버튼(테마·알림·킬·로그아웃)이 4등분 고정폭이라 '로그아웃'만
   58px를 요구하는데 55px에 갇혀 '로그아?'로 잘렸다. 내용에 맞춰 늘어나게
   하고 라벨을 10px로 줄인다 — 글자 수가 다른 버튼을 같은 폭에 가두면
   가장 긴 라벨이 반드시 깨진다.
   사이드바 마크업이 두 변종으로 갈라져 있어 양쪽 모두 지정한다
   (.sb-action-row/.sb-action-btn 과 .sbar/.sba). 한쪽만 쓰면 나머지
   페이지에서 같은 잘림이 그대로 남는다. */
.sb-action-row, .sbar { gap: 4px !important; }
.sb-action-btn, .sba {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  gap: 3px !important;
}
.sb-action-btn-label, .sbal {
  font-size: 10px !important;
  letter-spacing: -.03em !important;
  white-space: nowrap;
}

/* ── 숫자 ───────────────────────────────────────────────────────────────
   금액·수익률은 자릿수가 흔들리면 비교가 안 된다. 등폭 + 음수 괄호 대신
   부호 유지(기존 포맷터가 +/-를 붙인다). */
.stat-value, .hero-value, .metric-value, .num, td,
[class*="-value"], [class*="-pct"], [class*="-pnl"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── 테이블 ── 계기판처럼 조밀하게 ──────────────────────────────────────── */
table { border-collapse: collapse; }
th {
  color: var(--text-dim) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line) !important;
}
td { border-bottom: 1px solid rgba(148,172,196,.07) !important; }
tr:hover td { background: var(--surface-2) !important; }

/* ── 의미색 유틸 ── 기존 클래스명을 그대로 받아서 새 값으로 ────────────── */
.pct-pos, .positive, .up   { color: var(--success) !important; }
.pct-neg, .negative, .down { color: var(--danger) !important; }
.row-current { background: var(--primary-dim) !important; }

/* ── 포커스 ── 키보드 접근성. 기존 디자인에 포커스 링이 없었다 ─────────── */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── 모션 ── 기계적으로. 바운스 없음 ───────────────────────────────────── */
* { transition-timing-function: cubic-bezier(.2,.8,.2,1) !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}