/* Trading Qualia — 기본 보드(라이트) 테마
   정본: TQ_Logo_Identity_Guide.html · Teal Depth 라이트 팔레트
   기본은 다크(현행 유지) · html[data-theme=light] 에서만 발동 · 선택은 localStorage(qoTheme) */

html[data-theme="light"] {
  --bg: #FAFCFB;        /* 가이드 --bg */
  --panel: #FFFFFF;     /* 카드 = 흰 면 + 보더 (가이드 .meaning-card) */
  --panel2: #F0FAF7;    /* 가이드 커버 그라디언트 시작색 */
  --line: #E8EFEC;      /* 가이드 보더 */
  --ink: #1A2332;       /* 가이드 --text */
  --dim: #5A6B7A;       /* 가이드 --text-secondary */
  --faint: #8B9CAB;     /* 가이드 --text-tertiary */
  --teal: #1A7A6D;      /* 라이트 배경의 프라이머리 = Deep Teal (가이드 02장) */
  --deep: #0D4A42;      /* Midnight Teal */
  --pale: #0D4A42;      /* 다크의 밝은 강조 텍스트 → 라이트에선 가장 깊은 톤 */
  --red: #D4534A;       /* 가이드 don't 아이콘 레드 */
  --gold: #A87E2E;      /* 골드 — 흰 배경 가독 톤 */
  --violet: #7C5CC4;
  --purple: #7C5CC4;
}

/* 틸/레드 칠한 칩 위의 짙은 글자(#04342C)는 라이트 프라이머리(#1A7A6D) 위에서 안 읽힌다 → 흰 글자 */
html[data-theme="light"] [style*="color:#04342C"] { color: #FFFFFF !important; }
html[data-theme="light"] .zone.on,
html[data-theme="light"] .sinput button,
html[data-theme="light"] .tokbar button,
html[data-theme="light"] .chk.on,
html[data-theme="light"] .score.on,
html[data-theme="light"] .mbtn,
html[data-theme="light"] .save { color: #FFFFFF; }

/* 다크 전용으로 하드코딩된 연회색 본문(#C7D7D1) — 흰 패널 위에서 안 읽힌다 → 짙은 본문 톤 */
html[data-theme="light"] .evt .body,
html[data-theme="light"] .bub.a,
html[data-theme="light"] .exname,
html[data-theme="light"] .insight,
html[data-theme="light"] .step-name,
html[data-theme="light"] .block-name,
html[data-theme="light"] .macro-row,
html[data-theme="light"] .modal-body,
html[data-theme="light"] .row .src,
html[data-theme="light"] .st .ti,
html[data-theme="light"] .wk,
html[data-theme="light"] [style*="color:#C7D7D1"] { color: #33424E !important; }

/* 데스크 — 내 말풍선은 Pale Teal 면 + Midnight 글자 (가이드 라이트 면) */
html[data-theme="light"] .bub.u { background: #E0F5EE; color: #0D4A42; }

/* 게이지 트랙·하단 도크 — 다크 알파 배경을 라이트 면으로 */
html[data-theme="light"] .gbar { background: #E8EFEC; }
html[data-theme="light"] .dock { background: rgba(250, 252, 251, .96); }

/* 워드마크 옆 Wave Q 끝점 — 라이트 배경에선 Pale Teal 이 안 보인다 → Deep Teal (가이드 라이트 로고) */
html[data-theme="light"] header > svg circle { fill: #1A7A6D; }

/* 테마 토글 버튼 — Claude 스타일 미니멀 라인 아이콘 (두 테마 공용) */
.themeb {
  background: none;
  border: none;
  color: var(--dim);
  border-radius: 8px;
  width: 32px; height: 32px;
  padding: 6px; margin-left: 4px;
  cursor: pointer;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.themeb svg { width: 18px; height: 18px; display: block; }
.themeb:hover { color: var(--ink); background: var(--line); }

/* 공용 라인 아이콘 (icons.js) — 텍스트 흐름 안에서 글자와 수직 정렬 */
.qic { display: inline-block; vertical-align: -0.18em; }
button .qic, .chatb .qic { vertical-align: middle; }
.themeb:hover { color: var(--ink); border-color: var(--dim); }