/* 27판 stream budget: 예산 (budget), 예산 설정 (budgetSet), 일회성 비용 (oneoff) closed to the approved boards
   D_desk_budget, D_desk_budgetset, D_desk_oneoff, M_budget, M_budgetset, M_oneoff. Loaded last. */

/* ---------- shared: the 구분 and 휴일이면 pickers carry a caret (연간 ▾), the 결제일 box is written like the boards ---------- */
.bt-sel{-webkit-appearance:none;appearance:none;padding:0 22px 0 8px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 12px) 52%,calc(100% - 8px) 52%;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.pd-btn,.pd-btn.guess{font-weight:700;color:var(--ink);border-style:solid;border-color:var(--line)}
.pd-btn.none{border-color:transparent;background:none;color:var(--ink-3);font-weight:500;padding-left:2px}
@media (hover:hover){.pd-btn.none:hover{border-color:var(--line);padding-left:10px}.bt-sel:hover{border-color:var(--ink-3)}}
.pd-btn:focus-visible,.bt-sel:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.bs-pd>.faint,.bs-hol>.faint,.bd-pd>.faint{padding-left:2px}

/* ---------- 예산 (PC) ---------- */
@media (min-width:1100px){
  .grid.bq.bd{column-gap:32px}
  /* the header rule runs on unbroken across both columns, as on the board */
  .bd>.bd-use{margin-right:-32px;padding-right:32px!important}
}
.bd-pace .card-h .sub{font-size:11.5px}
.bd-chart{position:relative}
.bd-chart svg{display:block;width:100%;overflow:visible}
.bdc-base{stroke:var(--line);stroke-width:1}
.bdc-grid{stroke:var(--ink-4);stroke-width:1;stroke-dasharray:2 4}
.bdc-yl,.bdc-xl{font-size:11px;fill:var(--ink-3);font-variant-numeric:tabular-nums}
.bdc-plan{fill:none;stroke:var(--ink-4);stroke-width:1.5;stroke-linejoin:round}
.bdc-act{fill:none;stroke:var(--ink);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.bdc-proj{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-dasharray:5 4}
.bdc-dot{fill:var(--ink)}
.bdc-note{font-size:11px;fill:var(--ink-2);paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.bdc-end{font-size:12px;font-weight:700;fill:var(--ink);paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.bdc-hov{stroke:var(--ink-3);stroke-width:1}
.bdc-k{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle;background:var(--ink)}
.bdc-k.pl,.bdc-k.bu{background:var(--ink-4)}
.bdc-k.pj{background:repeating-linear-gradient(90deg,var(--ink) 0 3px,transparent 3px 5px)}
/* 항목별: the title above its 2px rule (list style, as 예산 설정 and both boards) */
.bd>.bd-table{border-top:0!important;padding-top:0!important;gap:0!important}
.bd>.bd-table>.card-h{border-bottom:2px solid var(--ink);padding-bottom:10px;align-items:baseline}
.bd>.bd-table .bd-hd{padding-top:9px}
/* 항목별: the group name has no caret while open (the board), a folded group shows one */
@media (min-width:768px){
  .bd-g.op .caret{display:none}
  .bd-g .caret{margin-left:-2px}
  .bd-pd .pd-btn{height:28px;font-size:12.5px}
  .bd-table .fold-btns .btn{color:var(--ink-3);font-weight:600}
}
@media (hover:hover){.bd-g:hover{background:var(--surface-3)}}
/* the caret follows the word (연간▾, 그대로▾) as on the PC boards */
@media (min-width:768px){
  .bt-sel[data-n="2"]{background-position:36px 52%,40px 52%}
  .bt-sel[data-n="3"]{background-position:48px 52%,52px 52%}
}

/* ---------- 예산 설정 (PC) ---------- */
.bs-sub{display:none}
.bs-list .bs-pd .pd-btn{height:32px}

/* ---------- 일회성 비용 ---------- */
.oo-bars svg{display:block;width:100%}
.oo-bar{fill:var(--ink)}

/* ---------- phone ---------- */
@media (max-width:767px){
  /* 예산: the plan hint under the bar, the chart under a 15px title with the 2px rule below it (M_budget) */
  .bd-use .bd-hint{font-size:11px;color:var(--ink-3);margin-top:-2px}
  .bd>.bd-pace{border-top:0!important;padding-top:4px!important;gap:6px}
  .bd-pace .card-h{border-bottom:2px solid var(--ink);padding-bottom:9px;align-items:baseline}
  .bd-pace .card-h .lbl{font-size:15px;font-weight:900;color:var(--ink);letter-spacing:-.01em}
  .bd-pace .card-h .sub{font-size:11px}
  .bdc-xl.now{fill:var(--ink);font-weight:700}
  .bdc-yl,.bdc-xl{font-size:10.5px}
  /* the four kinds: two by two, a hairline under each */
  .bd-kinds{column-gap:16px!important}
  .bd-kind,.bd-kind:nth-child(2n){border-right:0!important;padding:12px 0!important;margin:0!important;border-bottom:1px solid var(--line-2)}
  .bd-kind .bd-kv b{font-size:22px}
  .bd-kind .bd-kv span{font-size:10.5px}
  /* 항목별: the hint on the title line, the fold row under the rule */
  .bd-table .card-h{flex-wrap:nowrap!important;align-items:baseline}
  .bd-table .card-h .row{width:auto!important}
  .bd-table .card-h .sub{font-size:11px}
  .bd-foldbar{padding:8px 0 0}
  /* rows as dense as M_budget: 14px names, 12px amounts, 36px group rows */
  .bd-grid .bd-r:not(.bd-hd):not(.bd-g){padding:10px 0 10px!important;row-gap:5px!important}
  .bd-grid .bd-r .bd-n .alink{font-size:14px!important;font-weight:800}
  .bd-grid .bd-r>b.num{font-size:12.5px!important}
  .bd-grid .bd-r:not(.bd-g)>.num.r:not(b){font-size:12px!important}
  .bd-grid .bd-pd{font-size:11px!important}
  .bd-grid .bd-g{min-height:36px;padding:8px 10px!important;margin-top:8px!important}
  .bd-grid .bd-g>span:first-child,.bd-grid .bd-g>b.num{font-size:13px!important}
  .bd-foldbar .sub{font-size:11.5px}
  .bd-foldbar .btn{min-height:36px}

  /* 예산 설정: number, bar, then the kinds as a list (M_budgetset) */
  .bs-sum .bs-leg{display:flex;flex-direction:column;width:100%;gap:0}
  .bs-sum .bs-leg>div{display:flex!important;align-items:center;justify-content:space-between;padding:7px 0!important;border-left:0!important;flex:none!important}
  .bs-sum .bs-leg span{font-size:12.5px;color:var(--ink-2)}
  .bs-sum .bs-leg b{font-size:13.5px!important;font-weight:700}
  .bs-tools{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-right:calc(-1 * var(--gut,20px));padding-right:var(--gut,20px)}
  .bs-tools::-webkit-scrollbar{display:none}
  .bs-tools>.btn{flex:none;height:38px;padding:0 12px;font-size:13px}
  .bs-tools>.sp{display:none}
  .bs-hols-ph{font-size:11.5px;color:var(--ink-3);margin-top:-4px}
  /* rows: the name with 지난달 실제 under it and the amount on the right; the pickers below as small chips */
  .bs-list .bs-row.bs2:not(.gh):not(.tot):not(.bs-head){display:flex!important;flex-wrap:wrap;align-items:center;column-gap:6px;row-gap:8px;padding:12px 0!important}
  .bs-list .bs-row.bs2:not(.gh):not(.tot) .bs-n{flex:1 1 calc(100% - 104px);min-width:0;flex-direction:column;align-items:flex-start;gap:1px}
  .bs-list .bs-row.bs2:not(.gh):not(.tot) .bs-n>span:first-child{font-size:14.5px;font-weight:800;max-width:100%}
  .bs-list .bs-row.bs2:not(.gh):not(.tot) .bs-v{flex:0 0 96px;order:2}
  .bs-list .bs-row.bs2:not(.gh):not(.tot) .bs-bt,.bs-list .bs-row.bs2:not(.gh):not(.tot) .bs-pd,.bs-list .bs-row.bs2:not(.gh):not(.tot) .bs-hol{order:3;flex:0 0 auto;width:auto;min-width:0;max-width:100%}
  .bs-list .bs-row.bs2:not(.gh):not(.tot)>.bs-r{display:none}
  .bs-list .bs-row.bs2 .bs-pd.no,.bs-list .bs-row.bs2 .bs-hol.no{display:none}
  .bs-sub{display:block;font-size:11px;color:var(--ink-3);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .bs-sub .bs-avg{display:none}
  .bs-row:focus-within .bs-sub .bs-avg{display:inline}
  .bs-list .bs-bt .bt-sel,.bs-list .bs-hol .bt-sel{width:auto!important;height:36px;font-size:12px}
  .bs-list .bs-pd .pd-btn{width:auto;height:36px;font-size:12px;padding:0 10px}
  .bs-list .bs-pd .pd-btn.none{border:1px dashed var(--line);color:var(--ink-3);font-size:0;padding:0 10px}
  .bs-list .bs-pd .pd-btn.none::after{content:"결제일";font-size:12px}
  .bs-list .bs-pd .pd-in{width:110px;height:36px}
  .bs-list .bs-row.bs2 input.bs-in{height:38px}

  /* 일회성 비용: no y axis on the phone */
  .oo-chart .oo-bars{margin-top:4px}
  /* touch targets of at least 36px without moving the rows */
  .bd-grid .bd-n .alink{display:inline-flex;align-items:center;min-height:36px;min-width:36px;margin:-7px 0}
  .bs-foldbar .btn{min-height:36px}
  .oo-sug .acts .btn{min-height:36px}
  .oo-all{display:inline-flex;align-items:center;min-height:36px}
  .grid.bq+.grid .btn.sm{min-height:36px}
}
@media (max-width:374px){
  .bs-list .bs-row.bs2:not(.gh):not(.tot) .bs-v{flex-basis:100px}
  .bs-list .bs-row.bs2:not(.gh):not(.tot) .bs-n{flex-basis:calc(100% - 108px)}
  .bs-list .bs-row.bs2 input.bs-in{padding:0 8px;font-size:14px}
  .bs-foldbar .fold-btns{flex:none;flex-wrap:nowrap}
  .bs-foldbar .fold-btns .btn{padding:0 8px}
}