/* 28판: 예산 (status), 예산 설정 (월, 연, 시계열 조회), 항목 관리's 예산 포함 tick and the home 비슷한 가구와 비교,
   closed to the approved canvas boards. Loaded last. New class names (b8-, co8-) so the older budget rules do not apply. */

/* ---------- 예산: usage card extras ---------- */
.bd-exn{font-size:12px}
.bd-use .bd-hint{display:block;margin-top:-4px;font-size:12px}

/* ---------- 예산: the cumulative chart against the month and the year before ---------- */
.bd-pace .card-h{flex-wrap:wrap;row-gap:4px}
.bd-same{font-size:12px}
.bd-leg{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--ink-2);margin:-4px 0 4px}
.bd-lg{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.bd-lg b{color:var(--ink);font-weight:700}
.bd-lg i,.bdc-k{display:inline-block;width:18px;height:0;border-top:3px solid var(--ink);vertical-align:middle;background:none;border-radius:0}
.bd-lg.prev i,.bdc-k.prev{border-top:2px solid var(--ink-3)}
.bd-lg.ly i,.bdc-k.ly{border-top:2px dashed var(--ink-4)}
.bdc-k{width:14px;margin-right:6px}
.bdc-now{fill:none;stroke:var(--ink);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.bdc-prev{fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linejoin:round}
.bdc-ly{fill:none;stroke:var(--ink-4);stroke-width:2;stroke-dasharray:5 4;stroke-linejoin:round}
.bdc-today{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 3}
.bdc-base{stroke:var(--line);stroke-width:1}
.bdc-xl.now{fill:var(--ink);font-weight:700}

/* ---------- 예산: one tile per group, and 예산 미포함 ---------- */
.bd-groups{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0!important;padding-top:0!important}
.bd-gt{display:flex;flex-direction:column;gap:8px;padding:14px 18px 14px 0;border-right:1px solid var(--line-2);margin-right:18px;min-width:0;border-top:2px solid var(--ink)}
.bd-gt:last-child{border-right:0;margin-right:0}
.bd-gt .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-gt .bd-kv span{white-space:nowrap}
.bd-gt.ex .bd-kv b{font-size:26px}

/* ---------- 예산: every account in 항목 관리 order ---------- */
.b8-grid{display:flex;flex-direction:column}
.b8-r{display:grid;grid-template-columns:minmax(0,1.6fr) 130px 130px minmax(80px,1fr) 52px;gap:14px;align-items:center;padding:8px 10px;border:0;border-bottom:1px solid var(--line-2);background:none;text-align:left;font-size:13.5px;color:var(--ink);width:100%;font-family:inherit}
.b8-r .r{text-align:right}
.b8-hd{font-size:11.5px;font-weight:700;color:var(--ink-3);border-bottom:2px solid var(--ink);padding-top:0}
.b8-g{background:var(--surface-2);border-bottom:0;border-radius:6px;padding:9px 10px;margin-top:6px;font-weight:800;cursor:pointer}
.b8-g .caret{display:inline-flex;margin-right:6px;color:var(--ink-3);transition:transform .15s}
.b8-g .caret.open{transform:rotate(90deg)}
.b8-a .b8-n{padding-left:18px}
.b8-a.top .b8-n{padding-left:0}
.b8-a .alink{font-weight:500;text-align:left}
.b8-r.ex,.b8-r.ex .alink{color:var(--ink-3)}
.b8-a.ex .alink,.b8-a.ex .num{color:var(--ink-4)}
.b8-ex{font-size:12px;font-weight:700;color:var(--ink-4);white-space:nowrap}
.b8-r .bd-tb .bar{display:block}
.b8-r .bar.ex{background:transparent}
.bd-n8{font-size:13px;font-weight:500}
@media (max-width:767px){
  .b8-r{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"n act bud" "tb tb pc";row-gap:6px;column-gap:10px;padding:11px 8px}
  .b8-r>:nth-child(1){grid-area:n;min-width:0}
  .b8-r>:nth-child(2){grid-area:act}
  .b8-r>:nth-child(3){grid-area:bud;color:var(--ink-3)}
  .b8-r>:nth-child(3)::before{content:"/ ";color:var(--ink-4)}
  .b8-r>:nth-child(4){grid-area:tb}
  .b8-r>:nth-child(5){grid-area:pc}
  .b8-hd{display:none}
  .b8-a .b8-n{padding-left:10px}
  .b8-r.ex>:nth-child(4),.b8-r.ex>:nth-child(5){display:none}
  .b8-r.ex{grid-template-areas:"n act bud"}
  .bd-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bd-gt{margin-right:0;padding:12px 12px 12px 0}
  .bd-gt:nth-child(2n){border-right:0;padding-left:12px}
  .bd-gt .bd-kv b{font-size:clamp(17px,5.4vw,22px)}
  .bd-n8{display:block;font-size:12px}
}

/* ---------- 예산 설정: 월, 연, 시계열 조회 ---------- */
.b8-pp{gap:8px}
.b8-pp .seg button{padding-left:18px;padding-right:18px}
.b8-note{font-size:12px}
.b8-card{padding-top:8px}
.b8-st{display:flex;flex-direction:column;font-variant-numeric:tabular-nums}
.b8-sr{display:grid;grid-template-columns:minmax(0,1fr) 150px repeat(4,minmax(96px,128px));gap:12px;align-items:center;padding:4px 12px 4px 28px;min-height:41px;border-bottom:1px solid var(--line-2);font-size:14px}
.b8-sr .b8-v{text-align:right;color:var(--ink-3)}
.b8-sr .b8-b{display:flex;justify-content:flex-end;align-items:center}
.b8-sr .b8-b input.bs-in{height:34px;width:100%;max-width:150px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-weight:700}
.b8-sr .b8-b input.bs-in:focus{border-color:var(--ink);outline:none}
.b8-sh{min-height:0;padding:0 12px 8px;border-bottom:2px solid var(--ink);font-size:12px;font-weight:700;color:var(--ink-3);align-items:end}
.b8-sh>span:nth-child(2){color:var(--ink)}
.b8-sh small{display:block;font-weight:500;font-size:11px;color:var(--ink-4);white-space:nowrap}
.b8-sr.gh{background:var(--surface-2);border-bottom:0;padding:9px 12px;margin-top:6px;font-weight:700;min-height:0}
.b8-sr.gh .b8-v{color:var(--ink-2)}
.b8-sr.gh .b8-b{padding-right:11px}
.b8-sr.ex,.b8-sr.ex .b8-v{color:var(--ink-4)}
.b8-sr.gh.ex,.b8-sr.gh.ex .b8-v{color:var(--ink-3)}
.b8-sr.ex .b8-b .b8-ex{padding-right:11px}
.b8-n{display:flex;flex-direction:column;gap:2px;min-width:0}
.b8-n>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b8-n small{font-size:11.5px;color:var(--ink-3);font-weight:500}
.b8-mh{display:flex;align-items:baseline;justify-content:space-between;padding:6px 0 10px}
.b8-mh h2{font-size:22px;font-weight:900;margin:0}
.b8-mh b{color:var(--ink)}
.b8-chips{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:6px;padding:10px 0;background:var(--bg);border-bottom:1px solid var(--line-2)}
.b8-chips .chip{font-weight:700}
.b8-mon{scroll-margin-top:64px}
@media (max-width:767px){
  .b8-sr{grid-template-columns:minmax(0,1fr) 128px;padding:8px 4px 8px 14px;gap:10px}
  .b8-sr .b8-v{display:none}
  .b8-sh{padding:0 4px 8px}
  .b8-sr.gh{padding:9px 6px}
  .b8-chips{top:0}
}
/* 시계열 조회 */
.b8-ser .card-h{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.b8-tt{display:flex;flex-direction:column;min-width:860px;font-variant-numeric:tabular-nums}
.b8-tr{display:grid;grid-template-columns:150px repeat(12,minmax(0,1fr)) 84px;gap:6px;align-items:center;padding:6px 8px 6px 20px;border-bottom:1px solid var(--line-2);font-size:12.5px}
.b8-tr>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b8-c{text-align:right;border:0;background:none;padding:2px 0;font:inherit;color:var(--ink-2);cursor:pointer;border-radius:4px}
span.b8-c{cursor:default}
button.b8-c:hover{background:var(--surface-2)}
.b8-c.sum{font-weight:700;color:var(--ink)}
.b8-th{padding:0 8px 8px;border-bottom:2px solid var(--ink);font-size:12px;font-weight:700;color:var(--ink-3)}
.b8-th .b8-c{color:var(--ink-3);font-weight:700}
.b8-tr.gh{background:var(--surface-2);font-weight:700;padding:8px;margin-top:4px;border-bottom:0}
.b8-tr.gh .b8-c{color:var(--ink);font-weight:700}
.b8-tr.ex,.b8-tr.ex .b8-c{color:var(--ink-4)}
.b8-c.ex{font-size:11px}
.b8-tr.tot{padding:10px 8px;border-top:2px solid var(--ink);border-bottom:0;margin-top:8px;font-weight:900}
.b8-tr.tot .b8-c{color:var(--ink);font-weight:900}

/* ---------- 항목 관리: 예산 포함 next to 설정 ---------- */
.acc-row:has(.acc-bud){grid-template-columns:auto auto minmax(0,1fr) auto auto}
.acc-bud{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;margin-right:6px;cursor:pointer}
.acc-bud input{width:18px;height:18px;margin:0;accent-color:var(--ink)}
.acc-bud.off{color:var(--ink-4)}
@media (max-width:767px){.acc-bud{font-size:12px;gap:5px;margin-right:2px}}

/* ---------- 홈: 비슷한 가구와 비교 ---------- */
.co8-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
@container (min-width:720px){.co8-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}}
@media (min-width:1100px){.co8-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}}
.co8-sec{display:flex;flex-direction:column;gap:16px;min-width:0}
.co8-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.co8-h span{font-size:15px;font-weight:700}
.co8-h b{font-size:28px;font-weight:900;letter-spacing:-.02em}
.co8-row{display:flex;flex-direction:column;gap:8px;min-width:0}
.co8-top{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.co8-top span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co8-top b{white-space:nowrap}
.co8-track{position:relative;height:12px;border-radius:999px;background:var(--surface-3)}
.co8-track.pct{background:linear-gradient(90deg,var(--surface-3),var(--line))}
.co8-track .mid{position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--ink-4)}
.co8-track .avg{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--ink-3)}
.co8-track .dot{position:absolute;top:-6px;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:var(--ink);border:3px solid var(--surface);outline:1px solid var(--ink);box-sizing:border-box}
.co8-ax{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3)}
.co8-note{font-size:12px}

/* 30판: touch hint under the report chart's numbers */
.tip .tip-more{display:block;margin-top:4px;font-size:11px;color:var(--ink-3);font-weight:600}
.bd-gt.ex .bd-kv{flex-wrap:wrap;row-gap:2px}
/* p13: a group row already insets its 예산 cell by 11px; its 예산 미포함 tag must not add another 11px (it sat left of the accounts' tags) */
.b8-sr.gh.ex .b8-b .b8-ex{padding-right:0}
.bd-gt-go{gap:2px;color:var(--ink-2);cursor:pointer}.bd-gt-go .lbl{color:inherit}@media (hover:hover){.bd-gt-go:hover .lbl{text-decoration:underline;text-underline-offset:3px}}