/* 27판, home stream: 홈, 거래내역, 거래 입력, and the shared page head and period control.
   Loaded last. Boards: D_desk_home, D_desk_tx, D_desk_entry, M_home, M_tx, M_entry. */

/* ---------- page head and period control, PC (D_desk_*) ---------- */
@media (min-width:1100px){
  /* the period arrows are small grey marks (‹ 2026년 10월 ›) */
  .phead .pp .mnav .ibtn{width:30px;color:var(--ink-3)}
  .phead .pp .mnav .ibtn .ico{width:14px;height:14px}
  .phead .pp .mnav .lab{font-size:14px;font-weight:800;padding:0 2px}
  /* 메모, 내보내기 and 휴지통 are outlined buttons as tall as the period control */
  .phead .acts .pnote,.phead[data-page="tx"] .acts .btn.sm{height:38px;padding:0 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:14px;font-weight:500;gap:6px}
  .phead .acts .pnote.on{background:var(--ink);border-color:var(--ink);color:var(--brand-ink)}
}
@media (min-width:1100px) and (hover:hover){
  .phead .acts .pnote:not(.on):hover,.phead[data-page="tx"] .acts .btn.sm:not(.on):hover{border-color:var(--ink-4)}
}

/* ---------- page head, phone (every M_ board): title 24, stepper 32, segment 34, head buttons 32 ---------- */
@media (max-width:767px){
  .phead>.ttl h1{font-size:24px}
  .phead .pp .mnav .ibtn{width:28px;height:30px}
  .phead .pp .mnav .ibtn .ico{width:14px;height:14px}
  .phead .pp .mnav .lab{font-size:13px;font-weight:800;height:30px;padding:0 2px;min-width:0}
  .phead .pp>.seg.full button{height:32px;font-size:12px}
  .phead .ibtn.ph-top{width:32px;height:32px}
  .phead .ibtn.ph-top .ico{width:17px;height:17px}
}
@media (max-width:374px){.phead>.ttl h1{font-size:22px}}
/* phone: adding a note is a quiet line at the end of the page (the boards have no 메모 row under the period) */
.pnote-foot{order:99;display:flex;justify-content:center}
.pnote-foot .pnote{height:36px;padding:0 12px;color:var(--ink-3);font-size:12.5px;font-weight:600;gap:6px}
.pnote-foot .pnote.on{color:var(--ink)}

/* ---------- 홈, PC (D_desk_home) ---------- */
/* the boards space the sections of 홈 and 거래내역 22px apart */
@media (min-width:1280px){.content:has(>.phead[data-page="home"]),.content:has(>.phead[data-page="tx"]){gap:22px}}
@media (min-width:1100px){
  .home-grid{row-gap:26px}
  /* the summary block's rhythm: label, 지출 and 수입, comparison, budget line */
  .home-hero>.card-h{min-height:0;padding-top:0;padding-bottom:0}
  .home-hero>.card-h .more{min-height:0;height:auto;padding-top:0;padding-bottom:0}
  .home-hero .hh-two{margin-top:8px}
  .home-hero .hh-k{margin-bottom:0}
  .home-hero .hh-num{line-height:1.08;padding-bottom:6px}
  .home-hero .hh-cmp{margin-top:7px}
  .home-hero .hh-bud{margin-top:12px;padding-top:12px;gap:8px}
  .home-hero .hh-bud .bar{height:12px}
}

