/* 초이장부 26판: phone screens (390 wide, also 360 and 430), following the M_*.png boards.
   Loaded right after choi.css. Every rule sits under the phone shell (max-width 1099px), so PC (1180 and up) is unchanged,
   except the 전체 tiles, which only the phone reaches. */

/* ---------- 전체 tiles (MenuScr) ---------- */
.mt-head{display:flex!important;align-items:center;justify-content:space-between;gap:12px}
.mt-head h1{display:flex;align-items:center;gap:8px;font-size:22px!important}
.mt-gear{width:36px;height:36px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}
.mt-me{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;border-radius:10px;background:var(--surface-2);padding:13px 14px;color:var(--ink);font:inherit}
.mt-me .ava{width:34px;height:34px;font-size:13px}
.mt-me .t{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.mt-me .t b{font-size:15px;font-weight:800}
.mt-me .t small{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-g h2{font-size:13px;font-weight:700;color:var(--ink-3);margin:0 0 9px;letter-spacing:0}
.mt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mt-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:74px;padding:12px 6px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;text-align:center}
.mt-tile b{font-size:13px;font-weight:700;line-height:1.25;word-break:keep-all}
.mt-tile.dev{background:var(--surface-2);border-color:var(--line-2);color:var(--ink-4)}
.mt-tile.dev b{color:var(--ink-3);font-weight:600}
.mt-tile small{font-size:10.5px;color:var(--ink-4);margin-top:-3px}
.mt-tile:focus-visible,.mt-me:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (min-width:1100px){.mt-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

@media (max-width:1099px){
  /* ---------- shell ---------- */
  .mtop{height:58px;padding:0 12px 0 20px!important;border-bottom:0!important;-webkit-mask-image:none!important;mask-image:none!important}
  .mtop-brand{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:6px 0;color:var(--ink);font:inherit}
  .mtop-brand b{font-size:17px;font-weight:800;letter-spacing:-.02em}
  .mtop-ava{display:flex;margin-right:2px}.mtop-ava>*+*{margin-left:-6px}
  .mtop-ava .ava{width:28px;height:28px;font-size:12px;box-shadow:0 0 0 2px var(--surface)}
  .mtop .ibtn{width:36px;height:36px}
  .tabbar{left:0!important;right:0!important;bottom:0!important;border-radius:0!important;border:0!important;border-top:1px solid var(--line)!important;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px))!important;align-items:center!important}
  .tabbar button{gap:4px;padding:4px 0!important;border-radius:0!important;background:none!important;box-shadow:none!important;font-size:11px}
  .tabbar button[aria-current="page"]{background:none!important;box-shadow:none!important;color:var(--ink)!important}
  .tabbar .add{width:52px!important;height:52px!important;border-radius:14px!important;margin:0!important}
  .tabbar .add[aria-current]{color:var(--brand-ink)!important}

  /* ---------- page head: title, the stepper on its right, the 월 분기 연 직전 1년 직접 segment below ---------- */
  .phead{display:flex!important;flex-wrap:wrap;align-items:center;gap:12px 8px}
  .phead>.ttl{flex:1 1 auto;min-width:0;order:0}
  .phead>.ttl h1{font-size:26px}
  .phead>span:empty{display:none}
  .phead .acts{display:contents}
  .phead .pp{display:contents}
  .phead .pp>.mnav{order:1;flex:0 0 auto}
  .phead .pp>.seg{order:3;flex:1 1 100%;min-width:0}
  .phead .pp>.pp-dates{order:4;flex:1 1 100%;display:flex}
  .phead .acts>:not(.pp),.phead>.pnote{order:5}
  .phead .acts>.ph-top{order:2}
  .phead>.pnote,.phead .acts>.btn.sm{height:30px;padding:0 10px;font-size:12.5px}
  .phead .mnav .lab{font-size:14px;padding:0 4px}
  .phead .mnav .ibtn{width:32px}
  .seg.full button{padding:0 4px;font-size:13px}
}
@media (max-width:374px){.phead>.ttl h1{font-size:23px}.seg.full button{font-size:12.5px}}

/* ---------- phone shell (the tab bar and top bar show up to 767px) ---------- */
@media (max-width:767px){
  :root{--gut:20px}
  .app{background:var(--bg)!important}
  .app::after{display:none!important}
  .main:not(:has(.mtop)) .content{padding-top:18px}
  .content{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}
}
@media (max-width:374px){:root{--gut:16px}}

