/* p3b.css (v80): 3단계 장부 B 화면 v3 (재무상태표 bs, 손익계산서 pl, 현금흐름표 cf). v3.css 다음에 읽는다.
   시안: 보드 "장부 2" (p3_bs, p3_pl, p3_cf). 색은 --v-* 토큰만. */

/* ---------- 배치: 첫 줄 두 카드 (PC는 같은 줄에서 시작해 같은 높이로 끝남) ---------- */
.p3b-row{display:flex;flex-direction:column;gap:12px;min-width:0}
@media (min-width:900px){
  .p3b-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
  .p3b-row.wide1{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
  .p3b-row>.l2-card{min-width:0}
  .p3b-net .p3b-tiles,.p3b-pj .l2-tot,.p3b-sum .p3b-tiles{margin-top:auto}
}
/* 휴대폰: 맨 아래 메모 줄은 회색 바탕 */
@media (max-width:767px){
  .v2.p3b>.pnote-foot{margin:0 calc(-1 * var(--gut,20px));padding:16px 0 10px;background:var(--v-ground);box-shadow:0 -12px 0 var(--v-ground)}
}
.v2.p3b .v3-seg.sm button{height:28px;padding:0 12px;font-size:13px}

/* ---------- 큰 숫자, 칸 ---------- */
.p3b-hero{display:flex;flex-direction:column;gap:4px;margin-top:-4px}
.p3b-cmp{font-size:14px;color:var(--v-ink2)}
.p3b-cmp b{font-weight:700;color:var(--v-ink)}
.p3b-tiles{display:grid;gap:8px;min-width:0}
.p3b-tiles.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.p3b-tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.p3b-tile{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:16px;background:var(--v-ground);min-width:0}
.p3b-tile>.k{font-size:13px;font-weight:600;color:var(--v-ink2);white-space:nowrap}
.p3b-tile>.v{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--v-ink);white-space:nowrap}
.p3b-tile>.v small{font-size:14px;font-weight:600;margin-left:1px}
.p3b-tile>.v.is-neg{color:var(--v-coral-t)}
.p3b-tile>.f{font-size:12px;line-height:1.45;color:var(--v-ink2);word-break:keep-all;overflow-wrap:anywhere}
/* 부채, 순자산 비율 막대 */
.p3b-ratio{display:flex;flex-direction:column;gap:8px}
.p3b-rbar{display:flex;height:10px;border-radius:999px;overflow:hidden;gap:2px;background:var(--v-track)}
.p3b-rbar>i{display:block;min-width:0;background:var(--v-peri)}
.p3b-rbar>i.n{background:var(--v-navy)}
.p3b-rlab{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--v-ink2)}
.p3b-rlab>span{display:flex;align-items:center;gap:6px;white-space:nowrap}
.p3b-rlab i{flex:none;width:8px;height:8px;border-radius:999px;background:var(--v-peri)}
.p3b-rlab i.n{background:var(--v-navy)}
.p3b-rlab b{font-weight:700;color:var(--v-ink)}

/* ---------- 구성 ---------- */
.p3b-mix{display:flex;flex-direction:column;gap:12px}
.p3b-mixbar{display:flex;height:12px;border-radius:999px;overflow:hidden;gap:2px}
.p3b-mixbar>i{display:block;min-width:2px}
.p3b-mixl{display:flex;flex-direction:column}
.p3b-mixt{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:-2px;font-size:14px;color:var(--v-ink3)}
.p3b-mixt>b{font-size:17px;font-weight:700;color:var(--v-ink);letter-spacing:-.02em;white-space:nowrap}
.p3b-mixt>b>small{font-size:14px;font-weight:600;margin-left:1px}
.p3b-mixr{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;font-variant-numeric:tabular-nums}
.p3b-mixr[aria-pressed="false"]>i{opacity:.3}
.p3b-mixr[aria-pressed="false"]>.n{color:var(--v-ink4);text-decoration:line-through;text-decoration-color:var(--v-ink4)}
.p3b-mixr[aria-pressed="false"]>.p,.p3b-mixr[aria-pressed="false"]>.v{color:var(--v-ink4)}
@media (hover:hover){.p3b-mixr:hover>.n{text-decoration:underline;text-underline-offset:3px}.p3b-mixr[aria-pressed="false"]:hover>.n{text-decoration:line-through}}
.p3b-mixr>i{flex:none;width:10px;height:10px;border-radius:999px}
.p3b-mixr>.n{flex:1;min-width:0;font-size:14px;color:var(--v-ink);word-break:keep-all;overflow-wrap:anywhere}
.p3b-mixr>.p{flex:none;min-width:64px;text-align:right;font-size:13px;font-weight:600;color:var(--v-ink2);white-space:nowrap}
.p3b-mixr>.v{flex:none;min-width:84px;text-align:right;font-size:14px;font-weight:600;color:var(--v-ink);white-space:nowrap}