/* ---------- 홈, phone (M_home) ---------- */
@media (max-width:1099px){
  /* 최근 입력 shows four rows and only the month's count */
  .home-recent .hr-cnt .hr-who{display:none}
  .home-recent .hr-list>.hr-row:nth-child(n+5){display:none}
  .home-recent .hr-row{min-height:57px}
  .home-recent .hr-row .nm{font-size:14px}
  .home-recent .hr-row .v{font-size:14px}
  .home-recent .hr-sub,.home-recent .hr-row .d,.home-recent .hr-row .ac{font-size:12px}
  .home-recent .hr-row .ava{width:28px;height:28px}
}
@media (max-width:767px){
  /* the summary block and 결제 예정 as compact as the board */
  .home-grid{row-gap:18px}
  .home-hero>.card-h{min-height:0;padding-top:0;padding-bottom:0}
  .home-hero>.card-h .more{min-height:0;height:auto;padding-top:0;padding-bottom:0}
  .home-hero .hh-two{margin-top:6px}
  .home-hero .hh-k{font-size:12px;margin-bottom:3px}
  .home-hero .hh-num{line-height:1.1}
  .home-hero .hh-cmp{margin-top:1px}
  .home-hero .hh-bud{margin-top:12px;padding-top:12px;gap:5px}
  .home-hero .hh-bud-h{font-size:12px}
  .home-hero .hh-bud-h b.tnum{font-size:16px}
  .home-hero .hh-bud .bar{height:10px}
  .home-hero .hh-bud .sub{font-size:11px}
  .home-due .dl-row{padding:10px 0}
  .home-due .dl-row .t b{font-size:14px;line-height:20px}
  .home-due .dl-row .t small{font-size:12px;line-height:17px}
  .home-due .dl-row .v{font-size:14px}
  .home-recent .hr-row .nm{line-height:20px}
  .home-cats .hc-row .nm{font-size:13px}
  .home-cats .hc-row .v{font-size:13px}
}

/* ---------- 거래내역, PC (D_desk_tx) ---------- */
@media (min-width:1100px){
  .tx-tools .tx-search{height:44px}
  /* one row: 전체 지출 수입 이체, 모두 승연 연주, 항목 전체, 결제 수단 전체, then the totals at the right */
  .tx-filters{row-gap:8px}
  .tx-filters .seg button{height:30px;padding:0 12px;font-size:13px}
  .tx-filters .tx-sel select{height:32px;width:auto;field-sizing:content;max-width:180px;padding:0 26px 0 10px;font-size:13px;font-weight:700;background-position:right 8px center}
  .tx-filters .tx-adv{width:32px;height:32px;padding:0;justify-content:center}
  .tx-filters .tx-sum{margin-left:auto;gap:12px;flex-wrap:nowrap;white-space:nowrap}
  .tx-filters .tx-sum .faint{margin-right:2px}
  /* columns as on the board: 22 | 28 | 내용 | 항목 130 | 결제 수단, 계좌 220 | 금액 100 */
  .tx.wide.tx2,.thead.wide.tx2{grid-template-columns:22px 28px minmax(0,1fr) 130px 220px 100px;column-gap:14px}
  .tx.wide.tx2.bal,.thead.wide.tx2.bal{grid-template-columns:22px 28px minmax(0,1fr) 130px 200px 100px 100px}
  .tx-list .thead.tx2{padding:7px 0;font-size:11px}
  .tx-list .thead.tx2 label:has(>input[type=checkbox]){min-height:0}
  .tx-list .thead.tx2 .tx-ck{height:22px;margin:-3px -5px}
  .tx.wide.tx2{padding-top:9px;padding-bottom:9px}
  .tx.tx2 .tx-m{gap:0}
  .tx.tx2 .tx-t{font-size:14px;line-height:20px}
  .tx.tx2 .tx-s{font-size:12px;line-height:17px}
  .tx.tx2 .tx-a{font-size:14px;font-weight:700}
  .tx-list .dayh{font-size:13px;padding:16px 0 6px}
  .tx-list .dayh span{font-size:12.5px}
  /* row checkboxes always show, as on the board: a light 16px box, ink with a check when ticked */
  .tx.wide input[type=checkbox],.thead.wide input[type=checkbox]{opacity:1;-webkit-appearance:none;appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--ink-4);border-radius:4px;background:var(--surface);display:inline-grid;place-content:center;cursor:pointer}
  .tx.wide input[type=checkbox]::before,.thead.wide input[type=checkbox]::before{content:"";width:9px;height:9px;background:var(--surface);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);transform:scale(0)}
  .tx.wide input[type=checkbox]:checked,.thead.wide input[type=checkbox]:checked{background:var(--ink);border-color:var(--ink)}
  .tx.wide input[type=checkbox]:checked::before,.thead.wide input[type=checkbox]:checked::before{transform:scale(1)}
  .tx.wide input[type=checkbox]:focus-visible,.thead.wide input[type=checkbox]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
}
@media (min-width:1100px) and (hover:hover){.tx.wide:hover input[type=checkbox]:not(:checked){border-color:var(--ink-3)}}
/* the open row: date chip in a field box (10월 2일(금)), the app's calendar under it, selects with their ▾ */
.txe select{background-color:var(--surface);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b95a5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:32px}
.txe .txe-date{min-width:0}
.txe .datechip-w{display:flex}
.txe .datechip{width:100%;height:36px;justify-content:flex-start;border:1px solid var(--line)!important;border-radius:8px;background:var(--surface)!important;color:var(--ink)!important;font-size:14px;font-weight:500;padding:0 10px}
.txe .datechip .ico{display:none}
.txe .datechip[aria-expanded="true"]{border-color:var(--ink)!important}
.txe-cal .mc{max-width:340px;background:var(--surface);border:1px solid var(--line);border-radius:10px}