/* ---------- 예산 (M_budget): each row is name and date, then actual / budget; the bar and % below; group rows carry totals only ---------- */
@media (max-width:767px){
  .bd-table .card-h{flex-wrap:wrap;row-gap:4px}
  .bd-table .card-h .row{width:100%;justify-content:space-between}
  .bd-grid .bd-r:not(.bd-hd){grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"n pd act bud" "tb tb tb pc";column-gap:0;row-gap:6px;padding:12px 0 13px}
  .bd-grid.inc .bd-r:not(.bd-hd){grid-template-areas:"n n act bud" "tb tb tb pc"}
  .bd-grid:not(.inc) .bd-r>:nth-child(1),.bd-grid.inc .bd-r>:nth-child(1){grid-area:n}
  .bd-grid:not(.inc) .bd-r>:nth-child(2){display:none}
  .bd-grid:not(.inc) .bd-r>:nth-child(3){grid-area:pd;padding-left:6px}
  .bd-grid:not(.inc) .bd-r>:nth-child(4),.bd-grid.inc .bd-r>:nth-child(2){grid-area:bud}
  .bd-grid:not(.inc) .bd-r>:nth-child(5),.bd-grid.inc .bd-r>:nth-child(3){grid-area:act}
  .bd-grid:not(.inc) .bd-r>:nth-child(6),.bd-grid.inc .bd-r>:nth-child(4){grid-area:tb}
  .bd-grid:not(.inc) .bd-r>:nth-child(7),.bd-grid.inc .bd-r>:nth-child(5){grid-area:pc;min-width:48px}
  .bd-grid .bd-r:not(.bd-g)>.num.r:not(b){color:var(--ink-3);font-size:13px}
  .bd-grid .bd-r:not(.bd-g)>.num.r:not(b)::before{content:"/ ";color:var(--ink-4)}
  .bd-grid .bd-r>b.num{font-size:13.5px;font-weight:800}
  .bd-grid .bd-r .bd-n{padding-left:0}
  .bd-grid .bd-r .bd-n .alink{font-size:15px;font-weight:700}
  .bd-grid .bd-pd{font-size:12px;color:var(--ink-3);font-weight:500}
  .bd-grid .bd-pd .faint{display:none}
  .bd-grid .bd-tb .bar{height:8px}
  /* group rows: caret and name on the left, actual / budget on the right, no bar */
  .bd-grid .bd-g{grid-template-areas:"n n act bud"!important;grid-template-columns:minmax(0,1fr) 0 auto auto!important;padding:10px 12px!important;margin-top:10px}
  .bd-grid .bd-g>.bd-tb,.bd-grid .bd-g>:last-child{display:none}
  .bd-grid .bd-g>b.num{font-size:14px;font-weight:900}
  .bd-grid .bd-g>b.num:nth-of-type(1){order:2}
  .bd-grid .bd-g>b.num:nth-of-type(1)::before{content:"/ ";font-weight:900}
  .bd-grid .bd-g>span:first-child{font-size:14px;font-weight:800}
}
@media (max-width:767px){
  .bd-grid .bd-r>b.num{margin-right:4px}
  .bd-grid .bd-blk[data-blk="once"] .bd-g>b.num:nth-of-type(1),.bd-grid .bd-blk[data-blk="once"] .bd-r:not(.bd-g)>.num.r:not(b){display:none}
  .bd-grid .bd-blk[data-blk="once"] .bd-r:not(.bd-g){grid-template-areas:"n pd act act"}
  .bd-grid .bd-blk[data-blk="once"] .bd-r:not(.bd-g)>.bd-tb,.bd-grid .bd-blk[data-blk="once"] .bd-r:not(.bd-g)>:last-child{display:none}
  .bd-kind .bd-kv span{white-space:nowrap}
}

