/* 10/16(사용자 결정): 차트·표 카드(.viz)의 어두운 배경은 그대로 두고, 그 위에서 안 보이던 글자·선 색만 고친다. 페이지 글자색(--lx-text 등 어두운 회색)이 카드 안으로 상속돼 묻히던 곳은 아래 .viz 규칙으로 카드 토큰에 묶는다. */
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .viz, :root:where(:not([data-theme="light"])) .herobox { --v-surface: #1a1a19; --v-ink: #ffffff; --v-ink2: #c3c2b7; --v-muted: #a8a69d; --v-grid: #2c2c2a; --v-axis: #383835; --s1: #3987e5; --s2: #d95926; --s3: #26b887; --s-off: #8a8880; color-scheme: dark; } }
:root[data-theme="dark"] .viz, :root[data-theme="dark"] .herobox { --v-surface: #1a1a19; --v-ink: #ffffff; --v-ink2: #c3c2b7; --v-muted: #a8a69d; --v-grid: #2c2c2a; --v-axis: #383835; --s1: #3987e5; --s2: #d95926; --s3: #26b887; --s-off: #8a8880; color-scheme: dark; }
/* 결과 화면 차트·표·뱃지 — dataviz 스킬 규칙(색은 역할 변수, 밝은/어두운 모드 각각 선택). 범주 색 1~3번은 모든 쌍 검증(밝은·어두운 모드 통과). */
.viz, .herobox { --v-surface: #fcfcfb; --v-ink: #0b0b0b; --v-ink2: #52514e; --v-muted: #6d6b66; --v-grid: #e1e0d9; --v-axis: #c3c2b7; --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s-off: #898781; color-scheme: light; }
.srh { position: absolute; left: -9999px; }
.herobox { background: var(--v-surface); border: 1px solid var(--line); border-top: 4px solid var(--ai-blue); border-radius: 14px; padding: 16px 18px; margin: 14px 0 10px; color: var(--v-ink); }
.hero { font-size: 52px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 4px 0 8px; }
@media (max-width: 700px) { .hero { font-size: 34px; } }
.viz { background: var(--v-surface); color: var(--v-ink); border: 1px solid var(--line); border-radius: 14px; padding: 14px 14px 10px; margin: 12px 0; }
.viz h3 { margin: 0 0 2px; font-size: 17px; }
.viz .vs { margin: 2px 0 8px; font-size: 14.5px; color: var(--v-ink2); }
.viz .note { color: var(--v-muted); }
.viz.empty { border-style: dashed; background: transparent; }
.viz.empty p { font-size: 14px; }
.vsvg { width: 100%; height: auto; display: block; overflow: visible; }
.vz-m { display: none; } @media (max-width: 700px) { .vz-d { display: none; } .vz-m { display: block; } }
.vsvg .tk { fill: var(--v-muted); font-size: 12.5px; font-family: inherit; }
.vsvg .lb { fill: var(--v-ink2); font-size: 12.5px; font-weight: 700; font-family: inherit; }
.vsvg .zt { fill: var(--v-muted); font-weight: 600; }
.vsvg .gl { stroke: var(--v-grid); stroke-width: 1; } .vsvg .ax { stroke: var(--v-axis); stroke-width: 1; }
.vsvg .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.vsvg .ln.s1 { stroke: var(--s1); } .vsvg .ln.s2 { stroke: var(--s2); } .vsvg .ln.s3 { stroke: var(--s3); }
.vsvg .dot { stroke: var(--v-surface); stroke-width: 2; cursor: default; }
.vsvg .dot.s1 { fill: var(--s1); } .vsvg .dot.s2 { fill: var(--s2); } .vsvg .dot.s3 { fill: var(--s3); } .vsvg .dot.off { fill: var(--s-off); }
.vsvg .bar.s1 { fill: var(--s1); } .vsvg .bar.s2 { fill: var(--s2); }
.vsvg .bandbar { fill: var(--s1); opacity: .2; }
.vsvg .tgt { stroke: var(--v-ink); stroke-width: 2; } .vsvg .tgtbg { fill: var(--v-surface); stroke: var(--v-ink); stroke-width: 1.5; } .vsvg .tgtt { fill: var(--v-ink); }
.vsvg .dep { stroke: var(--v-ink2); stroke-width: 2; stroke-linecap: round; }
.vsvg .zone { fill: var(--s1); opacity: .09; }
.vsvg .ref { fill: none; stroke: var(--s-off); stroke-width: 1.8; }
.vsvg .xh { stroke: var(--v-ink2); stroke-width: 1; }
.vsvg [data-tip]:hover { opacity: .85; }
.lgd { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 4px; font-size: 13px; color: var(--v-ink2); }
.lg { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 18px; height: 4px; border-radius: 2px; } .sw.s1 { background: var(--s1); } .sw.s2 { background: var(--s2); } .sw.s3 { background: var(--s3); }
.sw.tg { background: var(--v-ink); width: 4px; height: 14px; } .sw.off { width: 11px; height: 11px; border-radius: 50%; background: var(--s-off); } .sw.ref { width: 11px; height: 11px; border-radius: 2px; background: transparent; border: 1.8px solid var(--s-off); }
.bds { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.bd { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 1px 10px; font-size: 12.5px; font-weight: 700; line-height: 1.7; white-space: nowrap; }
.bd i { font-style: normal; font-weight: 800; } .bd small { font-weight: 600; font-size: 12px; opacity: .85; margin-left: 2px; }
.bd.ass { background: #fff5dd; border: 1px dashed #b88a1e; color: #6b4a06; }
.bd.rule { background: #e6eefc; border: 1px solid #9fbdf0; color: #0f3a9f; }
.bd.past { background: #f1f3f8; border: 1px solid #c9cfdc; color: #3d4556; }
.bd.unk { background: #fff; border: 1px dashed #7d8696; color: #4a5263; }
.legendbox { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 10px 0; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 13px; }
.legendbox > b { flex: 0 0 100%; font-size: 13.5px; }
.legendbox .lgx { color: var(--muted); margin-right: 10px; }
table.hm { width: 100%; border-collapse: separate; border-spacing: 2px; font-variant-numeric: tabular-nums; }
.hm th { font-size: 12.5px; color: var(--v-muted); font-weight: 600; padding: 2px; text-align: center; } .hm th[scope=row] { text-align: right; padding-right: 6px; white-space: nowrap; color: var(--v-ink2); }
.hm th.corner { text-align: left; font-size: 11.5px; line-height: 1.3; font-weight: 600; }
.hm td { text-align: center; padding: 9px 2px; border-radius: 5px; font-weight: 700; font-size: 14px; }
.hm td small { display: block; font-size: 10.5px; font-weight: 600; opacity: .9; }
.hm td.base { outline: 2px solid var(--v-ink); outline-offset: 1px; }
.rampbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin: 8px 0 0; gap: 2px; } .rampbar i { flex: 1; }
.rampl { display: flex; justify-content: space-between; font-size: 12px; color: var(--v-muted); }
.vtip { position: fixed; z-index: 99; pointer-events: none; background: #12161f; color: #fff; border-radius: 8px; padding: 6px 9px; font-size: 12.5px; line-height: 1.45; max-width: 260px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.vtip b { font-weight: 700; }
.bd { white-space: normal; border-radius: 12px; }
.bd { font-size: 12px; padding: 0 9px; line-height: 1.6; } .bd small { font-size: 11.5px; }
.sw { flex: none; }
.hm td { white-space: nowrap; }
.hm th.corner { width: 1%; }
@media (max-width: 700px) { .hm td { padding: 10px 0; font-size: 13px; } .hm td small { display: none; } .hm th[scope=row] { padding-right: 4px; font-size: 12px; } table.mtbl.sc { min-width: 430px; } }
.sw.tg { width: 0; height: 14px; border-left: 3px solid var(--v-ink); background: none; margin-right: 3px; border-radius: 0; }
.mtbl th { white-space: nowrap; }
.mtbl.sc th:last-child, .mtbl.sc td:last-child { text-align: left; padding-left: 10px; }
.vsvg .ring { fill: none; stroke: var(--v-ink); stroke-width: 2; }
.bd.in { background: #f7f8fb; border: 1px solid #aeb6c6; color: #2f3747; }
.tgm { display: inline-block; width: 0; height: 14px; border-left: 3px solid var(--v-ink); flex: none; margin: 0 3px 0 4px; }
.vsvg .zoneneg { fill: var(--v-muted); opacity: .12; } .vsvg .early { fill: var(--s2); opacity: .22; } .vsvg .tgt2 { stroke: var(--v-ink2); stroke-width: 1.5; }

.askflow { margin: 14px 0; }
.askflow h2 { margin: 0 0 4px; font-size: 18px; }
.askstep { display: grid; grid-template-columns: 34px 1fr; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 10px 0; }
.askn { width: 28px; height: 28px; border-radius: 50%; background: var(--ai-blue); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.askb { min-width: 0; }
.askfld { margin: 8px 0 4px; } .askfld label { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.askfld .v.bad { border: 1.5px solid #c0392b; background: #fdf1ef; border-radius: 8px; padding: 7px 10px; font-size: 14.5px; font-weight: 700; color: #8a2417; min-height: 36px; }
.askp { margin: 4px 0; font-size: 14.5px; }
.askd { display: grid; grid-template-columns: 1fr; gap: 0; margin: 6px 0 0; font-size: 13.5px; } .askd dt { color: var(--muted); font-size: 12.5px; margin-top: 6px; } .askd dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.askgate { font-weight: 700; color: var(--ai-blue); margin: 8px 0 2px; }
.bd i, .bd .bdn { flex: none; white-space: nowrap; }
.vsvg .refbar { fill: none; stroke: var(--v-muted); stroke-width: 1.5; }
.herosub { font-size: 14px; color: var(--v-ink2); margin: 2px 0 6px; }
.nbnote { background: #f1f3f8; border-radius: 10px; padding: 8px 12px; font-size: 14px; margin: 6px 0; }
.chip { white-space: normal; border-radius: 12px; } .steps > *, .step { min-width: 0; } .step .ledger { table-layout: fixed; } .step .ledger td, .step .ledger th { overflow-wrap: anywhere; }
.mtbl.rq th { white-space: normal; } .mtbl.rq td { white-space: nowrap; }

/* 어두운 카드(.viz·.herobox) 안 글자 색: 카드 토큰으로 묶는다(10/16 — 배경은 그대로, 안 보이던 글자 색만). 칸 자체에 색이 박힌 히트맵 셀·뱃지, 카드 안 밝은 상자(.nbnote 등)는 따로 다룬다. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) :is(.viz, .herobox) :is(.sub, .note, .hlead, th):not(.dv *, details *) { color: var(--v-ink2); }   /* 밝은 상자(계산 과정 .dv·details)는 제외 */
  :root:where(:not([data-theme="light"])) .viz span:not([class]):not([style]) { color: var(--v-ink2); }
  :root:where(:not([data-theme="light"])) .viz th.mecol { color: #9ec5f4; }
  :root:where(:not([data-theme="light"])) .viz .dt-ftc { color: #e8b84a; }
  :root:where(:not([data-theme="light"])) .viz .dt.kr { background: #5b9df0; }   /* 어두운 카드 위 점·막대 색(비글자 3:1 이상) */
  :root:where(:not([data-theme="light"])) .viz .cbar i.on { background: #5b9df0; }
  :root:where(:not([data-theme="light"])) .viz .cbar.me .cv, :root:where(:not([data-theme="light"])) .viz .cbar.me b { color: #9ec5f4; }
  :root:where(:not([data-theme="light"])) .herobox .nbnote { color: #12161f; }
}

/* 선 구분: 색만이 아니라 모양으로도 — 낮음=긴 점선, 기준=굵은 실선, 높음=점선(흑백 인쇄·색각 이상 대비). 범례 견본도 같은 모양. 값(억) 라벨은 .endv 로 한 단계 진하게 */
.vsvg .ln.s1 { stroke-dasharray: 9 5; } .vsvg .ln.s2 { stroke-width: 3; } .vsvg .ln.s3 { stroke-dasharray: 2 5; stroke-width: 2.6; }
.vsvg .endlead { stroke-width: 1; fill: none; } .vsvg .endlead.s1 { stroke: var(--s1); } .vsvg .endlead.s2 { stroke: var(--s2); } .vsvg .endlead.s3 { stroke: var(--s3); }
.vsvg .endv { fill: var(--v-ink2); font-weight: 600; }
.sw.ps1 { background: repeating-linear-gradient(90deg, var(--s1) 0 7px, transparent 7px 11px); height: 3px; border-radius: 0; width: 22px; } .sw.ps2 { background: var(--s2); height: 4px; width: 22px; } .sw.ps3 { background: repeating-linear-gradient(90deg, var(--s3) 0 2px, transparent 2px 6px); height: 3px; border-radius: 0; width: 22px; }

/* 글자 후광: 선·막대·점과 겹쳐도 읽히도록 배경색 테두리를 글자 뒤에 깐다(차트 모든 SVG 글자). 색은 카드 배경과 같게 — 쪽(PDF)에서는 흰색 */
.viz, .herobox { --v-halo: var(--v-surface); }
.vsvg text { paint-order: stroke fill; stroke: var(--v-halo, #fff); stroke-width: 3px; stroke-linejoin: round; }
.vsvg .tgtt { stroke: none; } .vsvg .endv { stroke-width: 3px; }

/* 이벤트 표식(가구·이벤트 설계 목업) */
.vsvg .evm { stroke: var(--v-ink2); stroke-width: 1.5; stroke-dasharray: 3 4; } .vsvg .evc { fill: var(--v-ink); } .vsvg .evn { fill: var(--v-surface); font-size: 12px; font-weight: 800; stroke: none; }