/* ══ 자비스 통합 웹 — 디자인 토큰 ═══════════════════════════════════════════
   디자인은 하나, 색만 셋. 모든 화면(셸·설정·일지·주문 패널)은 아래 변수만 쓴다.
   테마는 <html data-jv-theme="noir|violet|pearl"> 로 바뀐다 (차트 사본도 같은 속성을 읽는다).

   Chrome Noir   — 참고 이미지 ①: 칠흑 바탕 · 은빛 곡선 · 크롬 테두리 유리 카드 · 흰 테두리 알약 버튼
   Midnight Blue — 참고 이미지 ②: 짙은 남색 바탕 · 파란 강조 (키는 호환 때문에 violet 유지)
   Pearl Daylight— 화이트 테마: 진주빛 바탕 · 은회색 결 · 인디고 강조 (차트 캔버스만은 짙게 — theme.css 주석) */

:root, html[data-jv-theme="noir"] {
  --bg: #050506;
  --bg-2: #0c0c0f;
  --bg-glow-1: rgba(255, 255, 255, .055);
  --bg-glow-2: rgba(160, 166, 178, .05);
  --card: rgba(255, 255, 255, .028);
  --card-2: rgba(255, 255, 255, .05);
  --card-solid: #101113;
  --sunken: rgba(0, 0, 0, .35);
  --line: rgba(255, 255, 255, .085);
  --line-2: rgba(255, 255, 255, .16);
  --edge: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.06) 38%, rgba(255,255,255,.03) 62%, rgba(255,255,255,.4));
  --text: #eceef1;
  --text-2: #a6abb3;
  --text-3: #6c7179;
  --accent: #dfe3e8;
  --accent-2: #9aa2ad;
  --accent-ink: #0b0c0e;
  --accent-grad: linear-gradient(135deg, #ffffff 0%, #c9ced6 45%, #8d949e 100%);
  --brand-a: #ffffff;
  --brand-b: #7d8591;
  --brand-text: linear-gradient(180deg, #ffffff 0%, #d5dae1 55%, #8f97a2 100%);
  --brand-halo: rgba(255,255,255,.06);
  --brand-on: #2fd47e;
  --accent-soft: rgba(230, 234, 240, .09);
  --glow: 0 0 0 1px rgba(255,255,255,.12), 0 8px 30px rgba(255,255,255,.05);
  --focus: rgba(230, 234, 240, .45);
  --up: #33c58f;
  --down: #f2626e;
  --warn: #f0b24a;
  --info: #7fb2ff;
  --up-soft: rgba(51, 197, 143, .12);
  --down-soft: rgba(242, 98, 110, .12);
  --warn-soft: rgba(240, 178, 74, .12);
  --arc: conic-gradient(from 210deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.75) 40deg, rgba(170,176,186,.25) 80deg, rgba(255,255,255,0) 120deg);
  /* 탭 종류별 옅은 그라데이션 */
  --tab-main: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  --tab-chart: linear-gradient(180deg, rgba(92, 210, 190, .20), rgba(92, 210, 190, .04));
  --tab-group: linear-gradient(90deg, rgba(92, 210, 190, .18), rgba(240, 178, 74, .18));
  --tab-tool: linear-gradient(180deg, rgba(127, 178, 255, .18), rgba(127, 178, 255, .04));
  /* 보유 목록 소유 구분 */
  --own-auto: linear-gradient(90deg, rgba(127, 178, 255, .16), rgba(127, 178, 255, 0) 70%);
  --own-manual: linear-gradient(90deg, rgba(240, 178, 74, .18), rgba(240, 178, 74, 0) 70%);
  --own-direct: linear-gradient(90deg, rgba(200, 120, 255, .17), rgba(200, 120, 255, 0) 70%);
  --own-legacy: linear-gradient(90deg, rgba(160, 166, 178, .12), rgba(160, 166, 178, 0) 70%);
  --c-auto: #7fb2ff; --c-manual: #f0b24a; --c-direct: #c878ff; --c-legacy: #9aa2ad;
  --chart-1: #e6e9ee; --chart-2: #8d949e; --chart-3: #5d636c; --chart-4: #3a3e45;
  --shadow: 0 18px 50px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* Midnight Blue — 참고 이미지에서 뽑은 색 그대로.
   바탕 #0d1117 · 패널 #151b23 · 카드 #1b2330 · 테두리 #263041 · 강조 #2f81f7
   ⚠ 키는 "violet" 그대로 둔다. 저장된 jv_theme 값과 차트 사본·확장 옵션이 이 문자열을
     쓰고 있어서, 이름을 바꾸면 이미 그 테마를 쓰던 사람이 조용히 기본값으로 떨어진다.
     사람이 보는 이름만 바꾼다 (account.js · link.html).
   ⚠ 상승·하락 색은 테마를 따라가지 않는다. 손익 색이 테마마다 달라지면 화면을 잘못 읽는다. */
html[data-jv-theme="violet"] {
  --bg: #0d1117;
  --bg-2: #151b23;
  --bg-glow-1: rgba(47, 129, 247, .16);
  --bg-glow-2: rgba(38, 87, 158, .12);
  --card: rgba(47, 129, 247, .05);
  --card-2: rgba(47, 129, 247, .1);
  --card-solid: #1b2330;
  --sunken: rgba(5, 7, 9, .5);
  --line: rgba(84, 104, 136, .26);
  --line-2: rgba(100, 128, 170, .45);
  --edge: linear-gradient(135deg, rgba(88,166,255,.85), rgba(47,129,247,.14) 40%, rgba(47,129,247,.05) 60%, rgba(120,180,255,.65));
  --text: #d5dae2;
  --text-2: #8b93a1;
  --text-3: #636c7a;
  --accent: #2f81f7;
  --accent-2: #6ea8fa;
  --accent-ink: #ffffff;
  --accent-grad: linear-gradient(135deg, #58a6ff 0%, #2f81f7 50%, #1f6feb 100%);
  --brand-a: #cfe3ff;
  --brand-b: #2f81f7;
  --brand-text: linear-gradient(180deg, #e8f1ff 0%, #9ec5ff 55%, #2f81f7 100%);
  --brand-halo: rgba(47, 129, 247, .16);
  --brand-on: #2fd47e;
  --accent-soft: rgba(47, 129, 247, .15);
  --glow: 0 0 0 1px rgba(47,129,247,.4), 0 10px 40px rgba(47,129,247,.28);
  --focus: rgba(47, 129, 247, .6);
  --up: #33c58f;
  --down: #f2626e;
  --warn: #e3a33c;
  --info: #58a6ff;
  --up-soft: rgba(51, 197, 143, .13);
  --down-soft: rgba(242, 98, 110, .13);
  --warn-soft: rgba(227, 163, 60, .13);
  --arc: conic-gradient(from 210deg, rgba(47,129,247,0) 0deg, rgba(88,166,255,.85) 40deg, rgba(31,111,235,.3) 80deg, rgba(47,129,247,0) 120deg);
  --tab-main: linear-gradient(180deg, rgba(47, 129, 247, .30), rgba(47, 129, 247, .06));
  --tab-chart: linear-gradient(180deg, rgba(57, 197, 187, .22), rgba(57, 197, 187, .04));
  --tab-group: linear-gradient(90deg, rgba(57, 197, 187, .2), rgba(227, 163, 60, .2));
  --tab-tool: linear-gradient(180deg, rgba(88, 166, 255, .22), rgba(88, 166, 255, .04));
  --own-auto: linear-gradient(90deg, rgba(88, 166, 255, .2), rgba(88, 166, 255, 0) 70%);
  --own-manual: linear-gradient(90deg, rgba(227, 163, 60, .2), rgba(227, 163, 60, 0) 70%);
  --own-direct: linear-gradient(90deg, rgba(163, 113, 247, .2), rgba(163, 113, 247, 0) 70%);
  --own-legacy: linear-gradient(90deg, rgba(139, 147, 161, .14), rgba(139, 147, 161, 0) 70%);
  --c-auto: #58a6ff; --c-manual: #e3a33c; --c-direct: #a371f7; --c-legacy: #8b93a1;
  --chart-1: #58a6ff; --chart-2: #2f81f7; --chart-3: #39c5bb; --chart-4: #263041;
  --shadow: 0 18px 60px rgba(1, 4, 9, .75);
  color-scheme: dark;
}

html[data-jv-theme="pearl"] {
  --bg: #f4f5f9;
  --bg-2: #e9ebf3;
  --bg-glow-1: rgba(255, 255, 255, .95);
  --bg-glow-2: rgba(170, 180, 240, .25);
  --card: rgba(255, 255, 255, .78);
  --card-2: rgba(255, 255, 255, .95);
  --card-solid: #ffffff;
  --sunken: rgba(232, 235, 244, .7);
  --line: rgba(22, 28, 52, .09);
  --line-2: rgba(22, 28, 52, .18);
  --edge: linear-gradient(135deg, rgba(255,255,255,1), rgba(200,206,230,.6) 40%, rgba(220,224,240,.4) 60%, rgba(150,160,230,.7));
  --text: #141826;
  --text-2: #4e5469;
  --text-3: #8a90a6;
  --accent: #4f5bd5;
  --accent-2: #7b84e6;
  --accent-ink: #ffffff;
  --accent-grad: linear-gradient(135deg, #6a74e6 0%, #4f5bd5 50%, #3a43b0 100%);
  --brand-a: #6f7cf0;
  --brand-b: #2f37a3;
  --brand-text: linear-gradient(180deg, #2a2f5c 0%, #4f5bd5 100%);
  --brand-halo: rgba(79,91,213,.10);
  --brand-on: #14a865;
  --accent-soft: rgba(79, 91, 213, .1);
  --glow: 0 0 0 1px rgba(79,91,213,.25), 0 10px 30px rgba(79,91,213,.15);
  --focus: rgba(79, 91, 213, .45);
  --up: #0f9f6e;
  --down: #e04358;
  --warn: #c98612;
  --info: #3a6fe0;
  --up-soft: rgba(15, 159, 110, .1);
  --down-soft: rgba(224, 67, 88, .1);
  --warn-soft: rgba(201, 134, 18, .12);
  --arc: conic-gradient(from 210deg, rgba(255,255,255,0) 0deg, rgba(150,160,230,.55) 40deg, rgba(200,206,230,.35) 80deg, rgba(255,255,255,0) 120deg);
  --tab-main: linear-gradient(180deg, rgba(79, 91, 213, .16), rgba(79, 91, 213, .03));
  --tab-chart: linear-gradient(180deg, rgba(15, 159, 140, .16), rgba(15, 159, 140, .03));
  --tab-group: linear-gradient(90deg, rgba(15, 159, 140, .16), rgba(201, 134, 18, .16));
  --tab-tool: linear-gradient(180deg, rgba(58, 111, 224, .14), rgba(58, 111, 224, .03));
  --own-auto: linear-gradient(90deg, rgba(58, 111, 224, .12), rgba(58, 111, 224, 0) 70%);
  --own-manual: linear-gradient(90deg, rgba(201, 134, 18, .14), rgba(201, 134, 18, 0) 70%);
  --own-direct: linear-gradient(90deg, rgba(160, 60, 220, .12), rgba(160, 60, 220, 0) 70%);
  --own-legacy: linear-gradient(90deg, rgba(120, 126, 150, .1), rgba(120, 126, 150, 0) 70%);
  --c-auto: #3a6fe0; --c-manual: #c98612; --c-direct: #a03cdc; --c-legacy: #7a8098;
  --chart-1: #4f5bd5; --chart-2: #7b84e6; --chart-3: #0f9f8c; --chart-4: #d6d9ea;
  --shadow: 0 18px 50px rgba(40, 46, 90, .14);
  color-scheme: light;
}