#app{flex:1}
#app:focus{outline:none}
button,input,select,textarea{font-family:inherit}
.screen{animation:rise .32s ease-in-out}
@keyframes rise{from{opacity:.001}to{opacity:1}}
.btn,.btn-ghost,.catchip,.expbtn,.lseg button,.calhead .nav button,.chk .box{
  transition-property:background,color,border-color,opacity,transform,box-shadow;
  transition-duration:.24s;
  transition-timing-function:ease-in-out
}
.btn:active,.btn-ghost:active,.catchip:active,.expbtn:active,.lseg button:active,.calhead .nav button:active{transform:scale(.96)}
.meter .fill,.meter .fa,.meter .fb,.meter .fc,.meter .fd{
  transition-property:width;
  transition-duration:.42s;
  transition-timing-function:ease-in-out
}
.num-updated{animation:numPulse .34s ease-in-out}
@keyframes numPulse{0%{opacity:.55;filter:blur(1px)}100%{opacity:1;filter:blur(0)}}
.view,.daypanel,.cal__grid,.items{
  transition-property:opacity,filter;
  transition-duration:.28s;
  transition-timing-function:ease-in-out
}
.view.is-switching,.daypanel.is-switching,.cal__grid.is-switching,.items.is-switching{opacity:.001;filter:blur(1px)}
.view.is-settling,.daypanel.is-settling,.cal__grid.is-settling,.items.is-settling{animation:softSettle .32s ease-in-out}
@keyframes softSettle{from{opacity:.001;filter:blur(1px)}to{opacity:1;filter:blur(0)}}

.hero{position:relative;overflow:hidden;background:var(--tint);border-radius:18px;
  margin-top:clamp(16px,2.4vw,28px);padding:clamp(36px,5.2vw,64px) clamp(30px,4.6vw,58px)}
.hero__dday{font-family:var(--serif);font-weight:500;line-height:1;letter-spacing:-.02em;
  font-size:clamp(56px,9.6vw,112px);color:var(--ink);margin:0}
.hero__meta{margin-top:clamp(16px,2.2vw,24px);font-size:14.5px;color:var(--ink-2);font-weight:500}
.hero__meta .amp{font-family:var(--serif);font-style:italic;color:var(--ink-2);padding:0 .04em}

/* 개요 — 사진을 중심으로 한 에디토리얼 웨딩 대시보드 */
.overview-top{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,1fr);gap:clamp(38px,6.5vw,82px);
  padding:clamp(20px,2.8vw,34px) 0 clamp(48px,7vw,82px);align-items:start}
.couple-showcase{min-width:0}
.cover-photo{position:relative;overflow:hidden;background:#F3F0EA;aspect-ratio:4/5;isolation:isolate;
  outline:1px solid rgba(27,26,24,.08);outline-offset:-1px}
.cover-photo img{display:block;width:100%;height:100%;object-fit:cover}
.cover-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#F8F6F1 0%,#E9E4DB 100%)}
/* 사진을 올리기 전 기본 이미지는 서비스 로고 — 위 사진용 꽉 채우기(.cover-photo img)를 덮는다. 굵은 plan 쪽으로 쏠려 보여 오른쪽으로 살짝 민다 (#4305) */
.cover-placeholder .cover-placeholder__logo{width:44%;max-width:240px;height:auto;object-fit:contain;opacity:.22;transform:translateX(5%)}
.cover-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.cover-action{position:absolute;left:50%;bottom:20px;z-index:2;min-height:42px;transform:translateX(-50%);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 15px;border-radius:999px;
  background:rgba(255,255,255,.92);color:var(--ink);font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;
  box-shadow:0 10px 30px rgba(27,26,24,.14);backdrop-filter:blur(10px);
  transition-property:transform,background,opacity;transition-duration:.24s;transition-timing-function:ease-in-out}