/* ---------- 표 도구 ---------- */
.p3b-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.p3b-tools>.sp{flex:1}
.p3b-tog{flex:none;display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 12px;border:0;border-radius:999px;background:var(--v-fill);font:inherit;font-size:13px;font-weight:600;color:var(--v-ink3);white-space:nowrap;cursor:pointer}
.p3b-tog.on{color:var(--v-ink);padding-left:9px}
.p3b-tog .ico{flex:none}
.p3b-folds{display:inline-flex;align-items:center;gap:8px}
.p3b-folds>button{height:32px;padding:0 2px;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--v-ink2);white-space:nowrap;cursor:pointer}
.p3b-folds>button[disabled]{color:var(--v-mute);cursor:default}
.p3b-folds>i{width:1px;height:12px;background:var(--v-line)}
.p3b-hr{display:inline-flex;align-items:center;gap:12px}
.p3b-xp{position:relative;flex:none}
.p3b-xp .l2-ddm{right:0;top:calc(100% + 6px);min-width:150px}
@media (hover:hover){.p3b-folds>button:not([disabled]):hover{color:var(--v-ink)}}

/* 펼침 표시 */
.p3b-car{flex:none;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:var(--v-icon3);transition:transform .15s ease}
.p3b-car.on{transform:rotate(90deg)}
.p3b-car.sp{visibility:hidden}

/* ---------- 휴대폰 표: 이름 | 금액 (금액 오른쪽 끝이 줄마다 같음) ---------- */
.p3b-mt{display:flex;flex-direction:column;font-variant-numeric:tabular-nums}
.p3b-mh{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;padding:2px 0 8px;border-bottom:1px solid var(--v-line);font-size:12px;font-weight:600;color:var(--v-ink3)}
.p3b-ms.top{border-top:1px solid var(--v-ink)}
.p3b-msh{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:58px}
.p3b-msh>b{font-size:17px;font-weight:700;color:var(--v-ink)}
.p3b-msh>b.v{white-space:nowrap}
.p3b-mg{display:flex;align-items:flex-start;gap:12px;width:100%;padding:12px 0;border:0;border-top:1px solid var(--v-line);background:none;font:inherit;color:var(--v-ink);text-align:left;cursor:pointer}
div.p3b-mg{cursor:default}
.p3b-mg>.l{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.p3b-mg .n{display:flex;align-items:flex-start;gap:4px;font-size:15px;font-weight:600;line-height:21px;word-break:keep-all;overflow-wrap:anywhere}
.p3b-mg .n>.p3b-car{margin-top:2px}
.p3b-mg.leaf .n{padding-left:20px}
.p3b-mg .shr{display:flex;align-items:center;gap:8px;padding-left:20px}
.p3b-mg .shr>.v3-bar{flex:1;min-width:0}
.p3b-mg .shr>.pc{flex:none;min-width:52px;font-size:12px;font-weight:600;color:var(--v-ink3);white-space:nowrap}
.p3b-mg>.v{flex:none;min-width:112px;text-align:right;font-size:15px;font-weight:600;line-height:21px;white-space:nowrap}
.p3b-mk{display:flex;align-items:center;gap:8px;width:100%;min-height:42px;padding:0 0 0 20px;border:0;background:none;font:inherit;color:var(--v-ink2);text-align:left;cursor:pointer}
div.p3b-mk{cursor:default}
.p3b-mk>.n{flex:1;min-width:0;font-size:14px;word-break:keep-all;overflow-wrap:anywhere}
.p3b-mk>.v{flex:none;font-size:14px;font-weight:500;white-space:nowrap}
.p3b-mk.hid{color:var(--v-ink3)}
.p3b-mt .is-neg{color:var(--v-coral-t)!important}
.p3b-tot{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:60px;margin:6px -12px 0;padding:0 12px;border-radius:14px;background:var(--v-ground)}
.p3b-tot>span{font-size:16px;font-weight:700}
.p3b-tot>b{font-size:18px;font-weight:700;white-space:nowrap}
.p3b-tot>b.is-neg{color:var(--v-coral-t)}
.p3b-none{margin:0;padding:10px 0 14px;font-size:14px;color:var(--v-ink3)}
.p3b-capm{margin-top:10px}
.p3b-capm .p3b-ms:first-child{border-top:1px solid var(--v-ink)}
.p3b-capq{display:flex;justify-content:center}
.p3b-capq>button{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 8px;border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--v-ink2);cursor:pointer;font-variant-numeric:tabular-nums}
.p3b-capq .ico{color:var(--v-ink4)}
@media (hover:hover){.p3b-mg:hover .n>span:last-child,.p3b-mk:hover .n{text-decoration:underline;text-underline-offset:3px}}

