/* 오늘 할 일 메모 카드 (대시보드). 포털 토큰(--accent, --surface-2, --r-card…)만 쓰고, 움직임은 짧고 조용하게 */
.mm{--mm-ck:22px;display:flex;flex-direction:column;position:relative}
.mm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 10px 18px}
.mm-title{display:flex;flex-direction:column;gap:1px;min-width:0}
.mm-title h3{font-size:var(--fs-md);font-weight:700;color:var(--fg)}
.mm-date{font-size:var(--fs-sm);color:var(--muted)}

/* 진행률 링 */
.mm-ring{position:relative;width:38px;height:38px;flex:none;display:grid;place-items:center}
.mm-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.mm-ring circle{fill:none;stroke-width:3.2}
.mm-ring-bg{stroke:var(--surface-2)}
.mm-ring-fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:0 100}
.mm-ring b{position:relative;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:-.02em}
.mm-ring.all .mm-ring-fg{stroke:var(--ok)}
.mm-ring.all b{color:var(--ok)}

/* 입력줄 */
.mm-compose{display:flex;align-items:center;gap:10px;margin:2px 12px 6px;padding:5px 5px 5px 14px;background:var(--surface-2);border:1px solid transparent;border-radius:var(--r-card)}
.mm-compose:focus-within{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.mm-compose-dot{width:var(--mm-ck);height:var(--mm-ck);flex:none;border-radius:var(--r-sm);border:1.6px dashed color-mix(in srgb,var(--muted) 55%,transparent)}
.mm-input{flex:1;min-width:0;border:0;background:none;outline:none;padding:7px 0;font-size:var(--fs-md)}
.mm-input::placeholder{color:color-mix(in srgb,var(--muted) 80%,transparent)}
.mm-add{width:32px;height:32px;flex:none;border:0;border-radius:var(--r-ctl);display:grid;place-items:center;background:transparent;color:var(--muted)}
.mm-add svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.mm-add.on{background:var(--accent);color:var(--accent-fg)}
.mm-add:active{transform:scale(.94)}

/* 목록 */
.mm-body{padding:2px 0 10px}
.mm-list{list-style:none;margin:0;padding:2px 6px}
.mm-item{display:grid;grid-template-columns:16px var(--mm-ck) minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 8px 6px 4px;border-radius:var(--r-ctl);position:relative}
.mm-item:hover{background:var(--surface-2)}
.mm-grip,.mm-grip-sp{width:16px;height:22px;display:grid;place-items:center;color:var(--muted);opacity:0;cursor:grab;touch-action:none}
.mm-grip svg{width:14px;height:14px;fill:currentColor}
.mm-item:hover .mm-grip{opacity:.55}
.mm-item.dragging{opacity:.55;background:var(--accent-soft)}

/* 네모 체크박스 */
.mm-ck{width:var(--mm-ck);height:var(--mm-ck);border-radius:var(--r-sm);border:1.7px solid color-mix(in srgb,var(--muted) 55%,transparent);background:var(--surface);padding:0;display:grid;place-items:center;color:var(--accent-fg)}
.mm-ck:hover{border-color:var(--accent)}
.mm-ck svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mm-ck-path{stroke-dasharray:20;stroke-dashoffset:20}
.mm-item.done .mm-ck{background:var(--accent);border-color:var(--accent)}
.mm-item.done .mm-ck-path{stroke-dashoffset:0}

.mm-main{display:flex;align-items:center;gap:8px;min-width:0}
.mm-text{min-width:0;font-size:var(--fs-md);line-height:1.5;padding:2px 0;overflow-wrap:anywhere;cursor:text;border-radius:var(--r-xs);
  /* 끝내면 왼쪽부터 줄이 그어진다 */
  background:linear-gradient(currentColor,currentColor) no-repeat 0 55%/0 1.5px}
.mm-text:focus-visible{outline-offset:1px}
.mm-item.done .mm-text{color:var(--muted);background-size:100% 1.5px;cursor:default}
.mm-carry{flex:none;font-size:var(--fs-xs);font-weight:600;padding:1px 7px;border-radius:var(--r-pill);background:var(--warn-soft);color:var(--warn);white-space:nowrap}
.mm-edit{flex:1;min-width:0;font-size:var(--fs-md);padding:3px 8px;margin:-1px -8px;border:1px solid var(--accent);border-radius:var(--r-ctl);background:var(--surface);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}

.mm-acts{display:flex;gap:2px;opacity:0}
.mm-item:hover .mm-acts,.mm-item:focus-within .mm-acts{opacity:1}
.mm-act{width:28px;height:28px;border:0;border-radius:var(--r-ctl);background:none;color:var(--muted);display:grid;place-items:center;padding:0}
.mm-act svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mm-act:hover{background:var(--surface);color:var(--accent)}
.mm-act.del:hover{color:var(--danger)}
@media (hover:none){ .mm-acts{opacity:1} .mm-grip{opacity:.4} }

/* 끝낸 일 묶음 */
.mm-done-h{display:flex;align-items:center;gap:4px;width:calc(100% - 24px);margin:8px 12px 2px;padding:8px 2px 4px;border:0;border-top:1px solid var(--line);background:none;font-size:var(--fs-xs);font-weight:700;color:var(--muted);text-align:left}
.mm-chev{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mm-chev.up{transform:rotate(180deg)}
.mm-clear{margin-left:auto;font-weight:600;color:var(--muted);padding:2px 6px;border-radius:var(--r-sm)}
.mm-clear:hover{color:var(--danger);background:var(--danger-soft)}
.mm-list-done .mm-grip-sp{opacity:0}

/* 비었을 때·모두 끝냈을 때 */
.mm-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 20px 18px;text-align:center}
.mm-empty b{font-size:var(--fs-sm);font-weight:600;color:var(--fg)}
.mm-empty small{font-size:var(--fs-sm);color:var(--muted)}
.mm-empty-ic{width:44px;height:44px;border-radius:var(--r-card);background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin-bottom:6px}
.mm-empty-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mm-skel{display:block;width:80%;height:12px;border-radius:var(--r-sm);background:var(--surface-2)}
.mm-skel.short{width:52%}
.mm-alldone{display:flex;align-items:center;gap:10px;margin:4px 12px;padding:12px 14px;border-radius:var(--r-card);background:var(--ok-soft);color:var(--ok);font-size:var(--fs-sm);font-weight:600}
.mm-alldone-ic{width:24px;height:24px;border-radius:50%;background:var(--ok);color:var(--surface);display:grid;place-items:center;flex:none}
.mm-alldone-ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}

