/* lhome.css: 장부 홈 (route home, v70, lhome.js) 배치. dash.css 다음에 읽는다.
   제목 줄, 지표 칸, 상태 표시, 범례 토글, 진행 막대, 비교 막대, 합계 줄은 dash.css(dx-*) 그대로 쓰고 여기서는 배치(lh-)와 이 화면만의 줄만 정한다.
   색은 theme.css 토큰만: 수입 = 남색 3단계, 지출 = 코랄 2단계(예산 내 밝게, 예산 외 진하게), 파랑 = 오늘. */

.lh{--lh-i1:var(--c-navy);--lh-i2:var(--c-ch3);--lh-i3:var(--c-ch5);--lh-e1:var(--c-coral);--lh-e2:var(--c-coral-ink);
  display:flex;flex-direction:column;gap:52px;min-width:0;margin-top:6px}
.lh-g21{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:48px;align-items:start}
.lh-g11{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:start}
:where(.lh) button{font:inherit}
.lh .dx-empty .dx-more{display:inline-flex;margin-left:4px}

/* ---------- 제목 줄의 장부 점검 (PC는 오른쪽 작은 띠, 휴대폰은 제목 아래 전체 폭) ---------- */
.lh-flag{gap:4px 10px;flex-wrap:nowrap;min-width:0;color:var(--ink)}
.lh-flag b{white-space:nowrap}
.lh-flag .dx-s{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lh-flag .ico{flex:none;color:var(--ink-3);margin-left:auto}
.phead .acts .lh-flag{width:auto;max-width:420px;padding:8px 12px 8px 14px;border-radius:10px;min-height:40px}
.phead[data-page="home"] .ttl-row{gap:20px}

/* ---------- 지표 5칸 ---------- */
.lh-kpis .dx-k>span:first-child{min-width:0}
.lh-kpis .lh-na{font-size:17px;font-weight:800;color:var(--ink-3)}
.lh-kpis .dx-s .dx-more{font-size:12.5px;padding:0}

/* ---------- 수입과 지출 ---------- */
.lh-chart{position:relative;margin-top:4px}
.lh-cs>svg{display:block;max-width:none}
.lh-cs.scr{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
.lh-cs.scr::-webkit-scrollbar{display:none}
.lh-yax{position:absolute;left:0;top:0;pointer-events:none}
.lh-yax rect{fill:var(--surface)}
.lh-chart .lh-grid{stroke:var(--line-2)}
.lh-chart .lh-zero{stroke:var(--line)}
.lh-chart .lh-hov{fill:var(--surface-2)}
.lh-chart text{font-family:inherit;font-variant-numeric:tabular-nums}
.lh-chart .lh-yl{font-size:11px;fill:var(--ink-3)}
.lh-chart .lh-xl{font-size:11.5px;fill:var(--ink-3);font-weight:600}
.lh-chart .lh-xl.on{fill:var(--ink);font-weight:800}
.lh-chart .lh-rl{font-size:11px;fill:var(--ink-3)}
.lh-chart .lh-rl.run{fill:var(--ink-4)}
.lh-tip{width:188px;min-width:0;z-index:6}
.lh-tip div{gap:14px}
.lh-tip .lh-tsum{border-top:1px solid var(--line-2);padding-top:3px;margin-bottom:5px;font-weight:800}
.lh-tip .lh-tsum span{color:var(--ink);font-weight:800}
.lh-flow>.dx-note{margin-top:8px}

/* ---------- 예산 ---------- */
.lh-bt{display:flex;flex-direction:column;gap:9px;padding:16px 0;border-bottom:1px solid var(--line-2)}
.lh-r1{display:flex;justify-content:space-between;align-items:center;gap:10px}
.lh-r1>b{font-size:14px;font-weight:800}
.lh-r2{display:flex;justify-content:space-between;gap:4px 12px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3)}
.lh-r2 b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.lh-r2 b.dx-neg{color:var(--c-coral-ink)}
.lh-bt .dx-note{margin-top:2px}
.lh-bl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;align-items:center;width:100%;padding:12px 0;border:0;border-bottom:1px solid var(--line-2);background:none;text-align:left;color:var(--ink);font-size:13.5px;cursor:pointer}
.lh-bl .nm{display:flex;align-items:center;gap:8px;min-width:0;font-weight:700;flex-wrap:wrap}
.lh-bl .dx-pill{padding:4px 8px}
.lh-bl .p{font-weight:800}
.lh-bl .dx-bar{grid-column:1/-1}
.lh-bl:hover .nm{text-decoration:underline;text-underline-offset:3px}
.lh-bn{margin-top:10px}
.lh-once{margin-top:32px}
.lh-cmp{display:flex;flex-direction:column;gap:10px;padding-top:14px}
.lh-cb{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:12.5px;color:var(--ink-2)}
.lh-cb .dx-pair>i{height:10px}
.lh-cb>b{text-align:right;font-weight:800;color:var(--ink);font-size:13px;white-space:nowrap}
.lh-cb small{font-size:11.5px;font-weight:600;color:var(--ink-3)}

