/* ════════════════════════════════════════════════════════════════
   투두(할 일) 모달 — todo.js 짝.
   · 프로필/메뉴 → TodoModule.open()
   · /api/todo (GET/POST/DELETE) 연동.
   · 추가폼 + 🔥오늘마감/카테고리/미분류 섹션 + 고정 편집 패널(.todo-edit).
   · 마감일 = Cally <calendar-date> 팝오버 — 기간 캘린더와 동일 absolute 방식(트리거 아래, JS 위치계산 없음).
   · 클래스 접두사 todo- · sage green 톤(ideas.css 형제 모달, common.css 토큰계).

   디자인 토큰(common.css :root) — 폴백값은 실제 토큰과 일치시킬 것:
     면   --surface #FFFFFF / --surface-2 #F4F5F7 / --surface-3 #FAFBFC
     선   --line #ECEEF1 / --line-2 #E4E7EB / --line-strong #D6DAE0
     글자 --text #1A1D21 / --text-2 #4A5159 / --muted #79818B / --charcoal #3A4047
     브랜드 --brand #3E4D41 / --brand-2 #4A5A4D / --brand-ink #2E3A30
            --sage #9BAA9E / --sage-tint #EAEFEB / --sage-tint-2 #DFE7E1
     라운드 --radius-lg 20 / --radius-md 12 / --radius-sm 10 / --radius-pill 999
     그림자 --shadow-card / --shadow-pop
   간격 리듬(척추): 항목 사이 8 · 그룹 사이 20 · detail 필드 사이 12.
   라운드 위계: 모달 20 > 카드/팝오버 12 > 인풋/칩근접 10 > pill 999.
   포커스(인풋류): outline 2px brand / offset -1 / border transparent.
   ════════════════════════════════════════════════════════════════ */

/* ── 오버레이 ── */
.todo-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(16, 24, 40, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: todoOverlayIn .14s ease;
}
.todo-overlay[hidden] { display: none; }
@keyframes todoOverlayIn { from { opacity: 0; } to { opacity: 1; } }