/* 되돌리기 바 */
.mm-undo{position:absolute;left:12px;right:12px;bottom:10px;display:flex;align-items:center;gap:6px;padding:9px 8px 9px 14px;border-radius:var(--r-card);background:var(--fg);color:var(--bg);font-size:var(--fs-sm);box-shadow:var(--shadow);opacity:0;transform:translateY(6px);pointer-events:none}
.mm-undo.in{opacity:1;transform:none;pointer-events:auto}
.mm-undo span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-undo button{border:0;background:none;color:color-mix(in srgb,var(--accent) 70%,var(--bg));font-weight:700;font-size:var(--fs-sm);padding:4px 8px;border-radius:var(--r-sm)}
.mm-undo button:hover{background:color-mix(in srgb,var(--bg) 12%,transparent)}
.mm:has(.mm-undo.in) .mm-body{padding-bottom:56px}

/* 움직임: 짧게, 의미 있을 때만. 동작 줄이기 설정이면 끈다 */
@media (prefers-reduced-motion:no-preference){
  .mm-ring-fg{transition:stroke-dasharray .5s var(--ease),stroke .3s}
  .mm-compose{transition:background-color .15s,border-color .15s,box-shadow .15s}
  .mm-add{transition:background-color .15s,color .15s,transform .08s}
  .mm-item{transition:background-color .12s}
  .mm-grip,.mm-acts{transition:opacity .12s}
  .mm-ck{transition:background-color .18s var(--ease),border-color .18s}
  .mm-ck-path{transition:stroke-dashoffset .28s var(--ease) .06s}
  .mm-text{transition:background-size .32s var(--ease),color .2s}
  .mm-item.pop .mm-ck{animation:mm-pop .32s var(--ease)}
  .mm-item.enter{animation:mm-in .32s var(--ease)}
  .mm-item.leave{animation:mm-out .22s ease forwards}
  .mm-chev{transition:transform .2s var(--ease)}
  .mm-undo{transition:opacity .18s,transform .22s var(--ease)}
  .mm-alldone{animation:mm-in .4s var(--ease)}
}
@keyframes mm-pop{0%{transform:scale(1)}40%{transform:scale(.82)}75%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes mm-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes mm-out{to{opacity:0;transform:translateX(8px)}}

/* 체크·지우기 버튼의 누르는 영역을 보이는 크기보다 넓게 */
.mm-ck,.mm-act{position:relative}
.mm-ck::after,.mm-act::after{content:"";position:absolute;inset:-8px}