/* ---------- 항목별 지출 ---------- */
.lh-lg2{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ink-3);padding:12px 0 4px}
.lh-lg2 span{display:inline-flex;align-items:center;gap:6px}
.lh-ic{display:grid;grid-template-columns:minmax(92px,124px) minmax(0,1fr) 92px 86px;gap:12px;align-items:center;width:100%;padding:12px 0;border:0;border-bottom:1px solid var(--line-2);background:none;text-align:left;color:var(--ink);font-size:13.5px}
button.lh-ic{cursor:pointer}
button.lh-ic:hover .nm{text-decoration:underline;text-underline-offset:3px}
.lh-ic .nm{display:flex;flex-direction:column;font-weight:700;line-height:1.3;min-width:0}
.lh-ic .nm small{font-size:11.5px;color:var(--ink-3);font-weight:500;text-decoration:none}
.lh-ic .vs{display:flex;flex-direction:column;align-items:flex-end;line-height:1.35;white-space:nowrap}
.lh-ic .vs b{font-weight:800}
.lh-ic .vs small{font-size:12px;color:var(--ink-3)}
.lh-ic .dl{text-align:right;font-size:12.5px;font-weight:800;white-space:nowrap}
.lh-ic .dl.z{color:var(--ink-3);font-weight:600}
.lh-ic.etc{color:var(--ink-2)}
.lh-ic.etc .nm{font-weight:600}
.lh-ic.sum{border-top:2px solid var(--ink);border-bottom:0;margin-top:-1px}
.lh-ic.sum .nm{font-weight:900}
.lh-ic.sum .vs b{font-size:15px;font-weight:900}

/* ---------- 남은 예정 ---------- */
.lh-cf{display:grid;grid-template-columns:66px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;padding:12px 0;border:0;border-bottom:1px solid var(--line-2);background:none;text-align:left;color:var(--ink);font-size:13.5px}
button.lh-cf{cursor:pointer}
button.lh-cf:hover .t b{text-decoration:underline;text-underline-offset:3px}
.lh-cf .d{color:var(--ink-3);font-weight:700;font-size:12.5px;white-space:nowrap}
.lh-cf .t{display:flex;flex-direction:column;min-width:0;line-height:1.4}
.lh-cf .t b{font-weight:700}
.lh-cf .t small{font-size:12px;color:var(--ink-3)}
.lh-cf .t small.late{color:var(--c-coral-ink);font-weight:700}
.lh-cf.late .d{color:var(--c-coral-ink)}
.lh-cf .v{font-weight:800;text-align:right;white-space:nowrap}
.lh-cf .v.off{color:var(--ink-3);font-weight:600}
.lh-due>.dx-tot{margin-top:-1px}
.lh-due>.dx-note{margin-top:6px}

/* ---------- 일별 지출 지도 (charts.js Heatmap 감싸기) ---------- */
.lh-heat{container-type:inline-size;--brand:var(--c-coral-ink);padding-top:16px}
.lh-heat .heat-legend{position:sticky;left:0}
.lh-heat[data-m1] .heat-months>span:nth-child(1),.lh-heat[data-m2] .heat-months>span:nth-child(2),.lh-heat[data-m3] .heat-months>span:nth-child(3),
.lh-heat[data-m4] .heat-months>span:nth-child(4),.lh-heat[data-m5] .heat-months>span:nth-child(5),.lh-heat[data-m6] .heat-months>span:nth-child(6),
.lh-heat[data-m7] .heat-months>span:nth-child(7),.lh-heat[data-m8] .heat-months>span:nth-child(8),.lh-heat[data-m9] .heat-months>span:nth-child(9),
.lh-heat[data-m10] .heat-months>span:nth-child(10),.lh-heat[data-m11] .heat-months>span:nth-child(11),.lh-heat[data-m12] .heat-months>span:nth-child(12){
  color:var(--ink);font-weight:800;text-decoration:underline 2px var(--c-blue);text-underline-offset:4px}
