:root{
  --bg:#F4F2EC;--fg:#23262D;--muted:#7A7D86;--card:#fff;--line:#E3DFD3;--accent:#E0A800;--danger:#D64545;
  --c-default:#fff;--c-yellow:#FFF1A8;--c-pink:#FFD3DE;--c-mint:#CFF2E0;--c-blue:#CDE6FA;--c-purple:#E2D9FB;--c-orange:#FFDDBF;
  --sat:env(safe-area-inset-top);--sab:env(safe-area-inset-bottom);
}
:root[data-theme="dark"]{
  --bg:#171A20;--fg:#ECEDEF;--muted:#9096A2;--card:#232832;--line:#343A46;--accent:#FFD84D;
  --c-default:#232832;--c-yellow:#5B4E12;--c-pink:#5E2E3B;--c-mint:#1F4A39;--c-blue:#1F3F58;--c-purple:#3F3566;--c-orange:#5E3C1D;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#171A20;--fg:#ECEDEF;--muted:#9096A2;--card:#232832;--line:#343A46;--accent:#FFD84D;
    --c-default:#232832;--c-yellow:#5B4E12;--c-pink:#5E2E3B;--c-mint:#1F4A39;--c-blue:#1F3F58;--c-purple:#3F3566;--c-orange:#5E3C1D;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size:16px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
[hidden]{display:none!important}
#app{max-width:760px;margin:0 auto;padding:calc(var(--sat) + 8px) 16px calc(var(--sab) + 96px)}
.top{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.top h1{font-size:24px;margin:0;letter-spacing:-.5px}
.icon-btn{width:40px;height:40px;border-radius:50%;font-size:20px;display:inline-flex;align-items:center;justify-content:center}
.icon-btn:active{background:var(--line)}
.search-row input{width:100%;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--fg);font-size:16px}
.tabs{display:flex;gap:8px;margin:12px 0}
.tab{padding:7px 16px;border-radius:999px;color:var(--muted);border:1px solid var(--line)}
.tab.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.hint{color:var(--muted);font-size:13px;margin:6px 0 10px;line-height:1.5}
.link{color:var(--accent);text-decoration:underline;font-size:inherit}
.sec{font-size:12px;color:var(--muted);margin:16px 4px 8px;font-weight:600}
#list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-items:start}
#list.single{grid-template-columns:1fr}
#list .sec{grid-column:1/-1;margin-bottom:0}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:60px 0;line-height:1.7}
.card{border-radius:14px;padding:12px 13px;border:1px solid var(--line);text-align:left;overflow:hidden;
  box-shadow:0 1px 2px #0001;word-break:break-word;max-height:240px;position:relative}
.card h3{font-size:15px;margin:0 0 6px}
.card p{margin:0;font-size:14px;line-height:1.5;color:var(--fg);opacity:.85;white-space:pre-wrap}
.card .pin{position:absolute;top:6px;right:8px;font-size:12px}
.card .ck{font-size:14px;line-height:1.55;display:flex;gap:6px}
.card .ck.done{text-decoration:line-through;opacity:.5}
.card .more{font-size:12px;color:var(--muted);margin-top:4px}
mark{background:#FFE066;color:#222;border-radius:3px}
.c-default{background:var(--c-default)}.c-yellow{background:var(--c-yellow)}.c-pink{background:var(--c-pink)}
.c-mint{background:var(--c-mint)}.c-blue{background:var(--c-blue)}.c-purple{background:var(--c-purple)}.c-orange{background:var(--c-orange)}
#fab{position:fixed;right:20px;bottom:calc(var(--sab) + 22px);width:58px;height:58px;border-radius:50%;background:var(--accent);
  color:#222;font-size:30px;box-shadow:0 4px 14px #0004;display:flex;align-items:center;justify-content:center;z-index:5}
#fab-menu{position:fixed;right:20px;bottom:calc(var(--sab) + 92px);background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 6px 20px #0003;display:flex;flex-direction:column;z-index:6;overflow:hidden}
#fab-menu button{padding:14px 18px;text-align:left}
#fab-menu button+button{border-top:1px solid var(--line)}
/* 편집 화면 */
#editor{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;background:var(--c-default)}
#editor.c-yellow{background:var(--c-yellow)}#editor.c-pink{background:var(--c-pink)}#editor.c-mint{background:var(--c-mint)}
#editor.c-blue{background:var(--c-blue)}#editor.c-purple{background:var(--c-purple)}#editor.c-orange{background:var(--c-orange)}
.ed-top{display:flex;align-items:center;padding:calc(var(--sat) + 6px) 8px 6px}
.sp{flex:1}
#ed-pin.on{background:var(--accent)}
.ed-scroll{flex:1;overflow-y:auto;padding:4px 18px 24px;-webkit-overflow-scrolling:touch}
#ed-title{width:100%;border:0;background:none;color:var(--fg);font-size:22px;font-weight:700;padding:8px 0;outline:none}
#ed-body{width:100%;border:0;background:none;color:var(--fg);font-size:17px;line-height:1.6;min-height:50vh;resize:none;outline:none;font-family:inherit}
.item{display:flex;align-items:center;gap:8px;padding:3px 0}
.item input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent);flex:none}
.item input[type=text]{flex:1;border:0;background:none;color:var(--fg);font-size:17px;padding:6px 0;outline:none;font-family:inherit}
.item.done input[type=text]{text-decoration:line-through;opacity:.5}
.item .x{color:var(--muted);width:30px;height:30px;font-size:18px}
.add{padding:10px 0;font-size:15px;text-decoration:none}
.ed-foot{display:flex;align-items:center;justify-content:space-between;padding:10px 16px calc(var(--sab) + 12px);border-top:1px solid #0001}
#colors{display:flex;gap:10px}
.dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--line)}
.dot.on{border-color:var(--fg)}
#ed-time{font-size:12px;color:var(--muted)}
#ed-trash-bar{display:flex;gap:10px;padding:10px 16px calc(var(--sab) + 12px);border-top:1px solid #0001}
#ed-trash-bar button{flex:1;padding:13px;border-radius:12px;background:var(--fg);color:var(--bg)}
#ed-trash-bar .danger{background:var(--danger);color:#fff}
dialog{border:0;border-radius:18px;padding:20px;background:var(--card);color:var(--fg);width:min(90vw,380px)}
dialog::backdrop{background:#0006}
dialog h2{margin:0 0 12px;font-size:18px}
.row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.pill{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg)}
.pill.full{width:100%;margin-top:6px;background:var(--fg);color:var(--bg)}
#toast{position:fixed;left:50%;bottom:calc(var(--sab) + 100px);transform:translateX(-50%);background:#222;color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;z-index:30;max-width:90vw}