/* ---------- 거래내역, phone (M_tx) ---------- */
@media (max-width:1099px){
  .tx-filters{gap:6px;flex-wrap:wrap}
  /* who entered it: one "모두 ▾" select at the end of the chip row */
  .tx-who-sel{position:relative;display:inline-flex;align-items:center;margin-left:auto;min-height:0}
  .tx-who-sel select{-webkit-appearance:none;appearance:none;height:34px;border:1px solid var(--line);border-radius:8px;background:var(--surface);background-image:none;color:var(--ink);font-size:12.5px;font-weight:700;padding:0 28px 0 12px;max-width:140px;text-overflow:ellipsis}
  .tx-who-sel .ico{position:absolute;right:9px;pointer-events:none;color:var(--ink-3)}
  /* the panel behind the search button: 기간, 금액, 달력 and 여러 개 선택 */
  .tx-panel{gap:6px;flex-wrap:wrap}
  .tx-panel .btn.sm{height:34px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);gap:6px}
  .tx-panel .btn.sm.on{background:var(--ink);border-color:var(--ink);color:var(--brand-ink)}
  .tx-panel-sel{gap:6px;flex-wrap:wrap}
  .tx-panel-sel .tx-sel{flex:1 1 140px;min-width:0}
  .tx-panel-sel .tx-sel select{width:100%;max-width:none;height:36px}
  /* totals spread across the width under a 2px rule */
  .tx-tools>.tx-sum{display:flex;justify-content:space-between;align-items:baseline;width:100%;gap:8px;border-top:2px solid var(--ink);padding-top:10px;margin-top:2px;font-size:12px;flex-wrap:wrap}
  .tx-tools>.tx-sum>span{white-space:nowrap}
  /* rows: 28px avatar at the edge, name 14, line under it 12, amount 14 */
  .tx-list .tx{grid-template-columns:28px minmax(0,1fr) auto;gap:10px;padding:10px 0}
  .tx-list .tx .tx-who.m{width:28px}
  .tx-list .tx .glyph{width:28px;height:28px}
  .tx-list .tx .tx-m{gap:0}
  .tx-list .tx .tx-t{font-size:14px;font-weight:700;line-height:20px}
  .tx-list .tx .tx-s{font-size:12px;line-height:17px}
  .tx-list .tx .tx-a{font-size:14px;font-weight:700}
  .tx-list .tx:has(>span>.cbx){grid-template-columns:28px minmax(0,1fr) auto}
  .tx-list .tx>span:has(>.cbx){width:28px!important}
  .tx-list .dayh{font-size:13px;padding:14px 0 4px}
  .tx-list .dayh span{font-size:12.5px}
  /* "10월 2일 이전 더 보기" */
  .tx-more{display:block;width:100%;min-height:44px;padding:12px 0;border:0;border-top:1px solid var(--line-2);background:none;color:var(--ink-3);font-size:12.5px;font-weight:600;text-align:center;cursor:pointer}
}
@media (max-width:1099px) and (hover:hover){.tx-more:hover{color:var(--ink)}}
@media (max-width:767px){.tx-list{margin-top:-12px}}
/* the selection bar: no shadow, buttons light on the dark bar (an outlined-button rule made them white on white) */
.selbar{box-shadow:none!important}
.selbar .btn.sm{background:transparent!important;border-color:transparent!important;color:var(--surface)!important;box-shadow:none!important}
@media (hover:hover){.selbar .btn.sm:hover{background:color-mix(in srgb,var(--surface) 14%,transparent)!important}}
/* phone: the count and total on one line, every action on the next, all on screen */
@media (max-width:767px){
  .selbar{flex-wrap:wrap;row-gap:4px;overflow:visible;width:calc(100vw - 24px);padding:8px 8px 8px 16px}
  .selbar>b{flex:0 0 auto}
  .selbar>span{flex:1 0 55%;min-width:0}
  .selbar>.btn{flex:0 0 auto}
  .selbar>.btn:first-of-type{margin-left:-10px}
}