.lh-heat .heat-months{height:18px}
.lh-hk{margin-top:4px;text-align:left}
.lh-sum{margin:8px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.lh-sum b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- 거래 ---------- */
.lh-fl{position:relative;display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between;padding:14px 0 4px}
/* 머리 글자(대상, 정렬)는 왼쪽 칸에 두고, 버튼이 줄을 넘기면 첫 버튼 아래에서 이어진다 */
.lh-fg{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 10px;align-items:start;min-width:0}
.lh-fh{font-size:12px;font-weight:800;color:var(--ink-2);min-height:32px;display:flex;align-items:center}
.lh-fi{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.lh-fl .chip{height:32px;padding:0 12px;font-size:13px}
.lh-fl .chip.lh-add{border:1px dashed var(--ink-4);box-shadow:none}
.lh-fl .chip.lh-cc{background:var(--c-navy-soft);border-color:transparent;color:var(--ink);box-shadow:none}
.lh-fl .seg button{height:30px;font-size:13px}
.lh-pop{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;width:100%;padding:14px 0 4px}
.lh-pop.float{position:absolute;top:100%;left:0;z-index:30;width:min(620px,100%);margin-top:6px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-2)}
.lh-pop .field{min-width:0}
.lh-pop select,.lh-pop input{width:100%;min-width:0}
.lh-rng{display:flex;align-items:center;gap:6px}
.lh-rng input{flex:1 1 0}
.lh-rng span{color:var(--ink-3)}
.lh-pop-f{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}
.lh-fsum{margin:8px 0 4px;font-size:12.5px;color:var(--ink-3)}
.lh-fsum b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.lh-txl{display:flex;flex-direction:column}
.lh-txr{display:grid;grid-template-columns:104px minmax(0,1fr) minmax(0,1.4fr) 132px;gap:14px;align-items:center;width:100%;padding:12px 0;border:0;border-bottom:1px solid var(--line-2);background:none;text-align:left;color:var(--ink);font-size:13.5px;cursor:pointer}
.lh-txr:disabled{cursor:default;opacity:1}
.lh-txr.th{font-size:12px;font-weight:800;color:var(--ink-3);padding:10px 0;border-bottom:1px solid var(--line);cursor:default}
.lh-txr .d{color:var(--ink-2);white-space:nowrap}
.lh-txr .it{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lh-txr .ac{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lh-txr .v,.lh-txr .r{text-align:right;white-space:nowrap}
.lh-txr .v{font-weight:800;font-variant-numeric:tabular-nums}
button.lh-txr:not(:disabled):hover .it{text-decoration:underline;text-underline-offset:3px}

/* ---------- 비슷한 가구와 비교 (cohort.js CohortCard를 이 화면의 제목 줄 모양으로) ---------- */
/* choi.css draws every .card with a 2px line on top (!important); here the line sits under the title, as dx-sh */
.lh-co .co-card{border-top:0!important;padding:0!important;gap:16px}
.lh-co .co-card>.card-h{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;min-height:30px;margin:0;padding:0 0 10px!important;border-bottom:2px solid var(--ink)}
.lh-co .co-card>.card-h h2{margin:0;font-size:17px;line-height:24px;font-weight:900;letter-spacing:-.02em}
.lh-co .co-card>.card-h .more{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.lh-co .co-per{margin:12px 0 0}

/* ---------- 휴대폰과 좁은 창 (1099px 이하): 한 줄에 하나, 지표는 두 칸씩 ---------- */
@media (max-width:1099px){
  .lh{gap:40px;margin-top:2px}
  .lh-g21,.lh-g11{grid-template-columns:minmax(0,1fr);gap:40px}
  .lh .dx-lt{min-height:34px}
  .lh .dx-kpis.c5>.dx-kc:nth-child(5){grid-column:1/-1}
  .lh-flag{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:11px 14px;min-height:44px}
  .lh-flag .dx-s{grid-column:1;grid-row:2;white-space:normal;overflow:visible}
  .lh-flag .ico{grid-column:2;grid-row:1/3}
  .lh-hk{text-align:left}
  .lh-chart .lh-yl{font-size:10px}
  .lh-chart .lh-xl{font-size:10.5px}
  .lh-chart .lh-rl{font-size:10px}
  .lh-fl{flex-direction:column;align-items:stretch;gap:10px}
  .lh-fl .chip{height:34px}
  .lh-fh{min-height:34px}
  .lh-fl .seg{align-self:flex-start}
  .lh-fl .seg button{height:34px}
  .lh-pop{grid-template-columns:minmax(0,1fr)}
  .lh-bl,.lh-cf,.lh-txr,.lh-ic{min-height:44px}
  .lh-ic{grid-template-columns:minmax(0,1fr) auto 76px;gap:8px 10px}
  .lh-ic>.dx-pair{grid-column:1/-1;grid-row:2}
  .lh-ic.etc>span:nth-child(2),.lh-ic.sum>span:nth-child(2){display:none}
  .lh-txr{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"it it v" "d ac ac";gap:3px 10px;padding:11px 0}
  .lh-txr .it{grid-area:it;font-size:14px}
  .lh-txr .v{grid-area:v;font-size:14px}
  .lh-txr .d{grid-area:d;font-size:12.5px;color:var(--ink-3)}
  .lh-txr .ac{grid-area:ac;font-size:12.5px;color:var(--ink-3)}
}
/* 768~1099px: dash.css는 767px 이하에서만 지표를 두 칸씩 놓으므로 여기서 같은 규칙을 이어 준다 */
@media (min-width:768px) and (max-width:1099px){
  .lh .dx-kpis.c5{--dx-n:2}
  .lh .dx-kpis.c5>.dx-kc{border-left:1px solid var(--line);padding-left:16px;border-top:1px solid var(--line)}
  .lh .dx-kpis.c5>.dx-kc:nth-child(2n+1){border-left:0;padding-left:0}
  .lh .dx-kpis.c5>.dx-kc:nth-child(-n+2){border-top:0}
  .lh .dx-kpis.c5>.dx-kc:nth-child(3){border-top:1px solid var(--line)}
  .lh .dx-v{font-size:24px}
}

/* v72: 제목 옆 ⓘ */
.co-ttl{display:inline-flex;align-items:center;gap:6px;min-width:0}
.co-ttl>h2{margin:0}