:root{--bg: #ffffff;--dot: #ececee;--surface: #f4f4f5;--surface-strong: #ebebed;--line: #e4e4e7;--text: #18181b;--text-muted: #8a8a8f;--text-faint: #a1a1a6;--accent: #f5601a;--accent-soft: #ffece1;--danger: #e5484d;--danger-soft: #fdecec;--pill: #171717;--pill-text: #ffffff;--pill-muted: #9a9a9e;--tone-0: #ffe4d3;--tone-1: #e2e8ff;--tone-2: #dcf3e4;--tone-3: #fde5f0;--tone-4: #fff2cc;--tone-5: #e6e4f7;--tone-ink-0: #b4460f;--tone-ink-1: #3b4fa8;--tone-ink-2: #2f7a4c;--tone-ink-3: #a83b6e;--tone-ink-4: #9a7409;--tone-ink-5: #57499e;--radius-card: 20px;--radius-thumb: 14px;--radius-pill: 999px;--radius-field: 16px;--gutter: 16px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:var(--font-sans);color:var(--text);background-color:var(--bg);background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:22px 22px;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}#app{display:flex;flex-direction:column;height:100%;max-width:480px;margin:0 auto;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;padding:20px var(--gutter) 12px}.topbar__title{font-size:22px;font-weight:700;letter-spacing:-.02em}.topbar__count{font-size:14px;color:var(--text-muted)}.topbar--form{justify-content:space-between}.topbar--form .topbar__title{font-size:18px}.topbar__spacer{width:40px}.iconbtn{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-pill);color:var(--text);transition:background .15s}.iconbtn:active{background:var(--surface)}.iconbtn svg{width:22px;height:22px}.view{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 var(--gutter) 104px}.banner{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:14px;padding:14px 16px;text-align:left;color:var(--pill-text);background:var(--pill);border-radius:var(--radius-card);box-shadow:0 10px 24px #00000024;transition:transform .15s}.banner:active{transform:scale(.99)}.banner__icon{display:grid;place-items:center;flex-shrink:0;width:42px;height:42px;color:var(--accent);background:#ffffff1a;border-radius:var(--radius-thumb)}.banner__icon svg{width:21px;height:21px}.banner__body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.banner__meta{display:flex;gap:10px;font-size:12px;color:var(--pill-muted)}.banner__name{overflow:hidden;font-size:16px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.banner__dday{flex-shrink:0;font-size:13px;font-weight:600;color:var(--accent)}.list{display:flex;flex-direction:column;gap:10px;list-style:none}.card{display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer;background:var(--surface);border-radius:var(--radius-card);transition:background .15s,transform .15s}.card:active{background:var(--surface-strong);transform:scale(.99)}.card--today{background:var(--accent-soft)}.card__date{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;width:54px;padding-right:14px;border-right:1px solid var(--line)}.card--today .card__date{border-right-color:#f5601a38}.card__month{font-size:12px;color:var(--text-muted)}.card__day{font-size:26px;font-weight:600;line-height:1.1;letter-spacing:-.02em}.card__avatar{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;font-size:17px;font-weight:600;background:var(--tone-0);color:var(--tone-ink-0);border-radius:var(--radius-thumb)}.card__avatar[data-tone="1"]{background:var(--tone-1);color:var(--tone-ink-1)}.card__avatar[data-tone="2"]{background:var(--tone-2);color:var(--tone-ink-2)}.card__avatar[data-tone="3"]{background:var(--tone-3);color:var(--tone-ink-3)}.card__avatar[data-tone="4"]{background:var(--tone-4);color:var(--tone-ink-4)}.card__avatar[data-tone="5"]{background:var(--tone-5);color:var(--tone-ink-5)}.card__body{flex:1;min-width:0}.card__name{overflow:hidden;font-size:16px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.card__sub{margin-top:2px;font-size:13px;color:var(--text-muted)}.card--soon .card__sub{color:var(--accent)}.card--today .card__sub{font-weight:600;color:var(--accent)}.card__status{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;color:var(--text-faint);border:1px solid var(--line);border-radius:var(--radius-pill)}.card__status svg{width:17px;height:17px}.card--today .card__status{color:#fff;background:var(--accent);border-color:var(--accent)}.empty{padding:96px 20px;text-align:center;color:var(--text-muted)}.empty__icon{display:inline-grid;place-items:center;width:64px;height:64px;margin-bottom:18px;color:var(--accent);background:var(--accent-soft);border-radius:var(--radius-pill)}.empty__icon svg{width:30px;height:30px}.empty__text{font-size:15px;line-height:1.6}.addbar{position:fixed;bottom:calc(24px + var(--safe-bottom));left:50%;z-index:10;display:flex;align-items:center;gap:8px;padding:14px 22px;font-size:15px;font-weight:600;color:var(--pill-text);background:var(--pill);border-radius:var(--radius-pill);box-shadow:0 8px 24px #0000003d;transform:translate(-50%);transition:transform .15s}.addbar:active{transform:translate(-50%) scale(.97)}.addbar svg{width:18px;height:18px}.form{display:flex;flex-direction:column;gap:14px;padding-top:8px}.field{display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:var(--surface);border:1px solid transparent;border-radius:var(--radius-field);transition:border-color .15s}.field:focus-within{border-color:var(--text)}.field__label{font-size:12px;font-weight:500;color:var(--text-muted)}.field__input{width:100%;font-family:inherit;font-size:20px;font-weight:600;color:var(--text);background:none;border:none;outline:none}.field__input--mono{letter-spacing:.12em;font-variant-numeric:tabular-nums}.field__input--area{font-size:16px;font-weight:400;line-height:1.5;resize:none}.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px;font-size:16px;font-weight:600;border-radius:var(--radius-field);transition:opacity .15s,transform .15s}.btn:active{transform:scale(.99);opacity:.9}.btn svg{width:18px;height:18px}.btn--primary{margin-top:6px;color:var(--pill-text);background:var(--pill)}.btn--danger-soft{color:var(--danger);background:var(--danger-soft)}.btn--danger{color:#fff;background:var(--danger)}.btn--ghost{color:var(--text);background:var(--surface)}.dialog{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:24px;background:#00000052}.dialog[hidden]{display:none}.dialog__panel{width:100%;max-width:320px;padding:24px 20px 20px;text-align:center;background:var(--bg);border-radius:var(--radius-card);box-shadow:0 20px 48px #0000003d}.dialog__title{font-size:17px;font-weight:700}.dialog__text{margin-top:8px;font-size:15px;color:var(--text-muted)}.dialog__actions{display:flex;gap:8px;margin-top:20px}.dialog__actions .btn{padding:13px;font-size:15px}@media(min-width:768px){#app{height:90vh;margin-top:5vh;background:var(--bg);border-radius:28px;box-shadow:0 12px 40px #0000001f}.addbar{bottom:calc(5vh + 28px)}}