/* ---------- 거래 입력 (D_desk_entry, M_entry) ---------- */
/* a plain dim behind the sheet, no blur */
.ov:has(>.sheet.es-sheet){background:rgba(21,23,28,.42);-webkit-backdrop-filter:none;backdrop-filter:none}
.sheet.es-sheet{position:relative}
.sheet.es-sheet .sh-h h2{font-weight:900}
@media (min-width:1100px){
  .ov:has(>.sheet.es-sheet){padding-top:56px}
  .sheet.es-sheet{width:600px;max-width:calc(100vw - 32px);border-radius:16px}
  .sheet.es-sheet .sh-h{padding:20px 14px 0 24px}
  .sheet.es-sheet .sh-h h2{font-size:20px;letter-spacing:-.03em}
  .sheet.es-sheet .sh-b{padding:16px 24px 18px}
  .sheet.es-sheet .sh-f{padding:16px 24px 20px}
}
/* who it is by: a pill switch in the head, left of the close button */
.es-who{position:absolute;top:22px;right:58px;z-index:2;display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.es-who button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 3px;border:0;border-radius:999px;background:none;color:var(--ink-3);font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}
.es-who button .ava{width:22px;height:22px;font-size:10px;box-shadow:none}
.es-who button .ava .ico{width:12px;height:12px}
.es-who button.on{background:var(--ink);color:var(--brand-ink)}
@media (max-width:1099px){.es-who{top:23px;right:52px}.es-who button{height:26px;font-size:11px;gap:5px;padding:0 9px 0 3px}.es-who button .ava{width:20px;height:20px}}
/* three people in a narrow sheet: the switch keeps the initials only */
@media (max-width:420px){.es-who:has(>button:nth-child(3)) button>span{display:none}.es-who:has(>button:nth-child(3)) button{padding:0 3px}}
/* the amount: 9,000 원 with a light 원, quick amounts small */
.sheet.es-sheet .amt{gap:6px}
.sheet.es-sheet .amt input{font-size:48px!important;font-weight:900;letter-spacing:-.04em;line-height:1.1;height:auto!important}
.sheet.es-sheet .amt span{font-size:18px;font-weight:500;color:var(--ink-3)}
.sheet.es-sheet .quick-amt{gap:6px}
.sheet.es-sheet .quick-amt button{height:28px;padding:0 10px;border-radius:8px;font-size:12px;font-weight:500;color:var(--ink)}
@media (max-width:1099px){
  .sheet.es-sheet .amt input{font-size:42px!important}
  .sheet.es-sheet .amt span{font-size:16px}
  .sheet.es-sheet .quick-amt{gap:5px}
  .sheet.es-sheet .quick-amt button{font-size:11.5px;padding:0 8px}
}
/* PC: the amount sits 10px above the quick amounts (board); the hint line takes room only when it says something.
   Phones keep the reserved line: the number pad below must not move under the finger when the hint appears. */
