@font-face{font-family:"Pretendard";src:url("fonts/Pretendard-Regular.woff2") format("woff2");font-weight:400}
@font-face{font-family:"Pretendard";src:url("fonts/Pretendard-SemiBold.woff2") format("woff2");font-weight:600}
@font-face{font-family:"Pretendard";src:url("fonts/Pretendard-Bold.woff2") format("woff2");font-weight:700}
@font-face{font-family:"Pretendard";src:url("fonts/Pretendard-ExtraBold.woff2") format("woff2");font-weight:800}
:root{
  --navy:#1e2a5a; --navy-2:#2c3b7a; --bg:#eef1f6; --card:#fff; --ink:#18203a; --ink-soft:#4a5573;
  --muted:#8a93ab; --line:#e3e7ef; --mint:#3ccfa8; --mint-soft:#dcf7ef; --lav:#8b7cf6; --lav-soft:#ece9fe;
  --sans:"Pretendard",-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.5;letter-spacing:-.01em}
#app{max-width:520px;margin:0 auto;padding-bottom:96px}
.hero{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;padding:22px 20px 56px;border-radius:0 0 28px 28px}
.hero .date{font-size:13px;font-weight:600;color:var(--mint)}
.hero h1{font-size:24px;font-weight:800;margin:4px 0 2px}
.hero p{margin:0;font-size:14px;color:#c4cbe6}
.wrap{padding:0 16px;margin-top:-40px}
.settle{background:var(--card);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:14px;box-shadow:0 6px 18px rgba(30,42,90,.12);margin-bottom:14px}
.dday{flex:none;width:58px;height:58px;border-radius:14px;background:var(--mint-soft);color:#139a78;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:17px;line-height:1.1}
.dday small{font-size:10px;font-weight:600}
.settle .k{font-size:12px;font-weight:700;color:var(--muted)}
.settle .v{font-size:17px;font-weight:800}
.settle .s{font-size:12px;color:var(--ink-soft)}
.sec-title{display:flex;align-items:baseline;gap:8px;font-size:16px;font-weight:800;margin:20px 4px 8px}
.sec-title span{font-size:12px;font-weight:600;color:var(--lav)}
.row{background:var(--card);border-radius:10px;padding:12px 14px;margin-bottom:6px;display:flex;align-items:center;gap:12px;border-left:4px solid var(--c,var(--lav))}
.time{flex:none;width:64px;font-size:12px;font-weight:700;color:var(--navy-2);line-height:1.35}
.time b{display:block;font-size:13px;color:var(--ink)}
.t{font-size:15px;font-weight:600}
.s{font-size:12px;color:var(--muted)}
.ex{display:inline-block;font-size:10px;font-weight:700;color:var(--lav);border:1px solid var(--lav);border-radius:4px;padding:0 4px;margin-left:6px;vertical-align:2px}
.todo{cursor:pointer;border-left-color:var(--mint)}
.chk{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #c9cfdc;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800}
.todo.done .chk{background:var(--mint);border-color:var(--mint)}
.todo.done .t{color:var(--muted);text-decoration:line-through}
.cat{background:var(--card);border-radius:12px;padding:12px 14px;margin-bottom:8px}
.cat-h{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;margin-bottom:6px}
.chip{width:30px;height:30px;border-radius:9px;background:var(--cs);display:flex;align-items:center;justify-content:center;font-size:16px}
.cat-h em{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;color:var(--c);background:var(--cs);border-radius:99px;padding:1px 8px}
.item{display:flex;align-items:center;gap:10px;padding:7px 0 7px 4px;border-top:1px solid var(--line);font-size:14px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
.tabbar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:center;padding:8px 0 14px;z-index:9}
.tabbar button{flex:1;max-width:130px;border:0;background:none;font:inherit;font-size:11px;font-weight:600;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px}
.tabbar button i{font-style:normal;font-size:20px;filter:grayscale(1);opacity:.55}
.tabbar button.on{color:var(--navy)}
.tabbar button.on i{filter:none;opacity:1}
/* 변형 B: 세이지 그린 + 머스터드, 플래너 */
:root{--navy:#5f7552;--navy-2:#7d9370;--bg:#f7f8f1;--ink:#2f3a2a;--ink-soft:#56634e;--muted:#8f9a86;--line:#e2e6d8;--mint:#d9a521;--mint-soft:#f6ecc9;--lav:#6f8a5f}
.hero{border-radius:0;padding-bottom:60px;background:var(--navy)}
.hero .date{color:#f2d27a}
.hero h1{letter-spacing:0}
.settle,.row,.cat{border-radius:6px;box-shadow:none;border:1px solid var(--line)}
.row{border-left:4px solid var(--c,#6f8a5f)}
.todo{border-left-color:#d9a521}
.chk{border-radius:4px}
.dday{border-radius:6px;color:#8a6510}
.sec-title{border-bottom:2px solid #5f7552;padding-bottom:4px;margin-left:0;margin-right:0}
.wrap{background-image:linear-gradient(#f7f8f1,#f7f8f1)}
.tabbar{background:#5f7552;border-top:0}
.tabbar button{color:#c9d4bf}.tabbar button.on{color:#fff}
.tabbar button i{filter:none;opacity:.6}
.item.todo{cursor:pointer;border-left:0;background:none;padding:8px 0 8px 2px;margin:0;border-radius:0}
.item .chk{width:20px;height:20px;border-color:var(--c)}
.item.done .chk{background:var(--c);border-color:var(--c)}
.item .t{font-size:14px;font-weight:500}
.empty{border-top:1px dashed var(--line);padding:9px 2px 3px;font-size:13px;color:var(--muted)}
.ev-empty{padding:20px;text-align:center;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
.sit{border:1px solid #5f7552;background:#fff;color:#5f7552;font:inherit;font-size:13px;font-weight:600;border-radius:99px;padding:6px 12px}
.sit.on{background:#5f7552;color:#fff}
.grow{flex:1;min-width:0}
.row.confirm{background:#fbf3d6;border-color:#e9cf7e;border-left:4px solid #d9a521}
.note{font-size:13px;color:var(--muted);padding:10px 12px;border:1px dashed var(--line);border-radius:6px;background:#fff}
.acts{display:flex;gap:6px;margin-top:8px}
.acts button{font:inherit;font-size:12px;font-weight:600;border:1px solid var(--line);background:#fff;border-radius:6px;padding:4px 10px;color:var(--ink-soft)}
.acts button:first-child{background:#5f7552;color:#fff;border-color:#5f7552}
.sit-tag{margin-left:auto;flex:none}
.wrap{margin-top:-40px}
.wrap>.sec-title:first-child{color:#fff;border-color:#f2d27a;margin-top:0}
.hero{padding-bottom:22px}
.wrap{margin-top:4px}
.wrap>.sec-title:first-child{color:var(--ink);border-color:#5f7552;margin-top:16px}
.chips{gap:6px}
.sit{padding:6px 11px;font-size:13px}
.chips{display:flex;flex-direction:column;flex-wrap:nowrap;gap:6px}
.chip-row{display:flex;gap:6px}
.chip-row .sit{flex:1 1 0;min-width:0;white-space:nowrap;padding:6px 4px;font-size:13px;text-align:center}
.fab{position:fixed;right:max(18px,calc(50% - 242px));bottom:84px;width:56px;height:56px;border-radius:50%;border:0;background:#d9a521;color:#fff;font-size:32px;font-weight:600;line-height:1;box-shadow:0 4px 12px rgba(47,58,42,.28);z-index:10;cursor:pointer}
.dim{position:fixed;inset:0;background:rgba(47,58,42,.45);z-index:20}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;background:#f7f8f1;border-radius:16px 16px 0 0;padding:10px 18px 22px;z-index:21;max-height:90vh;overflow:auto}
.grab{width:40px;height:4px;border-radius:2px;background:#cfd6c4;margin:0 auto 10px}
.sheet h2{font-size:18px;font-weight:800;margin:0 0 6px}
.fl{display:block;font-size:13px;font-weight:700;color:var(--ink-soft);margin:12px 0 6px}
.in{width:100%;font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink)}
.in:focus{outline:2px solid #7d9370;border-color:transparent}
.err{font-size:12px;color:#c0563b;min-height:0;margin-top:4px}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{font:inherit;font-size:13px;font-weight:600;border:1px solid #5f7552;background:#fff;color:#5f7552;border-radius:99px;padding:6px 11px}
.opt.on{background:#5f7552;color:#fff}
.tog{display:flex;align-items:center;gap:10px;width:100%;margin-top:16px;padding:12px;border:1px solid #e9cf7e;background:#fbf3d6;border-radius:6px;font:inherit;font-size:14px;font-weight:600;color:var(--ink)}
.sw{width:40px;height:24px;border-radius:12px;background:#cfd6c4;position:relative;flex:none;transition:.2s}
.sw i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}
.tog.on .sw{background:#d9a521}.tog.on .sw i{left:19px}
.sbtns{display:flex;gap:8px;margin-top:18px}
.sbtns button{flex:1;font:inherit;font-size:15px;font-weight:700;padding:12px;border-radius:8px;border:1px solid #5f7552}
.cancel{background:#fff;color:#5f7552}.ok{background:#5f7552;color:#fff}
.del{flex:none;font:inherit;font-size:11px;font-weight:600;color:#a0573f;background:none;border:1px solid #e5c9bd;border-radius:4px;padding:1px 6px;margin-left:6px}
.memo{background:#fff;border:1px solid var(--line);border-left:4px solid #d9a521;border-radius:6px;padding:12px 14px;margin-bottom:8px;cursor:pointer}
.memo-t{font-size:15px;word-break:break-word}
.memo-f{display:flex;align-items:center;gap:6px;margin-top:8px}
.memo-f .s{margin-right:auto}
.mbtn{font:inherit;font-size:11px;font-weight:600;color:#5f7552;background:none;border:1px solid #5f7552;border-radius:4px;padding:1px 6px}
.memo-f .del{margin-left:0}
.ta{resize:none;line-height:1.5;margin-top:6px}

.dayrow{align-items:flex-start}.evs{flex:1;display:flex;flex-direction:column;gap:10px}.ev{display:flex;gap:10px;align-items:baseline}.ev+.ev{border-top:1px dashed #e3e1d6;padding-top:10px}.et{flex:0 0 64px;font-size:12px;color:var(--muted);font-weight:600}

.evs{gap:4px}.ev+.ev{padding-top:4px}.dayrow{padding-top:10px;padding-bottom:10px}.dayrow .t{line-height:1.3}

/* compact spacing */
.row{padding:9px 12px;margin-bottom:5px}.item{padding:4px 0 4px 4px}.memo{padding:9px 12px;margin-bottom:6px}.t{line-height:1.3}.s{line-height:1.3}

/* compact todo tab */
.cat.tight{padding:7px 10px;margin-bottom:5px}.cat.tight .cat-h{font-size:13px;margin-bottom:2px;gap:6px}.cat.tight .chip{width:22px;height:22px;font-size:13px}.cat.tight .item{padding:2px 0 2px 2px;font-size:13px;gap:8px}.cat.tight .item .t{font-size:13px}.cat.tight .item .chk{width:16px;height:16px}.cat.tight .sit-tag{font-size:11px}.cat.tight .empty{padding:2px 0;font-size:12px}
.due{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;color:#6f7f62;background:#eef1e6;border-radius:4px;padding:0 5px;vertical-align:1px}
.due.today{color:#8a6510;background:#f6ecc9}
.due.over{color:#b4533c;background:#fbe6df}
.in.date{margin-top:8px}

/* compact home */
.sec-title{margin:12px 0 6px;padding-bottom:4px;font-size:15px}.chips-row,.sit-row{gap:5px;margin-bottom:5px}.chip-btn,.sit{padding:5px 0;font-size:12px}.row{padding:6px 10px;margin-bottom:4px;gap:8px}.row .t{font-size:13px}.row .s{font-size:11px}.row .chk,.row .chk{width:18px;height:18px}.ev-empty,.empty-box,.emptyc{padding:8px 10px;font-size:12px}header{padding-top:14px;padding-bottom:12px}header h1{font-size:20px;margin:2px 0}header p{font-size:12px}.acts button{padding:3px 8px;font-size:11px}

/* compact home v2 */
.hero{padding:14px 18px 14px}.hero h1{font-size:21px;margin:2px 0 1px}.hero p{font-size:12px}
.sec-title{font-size:14px;margin:10px 0 5px;padding-bottom:3px}.wrap>.sec-title:first-child{margin-top:10px}
.chips{gap:4px;margin:2px 0 6px}.chip-row{gap:4px}.chip-row .sit{padding:3px 4px;font-size:12px}
.note{padding:6px 10px !important;font-size:12px !important;min-height:0 !important}
.row{padding:5px 10px;margin-bottom:4px}

.donebox>summary{list-style:none;cursor:pointer}.donebox>summary::-webkit-details-marker{display:none}.donebox .arr{margin-left:auto;font-style:normal;font-size:13px;color:#5f7552;transition:transform .2s}.donebox[open] .arr{transform:rotate(180deg)}

/* unify spacing */
.cat,.cat.tight{padding:5px 10px;margin-bottom:4px}.cat-h,.cat.tight .cat-h{font-size:13px;margin-bottom:2px;gap:6px}.item,.cat.tight .item{padding:3px 0 3px 2px;font-size:13px}.item .t{font-size:13px}.memo{padding:5px 10px;margin-bottom:4px}.memo-t{font-size:13px;line-height:1.35}.memo-f{font-size:11px;margin-top:2px}.dayrow{padding:5px 10px}.evs{gap:3px}.ev+.ev{padding-top:3px}.ev .t{font-size:13px}.et{font-size:11px}.time b{font-size:13px}
.citem{cursor:pointer;align-items:flex-start}
.citem .chk{margin-top:1px}
.cq{margin-left:6px;font-size:12px;font-weight:600;color:#6f7f62}
.cn{font-size:11.5px;color:var(--muted);line-height:1.35}
.citem .mbtn{text-decoration:none;flex:none}
.citem .del{flex:none}
.allbuy{margin-left:6px}
.clearbtn{display:block;margin:6px 0 0 auto;font:inherit;font-size:12px;font-weight:600;color:#a0573f;background:none;border:1px solid #e5c9bd;border-radius:6px;padding:4px 10px}
.cartcat{--c:#5f7552;--cs:#e7ecdf}.cartcat .chk{border-color:#7d9370}
.cn{white-space:pre-wrap;word-break:break-word}
.memo-t{white-space:pre-wrap}

/* compact sheet */
.sheet .fl{margin:8px 0 4px;font-size:12px}.sheet .in{padding:8px 10px}.sheet .in.ta{min-height:0;height:52px}.sheet h3,.sheet .sh-t{margin:4px 0 4px}.sheet .opts{gap:5px}.sheet .opt{padding:4px 10px;font-size:12px}.sheet .sbtns{margin-top:12px}

.storebox>summary{list-style:none;cursor:pointer}
.storebox>summary::-webkit-details-marker{display:none}
.storebox>summary .arr{font-style:normal;margin-left:6px;color:#6b7d5c;transition:transform .2s}
.storebox[open]>summary .arr{transform:rotate(180deg)}
.storebox:not([open])>summary{border-bottom:0;margin-bottom:0;padding-bottom:0}
.del.xdel{border:0;background:none;color:#b0574a;font-size:16px;padding:2px 6px;min-width:0;line-height:1}
.mbtn.ico{border:0;background:none;color:#5f7a4f;font-size:17px;font-weight:700;padding:2px 6px;min-width:0;line-height:1}
.cartcat .cat-h em{margin-left:2px;background:none;padding:0;color:#9aa58e;font-weight:600;font-size:12px}
.cartcat .cat-h .allbuy{margin-left:auto}
.storebox>summary .arr{margin-left:-4px}
.storebox>summary .allbuy{padding-right:2px}
.storebox>summary .arr{margin-left:1px}
.chips{gap:6px;margin:4px 0 8px}.chip-row{gap:6px}.chip-row .sit{padding:8px 4px;font-size:14px}
.chips{gap:5px;margin:3px 0 7px}.chip-row{gap:5px}.chip-row .sit{padding:6px 4px;font-size:13px}
.hwrap{position:relative;overflow:hidden}
.hbg{position:absolute;inset:0;background:#c9614f;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:flex-end;padding-right:14px}
.hitem{position:relative;background:#fff;touch-action:pan-y}
.cat.tight.todocat .item{padding:5px 0 5px 2px}
.cat.tight.todocat .cat-h{margin-bottom:4px}
.tabbar button i{filter:drop-shadow(0 0 1px rgba(255,255,255,.6))}
.storebox>summary .arr{margin-left:auto}
.hitem{background:var(--card)}
.hwrap:first-child .hitem{border-top:0}
.hbg{display:none}.hwrap.swiping .hbg{display:flex}