/* dark.css (v95, 2026-10-26): 어두운 화면. 맨 마지막에 읽는다.
   화면 모드(dark.js)가 html에 data-theme="dark"를 붙이면 아래가 적용돼요. 밝은 화면은 이 파일과 상관없어요.
   - 1. 토큰: 밝은 값만 있던 토큰(theme.css --c-*, v3.css --rule 등)의 어두운 값. 바탕은 v3.css의 어두운 토큰(--v-ground #101114, --v-card #1B1D22)을 따라요.
   - 2. 화면별: 밝은 색을 직접 적은 규칙들의 어두운 짝. 모두 :root[data-theme="dark"]로 시작해요.
   검사: node devtools/inv_qa.cjs --theme dark (대비 부족, 어두운 화면에 남은 밝은 바탕과 밝은 선) */

/* ================= 1. 토큰 ================= */
:root[data-theme="dark"]{
  --c-navy:#7D98FF;--c-navy-soft:#22263A;
  --c-blue:#7D98FF;--c-blue-soft:#1C2340;
  --c-coral-ink:#FF9D8C;--c-coral-soft:#3A201C;--c-coral-line:#7A3A31;
  --c-ch1:#7D98FF;--c-ch2:#5571E0;--c-ch3:#4459B0;--c-ch4:#344486;--c-ch5:#283459;--c-ch6:#3D424B;
  --c-pick-bg:#22263A;
  --rule:1px solid #2A2D34;
  /* 코랄 면 위 흰 글자(초과 꼬리표, D-day 칩)가 읽히게, 어두운 화면의 코랄 면은 한 단계 진하게. 코랄 글자는 --v-coral-t(밝은 코랄) 그대로 */
  --v-coral:#E5604F;--c-coral:#E5604F;
  color-scheme:dark}

/* ================= 2. 공통 부품 ================= */
/* 켬/끔 스위치와 체크 상자: 켠 바탕이 글자색(밝음)이면 흰 손잡이와 흰 체크가 묻혀서 파랑으로 */
:root[data-theme="dark"] .be-tg.on,:root[data-theme="dark"] .p3c-sw[aria-checked="true"]{background:var(--v-blue)}
:root[data-theme="dark"] .bl-items li.done .bm-ck,:root[data-theme="dark"] .bl-er .bm-ck[aria-checked="true"]{background:var(--v-blue);border-color:var(--v-blue)}
/* PC 옆 메뉴의 고른 화면 (nav2.css가 밝은 회색을 !important로) */
:root[data-theme="dark"] .app .side .nav button[aria-current="page"]{background:rgba(255,255,255,.1)!important}

/* ================= 3. 화면별 ================= */
/* 캘린더: 고른 날 목록의 D-day 꼬리표 (밝은 코랄 위 흰 글자) */
:root[data-theme="dark"] .bc2-dd.on{background:#D9483B;color:#fff}
/* AI 메신저: 맨 위 확인 필요 한 줄 */
:root[data-theme="dark"] .bch-alert{background:var(--v-coral-bg);box-shadow:0 0 0 6px var(--v-ground)}
:root[data-theme="dark"] .bch-alert>i{background:var(--v-coral)}
:root[data-theme="dark"] .bch-alert>b,:root[data-theme="dark"] .bch-alert>.ico{color:var(--v-coral-t)}

/* 나눠 고르는 단추(세그먼트)와 탭 묶음: 밝은 화면은 회색 줄 위에 흰 칸이 고른 것. 어두운 화면에서 카드 색을 쓰면 줄보다 어두워 거꾸로 보여서, 고른 칸을 줄보다 밝게 */
:root[data-theme="dark"] :is(.seg button[aria-pressed="true"],.b-sw button[aria-selected="true"],.ih2-tabs button[aria-selected="true"],.p3i-fsheet .seg button[aria-pressed="true"],.iv-sin .iv-sgs .iv-sgn[aria-pressed="true"],.p3s-seg button[aria-selected="true"],.v3-seg button[aria-pressed="true"],.v3-seg button[aria-selected="true"],.sheet.es-sheet .seg.full button[aria-pressed="true"],.sheet:not(.es-sheet) .seg button[aria-pressed="true"],.content:has(>.phead[data-page="budgetSet"]) :is(.seg,.segs) button:is([aria-pressed="true"],[aria-selected="true"],.on)){background:#3A3E47!important;color:var(--v-ink)!important;box-shadow:none!important}
/* 거래 내역 달력: 앞으로 올 토요일, 일요일 날짜 (흐리게 둔 정도를 어두운 바탕에 맞춤) */
:root[data-theme="dark"] .p3a-cal:not(.p3a-wds)>.p3a-cc.fut:nth-child(7n+1) .dn,:root[data-theme="dark"] .p3a-cal:not(.p3a-wds)>.p3a-cc.fut:nth-child(7n) .dn{opacity:.75}
/* 투자: 스트레스 수익률의 − + 고르기에서 안 고른 쪽 */
:root[data-theme="dark"] .iv-sin .iv-sgs .iv-sgn{color:var(--v-ink3)}
/* AI 메신저: 맨 아래 보관 기간 안내 */
:root[data-theme="dark"] .ms2-keep{color:var(--v-ink4)}

/* ================= 4. 마우스를 올렸을 때 (PC) ================= */
/* 옆 메뉴 묶음 머리(초이's 일정 등)와 접힌 묶음, 위 AI 메신저 단추: nav2.css가 밝은 회색(#F4F5F7)을 직접 적어 글자가 묻혔어요 */
@media (hover:hover){
  :root[data-theme="dark"] .app .side .sec-fold:hover,:root[data-theme="dark"] .app .side .sec-ht:hover{background:rgba(255,255,255,.08)}
  :root[data-theme="dark"] .ai-top:hover{background:#2A2D34}
}
/* 예전 화면의 부드러운 단추와 목록 줄 */
:root[data-theme="dark"] .btn.soft:hover{background:rgba(255,255,255,.14)}
:root[data-theme="dark"] .tx:hover,:root[data-theme="dark"] .lrow:hover{background:rgba(255,255,255,.05)}