@media (min-width:1100px){
  .sheet.es-sheet .amt{padding-top:4px}
  .sheet.es-sheet .amt-hint:empty{min-height:0;margin:0}
  .sheet.es-sheet .amt-hint:not(:empty){margin:2px 0 0}
  .sheet.es-sheet .quick-amt{margin-top:10px}
}
/* 자동 채움 names itself on PC only (M_entry has no label) */
@media (max-width:1099px){.es-auto-k{display:none}.es-auto{height:44px}}
/* rows: short grey label, white outlined boxes and chips */
.sheet.es-sheet .es-rows{gap:12px;padding-top:14px}
@media (min-width:1100px){.sheet.es-sheet .es-row{grid-template-columns:72px minmax(0,1fr);gap:12px}}
.sheet.es-sheet .es-row>.es-l,.sheet.es-sheet .es-row>.h.es-l{font-size:12px;font-weight:700;color:var(--ink-3)}
.sheet.es-sheet .es-item input,.sheet.es-sheet #es-memo{height:34px;border:1px solid var(--line)!important;border-radius:8px;background:var(--surface)!important;padding:0 12px;font-size:14px;box-shadow:none}
.sheet.es-sheet .es-item input:focus,.sheet.es-sheet #es-memo:focus{border-color:var(--ink)!important;outline:0}
/* the item's tag as a mark at the end of the box */
.sheet.es-sheet .es-item{position:relative}
.sheet.es-sheet .es-item:has(.es-tag) input{padding-right:64px}
.sheet.es-sheet .es-item .es-tag{pointer-events:auto;right:7px;height:20px;padding:0 7px;border:0;border-radius:4px;background:var(--surface-2);color:var(--ink-2);font-size:11px;font-weight:700;cursor:pointer}
.sheet.es-sheet .es-rows .chip{height:32px;padding:0 12px;font-size:13px;font-weight:500;border-radius:8px}
.sheet.es-sheet .es-rows .chip.on{font-weight:700}
.sheet.es-sheet .pickrow.es-row .chip-more{height:32px;padding:0 10px;gap:4px;display:inline-flex;align-items:center;font-size:13px}
.sheet.es-sheet .pickrow.es-row .chips{gap:6px}
.sheet.es-sheet .datechip{gap:6px}
.sheet.es-sheet .datechip .ico{color:var(--ink-3)}
.sheet.es-sheet .datechip.on .ico{color:inherit}
@media (max-width:1099px){
  .sheet.es-sheet .es-rows .chip,.sheet.es-sheet .pickrow.es-row .chip-more{height:34px;font-size:12.5px;padding:0 11px}
  .sheet.es-sheet .datechip .ico{display:none}
  .sheet.es-sheet .pickrow.es-row .chips{gap:5px}
}
/* 할부, 반복, 자주 쓰는 거래 ▾ under the field column */
.sheet.es-sheet .more-toggle{font-size:13px;font-weight:500;color:var(--ink-3);gap:4px}
@media (min-width:1100px){.sheet.es-sheet .more-toggle{margin-left:84px}}
@media (hover:hover){.sheet.es-sheet .more-toggle:hover{color:var(--ink)}}
.sheet.es-sheet .sh-f .btn.lg{height:48px;border-radius:10px;font-size:15px}
.sheet.es-sheet .es-k{background:none;border:0;color:inherit;opacity:.55;font-weight:500;font-family:inherit;font-size:14px;padding:0;margin-left:8px}

