/* ============================================================================
   TanQuant 디자인 토큰 — 사이트 전체 색·글꼴·간격의 단 하나의 원본
   ----------------------------------------------------------------------------
   ★디자인을 바꾸려면 이 파일만 고친다. 페이지(HTML) 안의 :root는 여기 토큰을
     가리키기만 하므로, 여기 값을 바꾸면 16개 페이지가 한꺼번에 따라온다.
   ★작업 규칙·금지 사항은 저장소 루트의 DESIGN_AUTOMATION.md 를 먼저 읽을 것.
   ★페이지 안에 새 색을 직접(#hex) 적지 마라 — tools/design_lint.py 가 잡는다.
   ----------------------------------------------------------------------------
   [2026-08-02 리디자인] 방향: 거래소-다크(딥 차콜 캔버스 + 옐로우 액션) ×
   미니멀-갤러리(크롬 최소화·타이포 위계·톤온톤 표면). 결정 사항:
   · §5-1 표면 2계열 → 같은 그레이 램프로 통합 (bg 동일, 카드 한 단계만 차이)
   · §5-2 CTV 그린 → 브랜드 옐로우 하나로 통일 (색으로 제품을 나누지 않는다)
   · 의미색: 상승/하락을 고채도 거래소 팔레트(#0ecb81/#f6465d)로 교체 — 역할 불변
   ============================================================================ */