/* ── 모달 본체 ── */
.todo-modal {
  background: var(--surface, #FFFFFF);
  border-radius: var(--radius-lg, 20px);
  width: 100%; max-width: 820px; max-height: 86vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-pop, 0 4px 8px rgba(16, 24, 40, .06), 0 16px 40px rgba(16, 24, 40, .12));
  overflow: hidden;
  animation: todoModalIn .16s cubic-bezier(.16, 1, .3, 1);
}
@keyframes todoModalIn {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

/* ── 헤더 ── */
.todo-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line, #ECEEF1); flex: 0 0 auto;
}
.todo-head h3 {
  margin: 0; font-size: 15px; font-weight: 700;
  color: var(--text, #1A1D21); letter-spacing: -.01em;
}
.todo-head-actions { display: flex; align-items: center; gap: 4px; }
.todo-hist-btn {
  border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 600; color: var(--muted, #79818B);
  padding: 6px 10px; border-radius: var(--radius-sm, 10px);
  transition: background .12s, color .12s;
}
.todo-hist-btn:hover { background: var(--surface-2, #F4F5F7); color: var(--text, #1A1D21); }
.todo-x {
  border: none; background: none; font-size: 15px; line-height: 1; cursor: pointer;
  color: var(--muted, #79818B); padding: 6px 10px; border-radius: var(--radius-sm, 10px);
  transition: background .12s, color .12s;
}
.todo-x:hover { background: var(--surface-2, #F4F5F7); color: var(--text, #1A1D21); }

/* ── 추가 폼(상단 한 줄) ── 제목 input + 카테고리 select + 추가 버튼 ── */
.todo-form {
  display: flex; align-items: stretch; gap: 8px;
  padding: 14px 18px; border-bottom: 1px solid var(--line, #ECEEF1); flex: 0 0 auto;
}
.todo-new-title {
  flex: 1 1 auto; min-width: 0; box-sizing: border-box;
  border: 1px solid var(--line-strong, #D6DAE0); border-radius: var(--radius-sm, 10px);
  padding: 10px 12px; font-size: 13px; font-family: inherit; line-height: 1.45;
  color: var(--text, #1A1D21); background: var(--surface, #FFFFFF);
  transition: border-color .12s, box-shadow .12s;
}
.todo-new-title::placeholder { color: var(--muted, #79818B); }
.todo-new-cat {
  flex: 0 0 auto; min-width: 124px;
  border: 1px solid var(--line-strong, #D6DAE0); border-radius: var(--radius-sm, 10px);
  padding: 10px 12px; font-size: 13px; font-family: inherit; cursor: pointer;
  color: var(--text, #1A1D21); background: var(--surface, #FFFFFF);
}
.todo-new-title:focus, .todo-new-cat:focus {
  outline: 2px solid var(--brand, #3E4D41); outline-offset: -1px; border-color: transparent;
}
.todo-add {
  flex: 0 0 auto; border: none; cursor: pointer;
  background: var(--brand, #3E4D41); color: #fff;
  border-radius: var(--radius-sm, 10px);
  padding: 10px 18px; font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background .15s, transform .05s;
}
.todo-add:hover { background: var(--brand-ink, #2E3A30); }
.todo-add:active { transform: translateY(.5px); }

/* ── 목록(세로 스크롤) ── */
.todo-list {
  padding: 16px; flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 20px;
}
.todo-list::-webkit-scrollbar { width: 10px; }
.todo-list::-webkit-scrollbar-thumb {
  background: var(--line-2, #E4E7EB); border-radius: 999px;
  border: 3px solid var(--surface, #FFFFFF);
}
.todo-list::-webkit-scrollbar-thumb:hover { background: var(--line-strong, #D6DAE0); }
.todo-empty { color: var(--muted, #79818B); font-size: 13px; text-align: center; padding: 40px 0; }

/* ── 섹션(그룹) 공통 ── */
.todo-group { display: flex; flex-direction: column; gap: 8px; }
.todo-group-head {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 0 2px 2px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-2, #4A5159);
}
.todo-gdot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--line-strong, #D6DAE0); }
.todo-gname { color: var(--text-2, #4A5159); }
.todo-gcnt {
  font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--muted, #79818B); background: var(--surface-2, #F4F5F7);
  border-radius: var(--radius-pill, 999px); padding: 3px 8px;
}

/* 오늘 마감 — 차분한 레드 톤 헤더(원색 금지, 톤다운) */
.todo-group.is-due .todo-group-head { color: #B23A3A; }
.todo-group.is-due .todo-gname { color: #B23A3A; }
.todo-group.is-due .todo-gdot { background: #C0564E; }
.todo-group.is-due .todo-gcnt { color: #B23A3A; background: #FBEAEA; }

/* 미분류 — 중립 회색 톤 */
.todo-group.is-none .todo-group-head { color: var(--muted, #79818B); }
.todo-group.is-none .todo-gname { color: var(--muted, #79818B); }
.todo-group.is-none .todo-gdot { background: #B6BCC4; }

/* ── 항목 행 ── */
.todo-item {
  position: relative;
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--line, #ECEEF1);
  border-left: 3px solid transparent;          /* 카테고리 좌측 색 엣지 슬롯(JS가 색 주입) */
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.todo-item:hover {
  border-color: var(--line-strong, #D6DAE0);
  box-shadow: var(--shadow-card, 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06));
}
/* 편집 중인 항목 — 세이지 톤 링으로 강조(hover와 구분). 좌측 색 엣지는 유지. */
.todo-item.is-selected {
  border-color: var(--brand, #3E4D41);
  box-shadow: 0 0 0 2px var(--sage-tint, #EAEFEB);
}
.todo-item + .todo-item { margin-top: 8px; }
/* 완료 항목 — 면을 살짝 죽임 */
.todo-item.is-done {
  background: var(--surface-3, #FAFBFC);
  border-color: var(--line, #ECEEF1);
  box-shadow: none;
}
.todo-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
}

/* 체크박스 */
.todo-check {
  flex: 0 0 auto; width: 17px; height: 17px; margin: 0; cursor: pointer;
  accent-color: var(--brand, #3E4D41);
}

/* 우선순위 뱃지 — 18x18 라운드 색칩 + 숫자(색은 JS가 background 인라인 지정) */
.todo-pri {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; line-height: 1; color: #fff;
  background: var(--sage, #9BAA9E);
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .06);
}

/* 제목(클릭 → 펼침) */
.todo-title {
  flex: 1 1 auto; min-width: 0;
  font-size: 13px; font-weight: 500; color: var(--text, #1A1D21);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; background: none; border: none; text-align: left;
  font-family: inherit; padding: 2px 0;
  transition: color .12s;
}
.todo-title:hover { color: var(--brand, #3E4D41); }
.todo-item.is-done .todo-title { text-decoration: line-through; color: var(--muted, #79818B); }

/* 노트 보유 점 */
.todo-note-dot {
  flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sage, #9BAA9E);
}

/* D-day 뱃지 — pill, 톤다운 3색 */
.todo-dday {
  flex: 0 0 auto; white-space: nowrap; line-height: 1;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  border-radius: var(--radius-pill, 999px); padding: 3px 9px;
}
.todo-dday.is-today { color: #9A6A1E; background: #F5EBD8; }                          /* 앰버 톤다운 */
.todo-dday.is-future { color: var(--text-2, #4A5159); background: var(--surface-2, #F4F5F7); } /* 중립 슬레이트 */
.todo-dday.is-past { color: #B23A3A; background: #FBEAEA; }                            /* 차분 레드 */

/* 삭제 버튼(행 호버 시 노출) */
.todo-del {
  flex: 0 0 auto; border: none; background: none; cursor: pointer; font-size: 12px;
  line-height: 1; color: var(--muted, #79818B);
  padding: 4px 6px; border-radius: var(--radius-sm, 10px); opacity: 0;
  transition: opacity .12s, background .12s, color .12s;
}
.todo-row:hover .todo-del { opacity: .55; }
.todo-del:hover { opacity: 1; background: #FBEAEA; color: #B23A3A; }
.todo-del:focus-visible { opacity: 1; outline: 2px solid var(--brand, #3E4D41); outline-offset: -1px; }

/* ── 고정 편집 패널(.todo-edit) ── 추가폼과 리스트 사이 고정(스크롤 밖). surface-2 면 + 12px 필드 리듬.
   기존 인라인 .todo-detail의 룩을 가져옴. 좌우 패딩은 .todo-form과 같은 18px로 정렬 통일.
   구분선은 추가폼·리스트 사이에 끼므로 border-top 대신 border-bottom. 평소 hidden, 항목 선택 시 JS가 노출. */
.todo-edit {
  flex: 0 0 auto;                                   /* 스크롤 영역(.todo-list) 밖 고정 */
  background: var(--surface-2, #F4F5F7);
  border-bottom: 1px solid var(--line, #ECEEF1);
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.todo-edit[hidden] { display: none; }               /* flex 컨테이너라 hidden 숨김 명시 */
.todo-edit-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 2px;
}
.todo-edit-title-label {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-2, #4A5159);
}
.todo-edit-close {
  border: none; background: none; cursor: pointer;
  font-size: 14px; line-height: 1; color: var(--muted, #79818B);
  padding: 4px 6px; border-radius: var(--radius-sm, 10px);
  transition: background .12s, color .12s;
}
.todo-edit-close:hover { background: var(--surface, #FFFFFF); color: var(--text, #1A1D21); }

/* ── 인라인 편집 영역(.todo-detail) ── 옛 인라인 펼침 컨테이너(현재 미사용, .todo-edit로 대체).
   자식 셀렉터(.todo-detail-title 등)는 클래스 단독이라 .todo-edit 안에서도 그대로 적용됨. ── */
.todo-detail {
  border-top: 1px solid var(--line, #ECEEF1);
  background: var(--surface-2, #F4F5F7);
  padding: 12px;
  display: flex; flex-direction: column; gap: 12px;
}
.todo-detail-title {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--line-strong, #D6DAE0); border-radius: var(--radius-sm, 10px);
  padding: 9px 12px; font-size: 13px; font-family: inherit;
  color: var(--text, #1A1D21); background: var(--surface, #FFFFFF);
}
.todo-detail-title:focus {
  outline: 2px solid var(--brand, #3E4D41); outline-offset: -1px; border-color: transparent;
}
.todo-detail-field { display: flex; flex-direction: column; gap: 6px; }
.todo-detail-field.is-rtf { gap: 8px; }

/* 칩 줄(카테고리·우선순위) */
.todo-chip-label {
  font-size: 11px; font-weight: 600; color: var(--muted, #79818B); letter-spacing: .01em;
}
.todo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.todo-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-strong, #D6DAE0);
  background: var(--surface, #FFFFFF); color: var(--text-2, #4A5159);
  border-radius: var(--radius-pill, 999px);
  padding: 4px 12px; font-size: 12px; font-family: inherit; line-height: 1.4;
  cursor: pointer; white-space: nowrap;
  transition: border-color .12s, background .12s, color .12s, box-shadow .12s;
}
.todo-chip:hover { border-color: var(--brand, #3E4D41); color: var(--text, #1A1D21); }
.todo-chip:focus-visible { outline: 2px solid var(--brand, #3E4D41); outline-offset: 1px; }
.todo-chip.is-sel {
  border-color: var(--brand, #3E4D41); background: var(--brand, #3E4D41); color: #fff;
  box-shadow: 0 1px 2px rgba(62, 77, 65, .25);
}
.todo-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--line-strong, #D6DAE0); }
.todo-chip.is-sel .todo-chip-dot { box-shadow: 0 0 0 1.5px #fff; }
/* 우선순위 칩은 색 점 항상 표시 */
.todo-chip.is-pri .todo-chip-dot { display: inline-block; }

/* ── 마감일: Cally <calendar-date> 팝오버(트리거 알약 + 팝오버 + 빠른선택) ── */
.todo-cal {
  position: relative;                 /* 캘린더(.cal-pop) absolute의 anchor — 기간 캘린더(.period-cal)와 동일 방식 */
  display: inline-flex; flex-direction: column; align-items: flex-start;
  max-width: 100%;
}
/* 트리거 + 폴백 input은 세로 flow. 캘린더(.cal-pop)는 absolute라 이 flow에서 빠져
   트리거 바로 아래에 뜬다(폭 독립 — 트리거가 캘린더 폭에 끌려가지 않는다). */
/* 날짜 선택 알약 — 폼 인풋 톤, 좁은 폼용 컴팩트(전역 .cal-trigger보다 작게) */
.todo-cal .cal-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 0; padding: 8px 12px;
  border: 1px solid var(--line-strong, #D6DAE0); border-radius: var(--radius-sm, 10px);
  background: var(--surface, #FFFFFF); color: var(--text, #1A1D21);
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.todo-cal .cal-trigger:hover { border-color: var(--sage, #9BAA9E); background: var(--surface-3, #FAFBFC); }
.todo-cal .cal-trigger:focus-visible { outline: 2px solid var(--brand, #3E4D41); outline-offset: 1px; }
.todo-cal .cal-trigger[aria-expanded="true"] {
  border-color: var(--brand, #3E4D41); box-shadow: 0 0 0 3px var(--sage-tint, #EAEFEB);
}
.todo-cal .cal-trigger .cal-ico { width: 15px; height: 15px; flex: 0 0 auto; color: var(--brand, #3E4D41); }
.todo-cal .cal-trigger .cal-ico svg { width: 15px; height: 15px; display: block; }
.todo-cal .cal-trigger .cal-date-text {
  flex: 1 1 auto; min-width: 0; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.todo-cal .cal-trigger .cal-date-text.is-empty { color: var(--muted, #79818B); font-weight: 500; }
.todo-cal .cal-trigger .cal-caret {
  width: 0; height: 0; margin-left: 2px; flex: 0 0 auto;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--muted, #79818B);
  transition: transform .15s;
}
.todo-cal .cal-trigger[aria-expanded="true"] .cal-caret { transform: rotate(180deg); border-top-color: var(--brand, #3E4D41); }

/* 마감일 팝오버 — 기간 캘린더(common.css .cal-pop)와 동일한 순수 CSS absolute 방식.
   .todo-cal(position:relative)를 anchor로 트리거 바로 아래에 뜬다. JS는 위치 계산 없이
   hidden 토글 + pop.style.width(=max(trigger.offsetWidth,260)px)만 inline으로 준다.
   전역 .cal-pop(absolute, z-index:60)·모바일 하단시트를 덮어쓴다. */
.cal-pop.todo-cal-pop {
  position: absolute;                 /* 트리거 아래 앵커드 — 기간 캘린더와 동일(fixed/transform 제거) */
  top: calc(100% + 6px); left: 0; right: auto; bottom: auto;
  z-index: 50;                        /* 같은 .todo-edit 안 absolute — 리스트 위로만 겹치면 됨 */
  margin: 0;
  box-sizing: border-box;
  width: 264px;                       /* 폴백 기본값 — JS가 pop.style.width를 inline으로 덮어씀 */
  min-width: 0; max-width: min(300px, calc(100vw - 32px));
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--line, #ECEEF1);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-pop, 0 4px 8px rgba(16, 24, 40, .06), 0 16px 40px rgba(16, 24, 40, .12));
  padding: 12px;
  animation: none;
}
.cal-pop.todo-cal-pop[hidden] { display: none; }
/* 캘린더 래퍼. absolute라 길면 리스트 위로 겹쳐 내려옴(허용). 단 모달 최하단에서 열어
   캘린더가 모달 밖으로 나가 잘리는 걸 막기 위한 안전 상한만 둔다(고정값, JS 안 건드림). */
.cal-pop.todo-cal-pop .cal-scroll {
  max-height: 320px;
  overflow-y: auto; overflow-x: hidden;
  /* 내부 스크롤바가 캘린더 셀에 붙지 않게 약간의 여백(스크롤 생길 때만 체감) */
  margin: -2px; padding: 2px;
}
.cal-pop.todo-cal-pop .cal-scroll::-webkit-scrollbar { width: 8px; }
.cal-pop.todo-cal-pop .cal-scroll::-webkit-scrollbar-thumb {
  background: var(--line-2, #E4E7EB); border-radius: 999px;
  border: 2px solid var(--surface, #FFFFFF);
}
.cal-pop.todo-cal-pop .cal-scroll::-webkit-scrollbar-thumb:hover { background: var(--line-strong, #D6DAE0); }
.cal-pop.todo-cal-pop calendar-date { display: block; width: 100%; }
.cal-pop.todo-cal-pop calendar-month { width: 100%; }

/* 빠른 선택 줄: 오늘 / 내일 / 지우기 — preset-btn 톤 작은 고스트 버튼.
   cal-quick은 .todo-cal-pop(트리거 아래 absolute) 안에 있으므로 .todo-cal-pop 스코프로 잡는다. */
.todo-cal .cal-quick {
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line, #ECEEF1);
}
.todo-cal .cal-quick button {
  flex: 0 0 auto; cursor: pointer; font-family: inherit;
  font-size: 11px; font-weight: 600; line-height: 1; color: var(--charcoal, #3A4047);
  background: var(--surface, #FFFFFF); border: 1px solid var(--line, #ECEEF1);
  border-radius: var(--radius-pill, 999px); padding: 6px 12px;
  transition: background .12s, border-color .12s, color .12s;
}
.todo-cal .cal-quick button:hover {
  background: var(--surface-2, #F4F5F7); border-color: var(--line-strong, #D6DAE0); color: var(--brand, #3E4D41);
}
.todo-cal .cal-quick button.is-clear { color: var(--muted, #79818B); margin-left: auto; }
.todo-cal .cal-quick button.is-clear:hover { color: #B23A3A; border-color: #E7C9C9; background: #FBEAEA; }

/* ── 마감일 폴백(native input) ── Cally 정상=숨김, 미로드(.no-cally)·폴백=노출 ── */
.todo-detail-date {
  display: none;
  box-sizing: border-box; max-width: 200px;
  border: 1px solid var(--line-strong, #D6DAE0); border-radius: var(--radius-sm, 10px);
  padding: 8px 12px; font-size: 12.5px; font-family: inherit;
  color: var(--text, #1A1D21); background: var(--surface, #FFFFFF);
}
.todo-detail-date:focus {
  outline: 2px solid var(--brand, #3E4D41); outline-offset: -1px; border-color: transparent;
}
/* Cally 로드 실패 → 트리거 숨기고 native input 노출 */
.no-cally .todo-cal { display: none; }
.no-cally .todo-detail-date { display: inline-block; }

/* ── RTF(서식) 노트 — contenteditable 에디터 + 서식 툴바 ── */
.todo-rtf-bar { display: flex; align-items: center; gap: 4px; }
.todo-rtf-btn {
  width: 28px; height: 28px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong, #D6DAE0);
  background: var(--surface, #FFFFFF); color: var(--text-2, #4A5159);
  border-radius: var(--radius-sm, 10px);
  font-size: 13px; font-family: inherit; line-height: 1; cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.todo-rtf-btn:hover { border-color: var(--brand, #3E4D41); color: var(--text, #1A1D21); }
.todo-rtf-btn.is-on { border-color: var(--brand, #3E4D41); background: var(--sage-tint, #EAEFEB); color: var(--brand-ink, #2E3A30); }
.todo-rtf-btn:focus-visible { outline: 2px solid var(--brand, #3E4D41); outline-offset: 1px; }
/* 각 버튼이 자기 서식 미리보기 */
.todo-rtf-btn[data-cmd="bold"] { font-weight: 700; }
.todo-rtf-btn[data-cmd="italic"] { font-style: italic; }
.todo-rtf-btn[data-cmd="underline"] { text-decoration: underline; text-underline-offset: 2px; }
.todo-rtf-btn[data-cmd="strikeThrough"] { text-decoration: line-through; }

/* contenteditable 본문 */
.todo-detail-rtf {
  width: 100%; box-sizing: border-box;
  min-height: 64px; max-height: 200px; overflow-y: auto;
  border: 1px solid var(--line-strong, #D6DAE0); border-radius: var(--radius-sm, 10px);
  padding: 10px 12px; font-size: 12.5px; font-family: inherit; line-height: 1.6;
  color: var(--text, #1A1D21); background: var(--surface, #FFFFFF);
  transition: border-color .12s, box-shadow .12s;
}
.todo-detail-rtf:focus {
  outline: 2px solid var(--brand, #3E4D41); outline-offset: -1px; border-color: transparent;
}
.todo-detail-rtf:empty::before {
  content: attr(data-ph); color: var(--muted, #79818B); pointer-events: none;
}

/* 저장 행 */
.todo-detail-row { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 2px; }
.todo-detail-save {
  border: none; cursor: pointer;
  background: var(--brand, #3E4D41); color: #fff;
  border-radius: var(--radius-sm, 10px);
  padding: 8px 18px; font-size: 12.5px; font-weight: 600; font-family: inherit;
  transition: background .15s, transform .05s;
}
.todo-detail-save:hover { background: var(--brand-ink, #2E3A30); }
.todo-detail-save:active { transform: translateY(.5px); }
.todo-detail-save:focus-visible { outline: 2px solid var(--brand, #3E4D41); outline-offset: 2px; }

/* ── 드래그 재정렬 — grab 커서 + 드래그 피드백 + 드롭 인디케이터 ── */
.todo-item[draggable="true"] { cursor: grab; }
.todo-item.is-dragging {
  opacity: .5; cursor: grabbing;
  box-shadow: var(--shadow-pop, 0 4px 8px rgba(16, 24, 40, .06), 0 16px 40px rgba(16, 24, 40, .12));
}
.todo-drop-line {
  height: 2px; margin: 2px;
  background: var(--brand, #3E4D41); border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(62, 77, 65, .18), 0 1px 4px rgba(62, 77, 65, .30);
}

/* ── 히스토리(날짜별 스냅샷) 뷰 ── */
.todo-hist {
  padding: 16px; flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.todo-hist-back {
  align-self: flex-start;
  border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--brand, #3E4D41);
  padding: 4px 2px; line-height: 1.4;
}
.todo-hist-back:hover { text-decoration: underline; text-underline-offset: 2px; }

/* 날짜 목록 한 줄(클릭 가능 카드) */
.todo-hist-date {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border: 1px solid var(--line, #ECEEF1); border-radius: var(--radius-md, 12px);
  padding: 12px 14px; font-size: 13px; cursor: pointer;
  color: var(--text, #1A1D21); background: var(--surface, #FFFFFF);
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.todo-hist-date:hover {
  border-color: var(--line-strong, #D6DAE0); background: var(--surface-3, #FAFBFC);
  box-shadow: var(--shadow-card, 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06));
}
.todo-hist-date-meta { font-size: 11px; color: var(--muted, #79818B); font-variant-numeric: tabular-nums; }

/* 스냅샷(읽기 전용) */
.todo-hist-snap { display: flex; flex-direction: column; gap: 8px; }
.todo-hist-snap-head {
  font-size: 12px; font-weight: 700; color: var(--text-2, #4A5159);
  letter-spacing: .01em; margin: 2px 0;
  display: flex; align-items: center; gap: 8px;
}
.todo-hist-snap-head .todo-hist-rate {
  margin-left: auto; font-size: 11px; font-weight: 700; color: var(--brand, #3E4D41);
  background: var(--sage-tint, #EAEFEB); border-radius: var(--radius-pill, 999px);
  padding: 2px 8px; font-variant-numeric: tabular-nums;
}
.todo-hist-item {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line, #ECEEF1); border-radius: var(--radius-sm, 10px);
  padding: 9px 12px; font-size: 13px; color: var(--text, #1A1D21);
  background: var(--surface, #FFFFFF);
}
.todo-hist-item.is-done .todo-hist-title { text-decoration: line-through; color: var(--muted, #79818B); }
.todo-hist-title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 읽기전용 완료 체크 표시(✓/빈) */
.todo-hist-check {
  width: 16px; height: 16px; flex: 0 0 auto; border-radius: 5px;
  border: 1.5px solid var(--line-strong, #D6DAE0);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; color: transparent;
}
.todo-hist-check.is-on { background: var(--brand, #3E4D41); border-color: var(--brand, #3E4D41); color: #fff; }
.todo-hist-empty { color: var(--muted, #79818B); font-size: 13px; text-align: center; padding: 32px 0; }

/* ── 삭제 확인 모달 ── 투두 모달 위에 겹쳐 뜨는 작은 확인 팝업.
   투두 오버레이(z-index:200)보다 높게 띄워 위에 겹친다. 비주얼은 투두 모달과 동일 언어
   (흰 카드·라운드·그림자·세이지 톤). [삭제]만 위험 동작이라 레드 계열(#C0564E) 강조. */
.todo-confirm-overlay {
  position: fixed; inset: 0; z-index: 260;
  background: rgba(16, 24, 40, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: todoOverlayIn .14s ease;
}
.todo-confirm-overlay[hidden] { display: none; }
.todo-confirm {
  background: var(--surface, #FFFFFF);
  border-radius: var(--radius-lg, 20px);
  width: 100%; max-width: 360px;
  box-shadow: var(--shadow-pop, 0 4px 8px rgba(16, 24, 40, .06), 0 16px 40px rgba(16, 24, 40, .12));
  padding: 22px 22px 18px;
  display: flex; flex-direction: column; gap: 16px;
  animation: todoModalIn .16s cubic-bezier(.16, 1, .3, 1);
}
.todo-confirm-body { display: flex; flex-direction: column; gap: 6px; }
.todo-confirm-title {
  margin: 0; font-size: 15px; font-weight: 700;
  color: var(--text, #1A1D21); letter-spacing: -.01em; line-height: 1.45;
}
.todo-confirm-title strong { color: #B23A3A; font-weight: 700; }
.todo-confirm-desc { margin: 0; font-size: 12.5px; color: var(--muted, #79818B); line-height: 1.5; }
.todo-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.todo-confirm-cancel {
  border: 1px solid var(--line-strong, #D6DAE0); cursor: pointer; font-family: inherit;
  background: var(--surface, #FFFFFF); color: var(--text-2, #4A5159);
  border-radius: var(--radius-sm, 10px);
  padding: 9px 16px; font-size: 12.5px; font-weight: 600;
  transition: border-color .12s, background .12s, color .12s;
}
.todo-confirm-cancel:hover { border-color: var(--line-strong, #D6DAE0); background: var(--surface-2, #F4F5F7); color: var(--text, #1A1D21); }
.todo-confirm-cancel:focus-visible { outline: 2px solid var(--brand, #3E4D41); outline-offset: 1px; }
.todo-confirm-delete {
  border: none; cursor: pointer; font-family: inherit;
  background: #C0564E; color: #fff;
  border-radius: var(--radius-sm, 10px);
  padding: 9px 18px; font-size: 12.5px; font-weight: 600;
  box-shadow: 0 1px 2px rgba(192, 86, 78, .25);
  transition: background .15s, transform .05s;
}
.todo-confirm-delete:hover { background: #A84840; }
.todo-confirm-delete:active { transform: translateY(.5px); }
.todo-confirm-delete:focus-visible { outline: 2px solid #C0564E; outline-offset: 2px; }

/* ── 반응형(좁은 화면) ── */
@media (max-width: 640px) {
  .todo-overlay { padding: 12px; }
  .todo-modal { max-width: 100%; max-height: 92vh; border-radius: var(--radius-md, 12px); }

  .todo-form { flex-wrap: wrap; }
  .todo-new-title { flex: 1 1 100%; }
  .todo-new-cat { flex: 1 1 auto; }
  .todo-add { flex: 1 1 auto; }

  .todo-list, .todo-hist { padding: 12px; }
  .todo-row { gap: 8px; padding: 10px; }

  .todo-cal { max-width: 100%; }
  /* 전역 모바일 .cal-pop은 하단시트(position:fixed; bottom:0)다. todo 팝오버는
     데스크탑과 동일하게 .todo-cal(relative)에 앵커된 absolute(트리거 아래) → 폭만 화면에 맞춤. */
  .cal-pop.todo-cal-pop {
    position: absolute; left: 0;
    width: auto; min-width: 0; max-width: calc(100vw - 40px);
  }
}