/* ---------- PC 표: 항목 | 비중 | 당기 | 전기 | 증감 | 증감률 ---------- */
.p3b-pt{display:flex;flex-direction:column;font-variant-numeric:tabular-nums;min-width:0}
.p3b-pr{display:grid;grid-template-columns:minmax(150px,1fr) minmax(100px,170px) minmax(108px,150px) minmax(108px,150px) minmax(96px,130px) 76px;column-gap:16px;align-items:center;padding:0 4px}
.p3b-pr>span,.p3b-pr>button{min-width:0}
.p3b-pr>:nth-child(n+3){text-align:right;white-space:nowrap}
.p3b-pr.ph{padding-bottom:10px;border-bottom:1px solid var(--v-line);font-size:12px;font-weight:600;color:var(--v-ink3)}
.p3b-pr.ph>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p3b-pr.sec{min-height:52px;border-top:1px solid var(--v-ink);font-size:16px;font-weight:700}
.p3b-pg:first-of-type>.p3b-pr.sec{border-top:0}
.p3b-pr.grp{min-height:46px;border-top:1px solid var(--v-line);font-size:15px;font-weight:600}
.p3b-pr.kid{min-height:38px;font-size:14px;color:var(--v-ink2)}
.p3b-pr.hid{min-height:38px;font-size:13px;color:var(--v-ink3)}
.p3b-pr.tot{min-height:56px;margin:6px -12px 0;padding:0 16px;border-radius:14px;background:var(--v-ground);font-size:16px;font-weight:700}
.p3b-pr .n{display:flex;align-items:center;gap:4px;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;word-break:keep-all;overflow-wrap:anywhere}
.p3b-pr span.n{cursor:default}
.p3b-pr.kid .n{padding-left:20px}
.p3b-pr .shr{display:flex;align-items:center;gap:10px}
.p3b-pr .shr>.v3-bar{flex:1;max-width:120px}
.p3b-pr .shr>.pc{font-size:12px;font-weight:600;color:var(--v-ink3);white-space:nowrap}
.p3b-pr .pv{color:var(--v-ink3);font-weight:500}
.p3b-pr .d{font-size:14px;font-weight:600;color:var(--v-ink2)}
.p3b-pr .r{font-size:13px;font-weight:600;color:var(--v-ink2)}
.p3b-pr.sec .d,.p3b-pr.sec .r,.p3b-pr.tot .d,.p3b-pr.tot .r{color:var(--v-ink)}
.p3b-pr.kid .d,.p3b-pr.kid .r{font-size:13px;font-weight:400;color:var(--v-ink3)}
.p3b-pr .hot{color:var(--v-coral-t)!important}
.p3b-pr.kid .hot{font-weight:600}
.p3b-pr .is-neg{color:var(--v-coral-t)}
.p3b-capt{margin-top:12px}
.p3b-capt .p3b-pg:first-of-type>.p3b-pr.sec{border-top:1px solid var(--v-ink)}
@media (hover:hover){.p3b-pr button.n:hover{text-decoration:underline;text-underline-offset:3px}}