:root{
  /* ── 1. 브랜드 ────────────────────────────────────────────────────────── */
  --tq-accent:#fcd535;                    /* 기본 액션(버튼·링크·선택) — 옐로우 */
  --tq-accent-2:#f0b90b;                  /* 액션 눌림·그라데이션 끝 */
  --tq-accent-deep:#26220f;               /* 액션 배경(아주 어두운) */
  --tq-accent-glow:rgba(240,185,11,.35);  /* 액션 글로우 */
  --tq-accent-glow-2:rgba(240,185,11,.45);/* 같은 글로우의 진한 변형(시작 페이지) — 합칠 후보 */
  --tq-brand-spark:#fcd535;               /* 로고 번개 — 액션과 같은 옐로우 */

  /* ── 2. 상태색 (의미가 있다 — 색만 바꾸고 뜻은 바꾸지 마라) ───────────── */
  --tq-up:#0ecb81;                        /* 상승·이익 */
  --tq-down:#f6465d;                      /* 하락·손실 */
  --tq-warn:#ff9800;                      /* 경고·주의 (액션 옐로우와 구분되는 주황) */
  --tq-purple:#8f7bff;                    /* 보조 강조 — lev-cur 와 같은 계열 */
  --tq-pos:#2ee6a8;                       /* 차트 이익(밝은 민트) */
  --tq-neg:#ff5c66;                       /* 차트 손실(밝은 레드) */

  /* ── 3. 표면 · 앱 계열 (홈·백테스트·시뮬·랜딩·시작) ───────────────────── */
  --tq-bg:#0b0e11;                        /* 페이지 바탕 — 딥 차콜 */
  --tq-surface:#1e2329;                   /* 카드·패널 */
  --tq-surface-2:#262c34;                 /* 카드 안 한 겹 더 */
  --tq-border:#2b3139;                    /* 기본 테두리·그리드 */
  --tq-border-2:#3d454f;                  /* 강한 테두리 */
  --tq-text:#eaecef;                      /* 본문 */
  --tq-text-mut:#929aa5;                  /* 보조 설명 */
  --tq-text-faint:#6b7480;                /* 가장 흐린 라벨 */

  /* ── 4. 표면 · 커뮤니티 계열 (community·법무·전략상세) ────────────────── */
  /* [통합됨] 앱 계열과 같은 그레이 램프를 쓴다. 바탕은 동일, 카드만 반 단계
     낮춰 커뮤니티 특유의 차분함을 유지한다. (구 §5-1 결정 완료) */
  --tq-bg-alt:#0b0e11;
  --tq-surface-alt:#171b21;
  --tq-surface-alt-2:#1e2329;
  --tq-text-alt:#eaecef;
  --tq-text-mut-alt:#929aa5;
  --tq-text-faint-alt:#6b7480;

  /* ── 4-b. CTV(순환타켓) 테마 ─────────────────────────────────────────────
     [통합됨] 그린 액센트를 버리고 브랜드 옐로우 하나로 간다. 표면은 앱 계열과
     같은 램프. (구 §5-2 결정 완료 — 제품 구분은 색이 아니라 타이포·카피로) */
  --tq-ctv-accent:#fcd535;
  --tq-ctv-surface:#14181d;
  --tq-ctv-border:#2b3139;
  --tq-ctv-text:#eaecef;
  --tq-ctv-text-mut:#929aa5;
  --tq-ctv-text-mut-2:#a5adba;

  /* ── 5. 차트 배수 팔레트 (★의미 고정 — 표·곡선·깃발·칩이 같은 색을 쓴다) ─
       색을 바꿀 수는 있지만 '역할 ↔ 색'의 짝은 절대 섞지 마라.
       quant-metrics.js 가 이 토큰을 읽어 SVG를 그린다. */
  --tq-lev-1:#39c5ff;                     /* 레버리지 없이 1배 */
  --tq-lev-half:#2ee87c;                  /* 안전하게 절반만 */
  --tq-lev-cur:#8f7bff;                   /* 지금 내 설정 */
  --tq-lev-peak:#ffd54a;                  /* 돈이 가장 많이 불어난 배수 */
  --tq-lev-over:#ff8a3d;                  /* 수익이 반토막 나는 배수(과열) */
  --tq-lev-dead:#f6465d;                  /* 계좌가 사라지는 배수 — 하락색 계열을 의도적으로 쓴다 */

  /* ── 5-b. 복수 종목(분산) 식별 팔레트 — TBV 분산 백테스트의 종목별 고유색 ─────────────
     값은 배수 팔레트와 같은 직교 5색 세트를 쓴다(구별력 검증된 조합·한 화면에 같이 뜨지 않음). 순서 = 행 순서. */
  --tq-cmp-1:#39c5ff;
  --tq-cmp-2:#2ee87c;
  --tq-cmp-3:#8f7bff;
  --tq-cmp-4:#ffd54a;
  --tq-cmp-5:#ff8a3d;
  --tq-chart-bg:#0b0e11;                  /* 차트 라벨 배경 — 새 캔버스와 동일 */
  --tq-chart-grid:#2b3139;                /* 차트 그리드 */
  --tq-crisis:#fcd535;                    /* 최장 물속 음영·위기 강조 — 브랜드 옐로우 */

  /* ── 6. 글꼴 ──────────────────────────────────────────────────────────── */
  --tq-font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Pretendard','Noto Sans KR',Roboto,sans-serif;
  --tq-font-ui:-apple-system,BlinkMacSystemFont,'Segoe UI','Pretendard','Noto Sans KR',sans-serif;
  --tq-font-ui2:-apple-system,BlinkMacSystemFont,'Segoe UI','Pretendard','Noto Sans KR',sans-serif; /* [통합됨] ui 와 동일 */
  --tq-font-mono:ui-monospace,'SF Mono','Roboto Mono',Consolas,monospace;

  /* ── 7. 타입 스케일 ───────────────────────────────────────────────────────
       ★아직 대부분의 페이지가 px를 직접 쓴다. 디자인 작업이 이쪽으로 옮겨올 자리이며,
         새로 만드는 UI는 반드시 이 토큰을 쓴다. 모바일 하한은 mobile.css 규칙과 맞춘다. */
  --tq-fs-hero:38px;
  --tq-fs-h1:27px;
  --tq-fs-h2:20px;
  --tq-fs-lg:17px;
  --tq-fs-md:15px;                        /* 본문 기본 */
  --tq-fs-sm:13px;
  --tq-fs-xs:11.5px;                      /* 라벨 하한 — 이보다 작게 만들지 마라 */
  --tq-fs-input:16px;                     /* ★모바일 자동 확대 방지 하한 */
  --tq-lh-tight:1.25;
  --tq-lh-body:1.65;

  /* ── 8. 간격 · 모서리 ─────────────────────────────────────────────────── */
  --tq-sp-1:4px;  --tq-sp-2:8px;  --tq-sp-3:12px;
  --tq-sp-4:16px; --tq-sp-5:24px; --tq-sp-6:32px;
  --tq-r-sm:8px; --tq-r-md:12px; --tq-r-lg:16px; --tq-r-pill:999px;
  --tq-touch:44px;                        /* ★터치 영역 최소 높이 */

  /* ── 9. 상태 ──────────────────────────────────────────────────────────── */
  --tq-focus:0 0 0 2px rgba(240,185,11,.6);
  --tq-dim:.32;                           /* 비선택 곡선 투명도 */
  --tq-t-fast:.14s; --tq-t-base:.22s;

/* ── 패널·잉크 계열 (2026-08-08 토큰화 패스) ─────────────────────────────
   pit-picker·ai-review·bias-guard·story-teller 가 각자 박아 두던 회색들을
   여기 한 곳으로 모았다. 값은 그대로 옮겼고, 눈으로 구분이 안 되는 이웃값
   (채널 차 8 이하)만 대표값으로 합쳤다 — 화면은 그대로다.
   ★새 회색이 필요하면 여기 토큰을 먼저 찾아 쓰고, 없을 때만 추가해라. */
  --tq-panel-deep:#11151d;   /* 가장 어두운 패널(스위치 손잡이·바닥) */
  --tq-panel:#1a1e27;        /* 카드 배경 */
  --tq-panel-2:#1e222d;      /* 카드 배경 (한 단계 밝게) */
  --tq-panel-3:#22262f;      /* 입력칸·셀렉트 배경 */
  --tq-line:#2a2e39;         /* 기본 구분선 */
  --tq-line-2:#2f3542;       /* 카드 테두리 */
  --tq-line-3:#363a45;       /* 입력칸 테두리 */
  --tq-line-4:#3a414f;       /* 버튼 테두리·꺼진 스위치 */
  --tq-ink:#e6e9f0;          /* 제목 */
  --tq-ink-2:#dfe3ea;        /* 강조 본문 */
  --tq-ink-3:#d1d4dc;        /* 본문 */
  --tq-ink-4:#c3c7d1;        /* 본문 (약하게) */
  --tq-body:#a8b0bd;         /* 설명 문단 */
  --tq-mut:#98a1b0;          /* 보조 설명 */
  --tq-mut-2:#8d96a7;        /* 라벨 */
  --tq-mut-soft:#828b99;     /* 각주 */
  --tq-mut-3:#787b86;        /* 차트 축·아주 약한 글자 */
  --tq-mut-deep:#5d606b;     /* 맨 아래 출처 줄 */
  --tq-white:#fff;
  --tq-link:#4c8dff;         /* 링크 */
  --tq-info-ink:#8ea2c7;     /* 파란 정보 배지 글자 */
  --tq-info-strong:#9ec1ff;  /* 파란 정보 제목 */
  --tq-info-body:#b8c4d6;    /* 파란 정보 목록 */
  --tq-danger-ink:#eab4bc;   /* 빨간 경고 박스 본문 */
  --tq-candle-up:#26a69a;    /* 캔들 양봉 */
  --tq-candle-dn:#ef5350;    /* 캔들 음봉 */
}