/* ---------- 예산 설정 (M_budgetset): groups fold on the phone ---------- */
.bs-foldbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 8px}
.bs-foldbar .fold-btns{display:inline-flex;gap:2px}
.bs-gb{width:100%;border:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.bs-gb .caret{display:inline-flex;margin-right:6px;color:var(--ink-3);transition:transform .15s;vertical-align:-1px}
.bs-gb .caret.open{transform:rotate(90deg)}
.bs-gb .bs-n{display:flex;align-items:center}
@media (max-width:767px){.bs-list .bs-row.gh .bs-r{display:none}.bs-list .bs-row.gh{padding:10px 12px}}

/* ---------- 현금 흐름 tree (M_cf): name, a small two-sided bar, the amount at the right edge ---------- */
.cfd-bars{position:absolute;inset:0}
@media (max-width:767px){
  .cft{grid-template-columns:minmax(0,1fr) minmax(150px,46%)!important;gap:6px!important}
  .cfd-bars{right:auto;width:36%}
  .cfd .lp{left:auto!important;right:0!important;text-align:right}
  .cfe b.n,.cfe b.p{left:auto!important;right:0!important}
}

/* ---------- 거래내역 (M_tx): search behind the head button, kind and person as separate chips ---------- */
@media (max-width:1099px){
  .tx-search.m-hide{display:none!important}
  .phead .ibtn.ph-top{width:36px;height:36px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
  .phead .ibtn.ph-top.on{background:var(--ink);color:var(--brand-ink);border-color:var(--ink)}
}
@media (max-width:767px){
  .tx-filters{gap:6px}
  .tx-filters .seg{border:0;gap:6px;overflow:visible;background:none}
  .tx-filters .seg button{border:1px solid var(--line);border-radius:8px;height:34px;padding:0 12px;background:var(--surface);color:var(--ink-2)}
  .tx-filters .seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--brand-ink)}
  .tx-filters .tx-sum{border-top:2px solid var(--ink);padding-top:10px;margin-top:4px}
}

/* ---------- 홈 (M_home): the two big numbers keep inside their halves with the 20px gutter ---------- */
@media (max-width:420px){.hh-num{font-size:clamp(19px,6.9vw,30px)!important}}

/* ---------- 거래 입력 sheet (M_entry): chips carry their outline as on the board ---------- */
@media (max-width:767px){
  .es-rows .chip:not(.on){border-color:var(--line)!important;background:var(--surface)}
  .es-rows .chip-more{height:32px}
}

/* the chosen period reads as ink in both themes (the old glass dark rule made it a grey wash) */
@media (max-width:1099px){.pp .seg button[aria-pressed="true"]{background:var(--ink)!important;color:var(--brand-ink)!important;box-shadow:none!important}}
@media (max-width:1099px){
  .tx-who.m{display:grid;place-items:center;width:42px;flex:0 0 auto}
  .tx-who.m .ava{width:28px;height:28px;font-size:12px}
  .tx .tx-a{font-weight:800}
}

/* ---------- 자산 현황 (M_bs): share bar and % under each top row ---------- */
.fshare-m{display:flex;align-items:center;gap:10px;margin-top:7px;max-width:260px}
.fshare-m>:first-child{flex:1 1 auto;min-width:0}
.fshare-m>span.tnum{font-size:11.5px;color:var(--ink-3);font-weight:600;white-space:nowrap}
@media (max-width:1099px){.phead>.pnote{margin-left:auto;height:28px!important;color:var(--ink-3)}}
/* 현금 흐름 waterfall on the phone: smaller labels so six bars keep their numbers apart */
@media (max-width:767px){.cfw .cfw-v{font-size:11px}.cfw .cfw-v.tot{font-size:12.5px}.cfw .cfw-l{font-size:11.5px}}
@media (max-width:767px){.bd-grid:not(.inc) .bd-g>:nth-child(3){display:none}}

/* ---------- 예산 설정 head (M_budgetset): title and stepper, the period segment, then 지출 예산 | 수입 목표 ---------- */
@media (max-width:1099px){
  .phead>.ttl:has(>.ttl-row){display:contents}
  .phead>.ttl>.ttl-row{display:contents}
  .phead>.ttl>.ttl-row>h1{flex:1 1 auto;min-width:0;order:0}
  .phead>.ttl>.ttl-row>.seg{order:4}
}
@media (max-width:767px){
  .bs-tools{gap:6px!important}
  .bs-tools .btn{height:36px;padding:0 12px;font-size:13px;border:1px solid var(--line)!important;background:var(--surface)!important;border-radius:8px}
}
/* back arrow before a phone title (자산 현황, 수입 지출, 현금 흐름 to 전체; 예산 설정 to 예산) */
.ph-back{display:inline-grid;place-items:center;width:26px;height:32px;margin:0 2px 0 -6px;border:0;background:none;color:var(--ink);vertical-align:-4px;padding:0}
.phead h1:has(.ph-back){display:flex;align-items:center;gap:2px}