/* ══ 지출 시트 (xs) — 입력 개혁 v3 ══════════════════════════════════════════
   글자 4단계: 44(금액) / 17(값) / 15(라벨) / 13(보조). 컨테이너 한 겹. 캡션 없음.
   토큰은 선셋 그대로: --bg --panel --panel-2 --line --muted --ink --cta --cta-ink --brand --danger */
#xs{position:fixed;inset:0;z-index:80;pointer-events:none;--xs-kb:0px;font-variant-numeric:tabular-nums}
#xs.on{pointer-events:auto}
#xs .xs-dim{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .25s}
#xs.on .xs-dim{opacity:1}
#xs .xs-ico{display:inline-flex;align-items:center}
#xs .xs-ico svg,#xs .xs-hb svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#xs .mono{font-family:var(--mono)}
/* 시트 */
.xs-sheet{position:absolute;left:0;right:0;bottom:var(--xs-kb);max-width:760px;margin:0 auto;background:var(--panel);border-radius:26px 26px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.45);max-height:calc(96% - var(--xs-kb));display:flex;flex-direction:column;will-change:transform;transform:translateY(105%);color:var(--ink);touch-action:none;transition:filter .3s,transform 0s,bottom .22s ease,max-height .22s ease}
.xs-sheet.sub{background:#1a1d23;max-height:calc(88% - var(--xs-kb))}
.xs-sheet.pushed{filter:brightness(.55)}
.xs-grab{width:40px;height:5px;border-radius:3px;background:#3a3f49;margin:8px auto 0;flex:none}
.xs-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:2px 14px 4px;flex:none;min-height:44px}
.xs-head b{font-size:17px;letter-spacing:-.01em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xs-head>:last-child{justify-self:end}
.xs-hb{background:none;border:0;color:var(--muted);font:inherit;font-size:15px;font-weight:700;padding:8px 6px;min-height:44px;border-radius:10px}
.xs-hb.done{color:var(--cta)}
.xs-hb.danger{color:var(--danger)}
.xs-hb:active{opacity:.6}
.xs-hsp{display:inline-block;width:44px}
.xs-body{overflow-y:auto;padding:0 16px 12px;flex:1 1 auto;min-height:0;scrollbar-width:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.xs-body::-webkit-scrollbar{display:none}
.xs-foot{flex:none;padding:8px 16px calc(10px + env(safe-area-inset-bottom,0px));background:inherit;border-top:1px solid var(--line)}
.xs-footrow{display:flex;gap:8px}
.xs-footrow .xs-save{flex:1}
.xs-ghost{flex:none;height:52px;padding:0 18px;border-radius:16px;background:var(--panel-2);border:0;color:var(--ink);font:inherit;font-weight:700;font-size:15px}
.xs-ghost:disabled{opacity:.35}
.xs-ghost:active{transform:scale(.98)}
/* 금액 히어로 */
.xs-hero{padding:0 4px 4px}
.xs-big{display:flex;align-items:baseline;gap:8px;position:relative}
.xs-big .xs-cur{font-size:24px;color:var(--muted);font-weight:600}
.xs-big input{background:none;border:0;color:var(--ink);font:inherit;font-weight:800;font-size:40px;line-height:1.05;letter-spacing:-.03em;width:100%;min-width:0;outline:0;padding:0;font-variant-numeric:tabular-nums;caret-color:var(--cta)}
.xs-big input::placeholder{color:#3a3f49}
.xs-under{display:flex;justify-content:space-between;align-items:center;margin-top:4px;gap:8px}
.xs-under-r{display:inline-flex;align-items:center;gap:8px}
.xs-fx{font-size:13px;color:var(--muted)}
.xs-pm{display:inline-grid;grid-template-columns:1fr 1fr;background:var(--panel-2);border-radius:99px;padding:3px;gap:2px}
.xs-pm button{border:0;background:none;color:var(--muted);font:inherit;font-weight:700;font-size:13px;padding:7px 13px;min-height:32px;border-radius:99px;transition:background .15s,color .15s}
.xs-pm button.on{background:var(--brand);color:#12140f}
.xs-curbtn{display:inline-flex;align-items:center;gap:4px;background:var(--panel-2);border:0;color:var(--ink);font:inherit;font-weight:800;font-size:13px;padding:0 10px 0 12px;height:32px;border-radius:99px;transition:transform .1s}
.xs-curbtn i{font-style:normal;color:var(--muted);font-size:11px}
.xs-curbtn:active{transform:scale(.96)}
.xs-note{font-size:13px;color:var(--muted);margin:8px 2px 0;line-height:1.5}
.xs-note.amber{color:var(--cta)}
.xs-spin{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.2);border-top-color:var(--cta);border-radius:99px;animation:xs-spin .8s linear infinite;margin-left:8px;vertical-align:middle}
@keyframes xs-spin{to{transform:rotate(360deg)}}
.xs-busy{position:absolute;inset:0;background:rgba(21,23,28,.72);display:flex;align-items:center;justify-content:center;gap:10px;font-size:15px;font-weight:700;border-radius:26px 26px 0 0;z-index:2}
/* 가져오기 */
.xs-imp{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.xs-imp button{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:14px;background:var(--panel-2);border:0;color:var(--ink);font:inherit;font-weight:600;font-size:15px;transition:transform .1s,background .1s}
.xs-imp button:active{transform:scale(.97);background:#262a32}
.xs-imp .xs-ico svg{width:20px;height:20px;color:var(--muted)}
/* 그룹 리스트 */
.xs-grp{background:var(--bg);border-radius:16px;overflow:hidden;margin-top:10px}
.xs-grp .xs-r{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;min-height:48px;padding:0 14px 0 16px;border:0;border-bottom:1px solid #1b1e25;background:none;color:var(--ink);font:inherit;text-align:left;width:100%;transition:background .1s}
.xs-grp .xs-r:last-child{border-bottom:0}
.xs-grp .xs-r:active{background:var(--panel-2)}
.xs-grp .xs-r:disabled{opacity:.5}
.xs-grp .xs-r .k{font-size:15px;color:var(--muted);font-weight:500}
.xs-grp .xs-r .v{font-size:17px;font-weight:600;letter-spacing:-.01em;justify-self:end;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xs-grp .xs-r .v.soft{color:var(--muted);font-weight:500;font-size:15px}
.xs-grp .xs-r .ar{display:inline-flex;align-items:center;gap:8px;color:#4a505b}
.xs-grp .xs-r .ar svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.xs-grp .xs-r.in{grid-template-columns:1fr auto}
.xs-grp .xs-r.in input,.xs-grp .xs-r.in input[type=date],.xs-grp .xs-r.in input[type=time]{background:none;border:0;color:var(--ink);font:inherit;font-size:17px;font-weight:600;width:100%;min-width:0;outline:0;padding:0;-webkit-appearance:none;appearance:none;color-scheme:dark}
.xs-grp .xs-r.in input::placeholder{color:#4a505b;font-weight:500}
.xs-need{font-size:13px;font-weight:700;color:var(--cta)}
.xs-shot{display:inline-flex;align-items:center;gap:4px;background:var(--panel-2);border:0;color:var(--ink);font:inherit;font-size:13px;font-weight:700;padding:0 10px;height:30px;border-radius:99px}
.xs-shot svg{width:16px;height:16px}
/* 바구니 줄 */
.xs-grp .xs-row{grid-template-columns:1fr auto auto;min-height:58px}
.xs-grp .xs-row .xs-rowl{display:flex;flex-direction:column;min-width:0}
.xs-grp .xs-row .xs-rowl .v{justify-self:start;text-align:left;display:flex;align-items:center;gap:6px}
.xs-grp .xs-row .xs-rowl .v svg{width:15px;height:15px;color:var(--muted)}
.xs-grp .xs-row .sub{font-size:13px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xs-grp .xs-row .amt.neg{color:var(--danger)}
.xs-grp .xs-row.off .v,.xs-grp .xs-row.off .sub{color:var(--muted);font-weight:500}
/* 하단 */
.xs-save{height:52px;border-radius:16px;background:var(--cta);color:var(--cta-ink);border:0;font:inherit;font-weight:800;font-size:16px;width:100%;transition:transform .1s,opacity .2s}
.xs-save:active{transform:scale(.98)}
.xs-save:disabled{opacity:.35}
.xs-save.sm{height:46px;font-size:15px}
.xs-txt{background:none;border:0;color:var(--muted);font:inherit;font-weight:600;font-size:15px;padding:12px;width:100%;min-height:44px;transition:opacity .1s}
.xs-txt.sm{width:auto;padding:6px 8px;font-size:13px;min-height:32px}
.xs-txt.sm.on{color:var(--cta)}
.xs-txt:active{opacity:.6}
.xs-txt:disabled{opacity:.3}
.xs-addmore{width:100%;margin-top:12px;height:48px;background:var(--bg);border:0;border-radius:14px;color:var(--ink);font:inherit;font-weight:600;font-size:15px}
.xs-addmore:active{background:var(--panel-2)}
.xs-stackb{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 10px;border-radius:99px;background:#1e4a37;border:0;color:#d6f5e6;font:inherit;font-weight:800;font-size:15px}
.xs-stackb svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.xs-stackb.bump{animation:xs-bump .35s cubic-bezier(.2,.8,.2,1)}
@keyframes xs-bump{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
/* 사람 목록 */
.xs-plist{display:grid;gap:6px;margin-top:8px}
.xs-p{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:0 12px;min-height:56px;border-radius:14px;background:var(--panel-2);border:1px solid transparent;color:var(--ink);font:inherit;text-align:left;width:100%;transition:transform .1s}
.xs-p:active{transform:scale(.985)}
.xs-p.on{border-color:var(--brand);background:#22181a}
.xs-av{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:14px;color:#111}
.xs-p .nm{font-weight:600;font-size:17px;letter-spacing:-.01em}
.xs-p .nm small{display:block;font-size:13px;color:var(--muted);font-weight:500}
.xs-p .r{font-weight:600;font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.xs-p.on .r{color:var(--ink)}
.xs-p .ck{width:22px;height:22px;border-radius:99px;border:2px solid #3a3f49;display:grid;place-items:center}
.xs-p.on .ck{background:var(--brand);border-color:var(--brand)}
.xs-p .ck svg,.xs-p .r svg{width:14px;height:14px;stroke:#111;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.xs-p .r svg{stroke:var(--ink)}
.xs-seg3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;background:var(--bg);border-radius:14px;padding:4px;margin-bottom:4px}
.xs-seg3 button{border:0;background:none;color:var(--muted);font:inherit;font-weight:700;font-size:15px;padding:10px 4px;border-radius:11px;transition:background .15s}
.xs-seg3 button.on{background:var(--brand);color:#12140f}
.xs-pickbar{display:flex;justify-content:space-between;align-items:center;margin:8px 2px 0;font-size:13px;color:var(--muted)}
.xs-nav{display:flex;align-items:center;justify-content:space-between;background:var(--panel-2);border:0;border-radius:14px;padding:13px 14px;font:inherit;font-weight:700;font-size:15.5px;letter-spacing:-.01em;margin-top:8px;color:var(--ink);width:100%;text-align:left;min-height:52px}
.xs-nav.on{box-shadow:inset 0 0 0 1px var(--brand)}
.xs-nav small{display:block;color:var(--muted);font-weight:500;font-size:13px;letter-spacing:0;margin-top:2px}
.xs-nav small.amber{color:var(--cta)}
.xs-nav svg{width:16px;height:16px;color:#4a505b}
.xs-swrow{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--panel-2);border:0;border-radius:14px;padding:12px 14px;font:inherit;font-weight:700;font-size:15.5px;margin-top:12px;color:var(--ink);width:100%;text-align:left;min-height:52px}
.xs-sw{width:44px;height:26px;border-radius:99px;background:#3a3f49;position:relative;flex:none;transition:background .2s;display:inline-block}
.xs-sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:99px;background:#fff;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.xs-sw.on{background:#12b886}.xs-sw.on::after{transform:translateX(18px)}
/* 날짜·분류 */
.xs-dchips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px;margin:0 -16px;padding-inline:16px}
.xs-dchips::-webkit-scrollbar{display:none}
.xs-dchips button{flex:none;background:var(--panel-2);border:1px solid transparent;color:var(--ink);font:inherit;font-weight:700;font-size:15px;padding:9px 14px;border-radius:14px;text-align:left;min-height:52px}
.xs-dchips button small{display:block;font-size:13px;color:var(--muted);font-weight:500}
.xs-dchips button.on{border-color:var(--brand);background:#22181a}
.xs-grid3{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.xs-grid3 button{background:var(--panel-2);border:1px solid transparent;border-radius:14px;padding:12px 4px 10px;color:var(--ink);font:inherit;font-weight:700;font-size:13px;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:64px}
.xs-grid3 button.on{border-color:var(--brand);background:#22181a}
/* 더보기 */
.xs-m{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 14px;border:0;border-bottom:1px solid #1b1e25;background:none;color:var(--ink);font:inherit;text-align:left;width:100%;min-height:56px;box-sizing:border-box}
.xs-m>div{min-width:0}
.xs-m:last-child{border-bottom:0}
.xs-m .mi{display:grid;place-items:center;color:var(--muted)}
.xs-m b{display:block;font-size:16px;letter-spacing:-.01em;line-height:1.25}
.xs-m small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.xs-m small .link{color:var(--cta);font-weight:700}
.xs-m input,.xs-m textarea{width:100%;max-width:100%;box-sizing:border-box;background:var(--panel-2);border:0;border-radius:10px;color:var(--ink);font:inherit;font-size:15px;padding:9px 11px;margin-top:6px;outline:0;resize:none;-webkit-appearance:none;appearance:none}
.xs-phs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.xs-ph{position:relative;width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--panel-2);border:0;padding:0}
.xs-ph img,.xs-ph video{width:100%;height:100%;object-fit:cover;display:block}
.xs-ph .x{position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:99px;background:rgba(0,0,0,.65);color:#fff;border:0;font-size:14px;line-height:1;padding:0}
.xs-ph.add{display:grid;place-items:center;color:var(--muted);font-size:22px;border:1px dashed #333842;background:none}
/* 항목별 */
.xs-remain{font-size:13px;color:var(--muted);margin:10px 2px 8px}
.xs-remain.ok{color:#12b886}
.xs-remain.over{color:var(--danger)}
.xs-item{background:var(--panel-2);border-radius:14px;padding:10px 10px 8px;margin-bottom:8px}
.xs-item .top{display:grid;grid-template-columns:1fr 112px 32px;gap:8px;align-items:center}
.xs-item .top input{background:var(--bg);border:0;border-radius:10px;color:var(--ink);font:inherit;font-size:15px;font-weight:600;padding:9px 10px;min-width:0;width:100%;outline:0}
.xs-item .amtwrap{display:flex;align-items:center;gap:4px;background:var(--bg);border-radius:10px;padding:0 8px}
.xs-item .amtwrap span{color:var(--muted);font-size:13px}
.xs-item .amtwrap input{background:none;padding:9px 0;text-align:right;font-variant-numeric:tabular-nums}
.xs-item .nm{font-weight:700;font-size:15px}
.xs-item .amt{font-weight:800;font-size:15px;text-align:right;font-variant-numeric:tabular-nums}
.xs-item.lo{background:transparent;border:1px dashed #333842}
.xs-item.lo .top{grid-template-columns:1fr auto}
.xs-x{background:none;border:0;color:var(--muted);font-size:20px;line-height:1;padding:0;height:32px}
.xs-item .who{display:flex;align-items:center;gap:4px;background:none;border:0;color:var(--muted);font:inherit;font-size:13px;padding:8px 2px 2px;width:100%;text-align:left;min-height:36px}
.xs-item .who i{font-style:normal;width:20px;height:20px;border-radius:7px;display:inline-grid;place-items:center;font-size:10px;font-weight:800;color:#111}
.xs-item .who i.more{background:#333842;color:#ddd}
.xs-item .who span{margin-left:4px;flex:1}
.xs-item .who svg{width:14px;height:14px;color:#4a505b}
.xs-shots{display:flex;gap:8px;margin-top:12px;align-items:stretch}
.xs-shots img{width:64px;height:84px;object-fit:cover;border-radius:12px}
.xs-shotmore{width:64px;border:1px dashed #333842;background:none;color:var(--muted);border-radius:12px;font:inherit;font-size:12px;font-weight:700;line-height:1.3}
.xs-shotmore small{font-weight:500;font-size:11px}
/* 영수증 미리보기(시킨 메뉴 고르기) */
.xs-rv{background:var(--panel-2);border-radius:16px;padding:12px 12px 10px;margin-top:8px}
.xs-rv-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.xs-rv-h b{font-size:15px}
.xs-rv-i{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;width:100%;background:none;border:0;border-bottom:1px solid #262a32;padding:10px 2px;color:var(--ink);font:inherit;text-align:left;min-height:44px}
.xs-rv-i:last-of-type{border-bottom:0}
.xs-rv-i .cb{width:22px;height:22px;border-radius:7px;border:2px solid #3a3f49;display:grid;place-items:center}
.xs-rv-i.on .cb{background:var(--brand);border-color:var(--brand)}
.xs-rv-i .cb svg{width:14px;height:14px;stroke:#111;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.xs-rv-i .nm{font-size:15px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.xs-rv-i .nm small{color:var(--muted);font-weight:500}
.xs-rv-i:not(.on) .nm{color:var(--muted);text-decoration:line-through;font-weight:500}
.xs-rv-i .am{font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.xs-rv-i .am.neg{color:var(--danger)}
.xs-rv-b{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center;margin-top:8px}
/* 붙여넣기 칸 */
.xs-ta{width:100%;background:var(--bg);border:1px dashed #333842;border-radius:14px;color:var(--ink);font:inherit;font-size:15px;padding:12px 14px;outline:0;resize:none;margin-top:4px}
/* 되돌리기 토스트 */
/* 방 목록 줄 (탭 = 편집 · 왼쪽으로 밀기 = 삭제) */
.xs-rw{position:relative;border-radius:16px;overflow:hidden;margin:8px 0;background:#3a1518}
.xs-rw .xs-del{position:absolute;inset:0 0 0 auto;width:96px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;background:var(--danger);opacity:0}
.xs-rr{position:relative;display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center;padding:13px 14px;background:var(--panel);border-radius:16px;will-change:transform;cursor:pointer;touch-action:pan-y}
.xs-rr:active{background:var(--panel-2)}
.xs-rr .ic{width:38px;height:38px;border-radius:12px;background:var(--panel-2);display:grid;place-items:center}
.xs-rr .mid{min-width:0}
.xs-rr .nm{font-weight:700;font-size:15px;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xs-rr .sub{font-size:12.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xs-rr .sub em{font-style:normal;color:var(--cta);font-weight:700}
.xs-rr .sub svg{width:11px;height:11px;vertical-align:-1px}
.xs-rr .amt{font-weight:800;font-size:16px;letter-spacing:-.01em;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.xs-rr .amt small{display:block;font-size:11px;color:var(--muted);font-weight:500}
body.xs-open{overflow:hidden;position:fixed;left:0;right:0;width:100%;}
#xs{overscroll-behavior:none;}
.xs-body,.xs-sheet .tsh{touch-action:pan-y;-webkit-overflow-scrolling:touch;}
@media (prefers-reduced-motion:reduce){#xs .xs-dim,.xs-sheet,.xs-sw::after,.xs-stackb.bump{transition:none;animation:none}}
.xs-rr .sub .rc-pin{display:inline;white-space:nowrap}