/* ---------- 월별로 펼치기: 가로로 미는 표 ---------- */
.p3b-mon{overflow-x:auto;margin:0 calc(-1 * var(--gut,20px));padding:0 var(--gut,20px);scrollbar-width:thin;font-variant-numeric:tabular-nums}
@media (min-width:768px){.p3b-mon{margin:0;padding:0}}
.p3b-mr{display:grid;column-gap:12px;align-items:center;padding:0 4px}
.p3b-mr>.c{text-align:right;white-space:nowrap}
.p3b-mr>.c.sum{font-weight:700}
.p3b-mr>.c.z{color:var(--v-ink4)}
.p3b-mr.ph{padding-bottom:10px;border-bottom:1px solid var(--v-line);font-size:12px;font-weight:600;color:var(--v-ink3)}
.p3b-mr.sec{min-height:50px;border-top:1px solid var(--v-ink);font-size:15px;font-weight:700}
.p3b-mr.grp{min-height:44px;border-top:1px solid var(--v-line);font-size:14px;font-weight:600}
.p3b-mr.kid{min-height:36px;font-size:13px;color:var(--v-ink2)}
.p3b-mr.kid>.n{padding-left:20px}
.p3b-mr.hid{min-height:36px;font-size:13px;color:var(--v-ink3)}
.p3b-mr.tot{min-height:52px;margin-top:6px;border-radius:12px;background:var(--v-ground);font-size:15px;font-weight:700}
.p3b-mr .n{display:flex;align-items:center;gap:4px;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;word-break:keep-all;overflow-wrap:anywhere;min-width:0}

/* ---------- 사용자 계산식 ---------- */
.p3b-cl{display:flex;flex-direction:column}
.p3b-cr{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:6px 0;border:0;border-top:1px solid var(--v-line);background:none;font:inherit;color:var(--v-ink);text-align:left;cursor:pointer}
.p3b-cr:first-child{border-top:0}
.p3b-cr[disabled]{cursor:default}
.p3b-cr>.t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.p3b-cr>.t>b{font-size:15px;font-weight:600;word-break:keep-all;overflow-wrap:anywhere}
.p3b-cr>.t>small{font-size:12px;color:var(--v-ink3);word-break:keep-all;overflow-wrap:anywhere}
.p3b-cr>.r{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-variant-numeric:tabular-nums}
.p3b-cr>.r>b{font-size:15px;font-weight:600;white-space:nowrap}
.p3b-cr>.r>small{font-size:12px;color:var(--v-ink3);white-space:nowrap}

/* ---------- 현금흐름 폭포 그래프 ---------- */
.p3b-wlg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--v-ink2)}
.p3b-wlg>span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.p3b-wlg i{flex:none;width:10px;height:10px;border-radius:3px;box-sizing:border-box}
.p3b-wlg i.t{background:var(--v-navy)}.p3b-wlg i.u{background:var(--v-c2)}.p3b-wlg i.d{background:var(--v-mute)}
.p3b-wlg i.p{border:1.5px dashed var(--v-navy)}
.p3b-wf{width:100%;min-width:0}
.p3b-wf svg{display:block;width:100%;height:auto;overflow:visible;font-family:inherit}
.p3b-wf .gl{stroke:var(--v-line)}
.p3b-wf .ax{stroke:var(--v-track2)}
.p3b-wf .tk{font-size:11px;fill:var(--v-ink4)}
.p3b-wf .wt{fill:var(--v-navy)}.p3b-wf .wu{fill:var(--v-c2)}.p3b-wf .wd{fill:var(--v-mute)}.p3b-wf .wz{fill:var(--v-ink)}
.p3b-wf .wp{stroke:var(--v-navy);stroke-width:1.5;stroke-dasharray:4 3}
.p3b-wf .hl{stroke:var(--v-navy);stroke-width:1.4}
.p3b-wf .cn{stroke:var(--v-icon3);stroke-dasharray:2 3}
.p3b-wf .vl{font-size:12px;font-weight:700;fill:var(--v-ink)}
.p3b-wf .vd{font-size:12px;font-weight:600;fill:var(--v-ink)}
.p3b-wf .xl{font-size:12px;font-weight:700;fill:var(--v-ink)}
.p3b-wf .xl.d{font-weight:500;fill:var(--v-ink2)}
.p3b-wf .xs{font-size:11px;fill:var(--v-ink3)}
.p3b-off{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;font-size:13px;color:var(--v-ink2);word-break:keep-all}