/* touch: the new small controls reach the finger like the rest (44px hit area, 36px boxes) */
@media (pointer:coarse){
  .tx-who-sel select{min-height:36px}
  .es-who button{position:relative}
  .es-who button::after,.es-item .es-tag::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
}

/* 직접 기간: one box with the range, opening the date fields and a range calendar (lead, 27판) */
.pp-cust{position:relative;display:inline-flex}
.pp-box{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 12px 0 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer;font-variant-numeric:tabular-nums}
.pp-box .ico{color:var(--ink-3)}
.pp-box[aria-expanded="true"]{border-color:var(--ink)}
@media (hover:hover){.pp-box:hover{background:var(--surface-2)}}
.pp-pop{position:absolute;top:calc(100% + 6px);right:0;z-index:70;width:336px;max-width:calc(100vw - 32px);padding:12px;border:1.5px solid var(--ink);border-radius:14px;background:var(--surface)}
.pp-pop .pp-dates{display:flex;align-items:center;gap:6px;width:100%}
.pp-pop .pp-dates input{flex:1 1 0;min-width:0;height:36px;font-size:13px;padding:0 8px}
.pp-hint{margin:8px 2px 4px;font-size:12px;color:var(--ink-3)}
.pp-pop .mc{border:0;padding:0;max-width:none;background:none}
.mc-d.in{background:var(--surface-2);border-radius:0}
.mc-d.rs:not(.re){border-radius:999px}
@media (max-width:767px){
  .phead .pp>.pp-cust{order:1;flex:0 0 auto}
  .pp-box{height:32px;font-size:13px;padding:0 10px;gap:8px}
  .pp-pop{width:calc(100vw - 40px);max-width:360px}
}

/* ---------- 3차 (BACKLOG 3): 홈 = 오늘 할 일. 예산 살펴볼 항목, 리포트에서 더 보기 ---------- */
.home-bud,.home-more{border-top:0!important;padding-top:0!important;gap:0!important}
.home-bud>.card-h,.home-more>.card-h{border-bottom:2px solid var(--ink);padding-bottom:10px!important;min-height:0}
.home-bud .card-h h2,.home-more .card-h h2{font-size:15px}
.home-bud>.card-h .sub{font-size:12.5px}
.hbud-row{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
.hbud-row .hbud-bar{grid-column:1/-1;display:block}
.hbud-row.st-over .t small,.hbud-row.st-fast .t small{color:var(--c-coral,#ff6b5a);font-weight:600}
.hbud-row.st-over .v{color:var(--c-coral,#ff6b5a)}
.hbud-foot{margin-top:10px;font-size:12px}
.home-due .t small.hd-late{color:var(--c-coral,#ff6b5a);font-weight:600}
.hm-list{display:grid;grid-template-columns:minmax(0,1fr)}
.hm-row{grid-template-columns:minmax(0,1fr) auto}
.hm-row>.ico{color:var(--ink-3)}
.hm-row .t b,.hm-row .t small{white-space:normal;word-break:keep-all;overflow-wrap:break-word}
@media (min-width:1100px){
  .hm-list{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px}
  .hm-row{border-bottom:0;padding:14px 0 4px}
}
/* the place a 홈 link lands on 리포트 clears the sticky head and tabs */
.rp-cats,.rp-month,.co-card{scroll-margin-top:150px}
/* 결제 예정 and 예산 살펴볼 항목 share the right column next to the summary and 최근 입력 */
.home-todo{gap:26px;min-width:0}
@media (min-width:1100px){.home-todo{grid-row:span 2}}
@media (max-width:1099px){.home-todo{gap:26px}}
@media (max-width:767px){.home-todo{gap:18px}}
.hbud-row .bar.over i{background:var(--c-coral,#ff6b5a)}