.cover-action svg{width:15px;height:15px}
.cover-action:hover{background:#fff;transform:translateX(-50%) translateY(-2px)}
.cover-action:active{transform:translateX(-50%) scale(.96)}
.couple-caption{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;padding-top:22px}
.couple-caption h1{display:flex;flex-direction:column;overflow-wrap:anywhere;font-family:var(--sans);font-size:clamp(34px,5vw,62px);
  font-weight:100;letter-spacing:.02em;line-height:1.02;text-transform:uppercase;text-wrap:balance}
.couple-caption h1 i{font:inherit;font-style:normal}
.wedding-countdown{text-align:right;display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums}
.wedding-countdown span{font-size:12.5px;color:var(--ink-2)}
.wedding-countdown strong{font-size:clamp(26px,3.5vw,38px);line-height:1.15;letter-spacing:-.03em;margin-top:3px}
.wedding-countdown small{max-width:18ch;font-size:11.5px;color:var(--ink-2);margin-top:2px}
.overview-summary{display:flex;flex-direction:column;gap:clamp(52px,7vw,84px);padding-top:clamp(16px,2vw,24px)}
.overview-bottom{border-top:1px solid var(--line);padding-top:clamp(44px,5.8vw,68px)}
.settings-cover{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.settings-cover .cover-photo{width:min(100%,300px)}
.settings-cover .cover-photo .cover-action{display:none}
.settings-cover__actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.settings-cover__actions .btn{cursor:pointer}
.settings-cover>p{font-size:12px;color:var(--ink-3);line-height:1.6}

.dash{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,5.5vw,64px);padding:clamp(36px,5vw,56px) 0;align-items:start}
.dash__col{display:flex;flex-direction:column;gap:clamp(48px,6.5vw,74px);min-width:0}
.hcol__h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:0 0 13px;border-bottom:1.5px solid var(--ink);font-size:15px;font-weight:800;letter-spacing:-.01em}
.hcol__h a,.hcol__h .cnt{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.hcol__h a:hover{color:var(--ink)}
.hr{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-2)}
.hr:last-child{border-bottom:0}
.hr .k{font-size:14px;color:var(--ink-2);font-weight:600}
.hr .v{font-size:clamp(18px,2vw,21px);font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.hr.lead .k{color:var(--ink);font-weight:700}
.hr.lead .v{color:var(--ink);font-weight:800}
.hbar{margin-top:clamp(18px,2.2vw,24px)}
.hbar .meter{height:10px}
.hbar .legend,.lsum__bar .legend,.dsum__bar .legend{display:flex;justify-content:space-between;margin-top:11px;font-size:12.5px;color:var(--ink-2)}
.hbar .legend b,.lsum__bar .legend b,.dsum__bar .legend b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

.hpay{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;
  padding:15px 2px;border-bottom:1px solid var(--line-2);color:inherit}
.hpay:last-child{border-bottom:0}
.hpay .cicon{width:18px;height:18px}
.hpay .nm{font-size:14.5px;font-weight:700;letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hpay .nm em{font-style:normal;color:var(--ink-3);font-weight:600;font-size:12px;margin-left:6px}
.hpay .end{display:flex;align-items:center;gap:9px;white-space:nowrap}
.hpay .end .a{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.htodo{display:flex;align-items:center;gap:11px;padding:15px 2px;border-bottom:1px solid var(--line-2);cursor:pointer}
.htodo:last-child{border-bottom:0}
.htodo .nm{font-size:14.5px;font-weight:600;flex:1;min-width:0;transition-property:color,text-decoration-color;transition-duration:.26s;transition-timing-function:ease-in-out}
.htodo.done .nm{text-decoration:line-through;color:var(--ink-3);text-decoration-color:currentColor}
.htodo.todo-exit{opacity:.001;transform:translateY(-4px);transition-property:opacity,transform;transition-duration:.18s;transition-timing-function:ease-in-out}
.ec-pink{--ec:#FFE0E0}.ec-yellow{--ec:#F9E8C4}.ec-green{--ec:#D1EBDC}.ec-blue{--ec:#DCE8F6}.ec-lav{--ec:#E7E1F6}
.hevt{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:13px;align-items:center;
  padding:15px 2px;border-bottom:1px solid var(--line-2);color:inherit}
.hevt:last-child{border-bottom:0}
.hevt .date{text-align:center;font-variant-numeric:tabular-nums}
.hevt .date .d{font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1}
.hevt .date .m{font-size:10.5px;color:var(--ink-3);font-weight:600;margin-top:2px}
.hevt .date .d,.hevt .date .m{display:block}
.hevt .nm{font-size:14.5px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hevt .nm .dot{width:9px;height:9px;border-radius:3px;background:var(--ec);flex:none}
.hevt .nm .t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.hevt .tm{font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}

.minical__wd{display:grid;grid-template-columns:repeat(7,1fr);margin-top:10px}
.minical__wd span{text-align:center;font-size:10.5px;color:var(--ink-3);font-weight:600;padding:5px 0}
.minical__wd span:nth-child(n+6){color:#C9A89A}
.minical__grid{display:grid;grid-template-columns:repeat(7,1fr)}
.mc__d{min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:12.5px;font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
.mc__d .n{width:23px;height:23px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.mc__d.dim .n{color:var(--ink-3);opacity:.55}
.mc__d.today .n{background:#D6EADD;color:#2C6A48;font-weight:700}
.mc__d .dots{display:flex;gap:2.5px;height:4px}
.mc__d .dots i{width:4px;height:4px;border-radius:50%;background:var(--accent)}

.pagehead{border-bottom:0;padding-bottom:clamp(8px,1.2vw,14px)}
.page-actions{display:flex;gap:10px;flex-wrap:wrap}
.lsum,.dsum{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,60px);
  align-items:center;padding:clamp(22px,3vw,34px) 0 var(--sec);border-bottom:1px solid var(--line)}
.lsum__stats,.dsum__stats{display:flex;align-items:baseline;gap:clamp(20px,3.5vw,44px);flex-wrap:wrap}
.stat .k{font-size:12px;color:var(--ink-2);font-weight:600}
.stat .v{display:block;font-size:clamp(18px,2vw,22px);font-weight:800;letter-spacing:-.02em;
  margin-top:5px;font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.stat.hl .v{color:var(--ink)}
/* 예산 초과 — 남은 예산 자리에 초과 금액을 경고색으로(#3650) */
.hr.lead.is-over .k,.hr.lead.is-over .v,.stat.is-over .k,.stat.is-over .v{color:#B44834}
.lsum__bar .meter,.dsum__bar .meter{height:10px}
.lseg{display:flex;gap:clamp(14px,2.4vw,22px);margin:clamp(20px,2.8vw,28px) 0 0}
.lseg button{font:inherit;font-size:16px;font-weight:600;color:var(--ink-3);background:none;border:0;
  padding:0 1px 8px;line-height:1.3;cursor:pointer;position:relative;transition:color .15s}
.lseg button:hover{color:var(--ink-2)}
.lseg button.on{color:var(--ink);font-weight:700}
.lseg button.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink)}
.view{padding:20px 0 var(--sec)}
.itoolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:0 0 2px}
.itoolbar .ilbl{font-size:13px;color:var(--ink-2);font-weight:600;flex:none}
/* 윗줄 첫 줄 높이를 분류 버튼(34px)에 맞춘다 — 글자만 있는 탭도 목록이 같은 자리에서 시작한다(#3912) */
.itoolbar .ilbl,.itoolbar.bt__head>span{line-height:34px}
.itoolbar .ilbl b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.itoolbar .vd{width:1px;height:15px;background:var(--line);flex:none}
.catchips{display:flex;gap:7px;flex-wrap:wrap}
.catchip{font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);background:none;border:1px solid var(--line);
  border-radius:99px;height:34px;padding:0 14px;cursor:pointer;white-space:nowrap;transition:color .12s,background .12s,border-color .12s}
.catchip:hover{border-color:var(--ink-3);color:var(--ink)}
.catchip.on{color:#fff;background:var(--ink);border-color:transparent}
.expandbar{display:flex;align-items:center;justify-content:flex-end;gap:7px;margin-left:auto;flex-wrap:wrap}
.expbtn{position:relative;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:50%;padding:0;cursor:pointer}
.expbtn::before{content:"";position:absolute;inset:-3px;border-radius:50%}
.expbtn svg{width:16px;height:16px;flex:none}
.expbtn:hover{border-color:var(--ink-3);color:var(--ink)}
.expbtn:disabled{opacity:.42;cursor:default}
.expbtn:disabled:active{transform:none}

.items,.btable,.people{margin-top:6px}
.item,.cat,.prow{border-bottom:1px solid var(--line-2)}
.item .erow__head,.cat .erow__head{width:100%;background:none;border:0;cursor:pointer;font:inherit;color:inherit;text-align:left}
.item .erow__head{display:grid;grid-template-columns:auto minmax(0,1fr) auto 20px;align-items:center;gap:13px;padding:15px 0}
.item .cicon,.bt__nm .cicon,.prow .pnm .cicon{width:20px;height:20px}
.enm{font-size:15px;font-weight:700;letter-spacing:-.01em}
.eamt{font-size:15px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.erow__chev{color:var(--ink-3);display:flex;align-items:center;justify-content:flex-end;transition-property:transform,color;transition-duration:.28s;transition-timing-function:ease-in-out}
.erow__chev svg{width:18px;height:18px}
.item.open .erow__chev,.cat.open .erow__chev,.prow.open .erow__chev{transform:rotate(180deg)}
.esub{display:block;max-height:0;opacity:0;overflow:hidden;transition-property:max-height,opacity,padding;transition-duration:.34s;transition-timing-function:ease-in-out}
.item .esub{padding:0}
.item.open .esub{max-height:520px;opacity:1;padding:2px 0 14px}
.item .esub .subrow{display:grid;grid-template-columns:20px minmax(0,1fr) auto 20px;gap:13px;align-items:center;padding:12px 0}
.subrow .nm{font-size:14px;font-weight:600;min-width:0;flex:1}
.subrow .nm em{font-style:normal;color:var(--ink-3);font-size:12px;margin-left:7px;font-weight:500;font-variant-numeric:tabular-nums}
.subrow .rt{display:flex;align-items:center;gap:11px;white-space:nowrap}
.subrow .a{font-size:14px;font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap}
.subrow .nm,.subrow .a,.pay__kind,.pay__amt,.payrow-schedule .nm,.payrow-schedule .e .a{
  transition-property:color,text-decoration-color,opacity;
  transition-duration:.26s;
  transition-timing-function:ease-in-out
}
.subrow.done .nm,.subrow.done .a{text-decoration:line-through;color:var(--ink-3);text-decoration-color:currentColor}
.morelink{display:block;text-align:center;font-size:12px;font-weight:500;color:var(--ink-2);padding:8px 0 6px}
.morelink:hover{color:var(--ink)}

.btable{padding:0}
.bt__head,.cat .erow__head,.bt__total{display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(125px,1.05fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 20px;
  gap:clamp(12px,2vw,24px);align-items:center}
.bt__head{font-size:13px;color:var(--ink-2);font-weight:600;letter-spacing:.01em}
.bt__head span:nth-child(3),.bt__head span:nth-child(4){text-align:right}
/* 열기·닫기 버튼은 마지막(화살표) 칸 오른쪽 끝에 맞추고 왼쪽 집행률 칸으로 넘쳐 그린다 — 집행률 머리글은 막대 시작에 붙인다(#3912) */
.bt__head .expandbar{grid-column:6;justify-self:end;margin:0;flex-wrap:nowrap}
.cat .erow__head{padding:15px 0}
.bt__nm{display:inline-flex;align-items:center;gap:13px;font-size:15px;font-weight:700;letter-spacing:-.01em}
.bt__num{text-align:right;font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700}
.bt__num.dim{color:var(--ink-3);font-weight:500}
.bt__prog{display:flex;align-items:center;gap:12px}
.bt__prog .meter{flex:1}
.bt__prog .pct{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;min-width:46px;text-align:right;color:var(--ink)}
.cat .meter .fill{background:var(--cat)}
.cat .esub{padding:0}
.cat.open .esub{max-height:1200px;opacity:1;padding:0 0 12px}
.cat .esub .subrow{display:grid;align-items:baseline;padding:11px 0;
  grid-template-columns:minmax(0,1.5fr) minmax(125px,1.05fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 20px;gap:clamp(12px,2vw,24px)}
.cat .esub .subrow .nm{grid-column:1 / span 2;padding-left:33px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat .esub .subrow .a{grid-column:3;text-align:right}
.bt__total{border-top:1.5px solid var(--ink);margin-top:2px;padding:18px 0 0}
.bt__total .bt__nm{font-weight:800}
.bt__total .pct{font-size:14px;font-weight:800}

.splitbar{margin-top:clamp(20px,2.6vw,28px)}
.splitbar .meter{height:14px}
.splitbar .meter .fd{background:var(--undecided)}
.splitbar .legend{display:flex;justify-content:space-between;margin-top:13px;gap:16px;flex-wrap:wrap}
.splitbar .lg{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700}
.splitbar .lg .pc{color:var(--ink-3);font-weight:600;font-variant-numeric:tabular-nums}
.prow__head{display:flex;align-items:center;gap:14px;width:100%;padding:15px 0;background:none;border:0;cursor:pointer;font:inherit;color:inherit;text-align:left}
.prow .pnm{flex:1;display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;letter-spacing:-.01em;min-width:0}
.prow .pmeta{font-size:12px;color:var(--ink-3);font-weight:500;white-space:nowrap}
.prow .pamt{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.prow .esub{padding:0 32px 0 29px}
.prow.open .esub{max-height:520px;opacity:1;padding:2px 32px 14px 29px}
.prow .esub .subrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:11px 0}
.prow .esub .subrow .nm em{white-space:nowrap}
.prow.a{--cat:var(--a)}
.prow.b{--cat:var(--b)}
.prow.c{--cat:var(--joint)}
.prow.d{--cat:#B0AAA0}

.calsec{padding:var(--sec) 0 0}
.cal__grid{grid-auto-rows:minmax(126px,auto)}
.cal__d{gap:5px}
.cal__d[data-date]{cursor:pointer;overflow:visible;transition-property:background;transition-duration:.18s;transition-timing-function:ease-in-out}
.cal__d[data-date]:hover,.cal__d.sel{background:#FBFAF8}
.cal__d.sel .dn{color:var(--ink);font-weight:700}
.cal__d.today .dn{background:#D6EADD;color:#2C6A48;width:24px;height:24px;font-size:12px;font-weight:700}
.cal__cellhead{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:28px;z-index:8}
/* 메뉴를 연 칸은 뒤 칸들 위로 — 같은 z-index 라 뒤 칸 숫자가 메뉴를 덮었다(#3855) */
.cal__cellhead:has(.caladd.open){z-index:40}
.caladd{position:relative;margin:-2px -3px -2px 0}
.caladd--day{display:none}
.dp-add{height:40px;padding:2px 16px 0 14px;justify-content:center;line-height:1} /* 한글 글자 모양이 위로 1px 남짓 떠 보여 아래로 맞춤 */
.caladd__btn{position:relative;width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:var(--ink-3);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;opacity:0;filter:blur(4px);transform:scale(.25);
  transition-property:opacity,filter,transform,background,color,box-shadow;transition-duration:.24s;transition-timing-function:cubic-bezier(.2,0,0,1)}
.caladd__btn::before{content:"";position:absolute;inset:-4px}
.caladd__btn svg{width:15px;height:15px}
.cal__d:hover .caladd__btn,.cal__d:focus-within .caladd__btn,.caladd.open .caladd__btn{opacity:1;filter:blur(0);transform:scale(1)}
.caladd__btn:hover{background:transparent;color:var(--ink);box-shadow:none}
.caladd.open .caladd__btn{background:var(--ink);color:#fff;box-shadow:0 4px 14px rgba(27,26,24,.22)}
.caladd__btn:active{transform:scale(.96)}
.caladd__btn:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.caladd__menu{position:absolute;right:0;top:38px;z-index:30;width:132px;padding:6px;background:var(--panel);border-radius:12px;
  box-shadow:0 14px 36px rgba(27,26,24,.16),0 0 0 1px rgba(27,26,24,.06);transform-origin:top right;
  animation:calMenuIn .2s cubic-bezier(.2,0,0,1)}
.caladd__menu[hidden]{display:none}
.caladd__menu button{width:100%;min-height:40px;border:0;border-radius:7px;background:transparent;color:var(--ink);font:inherit;font-size:12.5px;font-weight:650;
  display:flex;align-items:center;gap:9px;padding:8px 10px;cursor:pointer;text-align:left;transition-property:background,transform;transition-duration:.18s}
.caladd__menu button:hover,.caladd__menu button:focus-visible{outline:none;background:var(--tint)}
.caladd__menu button:active{transform:scale(.96)}
.caladd__icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);flex:none}
.caladd__icon svg{width:18px;height:18px}
@keyframes calMenuIn{from{opacity:.001;filter:blur(4px);transform:scale(.96) translateY(-4px)}to{opacity:1;filter:blur(0);transform:scale(1) translateY(0)}}
.calhead{scroll-margin-top:12px}
.cev{display:flex;flex-direction:column;gap:3px;margin-top:3px}
.evb{display:flex;gap:7px;align-items:flex-start;margin:0 -10px;padding:3px 10px;background:var(--ec)}
.evb:hover{filter:saturate(1.04);box-shadow:inset 0 0 0 1px rgba(27,26,24,.05)}
.evb .tm{flex:none;font-size:11px;color:#3c3c3c;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.4}
.evb .body{display:flex;flex-direction:column;min-width:0}
.evb .nm{font-size:11px;color:#2a2a2a;font-weight:600;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evb .sub{font-size:10px;color:#5a5a5a;font-weight:500;line-height:1.3}
.payc{display:flex;align-items:flex-start;gap:5px;color:var(--ink);font-weight:600;line-height:1.3;font-size:11px}
.payc .cicon{width:14px;height:14px;flex:none;margin-top:1px}
.payc em{display:block;font-style:normal;color:var(--ink-3);font-weight:600;font-size:10.5px;margin-top:1px}
.payc .txt,.payc .cicon{transition-property:color,opacity,text-decoration-color;transition-duration:.26s;transition-timing-function:ease-in-out}
.payc.done .txt{text-decoration:line-through;color:var(--ink-3);text-decoration-color:currentColor}
.payc.done .cicon{opacity:.45}
.todoc{display:flex;align-items:flex-start;gap:6px;color:var(--ink-2);font-size:10.5px;font-weight:650;line-height:1.35}
.todoc .todo-dot{width:8px;height:8px;margin-top:2px;border:1.5px solid var(--ink-3);border-radius:3px;flex:none}
.todoc .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,text-decoration-color;transition-duration:.24s}
.todoc.done .todo-dot{background:var(--ink-3)}
.todoc.done .txt{text-decoration:line-through;color:var(--ink-3);text-decoration-color:currentColor}
.daypanel{padding:var(--sec) 0 clamp(44px,6vw,76px)}
.dp-head{display:flex;align-items:baseline;gap:11px;margin-bottom:clamp(18px,2.4vw,26px)}
.dp-head .dp-day{font-size:22px;font-weight:800;letter-spacing:-.02em}
.dp-head .dp-wd{font-size:16px;font-weight:600;color:var(--ink-3)}
.dp-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.5vw,44px)}
.dp-ct{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:13px;font-weight:700;color:var(--ink-2);padding-bottom:11px;border-bottom:1.5px solid var(--ink)}
.dp-ct .n{font-size:12px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.dp-none{padding:26px 2px;color:var(--ink-3);font-size:13px}
.evrow{display:flex;gap:13px;align-items:baseline;padding:14px 2px;border-bottom:1px solid var(--line-2)}
.evrow:hover{background:var(--tint)}
.evrow .tm{flex:none;min-width:44px;font-size:13.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.evrow .nm{font-size:15px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.evrow .nm .dot{width:9px;height:9px;border-radius:3px;background:var(--ec);flex:none}
.evrow .loc{font-size:12.5px;color:var(--ink-3);margin-top:4px}
.payrow-schedule{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:11px;align-items:center;padding:13px 2px;border-bottom:1px solid var(--line-2)}
.payrow-schedule .cicon{width:18px;height:18px;color:var(--cat);flex:none}
.payrow-schedule .nm{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.payrow-schedule .nm em{font-style:normal;color:var(--ink-3);font-weight:600;font-size:12px;margin-left:6px}
.payrow-schedule .sub{font-size:11.5px;color:var(--ink-3);margin-top:3px}
.payrow-schedule .e{display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:right;white-space:nowrap}
.payrow-schedule .e .a{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.payrow-schedule.done .nm,.payrow-schedule.done .e .a{text-decoration:line-through;color:var(--ink-3);text-decoration-color:currentColor}

.crumb{display:inline-flex;align-items:center;gap:6px;max-width:100%;font-size:12.5px;font-weight:600;color:var(--ink-3);padding:18px 0 0}
.crumb:hover{color:var(--ink)}
.crumb svg{width:15px;height:15px;flex:none}
.crumb__t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cathip{display:inline-flex;align-items:center;gap:6px;color:var(--cat);font-weight:700}
.cathip .cicon{width:17px;height:17px}
.layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);
  padding:var(--sec) 0;align-items:start}
.pays__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 0 13px;border-bottom:1.5px solid var(--ink)}
.pays__head .t{font-size:15px;font-weight:700;letter-spacing:-.01em}
.pays__head .c{font-size:13px;color:var(--ink-3);font-weight:600;font-variant-numeric:tabular-nums}
.pay{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:15px;align-items:center;padding:16px 2px;border-bottom:1px solid var(--line-2)}
.pay__kind{font-size:15px;font-weight:700;letter-spacing:-.01em}
.pay__meta{margin-top:6px;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.pay__meta .who{display:inline-flex;align-items:center;gap:5px;color:var(--ink-2);font-weight:600}
.pay__meta .who i{width:8px;height:8px;border-radius:50%}
.pay__meta .who.a i{background:var(--a)}.pay__meta .who.b i{background:var(--b)}.pay__meta .who.j i{background:var(--joint)}
.pay__r{display:flex;align-items:center;gap:12px;justify-content:flex-end}
.pay__amt{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pay.done .pay__kind,.pay.done .pay__amt{text-decoration:line-through;color:var(--ink-3);text-decoration-color:currentColor}
.aside .blk{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line-2)}
.aside .blk:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.aside .blk h3{font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:.02em;margin-bottom:11px}
.aside .kv{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:5px 0}
.aside .kv .k{color:var(--ink-2)}
.aside .kv .v{min-width:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
.aside .kv a.v{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.aside .memo{font-size:13.5px;color:var(--ink-2);line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.actions{display:flex;gap:10px;flex-wrap:wrap;padding:6px 0 48px}

.fgrp,.grp{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(40px,10vw,120px);
  padding:var(--sec) 0;border-bottom:1px solid var(--line)}
.fgrp .gl h2,.grp .gl h2{font-size:16px;font-weight:700;letter-spacing:-.01em}
.fgrp .gl p,.grp .gl p{font-size:12.5px;color:var(--ink-3);margin-top:7px;line-height:1.6}
.fgrp .gr,.grp .gr{display:flex;flex-direction:column;gap:24px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.modeseg{display:inline-flex;align-self:flex-start;gap:4px;padding:4px;background:#EEEFF2;border-radius:12px}
.modeseg label{position:relative;cursor:pointer}
.modeseg input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.modeseg span{display:block;padding:9px 16px;border-radius:9px;font-size:14px;font-weight:600;color:var(--ink-3);transition:background .15s,color .15s}
.modeseg input:checked + span{background:var(--panel);color:var(--ink);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.modeseg input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
.budget-cats{display:flex;flex-direction:column;gap:10px;padding:18px 20px;background:var(--tint);border:1px solid var(--line);border-radius:12px}
.budget-cat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,260px);align-items:center;gap:16px}
.budget-cat input{height:42px;padding:9px 34px 9px 12px;text-align:right}
.budget-cat > label{display:flex;align-items:center;gap:8px;min-width:0;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.budget-sum{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:4px}
.budget-sum__k{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.budget-sum__v{font-size:19px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.budget-err{margin:6px 2px 0;font-size:13px;color:#B44834}
.budget-total.is-invalid .amtin > input,.budget-total.is-invalid .amtin > input:focus{border-color:#B44834}
#budget[data-budget-mode="category"] .budget-total,#budget[data-budget-mode="total"] .budget-sum{display:none}
#budget[data-budget-mode="category"] .budget-cats{order:3}
#budget[data-budget-mode="category"] .budget-sum{order:4}
.field textarea{width:100%;font:inherit;font-size:14.5px;color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-height:96px;resize:vertical;line-height:1.6}
.field textarea:focus{outline:none;border-color:var(--ink)}
.cselect{position:relative}
.cselect__btn{width:100%;height:50px;min-height:50px;font:inherit;font-size:14.5px;color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  transition-property:border-color,background,box-shadow;
  transition-duration:.24s;
  transition-timing-function:ease-in-out}
/* 아이폰은 16px 보다 작은 입력칸을 누르면 화면을 확대해 옆으로 밀린다 — 모바일만 16px, 고르는 칸도 같은 크기로 (#4311).
   금액 칸(17·19px) 규칙보다 앞에 둬야 그쪽이 이긴다 */
@media(max-width:760px){.field input,.field select,.field textarea,.budget-cat input,.cselect__btn{font-size:16px}}
.cselect__btn:hover{background:var(--tint)}
.cselect__btn:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(27,26,24,.08)}
.cselect.open .cselect__btn{border-color:var(--ink);background:var(--panel)}
.cselect__btn .cv{min-width:0;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
.catopt{display:inline-flex;align-items:center;gap:8px;min-width:0;line-height:1.2}
.catopt .cicon{display:block;width:17px;height:17px;flex:none;transform:translateY(1px)}
.coloropt{display:inline-flex;align-items:center;gap:8px;min-width:0;line-height:1.2}
.coloropt i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(27,26,24,.08);flex:none}
.cselect__btn .chev{width:16px;height:16px;color:var(--ink-3);flex:none;
  transition-property:transform,color;
  transition-duration:.24s;
  transition-timing-function:ease-in-out}
.cselect.open .cselect__btn .chev{transform:rotate(180deg);color:var(--ink)}
.cselect__list{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;list-style:none;margin:0;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:0 12px 30px rgba(27,26,24,.12);max-height:260px;overflow:auto;
  animation:cselectIn .24s ease-in-out}
.cselect__list[hidden]{display:none}
.cselect__opt{display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:38px;padding:9px 10px;border-radius:8px;font-size:14px;color:var(--ink);cursor:pointer;
  transition-property:background,color;
  transition-duration:.18s;
  transition-timing-function:ease-in-out}
.cselect__opt:hover,.cselect__opt:focus-visible{outline:none;background:var(--tint)}
.cselect__opt .ck{width:16px;height:16px;color:var(--ink);flex:none;opacity:0;filter:blur(3px);transform:scale(.25);
  transition-property:opacity,filter,transform;
  transition-duration:.24s;
  transition-timing-function:ease-in-out}
.cselect__opt[aria-selected="true"]{font-weight:700}
.cselect__opt[aria-selected="true"] .ck{opacity:1;filter:blur(0);transform:scale(1)}
@keyframes cselectIn{from{opacity:.001;filter:blur(1px)}to{opacity:1;filter:blur(0)}}
.req{color:var(--accent);font-weight:700;margin-left:3px}
.formfoot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:24px 0 48px}
.formfoot__del{margin-right:auto}
/* 삭제 버튼 — 결제 삭제(.delbtn)와 같은 붉은 색. 상세·일정 수정 모두 하단 왼쪽(#3769) */
.btn-del{color:#B44834;border-color:#E8B9AE}
.btn-del:hover{background:#FFF9F7}
.payblock{--pad:clamp(18px,2.2vw,24px);position:relative;background:var(--tint);border-radius:16px;padding:var(--pad)}
.payrow-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 24px;align-items:end}
.payrow-form .wide{grid-column:1 / -1}
.payment-amount-field input{font-size:17px;font-weight:750;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.delbtn{position:absolute;right:var(--pad);top:calc(var(--pad) - 6px);height:28px;width:28px;border:1px solid #E8B9AE;border-radius:9px;background:#FFF9F7;
  color:#B44834;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition-property:color,background,border-color,transform;transition-duration:.2s}
.delbtn:hover{color:#963824;background:#FFF0EC;border-color:#D99B8C}
.delbtn:active{transform:scale(.96)}
.delbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.delbtn svg{width:15px;height:15px}
.addpay{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;width:100%;font-size:13.5px;font-weight:700;color:var(--ink-2);
  background:var(--panel);border:1px dashed var(--ink-3);border-radius:10px;padding:11px 18px;cursor:pointer;margin-top:2px;
  transition-property:color,background,border-color,transform;transition-duration:.2s}
.addpay:hover{color:var(--ink);background:var(--tint);border-color:var(--ink-2)}
.addpay:active{transform:scale(.96)}
.addpay svg{width:16px;height:16px}
.whopick,.seg{display:flex;gap:8px}
.whopick label,.seg label{flex:1;min-width:0;position:relative;cursor:pointer}
.whopick input,.seg input{position:absolute;opacity:0}
.whopick .opt,.seg .opt{display:flex;align-items:center;justify-content:center;gap:7px;font-size:13.5px;font-weight:600;
  padding:11px;border:1px solid var(--line);border-radius:10px;color:var(--ink-2);background:var(--panel);
  min-width:0;overflow-wrap:anywhere;text-align:center}
.whopick .opt i{width:9px;height:9px;border-radius:50%}
.whopick .a i{background:var(--a)}.whopick .b i{background:var(--b)}.whopick .j i{background:var(--joint)}
.whopick input:checked + .opt,.seg input:checked + .opt{color:var(--ink);background:var(--panel);border-color:var(--ink)}
.checkline{position:relative;display:inline-flex;align-items:center;gap:9px;width:max-content;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.checkline input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.checkline .box{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line);background:var(--panel);
  display:flex;align-items:center;justify-content:center;transition-property:background,border-color;transition-duration:.18s;transition-timing-function:ease-in-out}
.checkline .box svg{width:11px;height:11px;color:#fff;opacity:0;transition:opacity .12s ease-in-out}
.checkline:hover .box{border-color:var(--ink-3)}
.checkline input:checked + .box{background:var(--ink);border-color:var(--ink)}
.checkline input:checked + .box svg{opacity:1}
.cash-receipt{margin-top:12px;padding:12px 14px;border-radius:10px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-2)}
.cash-receipt[hidden]{display:none}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0}
.setrow .l{min-width:0}
.setrow .l .t{display:block;font-size:14px;font-weight:600}
.setrow .l .d{display:block;font-size:12px;color:var(--ink-3);margin-top:3px}
.setrow .r{display:flex;align-items:center;gap:10px;white-space:nowrap}
.setrow .r .val{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.btnrow{display:flex;gap:10px;flex-wrap:wrap}
.danger{font:inherit;border:0;background:none;font-size:13px;font-weight:600;color:var(--ink-2);padding:6px 0;cursor:pointer}
.danger:hover{color:var(--accent)}
.empty{padding:32px 2px;color:var(--ink-3);font-size:13.5px}
.toast{position:fixed;right:20px;bottom:20px;z-index:80;background:var(--ink);color:#fff;
  border-radius:12px;padding:12px 16px;font-size:13px;font-weight:700;box-shadow:0 12px 30px rgba(27,26,24,.18)}
.tag{transition-property:background,color,opacity,filter;transition-duration:.24s;transition-timing-function:ease-in-out}
.tag-exit{opacity:.001;filter:blur(1px)}

@media(max-width:860px){
  .dash,.lsum,.dsum,.layout{grid-template-columns:minmax(0,1fr);gap:clamp(30px,5vw,44px)}
  .overview-top{grid-template-columns:1fr;gap:clamp(42px,7vw,64px)}
  .couple-showcase{max-width:680px;margin:0 auto;width:100%}
  .overview-summary{padding-top:0}
}
@media(max-width:760px){
  .itoolbar.bt__head{display:flex}
  .itoolbar.bt__head .expandbar{margin-left:auto}
  .itoolbar.bt__head span:not(:first-child){display:none}
  .cat .erow__head,.bt__total{grid-template-columns:minmax(0,1fr) auto 20px;gap:6px 14px}
  .bt__nm{grid-column:1 / 3;margin-bottom:2px} /* 화살표(3칸)와 같은 첫 줄 — 1 / -1 이면 이름이 둘째 줄로 밀려 화살표만 위에 뜬다(#3912) */
  .bt__num{text-align:left;font-size:13px}
  .bt__num::before{content:attr(data-l) " ";color:var(--ink-3);font-weight:500}
  .bt__num.dim{display:none}
  .bt__prog{grid-column:1 / -1;margin-top:6px}
  .cat .erow__chev,.bt__total>span:last-child{grid-row:1;grid-column:3}
  .cat .esub .subrow{display:flex;justify-content:space-between}
  .cat .esub .subrow .nm{padding-left:0;white-space:normal;overflow:visible}
  .dp-cols,.fgrp,.grp{grid-template-columns:1fr;gap:16px}
  .payrow-form{grid-template-columns:1fr;gap:16px}
  .payrow-form .wide{grid-column:1}
  .delbtn{position:static;width:100%;height:40px;margin-top:16px}
  /* 가계부 총액 — 홈 예산 카드(.hr)처럼 한 줄에 '이름 ··· 금액', 금액 크기는 셋 다 같게(#4066) */
  .lsum__stats{display:block}
  .lsum .stat{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-2)}
  .lsum .stat:first-child{padding-top:0}
  .lsum .stat .k{font-size:14px}
  .lsum .stat .v{margin-top:0;font-weight:700}
  .lsum .stat.hl .k{color:var(--ink);font-weight:700}
  .lsum .stat.hl .v{font-weight:800}
  .lsum .stat.is-over .k{color:#B44834} /* 위 .hl 이름색이 #3650 초과색을 덮지 않게 */
}
@media(max-width:640px){
  .cal__grid{grid-auto-rows:minmax(76px,auto)}
  .cal__d{overflow:visible}
  /* 모바일은 칸의 [+] 대신 날짜 제목 줄의 [추가하기] 가 메뉴를 연다(#4312, app.js renderDayAddMenu) */
  .caladd__btn{display:none}
  .caladd--day{display:block;margin:0 0 0 auto}
  .dp-head:has(.caladd--day){align-items:center} /* baseline 이면 버튼이 날짜보다 내려가 보인다 */
  .cal__d[data-date]{scroll-margin-top:12px}
  /* 아래 메뉴가 일정 목록 끝을 가리지 않게 — 메뉴 높이(약 184px)+아래 18px */
  .screen:has(.caladd.open) .daypanel{padding-bottom:220px}
  .caladd__menu{position:fixed;left:50%;right:auto;top:auto;bottom:18px;width:calc(100vw - 36px);max-width:480px;padding:8px;border-radius:16px;transform:translateX(-50%);transform-origin:bottom center}
  /* 손가락으로 누르기 쉽게 모바일 메뉴 줄을 키운다(#4312) */
  .caladd__menu button{min-height:56px;font-size:16px;gap:12px;padding:10px 14px;border-radius:10px}
  .caladd__icon,.caladd__icon svg{width:22px;height:22px}
  @keyframes calMenuIn{from{opacity:.001;filter:blur(4px);transform:translateX(-50%) translateY(8px) scale(.96)}to{opacity:1;filter:blur(0);transform:translateX(-50%) translateY(0) scale(1)}}
  .cev{width:100%;min-width:0;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;margin-top:2px}
  .evb{width:8px;height:8px;flex:none;margin:0;padding:0;border-radius:3px}
  .evb .tm,.evb .body{display:none}
  .payc{width:14px;height:14px;flex:none;gap:0;overflow:hidden}
  .payc .cicon{width:13px;height:13px;margin:0}
  .payc .txt{display:none}
  .todoc{width:8px;height:8px;overflow:hidden;gap:0}
  .todoc .todo-dot{margin:0}
  .todoc .txt{display:none}
  .pay{grid-template-columns:auto minmax(0,1fr)}
  .pay__r{grid-column:2;align-items:flex-start;text-align:left}
  /* 일정 결제 줄: 윗줄 체크·아이콘·이름·금액, 아랫줄 결제수단·사람(이름 시작선)·상태 뱃지(#4065) */
  .payrow-schedule{row-gap:5px;align-items:start}
  .payrow-schedule .b,.payrow-schedule .e{display:contents}
  /* 이름이 두 줄이 돼도 체크·아이콘·금액은 이름 첫 줄에 맞춘다 — 3px 은 이름 줄 높이(23.2px)와 18px 의 차이 절반 */
  .payrow-schedule .chk,.payrow-schedule .cicon{grid-row:1;margin-top:3px}
  .payrow-schedule .nm{grid-column:3;grid-row:1;align-self:baseline}
  .payrow-schedule .sub{grid-column:3;grid-row:2;margin-top:0;align-self:center}
  .payrow-schedule .e .a{grid-column:4;grid-row:1;justify-self:end;align-self:baseline}
  .payrow-schedule .e .tag{grid-column:4;grid-row:2;justify-self:end;align-self:center}
  /* 결제 내역 분류 버튼은 '결제 N건' 옆 한 줄, 넘치면 좌우 스크롤(#3854). 열기·닫기 버튼은 다음 줄로 */
  .itoolbar .catchips{flex:1 1 0;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    padding:2px 0;margin:-2px 0;-webkit-overflow-scrolling:touch}
  .itoolbar .catchips::-webkit-scrollbar{display:none}
  .itoolbar .catchip{flex:none}
  /* 열기·닫기 버튼도 같은 줄 오른쪽 끝 — 세 탭 모두 한 줄이라 목록 시작 위치가 같다(#3912, #3854 의 다음 줄 배치를 바꿈) */
  .itoolbar{flex-wrap:nowrap}
  .itoolbar .expandbar{flex:none}
}
@media(max-width:560px){
  .overview-top{padding-top:14px}
  .cover-photo{aspect-ratio:4/5}
  .couple-caption{grid-template-columns:1fr;gap:18px}
  .wedding-countdown{align-items:flex-start;text-align:left}
  .couple-caption h1{font-size:clamp(36px,14vw,54px)}
  .duo{grid-template-columns:1fr}
  .item .erow__head{grid-template-columns:auto minmax(0,1fr) 20px}
  .item .erow__head .eamt{grid-column:2;font-size:13px;color:var(--ink-2)}
  .item .erow__chev{grid-column:3;grid-row:1 / span 2}
  .item .esub .subrow{grid-template-columns:20px minmax(0,1fr);gap:10px}
  .item .esub .subrow .rt{grid-column:2;justify-content:flex-start}
  .setrow{align-items:flex-start;flex-direction:column}
  .budget-cats{padding:14px 14px}
  .budget-cat{grid-template-columns:minmax(0,1fr) minmax(0,170px);gap:10px}
  /* 좁은 폭: 개요 결제·일정 이름은 말줄임 대신 줄바꿈, 머리 문구 구분선은 줄 끝에 혼자 남으니 숨김(#3855) */
  .hpay .nm,.hevt .nm .t{white-space:normal;overflow-wrap:anywhere}
  .pagehead .meta{gap:6px 14px}
  .pagehead .meta .sep{display:none}
}

/* ── 로그인·초대 안내 띠 (#3623) — 개요 맨 위 한 줄. 로그인 전·초대받음·예비 배우자 합류 전에 같은 모양으로 쓴다 ── */
.startbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:4px 0 8px;padding:14px 18px;background:var(--tint);border:1px solid var(--line-2);border-radius:12px}
.startbar p{font-size:14px;color:var(--ink-2)}
.startbar p b{color:var(--ink);font-weight:700}
.startbar .btn{min-height:44px}
.gmark{width:16px;height:16px;flex:none;background:#fff;border-radius:50%;display:inline-grid;place-items:center;
  font-size:11px;font-weight:800;line-height:1;color:var(--ink)}
/* 아직 정하지 않은 값(예신·예랑 이름·결혼식 날짜)은 흐리게 */
.couple-caption h1 .is-unset,.wedding-countdown.is-unset span,.wedding-countdown.is-unset strong{color:var(--ink-3)}
.wedding-countdown.is-unset small a{text-decoration:underline;text-underline-offset:2px}
.startbar-act{display:flex;align-items:center;gap:14px}
.startbar .policy-link{font-size:13px;color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
/* 예비 배우자 초대 띠만 노랑으로 강조(#4322) — 다른 띠(예시·초대받음·로그인 풀림)는 위 기본 모양 그대로 */
.startbar--invite{background:#FFF9E3;border-color:#F5E7B5}
.startbar--invite p{color:#5C4A52}
.startbar--invite .dotpair{margin-right:8px;vertical-align:-1px}
.startbar--invite .dotpair .da{box-shadow:0 0 0 1.5px #FFF9E3}

/* ── 첫 가입 온보딩(#3907) — 위 메뉴는 숨기고 가운데 좁은 칸 하나 ── */
.is-onboarding .hashnav{display:none}
/* 로그인 전에는 설정 탭과 설정으로 가는 링크를 숨긴다(#3940) — 주소로 들어오면 render() 가 개요로 돌린다 */
.is-guest a[href^="#settings"]{display:none}
.ob{max-width:620px;margin:0 auto;padding:var(--sec) 0 56px;width:100%}
.ob__step{font-size:12.5px;font-weight:700;color:var(--ink-3);letter-spacing:.04em}
.ob__bar{display:flex;gap:6px;margin:10px 0 28px}
.ob__bar i{flex:1;height:3px;border-radius:2px;background:var(--line-2)}
.ob__bar i.on{background:var(--ink)}
.ob h1{font-size:clamp(24px,3vw,30px);font-weight:800;letter-spacing:-.03em;line-height:1.25}
.ob .lead{font-size:14.5px;color:var(--ink-2);margin-top:10px}
.ob__body{margin-top:32px;display:grid;gap:20px}
.ob__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:36px}
.ob__foot .btn[disabled]{opacity:.45;cursor:default}
.ob__skip{font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-3);background:none;border:0;cursor:pointer;padding:8px 0}
.ob__hint{font-size:12.5px;font-weight:500;color:var(--ink-3)}
.ob__drop{position:relative;display:block;border:1.5px dashed var(--line);border-radius:12px;padding:34px 20px;text-align:center;background:var(--tint);cursor:pointer}
.ob__drop.is-over{border-color:var(--ink)}
.ob__drop.is-busy{cursor:progress}
.ob__drop input{position:absolute;width:1px;height:1px;opacity:0}
.ob__drop b{display:block;font-size:15px}
.ob__drop > span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:6px}
.ob__drop .btn{margin-top:16px;font-size:13.5px;color:var(--ink)}

/* 날짜 칸 — 브라우저 언어와 상관없이 연.월.일(app.js enhanceDateInputs). 기본 글자는 가리고 위에 겹쳐 그린다 */
.datein{position:relative;display:block}
.datein > input{color:transparent;display:block;min-width:0;-webkit-appearance:none;appearance:none} /* 아이폰 기본 모양은 width·height 를 무시해 칸이 옆으로 넘치고 높아진다 (#4061) */
.datein > input::-webkit-date-and-time-value{text-align:left;margin:0;min-height:0}
.datein > input::-webkit-datetime-edit{opacity:0} /* 고르는 중 칸 강조(파란 배경)도 같이 가린다 */
.datein__txt{position:absolute;left:15px;top:50%;transform:translateY(-50%);pointer-events:none;
  font-size:14.5px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.datein__txt.is-empty{color:var(--ink-3)}
@media(max-width:760px){.datein__txt{font-size:16px}} /* 날짜 칸 보이는 글자도 다른 입력칸과 같은 16px (#4311) */