*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--page:#eef0f4;--ink:#22252b;--mute:#6b7280;--panel:#fff;--line:#0000001a;--acc:#3B82F6;
  --st:max(var(--safe-area-inset-top,0px),env(safe-area-inset-top,0px));--sb:max(var(--safe-area-inset-bottom,0px),env(safe-area-inset-bottom,0px))}
@media (prefers-color-scheme:dark){:root{--page:#1b1d22;--ink:#e8eaee;--mute:#9aa1ad;--panel:#262a31;--line:#ffffff1a}}
html,body{margin:0;height:100%;background:var(--page);color:var(--ink);font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;overscroll-behavior:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
[hidden]{display:none!important}
.view{position:fixed;inset:0;display:flex;flex-direction:column}
.grow{flex:1}
.ib{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none}
.ib:active{background:var(--line)}

/* ---------- 홈 ---------- */
.hbar{display:flex;align-items:center;gap:6px;padding:calc(var(--st) + 6px) 8px 6px 16px;background:var(--page)}
.hbar h1{font-size:22px;font-weight:800;margin:0;letter-spacing:-.02em}
#hBack:not([hidden])+h1{margin-left:-4px}
.hbar #hBack{margin-left:-8px}
.sd{width:9px;height:9px;border-radius:50%;background:#22c55e;margin-left:6px;flex:none}
.sd.off{background:#9ca3af}.sd.err{background:#ef4444}.sd.busy{background:var(--acc);animation:blink .8s infinite}
@keyframes blink{50%{opacity:.3}}
.searchrow{padding:0 16px 8px}
.searchrow input{width:100%;padding:11px 14px;border-radius:12px;border:0;background:var(--panel);outline:none;font-size:15px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 16px 10px;scrollbar-width:none;flex:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;height:32px;padding:0 13px;border-radius:16px;background:var(--panel);font-size:13px;color:var(--mute);white-space:nowrap}
.chips button.on{background:var(--ink);color:var(--page)}
.chips .dot{width:32px;padding:0;display:grid;place-items:center}
.chips .dot i{width:16px;height:16px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1px #0003}
.chips .dot.on{background:var(--panel);box-shadow:0 0 0 2px var(--acc) inset}
#dueBar{margin:0 16px 10px;background:#ff5a4f;color:#fff;border-radius:14px;padding:6px 6px 6px 14px;flex:none}
.due{display:flex;align-items:center;gap:6px;padding:4px 0;font-size:14px}
.due span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.due button{background:#ffffff33;color:#fff;border-radius:9px;padding:6px 10px;font-size:13px}
.due button.pri{background:#fff;color:#d6342a;font-weight:700}
#grid{flex:1;overflow-y:auto;padding:4px 12px calc(var(--sb) + 96px);column-width:160px;column-gap:12px}
.card{break-inside:avoid;margin-bottom:12px;background:var(--bg);color:var(--fg);border-radius:4px 4px 16px 4px;padding:12px 12px 8px;box-shadow:0 1px 2px #0002,0 6px 16px #0001;--ln:color-mix(in srgb,var(--fg) 18%,transparent);overflow:hidden}
.card:active{transform:scale(.98)}
.card.ringing{animation:ring 1s infinite}
@keyframes ring{50%{box-shadow:0 0 0 3px #ff5a4f99}}
.card .top{display:flex;gap:6px;align-items:center;font-size:11px;margin-bottom:4px;min-height:0}
.card .top:empty{display:none}
.badge{padding:1px 7px;border-radius:9px;background:color-mix(in srgb,var(--fg) 14%,transparent)}
.badge.done{opacity:.5;text-decoration:line-through}
.card .body{font-size:14px;line-height:1.45;word-break:break-word;white-space:pre-wrap;max-height:260px;overflow:hidden}
.card .body img{max-width:100%;border-radius:6px;display:block;margin:4px 0}
.card .body a{color:inherit}
.card .body.emptyb{opacity:.4}
.tag{font-weight:700;opacity:.8}
.card .todos{margin-top:6px;padding-top:4px;border-top:1px dashed var(--ln)}
.ctodo{display:flex;gap:8px;align-items:flex-start;padding:3px 0;font-size:13.5px}
.ctodo.done span{text-decoration:line-through;opacity:.5}
.meta{display:flex;justify-content:space-between;font-size:11px;opacity:.5;margin-top:6px}
.tacts{display:flex;gap:6px;margin-top:8px}
.tacts button{flex:1;padding:7px;border-radius:8px;background:color-mix(in srgb,var(--fg) 12%,transparent);font-size:13px}
#empty{position:absolute;inset:140px 24px auto;text-align:center;color:var(--mute);line-height:1.8;font-size:14px}
#fab{position:fixed;right:20px;bottom:calc(var(--sb) + 24px);width:60px;height:60px;border-radius:20px;background:var(--acc);color:#fff;font-size:30px;box-shadow:0 8px 24px #3B82F666;line-height:1}
#fab:active{transform:scale(.94)}

/* 체크박스 공통 */
.cb{appearance:none;width:20px;height:20px;flex:none;border:2px solid color-mix(in srgb,var(--fg) 55%,transparent);border-radius:6px;margin:0;display:grid;place-items:center}
.cb:checked{background:var(--fg);border-color:var(--fg)}
.cb:checked:after{content:"";width:5px;height:10px;border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.card .cb{width:17px;height:17px;margin-top:1px}

/* ---------- 편집 ---------- */
#editor{background:var(--bg);color:var(--fg);--ln:color-mix(in srgb,var(--fg) 18%,transparent);--fs:16px}
.ebar{display:flex;align-items:center;gap:2px;padding:calc(var(--st) + 4px) 6px 4px;background:var(--hd)}
.chip{font-size:12px;padding:5px 10px;border-radius:12px;background:color-mix(in srgb,var(--fg) 14%,transparent)}
.chip.done{opacity:.55;text-decoration:line-through}
#eRing{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#ff5a4f;color:#fff;font-size:14px;font-weight:600}
#eRing span{flex:1}
#eRing button{background:#ffffff33;border-radius:8px;padding:6px 10px;color:#fff;font-size:13px}
#eRing button.pri{background:#fff;color:#d6342a}
#eScroll{flex:1;overflow-y:auto;padding:16px 18px calc(var(--sb) + 40px)}
#content{min-height:120px;outline:none;font-size:var(--fs);line-height:1.6;word-break:break-word;white-space:pre-wrap}
#content:empty:before{content:attr(data-ph);opacity:.4}
#content img{max-width:100%;border-radius:8px;display:block;margin:8px 0}
#content a{color:inherit}
#todos{margin-top:14px;padding-top:8px;border-top:1px dashed var(--ln)}
.todo{display:flex;align-items:center;gap:10px;padding:4px 0}
.todo .ttext{flex:1;min-width:0;background:none;border:0;outline:0;font-size:var(--fs);padding:6px 0;color:inherit}
.todo.done .ttext{text-decoration:line-through;opacity:.5}
.todo .tdel{width:32px;height:32px;display:grid;place-items:center;opacity:.45;border-radius:8px}
#addTodo{padding:10px 0;opacity:.55;font-size:15px}
#eMeta{margin-top:24px;font-size:12px;opacity:.45}

/* ---------- 시트 ---------- */
#sheet{position:fixed;inset:0;background:#0006;z-index:50;display:flex;align-items:flex-end;animation:fade .15s}
@keyframes fade{from{opacity:0}}
.sheetbox{width:100%;background:var(--panel);color:var(--ink);border-radius:20px 20px 0 0;padding:10px 18px calc(var(--sb) + 18px);max-height:86vh;overflow-y:auto;animation:up .2s ease-out}
@keyframes up{from{transform:translateY(40px)}}
.sheetbox:before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 12px}
.sheetbox h3{margin:4px 0 14px;font-size:17px}
.sheetbox h4{margin:18px 0 8px;font-size:12px;color:var(--mute);font-weight:600}
.sw{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sw button{height:52px;border-radius:14px;background:var(--bg);box-shadow:inset 0 0 0 1px #0002}
.sw button.sel{box-shadow:inset 0 0 0 3px var(--acc)}
.mi{display:flex;align-items:center;gap:12px;width:100%;padding:14px 4px;font-size:16px;border-bottom:1px solid var(--line);text-align:left}
.mi:last-child{border-bottom:0}
.mi.danger{color:#ef4444}
.fld{display:block;font-size:13px;color:var(--mute);margin-bottom:12px}
.fld input,.fld select{display:block;width:100%;margin-top:6px;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--page);color:var(--ink);font-size:15px}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.btn{padding:13px;border-radius:12px;background:var(--page);text-align:center;font-size:15px}
.btn.pri{background:var(--acc);color:#fff;font-weight:600}
.row{display:flex;gap:10px;margin-top:6px}.row .btn{flex:1}
.tog{display:flex;align-items:center;justify-content:space-between;padding:10px 0;font-size:15px}
.tog input{width:22px;height:22px}
.stat{font-size:13px;color:var(--mute);margin-top:10px;line-height:1.5}
.fsrow{display:flex;align-items:center;justify-content:space-between;padding:8px 0 14px;font-size:15px}
.fsrow button{width:44px;height:40px;border-radius:10px;background:var(--page);font-size:20px;font-weight:700}
#lb{position:fixed;inset:0;background:#000e;z-index:60;display:grid;place-items:center}
#lb img{max-width:100vw;max-height:100vh}
#toast{position:fixed;left:50%;bottom:calc(var(--sb) + 100px);transform:translateX(-50%);background:#222c;color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;z-index:70;white-space:nowrap}
body.round .card{border-radius:16px}
/* 할 일: 긴 글은 줄바꿈 */
.todo{align-items:flex-start}
.todo .cb{margin-top:calc((var(--fs) * 1.45 - 20px) / 2 + 6px)}
.todo .ttext{resize:none;overflow:hidden;line-height:1.45;white-space:pre-wrap;word-break:break-word;display:block;font-family:inherit}