/* PC(전문가 화면형) 목업 — 라이브 /lab/ 의 lab.css·balance.css 를 그대로 쓰고, 여기에는 그 변수만 쓰는 부품만 둔다(새 팔레트 없음).
   색: 라이브 셸이 열어 둔 --ret-* 고리에 모바일 목업(aifi.css)과 같은 파랑을 넣는다. viz.css 가 쓰는 이름(--line·--muted·--ai-blue)은 lab 변수로 잇는다. */
:root { --ret-accent: #164ed8; --ret-accent-ink: #0f3a9f; --ret-accent-soft: #e6eefc; --ret-accent-line: #bcd3f5; --ret-sidebar: #eef3fb;
  --line: var(--lx-line); --muted: var(--lx-muted); --ai-blue: #164ed8; --ai-blue-soft: #e6eefc; --ai-blue-line: #bcd3f5; --ink: var(--lx-ink); }
.pc-mock { background: #fbf3e3; border: 1px solid #e7cf8f; border-radius: 8px; padding: 6px 12px; font-size: 13px; margin: 0 0 10px; } .pc-mock b { color: #7a5a10; }
.pc-side-sec { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--lx-line); font-size: 13.5px; }
.pc-side-sec h3 { font-size: 12.5px; color: var(--lx-muted); margin: 0 0 6px; font-weight: 700; letter-spacing: .02em; }
.pc-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; } .pc-kv dt { color: var(--lx-muted); } .pc-kv dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.pc-seg { display: inline-flex; border: 0.8px solid var(--lx-line); border-radius: 8px; overflow: hidden; background: #fff; }
.pc-seg button { border: 0; background: none; padding: 5px 12px; font: inherit; font-size: 13.5px; cursor: pointer; color: var(--lx-text); } .pc-seg button + button { border-left: 0.8px solid var(--lx-line); }
.pc-seg button[aria-pressed="true"] { background: var(--lx-soft); color: var(--lx-accent); }
.pc-aibtn { display: block; width: 100%; margin-top: 10px; border: 0; background: var(--lx-accent); color: #fff; border-radius: 8px; padding: 8px 10px; font: inherit; font-weight: 700; cursor: pointer; }
.pc-scbar { display: flex; gap: 10px; align-items: center; margin: 0 0 10px; font-size: 13.5px; color: var(--lx-muted); flex-wrap: wrap; }
.sc-only { display: none; } body[data-sc="low"] .sc-only[data-sc="low"], body[data-sc="base"] .sc-only[data-sc="base"], body[data-sc="high"] .sc-only[data-sc="high"] { display: block; }
.pc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 0.8px solid var(--lx-line); border-radius: 10px; background: #fff; margin: 6px 0 12px; }
.pc-kpis > div { padding: 10px 16px; min-width: 0; } .pc-kpis > div + div { border-left: 0.8px solid var(--lx-line); }
.pc-kpis .k { font-size: 13.5px; color: var(--lx-muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .pc-kpis .v { font-size: 32px; line-height: 1.35; font-variant-numeric: tabular-nums; } .pc-kpis .v small { font-size: 15px; color: var(--lx-muted); margin-left: 2px; }
.pc-kpis .s { font-size: 12.5px; color: var(--lx-muted); } .pc-kpis .why { font-size: 12.5px; margin-top: 4px; display: inline-block; color: var(--lx-accent); cursor: pointer; background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; }
.pc-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } .pc-g2 > * { min-width: 0; }
.pc-g2 .viz, .lx-main .viz { margin: 0 0 14px; border-radius: 10px; border-color: var(--lx-line); }
.pc-tbl { width: 100%; border-collapse: collapse; font-size: 13.76px; font-variant-numeric: tabular-nums; } .pc-tbl th { font-size: 11.84px; font-weight: 600; color: var(--lx-muted); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--lx-line); white-space: nowrap; }
.pc-tbl td { padding: 6px 8px; border-bottom: 1px solid #eef0f4; vertical-align: top; } .pc-tbl .r { text-align: right; } .pc-tbl tr.grp td { background: #f6f8fb; font-weight: 700; font-size: 12.5px; } .pc-tbl tr.me td { background: var(--lx-soft); }
.pc-tbl code, .dv code { font-size: 12px; color: #3d4556; }
.pc-wrap { overflow-x: auto; } .pc-wrap.tall { max-height: 520px; overflow-y: auto; } .pc-wrap.tall th { position: sticky; top: 0; background: #fff; }
.pc-box { border: 0.8px solid var(--lx-line); border-radius: 10px; background: #fff; padding: 12px 14px; margin: 0 0 14px; min-width: 0; } .pc-box h3 { font-size: 16px; margin: 0 0 6px; } .pc-box .sub { color: var(--lx-muted); font-size: 13.5px; margin: 0 0 8px; }
.pc-note { font-size: 12.5px; color: var(--lx-muted); margin: 6px 0 0; }
/* 계산 과정 보기 */
details.dv { border: 0.8px solid var(--lx-aline); border-radius: 8px; background: #fff; margin: 0 0 12px; } details.dv > summary { cursor: pointer; padding: 7px 12px; font-weight: 700; color: var(--lx-accent); list-style: none; }
details.dv > summary::-webkit-details-marker { display: none; } details.dv > summary::before { content: "▸ "; } details.dv[open] > summary::before { content: "▾ "; } details.dv > summary small { font-weight: 400; color: var(--lx-muted); margin-left: 6px; }
.dv-flow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 0 12px 8px; font-size: 12.5px; } .dv-flow span { border: 0.8px solid var(--lx-line); border-radius: 999px; padding: 1px 9px; background: #f7f9fc; } .dv-flow i { color: var(--lx-muted); font-style: normal; }
ol.dv-steps { list-style: none; margin: 0; padding: 0 12px 10px; counter-reset: none; }
.dv-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px dashed var(--lx-line); }
.dv-n { width: 26px; height: 26px; border-radius: 50%; background: var(--lx-soft); color: var(--lx-accent); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.dv-step.dec .dv-n { background: #fff5dd; color: #6b4a06; }
.dv-l { font-weight: 600; margin: 0 0 4px; } .dv-expr { font-family: ui-monospace, Consolas, monospace !important; font-size: 12.5px; background: #f6f8fb; border-radius: 6px; padding: 4px 8px; display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.dv-io { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 10px; margin-top: 6px; } .dv-io table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .dv-io td { padding: 2px 6px; border-bottom: 1px solid #f0f2f5; }
.dv-res { font-size: 13.5px; } .dv-res b { font-size: 16px; } .dv-src { font-size: 12px; color: var(--lx-muted); margin-top: 4px; }
.dv-st { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 0 7px; border: 1px dashed #7d8696; color: #4a5263; white-space: nowrap; }
.dv-more summary { cursor: pointer; font-size: 12.5px; color: var(--lx-accent); } .dv-dec { font-size: 12.5px; background: #fffaf0; border: 1px solid #e7cf8f; border-radius: 6px; padding: 4px 8px; display: inline-block; }
.dv-q { display: flex; align-items: flex-end; gap: 1px; height: 46px; margin: 4px 0; } .dv-q i { flex: 1; background: #c9d6ee; min-width: 2px; } .dv-q i.min { background: #b88a1e; }
.dv-miss { border: 1px dashed #b9b2a2; border-radius: 8px; padding: 8px 12px; font-size: 13px; color: #4a5263; background: #fbfaf6; margin: 0 0 10px; }
/* 조약 점 행렬 */
table.mx { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; } .mx th { font-size: 12px; color: var(--lx-muted); font-weight: 600; padding: 6px 4px; text-align: center; vertical-align: bottom; line-height: 1.35; }
.mx th[scope=row] { text-align: left; color: var(--lx-text); font-weight: 600; white-space: nowrap; padding-right: 10px; } .mx td { text-align: center; padding: 8px 4px; border-top: 1px solid #eef0f4; }
.mx .me { background: var(--lx-soft); } .mx th.mecol { color: var(--lx-accent); font-weight: 800; }
.dt { display: inline-block; width: 13px; height: 13px; border-radius: 50%; vertical-align: middle; margin: 0 1px; } .dt.kr { background: #164ed8; } .dt.us { background: #eb6834; } .dt.unk { border: 1.5px dashed #b88a1e; background: none; }
.dt-ftc { display: block; font-size: 10.5px; color: #6b4a06; font-weight: 700; margin-top: 2px; }
.mx-lg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--lx-muted); margin: 8px 0 0; } .mx-lg span { display: inline-flex; gap: 5px; align-items: center; }
/* 연금 산식 단계 */
.pf { display: flex; gap: 0; align-items: stretch; margin: 6px 0 10px; flex-wrap: wrap; }
.pf > div { flex: 1 1 150px; border: 0.8px solid var(--lx-line); border-radius: 10px; padding: 8px 10px; background: #fff; font-size: 13px; position: relative; margin: 0 14px 8px 0; min-width: 0; }
.pf > div:not(:last-child)::after { content: "→"; position: absolute; right: -13px; top: 40%; color: var(--lx-muted); }
.pf b.v { display: block; font-size: 19px; margin: 2px 0; } .pf .r { font-size: 11.5px; color: var(--lx-muted); overflow-wrap: anywhere; }
.pf > div.wait { border-style: dashed; background: #fbfaf6; }
.slot4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .slot4 .pc-box { margin: 0; }
.na { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 0 9px; background: #f1f3f8; border: 1px solid #c9cfdc; color: #3d4556; }
.pc-switch { font-size: 12.5px; color: var(--lx-muted); }
@media (max-width: 1180px) { .pc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pc-kpis > div:nth-child(3) { border-left: 0; } .pc-kpis > div:nth-child(n+3) { border-top: 0.8px solid var(--lx-line); } .pc-g2, .slot4 { grid-template-columns: minmax(0, 1fr); } }
/* 수령 나이별 월 연금 막대 */
.cbars { display: flex; align-items: flex-end; gap: 8px; height: 230px; padding: 8px 4px 0; border-bottom: 1px solid var(--lx-line); margin: 6px 0 4px; }
.cbar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; cursor: default; }
.cbar i { display: block; width: 70%; max-width: 46px; border-radius: 4px 4px 0 0; background: #9ec5f4; } .cbar i.early { background: #c9d6ee; } .cbar i.on { background: #164ed8; } .cbar i.late { background: #6da7ec; }
.cbar .cv { font-size: 12px; font-weight: 700; margin-bottom: 3px; font-variant-numeric: tabular-nums; } .cbar b { font-size: 13px; margin-top: 4px; } .cbar small { font-size: 11.5px; color: var(--lx-muted); }
.cbar.me .cv, .cbar.me b { color: #164ed8; }
.pc-tbl td.r { white-space: nowrap; }

/* ---- 라이브 패밀리 오피스(/lab/family/) 실측에 맞춘 글자·카드·탭 (2026-10-16) ----
   실측: h1 36/600 · meta 14 · 주제 탭 15.2px/6px 14px/0.8px 테두리/8px(현재 = 청록 바탕·테두리·글자) · 알림 14 · 리드 15/1.65 · h2 24/600 · 카드 제목 16/600(12px 14px) · 표 14/1.6(머리 14/600 회색 바탕) · note 13.76 */
.lx-steps button { display: inline-block; background: #fff; border: 0.8px solid var(--lx-line); border-radius: 8px; padding: 6px 14px; font: inherit; font-size: 15.2px; line-height: 1.6; color: var(--lx-text); cursor: pointer; }
.lx-steps button:hover { border-color: var(--lx-aline); }
.lx-steps button[aria-current="page"] { background: var(--lx-soft); border-color: var(--lx-aline); color: var(--lx-accent); }
.lx-main > .lx-steps { margin-top: 12px; }
.fx-tabhd h2 { font-size: 24px; font-weight: 600; line-height: 1.2; margin: 8px 0 4px; } .fx-tabhd .fm-lead { margin: 4px 0 14px; }
.pc-tbl { font-size: 14px; line-height: 1.6; background: #fff; border: 0.8px solid var(--lx-line); border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: hidden; } .pc-tbl th { font-size: 14px; font-weight: 600; color: var(--lx-muted); background: #eef1f6; padding: 6px 8px; } .pc-tbl td { padding: 6px 8px; border-top: 0.8px solid rgba(49,51,63,.1); }
.pc-tbl tr.grp td { font-size: 13px; font-weight: 600; color: var(--lx-muted); background: #f7f8fa; }
.pc-box { border-radius: 8px; padding: 12px 14px; } .pc-box h3 { font-size: 16px; font-weight: 600; } .pc-box .sub { font-size: 14px; } .pc-note, .pc-kpis .s, .pc-kpis .why { font-size: 13.76px; line-height: 1.6; }
.pc-kpis .k { font-size: 14px; } .pc-kpis .v { font-size: 36px; font-weight: 400; line-height: 1.6; } .pc-kpis .v small { font-size: 16px; } .pc-kpis > div { padding: 8px 16px; }
.pc-seg button, .pc-aibtn { font-size: 14px; } .pc-scbar, .pc-side-sec, .pc-kv { font-size: 14px; } .pc-side-sec h3 { font-size: 13.76px; }
.pc-mock { font-size: 14px; } .dv-flow { font-size: 13.76px; } .dv-l { font-size: 15px; } .dv-expr { font-size: 13.5px; } .dv-io table { font-size: 13.76px; } .dv-io td { padding: 3px 6px; } .dv-res { font-size: 14px; } .dv-src, .dv-dec, .dv-miss { font-size: 13.5px; } .dv-st { font-size: 13px; } details.dv > summary { font-size: 15px; padding: 8px 12px; }
.mx { font-size: 14px; } .mx th { font-size: 13.5px; } .mx-lg { font-size: 13.76px; } .dt-ftc { font-size: 12px; } .pf > div { font-size: 14px; } .pf .r { font-size: 13px; } .cbar .cv { font-size: 13.5px; } .cbar b { font-size: 14px; } .cbar small { font-size: 12.5px; } .na { font-size: 13px; }
.bd { font-size: 13.5px !important; padding: 0 10px; } .bd small { font-size: 13px !important; }
.lx-main .lgd, .lx-main .viz .vs { font-size: 14px; } .viz h3 { font-size: 16px; font-weight: 600; } .viz .note { font-size: 13.76px; line-height: 1.6; } .hm td { font-size: 14px; } .hm th { font-size: 13.5px; }
.ik-lead, .ik-way span, .ik-t, .ik-q, .ik-fix, .ik-done, .ik-chk { font-size: 14px; } .ik-note, .ik-k, .ik-evc, .ik-cat { font-size: 13.76px; } .ik-rb { font-size: 17px; } .ik-t th { font-size: 13.5px; } .ik-steps li { font-size: 14.5px; } .ik-btn, .ik-ok, .ik-qb button { font-size: 14px; } .cf { font-size: 13px; } .bb b { font-size: 10.5px; }
.rp-ctl h3 { font-size: 16px; } .rp-chk { font-size: 14px; } .rp-hint, .rp-pg { font-size: 13.76px; } .rp-save { font-size: 16px; }
/* 차트: 화면 폭에 맞춰 글자가 줄지 않게 — 2열 칸에서는 모바일 viewBox(340)를 400px 이하로, 한 줄 폭에서는 PC viewBox(720)를 820px 이하로 */
.lx-main .vsvg { margin: 0 auto; } .lx-main .vz-d .vsvg { max-width: 820px; } .lx-main .vz-m .vsvg { max-width: 400px; }
.lx-main .pc-g2 .vz-d { display: none; } .lx-main .pc-g2 .vz-m { display: block; }
.lx-main .vsvg .tk { font-size: 12.5px; } .lx-main .vsvg .lb { font-size: 12.5px; }
/* 표가 들어 있는 칸이 좁아 글자가 접히지 않도록 한 줄 폭으로(라이브 패밀리 오피스처럼 표는 본문 폭) */
.pc-g2 { grid-template-columns: minmax(0, 1fr) !important; }
.lx-main .pc-g2 .vz-d { display: block !important; } .lx-main .pc-g2 .vz-m { display: none !important; }
.pc-tbl td, .pc-tbl th { white-space: nowrap; } .pc-tbl td:first-child, .pc-tbl th:first-child { white-space: normal; min-width: 9em; }

/* 대비(WCAG AA): 라이브 lab.css 의 옅은 회색(#808495 → 흰 배경 3.7:1)을 사이트 보조색으로 */
.lx-side-cap, .lx-hd .meta { color: var(--lx-muted, #5b6475); }

/* 왼쪽 사이드바(제목·입력 요약·시나리오·읽는 법)가 스크롤해도 화면에 붙어 있게 — 솔루션 화면과 같은 방식(10/16) */
@media (min-width: 960px) { .lab-app > .lx-side > details { position: sticky; top: 46px; max-height: calc(100vh - 46px); overflow-y: auto; } }

/* 글 칸이 긴 표(적용 규칙·검증·모름·과세 표): 칸이 서로 넘쳐 겹치지 않게 줄바꿈 허용 + 칸 최소 폭 */
.pc-tbl.txt td { white-space: normal; overflow-wrap: anywhere; min-width: 5.5em; } .pc-tbl.txt td:first-child, .pc-tbl.txt th:first-child { min-width: 8em; }
.pc-tbl.rules td:nth-child(2) { min-width: 16em; } .pc-tbl.rules td:nth-child(3) { min-width: 7.5em; } .pc-tbl.rules td:nth-child(5) { min-width: 9em; } .pc-tbl.rules td:nth-child(6) { min-width: 11em; } .pc-tbl.rules td a { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }

/* 모바일 축약 모드(ko.html = 전문가 화면과 같은 탭·그림, 글자·표는 줄임). body.mx 에서만. '입력' 탭은 그대로. */
body.mx .lx-top { flex-wrap: wrap; row-gap: 4px; } body.mx .lx-apps { display: flex; order: 3; width: 100%; gap: 4px; overflow-x: auto; scrollbar-width: none; } body.mx .lx-apps .lx-app { flex: none; font-size: 13px; padding: 4px 8px; } body.mx .lx-apps .ico, body.mx .lx-apps .dot { display: none; }
body.mx .lx-steps { flex-wrap: nowrap; overflow-x: auto; position: sticky; top: 0; z-index: 5; background: var(--lx-bg, #fff); padding: 8px 0 6px; margin: 0 0 6px; scrollbar-width: none; } body.mx .lx-steps::-webkit-scrollbar { display: none; } body.mx .lx-steps button { flex: none; font-size: 14px; padding: 6px 12px; white-space: nowrap; }
body.mx .lx-hd .meta, body.mx .fx-notice { font-size: 12px; }
body.mx [data-pane]:not([data-pane="in"]) .fm-lead, body.mx [data-pane]:not([data-pane="in"]) .pc-note, body.mx [data-pane]:not([data-pane="in"]) p.sub, body.mx [data-pane]:not([data-pane="in"]) div.sub, body.mx [data-pane]:not([data-pane="in"]) details.dv, body.mx [data-pane]:not([data-pane="in"]) .lm-row, body.mx [data-pane]:not([data-pane="in"]) .lm { display: none !important; }
body.mx [data-pane]:not([data-pane="in"]) .pc-tbl tbody tr:nth-child(n+5) { display: none; } body.mx [data-pane]:not([data-pane="in"]) .pc-wrap { overflow-x: auto; }
body.mx [data-pane]:not([data-pane="in"]) .pc-g2 { grid-template-columns: minmax(0, 1fr); } body.mx .pc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.mx .mx-more { display: block !important; margin: 14px 0 6px; } body.mx .mx-more .lv-btn { display: block; text-align: center; }
body:not(.mx) .mx-more { display: none; }
body.mx .lab-app { display: flex; flex-direction: column; } body.mx .lx-main { order: 1; width: 100%; min-width: 0; } body.mx .lx-side { order: 2; margin-top: 14px; } body.mx .lx-side > details > summary.sr-only { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; font-weight: 700; font-size: 15px; padding: 12px 10px 0; } body.mx .lx-side-cap, body.mx .lx-side-app { display: none; }
body.mx .mv-lines li:nth-child(n+3) { display: none; }
body.mx .mx-more .lv-btn { background: #164ed8; color: #fff; border: 0; border-radius: 10px; padding: 12px 14px; font-weight: 700; font-size: 15px; text-decoration: none; }
body.mx .mx-more a.lv-btn { display: block !important; }

/* 보고서 저장(report_live.js): 화면에서는 숨기고 인쇄할 때만 보인다 */
#rp-live { display: none; }
@media print {
  body.mx > *:not(#rp-live), body > *:not(#rp-live) { display: none !important; }
  #rp-live { display: block !important; color: #14213d; font-size: 12px; line-height: 1.55; }
  .rl-p { page-break-after: always; break-after: page; position: relative; padding: 4px 2px 22px; } .rl-p:last-child { page-break-after: auto; break-after: auto; }
  .rl-p h1 { font-size: 22px; margin: 4px 0 10px; } .rl-p h2 { font-size: 17px; margin: 0 0 8px; border-bottom: 1.5px solid #14213d; padding-bottom: 4px; } .rl-p h3 { font-size: 13.5px; margin: 14px 0 6px; }
  .rl-kick { margin: 0; color: #4a5468; font-weight: 700; } .rl-huge { font-size: 34px; font-weight: 800; margin: 8px 0 2px; } .rl-huge span { padding: 0 8px; } .rl-huge small { font-size: 14px; font-weight: 600; margin-left: 8px; } .rl-sub, .rl-note { color: #4a5468; margin: 4px 0 10px; }
  .rl-t { width: 100%; border-collapse: collapse; margin: 6px 0 10px; } .rl-t th, .rl-t td { border-bottom: 0.8px solid #c9d0dd; padding: 4px 6px; text-align: left; vertical-align: top; } .rl-t .r { text-align: right; } .rl-t th { background: #eef1f6; font-size: 11.5px; }
  .rl-fig svg { width: 100%; height: auto; max-height: 260px; } .rl-wm { position: absolute; right: 0; bottom: 0; margin: 0; font-size: 10px; color: #8791a5; }
  @page { size: A4; margin: 14mm; }
}
@media print { .rl-fig.viz { border: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; margin: 0 0 8px !important; } }

.pc-box .lv-btn[data-rp-print] { background: #164ed8; color: #fff; border: 0; border-radius: 10px; padding: 10px 18px; font-weight: 700; cursor: pointer; }
body.mx .mv-hm thead th:first-child { font-size: 0; width: 38px; padding: 0; } body.mx .mv-hm tbody th { white-space: nowrap; font-size: 12px; padding: 0 6px; } body.mx .mv-hm td { min-width: 42px; padding: 6px 2px; font-size: 12px; } body.mx .mv-hm thead th { font-size: 12px; }

/* 나이별 보기(슬라이더)·내보내기 */
.mv-age-sl { display: flex; align-items: center; gap: 10px; margin: 8px 0; } .mv-age-sl input[type=range] { flex: 1; height: 34px; accent-color: #164ed8; } .mv-age-sl output { min-width: 3.2em; font-weight: 800; }
.mv-age-mk { stroke: #164ed8; stroke-width: 2; stroke-dasharray: 4 3; } .mv-age-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 8px 0; } .mv-age-kv > div { border-top: 1px solid #eef0f4; padding-top: 6px; } .mv-age-kv dt { font-size: 12.5px; color: #4a5468; } .mv-age-kv dd { margin: 0; font-weight: 700; } .mv-age-big { font-size: 22px; }
.mv-exp { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 2px; } .mv-exp .lv-btn { padding: 8px 14px; font-size: 14px; }
body.mx .mv-exp .pc-note { display: block !important; }

.mv-cmp-in { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 8px 0; } .mv-cmp-in input { width: 4.2em; font: inherit; padding: 6px 8px; border: 1px solid #c9d0dd; border-radius: 8px; } .mv-cmp-in .lv-btn { padding: 8px 16px; font-size: 14px; background: #164ed8; color: #fff; border: 0; border-radius: 10px; font-weight: 700; }

.mv-asm { margin: 6px 0 2px; font-size: 13px; color: #3a4252; } body.mx .mv-asm { display: block !important; }

body.mx .mv-dvkeep details.dv, body.mx .mv-dvkeep .dv-miss { display: block !important; }
.mv-age .mv-age-kv dt, .mv-cmp .pc-note, .mv-age .sub, .mv-asm { color: var(--v-ink2, #3a4252); } .mv-age .mv-age-kv dd, .mv-age-sl, .mv-age-sl output { color: var(--v-ink, #14213d); } .mv-age-kv > div { border-top-color: var(--v-grid, #eef0f4); }
.mv-exp .lv-btn.sub, .mv-cmp .lv-btn.sub { background: transparent; color: var(--v-ink, #14213d); border: 1px solid var(--v-axis, #c3c2b7); }

/* 첫 카드(월 지출 한 숫자 + 성공 여부 한 줄) · 입력 완성도 · 값 가리기 · 청구 차이 강조 */
.mv-first { padding: 16px 16px 12px; } .mv-first-k { display: block; font-size: 13px; color: var(--v-ink2, #3a4252); margin: 6px 0 2px; } .mv-first-v { font-size: 44px; font-weight: 800; line-height: 1.1; color: var(--v-ink, #14213d); } .mv-first-v small { font-size: 16px; font-weight: 600; margin-left: 8px; color: var(--v-ink2, #3a4252); }
.mv-first-l { margin: 8px 0 6px; padding: 8px 10px; border-radius: 8px; font-size: 14.5px; line-height: 1.5; color: var(--v-ink, #14213d); background: rgba(22, 78, 216, .08); } .mv-first-l i { font-style: normal; font-weight: 800; margin-right: 4px; } .mv-s-ok .mv-first-l { background: rgba(27, 175, 122, .14); } .mv-s-hi .mv-first-l { background: rgba(235, 104, 52, .14); }
.mv-comp { margin: 6px 0 0; font-size: 13px; color: var(--v-ink2, #3a4252); line-height: 1.6; } body.mx .mv-comp { display: block !important; }
.mv-maskbtn { margin-left: auto; font: inherit; font-size: 13px; padding: 4px 12px; border-radius: 999px; border: 1px solid #c9d0dd; background: #fff; color: #14213d; cursor: pointer; } .lx-hd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; }
body[data-mask="1"] [data-pane]:not([data-pane="in"]) :is(.v, .s, td, dd, .tk, .lb, .mv-age-big, .mv-first-v, .mv-first-l, .mv-comp, .mv-lines li, .mv-hi, .mv-age-sl output) { filter: blur(7px); user-select: none; }
p.mv-hi { margin: 8px 0; padding: 8px 10px; border-left: 3px solid #164ed8; background: rgba(22, 78, 216, .08); font-size: 14px; color: var(--v-ink, #14213d); } body.mx p.mv-hi { display: block !important; }

/* 타임라인·자산 구성·What-if */
.mv-cp-h { margin: 10px 0 6px; font-size: 14px; } .mv-cp-bar { display: flex; height: 18px; border-radius: 9px; overflow: hidden; background: var(--v-grid, #e1e0d9); } .mv-cp-bar i, .mv-cp-lg i { display: inline-block; } .mv-cp-bar i { height: 100%; }
.c0 { background: var(--s1, #2a78d6); } .c1 { background: var(--s2, #eb6834); } .c2 { background: var(--s3, #1baf7a); } .c3 { background: var(--s-off, #898781); }
.mv-cp-lg { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; color: var(--v-ink, #14213d); } .mv-cp-lg i { width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.mv-wi-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .mv-wi-btns .lv-btn.sub { background: transparent; color: var(--v-ink, #14213d); border: 1px solid var(--v-axis, #c3c2b7); padding: 8px 12px; font-size: 14px; border-radius: 10px; cursor: pointer; }

/* 다크모드 표 글자색 고정(1017b 핫픽스): .pc-tbl 은 늘 흰 배경이라 .viz 의 밝은 글자색을 물려받으면 안 보였다 — 비교·What-if·청구 시점·연도별 표 등 공통 */
.pc-tbl, .pc-tbl td { color: #14213d; } .pc-tbl th { color: #4a5468; } .pc-tbl td b { color: #14213d; } .pc-tbl tr.grp td { color: #4a5468; }
body[data-mask="1"] :is(.lx-side .pc-kv dd, .lx-side-in dd, [data-pane] svg text, .amt) { filter: blur(7px); user-select: none; }   /* 1017r: 입력 요약·그림 눈금·문장 속 금액 */
fieldset.rp-inc { border: 1px solid #d9dde7; border-radius: 10px; padding: 8px 12px 10px; margin: 10px 0; } .rp-inc legend { font-weight: 700; font-size: 14px; padding: 0 4px; } .rp-inc .rp-chk { display: inline-block; margin: 4px 14px 0 0; font-size: 14px; }   /* 1017s: ⑧ 포함할 항목 */
.rqf { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; }   /* 1017t: 필요 수익률 바닥 문구 */
html:not([lang="ko"]) .pc-kpis .v small, html:not([lang="ko"]) .lv-kpi .v small { margin-left: .3em; }   /* 영어·es KPI 단위 앞 한 칸(5.1% before inflation) */