/* 기간 요약, 상세 맨 위 세 줄 */
.p3b-sl{display:flex;flex-direction:column}
.p3b-sl>div{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:40px;font-variant-numeric:tabular-nums}
.p3b-sl>div>span{font-size:14px;color:var(--v-ink2)}
.p3b-sl>div>b{font-size:16px;font-weight:700;white-space:nowrap}
.p3b-sl.box{padding:6px 16px;border-radius:14px;background:var(--v-ground)}

/* ---------- 현금흐름 상세 (활동 > 이유 > 계정 > 거래) ---------- */
.p3b-cfb{display:flex;flex-direction:column;font-variant-numeric:tabular-nums}
.p3b-cfr{display:flex;align-items:center;gap:10px;min-width:0}
.p3b-cfr>.l{flex:1;min-width:0;display:flex;align-items:center;gap:4px;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;word-break:keep-all;overflow-wrap:anywhere}
.p3b-cfr>span.l{cursor:default}
.p3b-cfr>.l[disabled]{cursor:default}
.p3b-cfr>.l small{flex:none;margin-left:6px;font-size:12px;font-weight:500;color:var(--v-ink3);white-space:nowrap}
.p3b-cfr.s{min-height:52px;border-top:1px solid var(--v-ink);font-size:16px;font-weight:700;color:var(--v-ink)}
.p3b-cfr.s:first-child{border-top:1px solid var(--v-ink)}
.p3b-cfr.b{min-height:44px;padding-left:16px;border-top:1px solid var(--v-line);font-size:15px;font-weight:600;color:var(--v-ink)}
.p3b-cfr.b.z{color:var(--v-ink3)}
.p3b-cfr.a{min-height:40px;padding-left:32px;font-size:14px;font-weight:500;color:var(--v-ink2)}
.p3b-cfr.e{min-height:34px;padding-left:52px;font-size:13px;color:var(--v-ink2)}
.p3b-cfr.e .dt{flex:none;margin-right:8px;color:var(--v-ink3);white-space:nowrap}
.p3b-cfr.e .it{min-width:0}
.p3b-ca{flex:none;min-width:84px;text-align:right;white-space:nowrap;font-size:14px;font-weight:600;color:var(--v-ink)}
.p3b-cfr.s .p3b-ca{font-size:15px;font-weight:700}
.p3b-cfr.e .p3b-ca{font-size:13px;font-weight:400}
.p3b-ca.up{color:var(--v-blue)}
.p3b-ca.z{color:var(--v-ink3)}
.p3b-mini{flex:none;position:relative;width:200px;height:14px}
.p3b-mini.sp{visibility:hidden}
.p3b-mini>.ax{position:absolute;left:calc(50% - .5px);top:0;width:1px;height:14px;background:var(--v-track2)}
.p3b-mini>.p,.p3b-mini>.n{position:absolute;top:3px;height:8px;border-radius:3px}
.p3b-mini>.p{background:var(--v-c2)}
.p3b-mini>.n{background:var(--v-mute)}
@media (max-width:1099px){.p3b-mini{display:none}}
@media (hover:hover){.p3b-cfr>button.l:not([disabled]):hover{text-decoration:underline;text-underline-offset:3px}}

/* v80: 768~1099 (PC 틀 안, 아이콘 메뉴): 비교 표는 비중 열을 접고 열 폭을 줄여요. 이름은 낱말 단위로만 줄바꿈 */
@media (min-width:768px) and (max-width:1099px){
  .p3b-pr{grid-template-columns:minmax(112px,1fr) 0 minmax(92px,140px) minmax(92px,140px) minmax(80px,116px) 60px;column-gap:10px}
  .p3b-pr>:nth-child(2){visibility:hidden;overflow:hidden;min-width:0;width:0}
  .p3b-pr .d{font-size:13px}.p3b-pr .r{font-size:12px}
}