/* [2026-08-02] 페이지 안의 하드코딩 블루(#2962ff·rgba(41,98,255,…) 계열)는
   전부 옐로우 계열로 소스에서 직접 치환했다(DESIGN_AUTOMATION.md §2 '필요할 때만').
   옐로우 배경 위 글자는 #181a20 잉크를 쓴다 — 새 액션 버튼도 흰 글자를 얹지 마라. */

/* ★장식 그림자는 쓰지 않는다(선·여백·색으로만 위계를 준다) — 이 규칙을 깨지 마라.
   그림자 토큰을 새로 만들고 싶으면 DESIGN_AUTOMATION.md 의 금지 목록부터 고칠 것. */

/* ── 언어 선택기(i18n.js) ─────────────────────────────────────────────────
   ★값은 i18n.js 에 하드코딩돼 있던 것을 그대로 옮긴 것이다(무변경 이식).
     선택기는 다크 페이지와 라이트 페이지에 같은 모듈로 뜨므로, 색을 모듈에 박아 두면
     한쪽이 반드시 어긋난다. 여기가 다크 기본값이고 tq-light.css 가 라이트로 덮는다. */
:root{
  --tq-lang-bg:rgba(17,21,29,.94);
  --tq-lang-ink:#e6e9f0;
  --tq-lang-item:#d1d4dc;
  --tq-lang-mut:#8d96a7;
  --tq-lang-line:#3a414f;
  --tq-lang-line-2:#2a3140;
  --tq-lang-pop:#12161f;
  --tq-lang-hover:#1c2230;
  --tq-lang-shadow:rgba(0,0,0,.28);
  --tq-lang-pop-shadow:rgba(0,0,0,.58);
}