/* ==========================================================================
   캘린더 창(modals/calendar.js) — 판 하나(.cal-panel, 영역 B)를 1px 선으로 나눈다(틈 없이 끝에서 끝까지):
   할 일 칸과 달력 칸 사이 세로선, 두 칸의 머리(할 일 = 구분 고르기 · ✎ · 공개 범위, 달력 = 연·월 · 캘린더 고르기 · ⚙ · ‹ 오늘 ›)
   아래 가로선 — 두 머리는 같은 높이라 선이 한 줄로 이어진다. 칸마다 따로 카드 바탕을 두지 않는다.
   스크롤하는 칸은 네이티브 막대를 감추고 창의 떠 있는 막대(bindWindowOverlayScrollbar)를 쓴다.
   일정과 할 일은 같은 "항목"이라 칩·줄·상세가 하나다.
   색은 영역 C 변수만 쓴다. 예외는 사용자가 고른 구분 색(--cal-color)과 주말 색(가계부 달력과 같은 값).
   색 있는 선은 테두리 대신 box-shadow·배경으로 긋는다(전역 * { border-color: ... !important } 가 테두리 색을 덮는다).
   글자 크기는 homepage.css 의 font-size 구역에서 정한다.
   ========================================================================== */
/* 좁은 창 규칙(@container calendar)의 기준 상자 — 창 폭으로 접는다. */
.cal-root {
  container-type: inline-size;
  container-name: calendar;
}
/* 창 안의 대화상자(상세·+N·날짜·보기 설정)는 .cal-root 바깥에 붙어서 같은 색 변수를 따로 둔다.
   --cal-lane = 여러 날 막대 한 줄의 높이(칩 18px + 틈 2px), --cal-head = 월간 칸 위 날짜 숫자 줄. */
.cal-root, .cal-item-sheet, .cal-day-dialog, .cal-view-dialog, .cal-when-dialog {
  --cal-line: rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha));
  --cal-lane: 20px;
  --cal-head: 25px;
}
/* 판 하나 — .panel-card 와 같은 영역 B 바탕·테두리·둥근 모서리, 안쪽 여백 없이 선으로만 나눈다.
   판은 스크롤하지 않는다 — 할 일 목록과 달력이 제 안에서 스크롤한다. */
.cal-panel {
  display: flex; flex-direction: column; height: 100%; box-sizing: border-box; overflow: hidden; border-radius: var(--pane-radius);
  background: rgba(var(--system-c-area-b-base-rgb), var(--system-c-area-b-base-alpha));
  border: 1px solid rgba(var(--system-c-area-b-base-border-rgb), var(--system-c-area-b-base-border-alpha));
}
/* ---- 본문: 왼쪽 할 일 칸 · 오른쪽 달력 칸(사이 세로선은 할 일 칸 오른쪽 그림자) ---- */
.cal-split { flex-direction: row; }
.cal-todo-pane, .cal-cal-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* 폭은 사이 선을 끌어 바꾼다(--cal-todo-w, 기기에 기억) — 220px ~ 판의 60%. */
.cal-todo-pane { flex: 0 0 var(--cal-todo-w, clamp(220px, 32%, 300px)); min-width: 220px; max-width: 60%; box-shadow: inset -1px 0 0 var(--cal-line); }
/* 사이 선 손잡이 — 보이는 선은 할 일 칸의 1px 그림자 그대로, 잡는 자리만 양옆으로 넓다. */
.cal-divider { position: relative; z-index: 2; flex: none; width: 0; touch-action: none; }
.cal-divider::before { content: ''; position: absolute; top: 0; bottom: 0; left: -5px; width: 9px; cursor: col-resize; }
.cal-divider.is-drag-ready::before, .cal-divider.is-dragging::before { background: linear-gradient(var(--focus-color), var(--focus-color)) center / 2px 100% no-repeat; }
/* 할 일 접기 단추는 달력 머리 왼쪽 끝 — 접으면 할 일 칸·사이 선이 통째로 빠지고 달력이 판을 다 쓴다. 두 칸이 함께 보이는 넓은 창에서만. */
.cal-todo-collapse { flex: none; margin-left: -4px; }
@container calendar (min-width: 861px) {
  .cal-split.is-todo-collapsed > :is(.cal-todo-pane, .cal-divider) { display: none; }
  /* 두 칸이 함께 보이는(접어 둔 경우도) 넓은 창에는 칸 바꾸기 단추가 없다. .cal-icon-btn 의 inline-flex 를 이기게 .cal-head 를 붙인다. */
  .cal-head .cal-pane-toggle { display: none; }
}
.cal-cal-pane { flex: 1 1 auto; }
/* 칸 머리 — 두 칸이 같은 높이(44px)라 아래 선이 끊기지 않는다. */
.cal-head {
  flex: none; display: flex; align-items: center; gap: 6px; box-sizing: border-box; min-height: 44px; padding: 6px 10px;
  box-shadow: inset 0 -1px 0 var(--cal-line);
}
.cal-date-selects { display: flex; align-items: center; gap: 2px; min-width: 0; }
.cal-date-selects .custom-select-wrap.diary-date-select { min-width: 0; padding: 0 4px; }
.cal-date-selects > .custom-select-wrap:first-child { width: 84px; }
.cal-date-selects > .custom-select-wrap:last-child { width: 62px; }
.cal-todo-groups, .cal-cal, .cal-wk-body, .cal-wk-adrow { scrollbar-width: none; }
:is(.cal-todo-groups, .cal-cal, .cal-wk-body, .cal-wk-adrow)::-webkit-scrollbar { display: none; }
.cal-todo-pane > .cal-todo-groups { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 2px 60px; }
.cal-cal { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 0; }
/* 월간·주간 모두 칸 선이 판 끝까지 닿게 여백 없이. 주간은 시간 칸이 제 안에서 스크롤한다. */
.cal-cal.is-week { overflow: hidden; }

/* ---- 할 일 머리: 구분 고르기 · ✎ · 공개 범위 ---- */
.cal-todo-head { flex: 1 1 auto; display: flex; align-items: center; gap: 2px; min-width: 0; }
.custom-select-wrap.cal-cat-select { flex: 1 1 auto; min-width: 0; }
.cal-todo-head .cal-inline-new { flex: 1 1 auto; width: auto; min-width: 0; }
/* 이름 바꾸기 입력칸 앞 색 점 — 누르면 색 고르기(고르기 단추 안 점과 같은 크기). */
.cal-inline-dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; cursor: pointer; }
.cal-icon-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 4px; }
.cal-icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
span.cal-icon-btn { opacity: .7; }
/* 고르기 단추·목록 줄의 색 점과 글자 사이. */
.custom-select-button .cal-dot, .custom-select-option .cal-dot { display: inline-block; margin-right: 6px; vertical-align: -1px; }
/* 고른 구분의 색 점은 눌러서 색을 바꾼다(소유자) — 누르는 자리를 조금 넓힌다. */
.cal-cat-select .custom-select-button .cal-dot:not(.is-all) { position: relative; cursor: pointer; }
.cal-cat-select .custom-select-button .cal-dot:not(.is-all)::after { content: ''; position: absolute; inset: -7px; }

/* 색 점 — 구분 고르기·목록 줄·보기 설정에서 같은 모양. [전체]는 테두리만 있는 점. */
.cal-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--cal-color); }
.cal-dot.is-all { background: transparent; box-shadow: inset 0 0 0 1.5px var(--system-c-area-b-base-desc-font-color); }

/* ---- 세그먼트 전환([월간 | 주간], 날짜 방식) ---- */
.cal-seg {
  display: flex; gap: 2px; padding: 2px; border-radius: 8px;
  background: rgba(var(--system-c-area-b-accent-rgb), var(--system-c-area-b-accent-alpha));
}
.cal-seg > button {
  flex: 1 1 0; min-width: 0; padding: 5px 8px; border: 0; border-radius: 6px;
  background: transparent; color: inherit; cursor: pointer; white-space: nowrap;
}
@media (any-hover: hover) and (any-pointer: fine) {
.cal-seg > button:hover:not(.is-active) { background: rgba(var(--system-c-area-b-accent-rgb), var(--system-c-area-b-accent-alpha)); }
}
.cal-seg > button.is-active { background: var(--focus-color); color: var(--focus-font-color); }

/* ---- 머리줄: 캘린더 고르기 · ⚙ · 이전/오늘/다음 ---- */
.cal-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; min-width: 0; }
.cal-actions .small-btn { display: inline-flex; align-items: center; justify-content: center; }
.cal-views { display: flex; align-items: center; gap: 2px; margin-right: 4px; } /* + .cal-actions gap 4 = 앱 자리와 이동 묶음 사이 8px */
/* ‹ 오늘 › 한 묶음(디자인 공통 규칙 3) — .cal-seg(월간|연간)와 같은 옅은 바탕 한 판에 세 칸. 캘린더·다이어리·가계부가 같다. */
.cal-nav-group { display: inline-flex; flex: none; align-items: center; gap: 2px; padding: 1px; border-radius: 8px; background: rgba(var(--system-c-area-b-accent-rgb), var(--system-c-area-b-accent-alpha)); }
.cal-nav-group > .small-btn { display: inline-flex; align-items: center; justify-content: center; height: 26px; border-radius: 6px !important; }
/* enhanceSelect 의 wrap 은 버튼이 absolute 라 제 폭이 없다 — 폭을 직접 준다. */
.custom-select-wrap.cal-view-select, .cal-views .cal-inline-new { width: 132px; min-width: 0; }
/* 고르기 자리에 들어서는 입력칸(+ 추가·이름 바꾸기) — 닫힌 고르기와 같은 크기. */
.cal-inline-new { box-sizing: border-box; height: 26px; min-height: 0; padding: 2px 6px; }
.cal-gear { display: inline-flex; align-items: center; justify-content: center; padding: 3px; }
.cal-gear svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cal-step { display: inline-flex; align-items: center; justify-content: center; padding: 2px 4px; }
.cal-step .ui-chevron { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- 보기 설정(⚙) 대화상자 ---- */
.confirm-dialog.cal-view-dialog { width: min(340px, calc(100% - 24px)); max-width: none; text-align: left; }
/* 모든 줄이 대화상자 안쪽 왼쪽 끝 한 열에서 시작한다 — 이름 칸 · [월간|주간] · 표시 구분 머리 · 구분 줄([체크] [색 점] 이름) · 단추 줄. */
.cal-view-dialog .cal-opt-name { margin: 0 0 10px; }
.cal-view-dialog .cal-seg { margin-top: 8px; }
.cal-opt-head { margin: 12px 0 4px; font-weight: 600; }
.cal-opt-cats { display: flex; flex-direction: column; gap: 2px; max-height: 40vh; overflow-y: auto; }
.settings-checkbox.cal-opt-cat { display: flex; gap: 8px; min-width: 0; padding: 3px 0; }
.cal-opt-cat-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-view-dialog .cal-empty-hint { margin: 8px 0 0; color: var(--system-c-area-b-base-desc-font-color); }
/* 단추 줄 — 지금은 [집중 기록·타이머 설정] 하나, 나중에 [위젯으로 추가] 같은 단추가 같은 줄에 붙는다. */
/* 단추는 대화상자 바탕과 같은 색이라 글자만 보인다 — 글자가 위 줄들과 한 열에 서게 단추 안쪽 여백(space-5)+테두리(1)만큼 왼쪽으로 뺀다(점검: 10px 들어가 보였다). */
.cal-opt-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0 calc(-1 * (var(--space-5) + 1px)); }

/* ---- 월간 달력 ---- */
.cal-month { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; padding: 6px 0 4px; box-shadow: inset 0 -1px 0 var(--cal-line); color: var(--system-c-area-b-base-desc-font-color); }
.cal-weekdays .is-sun { color: var(--cal-sun); }
.cal-weekdays .is-sat { color: var(--cal-sat); }
/* 주 줄들은 칸 높이를 나눠 갖는다(스크롤 없음). 위아래로 굴리거나 쓸면 주 단위로 넘어간다(손가락 쓸기는 JS 가 받는다). */
.cal-grid {
  display: grid; flex: 1 1 auto; min-height: 0; touch-action: none;
  grid-template-rows: repeat(var(--cal-weeks, 5), minmax(0, 1fr));
}
/* Ctrl+휠로 키운 월간 — 줄 높이가 고정이고 달력이 제 안에서 스크롤한다(손가락은 그냥 위아래로 민다). 막대는 창의 떠 있는 막대. */
.cal-grid.is-zoomed { grid-template-rows: repeat(var(--cal-weeks, 5), var(--cal-row)); overflow-y: auto; touch-action: pan-y; scrollbar-width: none; }
.cal-grid.is-zoomed::-webkit-scrollbar { display: none; }
/* 주 줄 — 칸 7개 + 그 위에 떠 있는 막대 판(.cal-bars). 막대는 줄마다 한 덩어리로 걸친 열만큼 넓다. */
.cal-grid-row { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-height: 0; }
.cal-cell {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 0; overflow: hidden;
  padding: 3px 0 4px;
  /* 날 사이 세로선·주 사이 가로선 — 바깥 끝(마지막 열·마지막 주)은 판 테두리가 맡는다. 여러 날 막대는 불투명한 바탕으로 이 선 위에 떠서 한 덩어리로 보인다. */
  box-shadow: inset -1px 0 0 var(--cal-line), inset 0 -1px 0 var(--cal-line);
}
.cal-cell:nth-child(7) { box-shadow: inset 0 -1px 0 var(--cal-line); }
.cal-grid-row:last-child > .cal-cell { box-shadow: inset -1px 0 0 var(--cal-line); }
.cal-grid-row:last-child > .cal-cell:nth-child(7) { box-shadow: none; }
.cal-cell.is-out { background: rgba(var(--system-c-area-b-base-rgb), calc(var(--system-c-area-b-base-alpha) * .5)); }
.cal-cell.is-out .cal-daynum { opacity: .45; }
/* 달이 바뀌는 날(1일)은 "11월 1일" — 주를 늘려 여러 달이 보일 때 경계를 알 수 있게(2026-10-15 요청). 좁은 월간(점만)은 숫자만. */
.cal-daynum-month { font-weight: 700; }
.cal-daynum-day { display: none; }
.cal-cell.is-drop-target, .cal-wk-adcell.is-drop-target { box-shadow: inset 0 0 0 2px var(--focus-color); }
/* 끌어 고른 날(빈 자리를 가로질러 끌어 새 항목). */
.cal-cell.is-range, .cal-wk-adcell.is-range { background: rgba(var(--focus-rgb), .16); }
.cal-cell-head { display: flex; align-items: center; gap: 4px; height: 20px; padding-right: 4px; }
.cal-focus-badge { margin-left: auto; color: var(--system-c-area-b-base-desc-font-color); white-space: nowrap; }
.cal-daynum { align-self: flex-start; min-width: 22px; padding: 1px 5px; margin-left: 3px; border-radius: var(--radius-pill); text-align: center; font-weight: 600; }
.cal-cell.is-sun .cal-daynum, .cal-wk-dayhead.is-sun { color: var(--cal-sun); }
.cal-cell.is-sat .cal-daynum, .cal-wk-dayhead.is-sat { color: var(--cal-sat); }
/* 오늘은 날짜 숫자 칩만 칠한다(칸 바탕은 그대로). */
.cal-cell.is-today .cal-daynum, .cal-wk-dayhead.is-today .cal-daynum { background: var(--focus-color); color: var(--focus-font-color); }
.cal-chips { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* 시각 칩은 그 줄의 막대 줄 아래부터. */
.cal-cell .cal-chips { margin-top: calc(var(--lanes, 0) * var(--cal-lane)); }
.cal-dots { display: none; }

/* 항목 칩 — 왼쪽은 둥글리지 않은 구분 색 세로 막대, 체크 + 시각 + 제목. */
.cal-chip {
  position: relative; display: flex; align-items: center; gap: 4px; box-sizing: border-box; height: 18px; min-width: 0; margin: 0 1px 0 0; padding: 0 5px 0 7px;
  border: 0; border-radius: 0 4px 4px 0; background: transparent; color: inherit; text-align: left; cursor: pointer;
  box-shadow: inset 3px 0 0 var(--cal-color);
  user-select: none; -webkit-user-select: none;
}
@media (any-hover: hover) and (any-pointer: fine) {
.cal-chip:hover { background: rgba(var(--system-c-area-b-accent-rgb), var(--system-c-area-b-accent-alpha)); }
}
.cal-chip-time { flex: none; opacity: .7; }
.cal-chip-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-chip.is-drag-ready { box-shadow: inset 3px 0 0 var(--cal-color), 0 0 0 2px var(--focus-color); }
.cal-chip.is-dragging { opacity: .4; }
/* 끄는 동안 놓을 날짜로 미리 그린 막대·칩. */
.cal-chip.is-drag-preview { z-index: 1; opacity: .8; outline: 2px solid var(--focus-color); outline-offset: -2px; }
.cal-drag-ghost { position: fixed; z-index: var(--z-dialog); pointer-events: none; opacity: .85; margin: 0; }

/* 막대 판 — 주 줄(월간)·종일 줄(주간) 위에 떠 있고, 빈 자리 누르기는 아래 칸이 받는다. */
.cal-bars { position: absolute; left: 0; right: 0; top: var(--cal-head); pointer-events: none; }
.cal-wk-adarea > .cal-bars { top: 3px; }
/* 하루 종일·여러 날 막대 — 칸 사이 선이 비치지 않게 불투명한 바탕 위에 구분 색을 얹는다. 제목은 막대 끝까지 흐른다. */
.cal-chip.is-bar {
  background: linear-gradient(color-mix(in srgb, var(--cal-color) 26%, transparent), color-mix(in srgb, var(--cal-color) 26%, transparent)), rgb(var(--system-c-area-b-base-rgb));
}
@media (any-hover: hover) and (any-pointer: fine) {
.cal-chip.is-bar:hover {
  background: linear-gradient(color-mix(in srgb, var(--cal-color) 40%, transparent), color-mix(in srgb, var(--cal-color) 40%, transparent)), rgb(var(--system-c-area-b-base-rgb));
}
}
.cal-span { position: absolute; top: calc(var(--lane) * var(--cal-lane)); margin: 0; pointer-events: auto; }
/* 앞 주에서 이어지면 왼쪽 색 줄 없이 펴고, 다음 주로 이어지면 오른쪽 모서리를 편다. */
.cal-chip.is-cont-before { padding-left: 5px; box-shadow: none; border-radius: 0 4px 4px 0; }
.cal-chip.is-cont-after { border-radius: 0; }
/* 막대 끝 손잡이 — 끌어서 시작일·끝일을 바꾼다. */
.cal-resize { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; touch-action: none; }
.cal-resize.is-start { left: 0; }
.cal-resize.is-end { right: 0; }
.cal-more {
  align-self: flex-start; margin: 0 3px; padding: 0 5px; border: 0; border-radius: 4px;
  background: transparent; color: var(--system-c-area-b-base-desc-font-color); cursor: pointer;
}
@media (any-hover: hover) and (any-pointer: fine) {
.cal-more:hover { background: rgba(var(--system-c-area-b-accent-rgb), var(--system-c-area-b-accent-alpha)); color: var(--system-c-area-b-accent-font-color); }
}

/* ---- 주간: 머리줄(요일) · 종일 줄 · 24시간 칸 ---- */
.cal-week { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.cal-wk-row { display: grid; grid-template-columns: 44px repeat(var(--cal-days, 7), minmax(0, 1fr)); }
.cal-wk-gutter { align-self: center; padding-right: 6px; text-align: right; color: var(--system-c-area-b-base-desc-font-color); }
.cal-wk-headrow, .cal-wk-adrow { flex: none; }
/* 세로 날 선은 요일 머리부터 바닥까지(머리·종일·시간 칸 모두 왼쪽 1px 그림자), 가로선은 시각 눈금 칸까지 판 끝에서 끝까지. */
.cal-wk-dayhead { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 4px; box-shadow: inset 1px 0 0 var(--cal-line); color: var(--system-c-area-b-base-desc-font-color); }
.cal-wk-dayhead .cal-daynum { align-self: center; margin-left: 0; color: var(--system-c-area-b-base-font-color); }
.cal-wk-dayhead.is-sun .cal-daynum { color: var(--cal-sun); }
.cal-wk-dayhead.is-sat .cal-daynum { color: var(--cal-sat); }
.cal-wk-dayhead.is-today .cal-daynum { color: var(--focus-font-color); }
.cal-wk-adrow { max-height: 108px; overflow-y: auto; box-shadow: inset 0 1px 0 var(--cal-line), inset 0 -1px 0 var(--cal-line); }
/* 종일 칸들 + 그 위 막대 판 — 줄 수만큼 높아진다. */
.cal-wk-adarea {
  grid-column: 2 / -1; position: relative; display: grid; grid-template-columns: repeat(var(--cal-days, 7), minmax(0, 1fr));
  min-height: calc(max(1, var(--lanes, 0)) * var(--cal-lane) + 6px);
}
.cal-wk-adcell { min-width: 0; box-shadow: inset 1px 0 0 var(--cal-line); }
/* 시간 칸은 제 안에서 스크롤한다(머리줄·종일 줄은 위에 남는다). 스크롤바는 감춰 열이 어긋나지 않게 한다. */
.cal-wk-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.cal-wk-body::-webkit-scrollbar { display: none; }
.cal-wk-grid { height: calc(24 * var(--cal-hour)); }
.cal-wk-hours { position: relative; align-self: stretch; padding: 0; }
/* 시각 글자는 정시 선 위에 판 바탕을 깔고 앉는다(선이 글자 뒤로 지나간다). */
.cal-wk-hour { position: absolute; right: 4px; padding: 0 2px; transform: translateY(-50%); background: rgb(var(--system-c-area-b-base-rgb)); }
/* 칸 선: 정시 선은 옅게, 30분 선은 더 옅게 — 테마 구분선을 그대로 쓰면 칸이 무거워 보였다. */
.cal-wk-grid {
  background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--cal-hour) - 1px), color-mix(in srgb, var(--cal-line) 60%, transparent) calc(var(--cal-hour) - 1px) var(--cal-hour));
}
.cal-wk-col {
  position: relative; min-width: 0;
  box-shadow: inset 1px 0 0 var(--cal-line);
  background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--cal-hour) / 2 - 1px), color-mix(in srgb, var(--cal-line) 22%, transparent) calc(var(--cal-hour) / 2 - 1px) calc(var(--cal-hour) / 2));
}
.cal-wk-now { position: absolute; left: 0; right: 0; height: 2px; margin-top: -1px; background: var(--cal-sun); z-index: 2; pointer-events: none; }
.cal-wk-now::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--cal-sun); }
/* 끌어 고른 시각(빈 칸을 끌어 새 항목). */
.cal-wk-sel { position: absolute; left: 1px; right: 2px; z-index: 1; border-radius: 4px; background: rgba(var(--focus-rgb), .22); box-shadow: inset 0 0 0 1px var(--focus-color); pointer-events: none; }
.cal-wk-block {
  position: absolute; z-index: 1; box-sizing: border-box; display: flex; flex-direction: column; gap: 1px;
  min-width: 0; padding: 2px 4px 2px 7px; overflow: hidden; cursor: pointer;
  border-radius: 0 4px 4px 0; background: color-mix(in srgb, var(--cal-color) 24%, rgba(var(--system-c-area-b-base-rgb), var(--system-c-area-b-base-alpha)));
  box-shadow: inset 3px 0 0 var(--cal-color);
  user-select: none; -webkit-user-select: none;
}
@media (any-hover: hover) and (any-pointer: fine) {
.cal-wk-block:hover { background: color-mix(in srgb, var(--cal-color) 38%, rgba(var(--system-c-area-b-base-rgb), var(--system-c-area-b-base-alpha))); }
}
.cal-wk-block-head { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cal-wk-block-time { opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-wk-block.is-done .cal-chip-title { opacity: .6; }
.cal-wk-block.is-drag-ready { box-shadow: inset 3px 0 0 var(--cal-color), 0 0 0 2px var(--focus-color); }
.cal-wk-block.is-dragging, .cal-wk-block.is-drag-preview { z-index: 3; opacity: .85; pointer-events: none; box-shadow: inset 3px 0 0 var(--cal-color), 0 4px 12px rgba(0, 0, 0, .25); }
.cal-wk-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; touch-action: none; }

/* ---- 항목 줄(고른 날·+N 대화상자) ---- */
.cal-rows { display: flex; flex-direction: column; gap: 2px; }
.cal-row {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px;
  border: 0; border-radius: 6px; background: transparent; color: inherit; text-align: left; cursor: pointer;
}
@media (any-hover: hover) and (any-pointer: fine) {
.cal-row:hover { background: rgba(var(--system-c-area-b-accent-rgb), var(--system-c-area-b-accent-alpha)); color: var(--system-c-area-b-accent-font-color); }
}
.cal-row-time { flex: none; min-width: 72px; color: var(--system-c-area-b-base-desc-font-color); }
.cal-row-title { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-row-cat { flex: none; max-width: 30%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--system-c-area-b-base-desc-font-color); }
.cal-daylist { padding: 4px 10px 10px; }
.cal-daylist-head { padding: 6px 8px 4px; font-weight: 600; box-shadow: inset 0 -1px 0 var(--cal-line); margin-bottom: 2px; }
/* 고른 날의 일정은 좁은 창에서만(넓으면 달력 칸에 다 보인다). */
.cal-daylist { display: none; }

/* ---- 대화상자 ---- */
.cal-day-dialog .cal-rows { max-height: 50vh; overflow-y: auto; text-align: left; }
.cal-editor-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; text-align: left; }
.cal-editor-row input[type=date], .cal-editor-row input[type=time], .cal-editor-row select { flex: 1 1 0; min-width: 0; }
.cal-editor-row input[hidden], .cal-editor-row[hidden] { display: none; }
.cal-editor-label { flex: none; width: 32px; color: var(--system-c-area-b-base-desc-font-color); }
.cal-editor-dialog .shared-form-field { margin-top: 8px; }
.confirm-dialog.cal-when-dialog {
  width: min(360px, calc(100% - 24px)); max-width: none; text-align: left;
  /* 창 안 대화상자라 창 높이를 넘지 않게(요청: 주소줄까지 덮었다) — 칸을 줄이고, 그래도 넘치면 제 안에서 스크롤. */
  max-height: calc(100% - 24px); overflow-y: auto; box-sizing: border-box;
}
/* 한 화면에 들어오게 조금 작게(요청) — 날짜 칸 30px, 줄 간격·카드 줄 여백을 줄인다. */
.cal-when-dialog .cal-pick { gap: 6px; margin-top: 8px; }
.cal-when-dialog .cal-pick-grid { row-gap: 0; }
.cal-when-dialog .cal-pick-day { width: 30px; height: 30px; }
.cal-when-dialog .cal-pick-row { padding: 6px 12px; }
.cal-when-dialog .cal-pick-card { padding: 2px 0; }
.cal-when-dialog .cal-pick-foot { margin-top: 6px; }
/* 날짜 대화상자 — [날짜]: 달 머리 · 요일 · 날짜 칸 · 시간/알림/반복 카드, [지속 시간]: 날짜·시간 카드 둘 · 하루 종일 · 알림/반복 카드.
   카드는 판(영역 B) 위의 한 단계 안쪽 바탕(.cal-seg·.cal-empty 와 같은 accent 바탕), 고른 날은 Focus 색 원. */
.cal-pick { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cal-pick[hidden] { display: none; }
.cal-pick-month { display: flex; align-items: center; gap: 2px; } /* 달 이름은 대화상자 글 열에 붙는다(점검: 4px 들어가 있었다) */
.cal-pick-month strong { margin-right: auto; }
.cal-pick-weekdays, .cal-pick-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
.cal-pick-weekdays { color: var(--system-c-area-b-base-desc-font-color); }
.cal-pick-grid { row-gap: 2px; }
.cal-pick-day {
  justify-self: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer;
}
@media (any-hover: hover) and (any-pointer: fine) {
.cal-pick-day:hover { background: rgba(var(--system-c-area-b-accent-rgb), var(--system-c-area-b-accent-alpha)); }
}
.cal-pick-day.is-today { color: var(--focus-color); font-weight: 700; }
.cal-pick-day.is-between { background: rgba(var(--focus-rgb), .16); }
.cal-pick-day.is-picked { background: var(--focus-color); color: var(--focus-font-color); font-weight: 700; }
.cal-pick-card {
  display: flex; flex-direction: column; min-width: 0; padding: 4px 0; border: 0; border-radius: 12px;
  background: rgba(var(--system-c-area-b-accent-rgb), var(--system-c-area-b-accent-alpha)); color: inherit;
}
.cal-pick-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 12px;
  background: transparent; color: inherit; text-align: left; cursor: pointer;
}
@media (any-hover: hover) and (any-pointer: fine) {
.cal-pick-row:hover:not(:disabled) { background: rgba(var(--system-c-area-b-accent-rgb), var(--system-c-area-b-accent-alpha)); }
}
.cal-pick-row:disabled { cursor: default; opacity: .55; }
.cal-pick-row > svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cal-pick-row > .ui-chevron { width: 14px; height: 14px; stroke-width: 2; color: var(--system-c-area-b-base-desc-font-color); }
.cal-pick-row-label { flex: 1 1 auto; min-width: 0; }
.cal-pick-value, .cal-pick-muted, .cal-pick-tilde { color: var(--system-c-area-b-base-desc-font-color); }
.cal-pick-value { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* 줄을 누르면 그 아래에 여는 입력칸 — 카드 안이면 아이콘 뒤 글자 시작선(12 + 18 + 10px)에서. */
.cal-pick-sub { display: flex; align-items: center; gap: 6px; padding: 0 12px 10px 40px; }
.cal-pick > .cal-pick-sub { padding: 0 2px; }
.cal-pick-sub[hidden], .cal-pick-sub input[hidden] { display: none; }
.cal-pick-sub > input, .cal-pick-sub > .custom-select-wrap { flex: 1 1 0; min-width: 0; }
/* 반복 칸 — 고르기 · (N주마다 숫자) · 끝 날짜, 요일 지정이면 아래 줄에 요일 일곱 칸(.cal-seg 와 같은 옅은 바탕, 고른 요일은 강조색). */
.cal-pick-repeat { flex-wrap: wrap; }
.cal-pick-sub > input.cal-pick-weeks { flex: 0 0 64px; }
.cal-pick-days { flex: 1 1 100%; }
.cal-pick-days[hidden] { display: none; }
.cal-pick-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cal-pick-big { align-items: flex-start; gap: 4px; padding: 12px; text-align: left; cursor: pointer; }
@media (any-hover: hover) and (any-pointer: fine) {
.cal-pick-big:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--focus-color); }
}
.cal-pick-big:disabled { cursor: default; opacity: .55; }
.cal-pick-big strong { color: var(--focus-color); overflow-wrap: anywhere; }
.cal-pick-allday { flex-direction: row; align-items: center; justify-content: space-between; padding: 9px 12px; }
.cal-pick-foot { display: flex; justify-content: center; margin-top: 10px; }
.cal-pick-foot > [hidden] { display: none; }
.cal-when-dialog .cal-seg { margin-top: 8px; }
.cal-setting-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; text-align: left; }
.cal-todo-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-todo-field > span { color: var(--system-c-area-b-base-desc-font-color); }

/* ==========================================================================
   할 일(체크 · 목록 · 상세 편집기)
   ========================================================================== */
/* 체크 상자 — 네모, 구분 색 테두리, 끝내면 채우고 ✓. 하위 할 일이 있으면 진행 고리 + "3/5". */
.cal-check {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  width: 16px; height: 16px; padding: 0; border: 0; border-radius: 3px; box-shadow: inset 0 0 0 2px var(--cal-color, var(--focus-color));
  background: transparent; color: inherit; cursor: pointer;
}
.cal-check.is-done { background: var(--cal-color, var(--focus-color)); }
/* ✓ 는 늘 있고 끝냈을 때만 다 보인다(clip-path) — 막 끝내면 선으로 그려지고(is-just-checked), 취소하면 구분 색으로 되감긴다
   (is-just-unchecked, homepage.css check-draw/check-undraw). */
.cal-check::after {
  content: ''; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; /* 회전한 ✓ 의 보이는 가운데가 상자 가운데(8,8)에 오도록 — 5/2 일 때 1px 왼쪽·1.3px 위였다(요청) */
  border: solid var(--cal-color, var(--focus-color)); border-width: 0 2px 2px 0; transform: rotate(45deg);
  clip-path: inset(80% 100% 0 0);
}
.cal-check.is-done::after { border-color: var(--focus-font-color); clip-path: inset(0); }
.cal-check:disabled { cursor: default; opacity: .75; }
.cal-check.is-mini { width: 12px; height: 12px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--cal-color, var(--focus-color)); }
.cal-check.is-mini::after { left: 4.5px; top: 2.5px; width: 3px; height: 6px; border-width: 0 1.5px 1.5px 0; }
.cal-check.is-placeholder { opacity: .4; cursor: default; }
.cal-check.is-ring { width: auto; height: auto; border-radius: 4px; background: transparent; box-shadow: none; }
.cal-check.is-ring::after { display: none; }
.cal-ring { flex: none; width: 18px; height: 18px; }
.cal-check.is-ring.is-mini .cal-ring { width: 12px; height: 12px; }
.cal-ring circle { fill: none; stroke-width: 3; }
.cal-ring-bg { stroke: var(--cal-line); }
.cal-ring-fg { stroke: var(--cal-color, var(--focus-color)); stroke-linecap: round; }
.cal-ring-text { color: var(--system-c-area-b-base-desc-font-color); }

/* 끝낸 항목 — 반복 항목은 반복 전체가 끝난 것으로 보인다. */
/* 취소선은 제목 안쪽 글자(.cal-strike)의 배경 선이다 — 글자 폭만큼 긋고, 막 끝냈을 때만 왼쪽부터 그어 나간다(아래 움직임). */
.cal-chip.is-done .cal-chip-title,
.cal-row.is-done .cal-row-title,
.cal-todo-row.is-done .cal-todo-title { opacity: .6; }
.cal-strike { background: linear-gradient(currentColor, currentColor) no-repeat 0 55% / 0 1px; }
.is-done .cal-strike { background-size: 100% 1px; }
.cal-sub.is-done .cal-sub-input { text-decoration: line-through; opacity: .6; }

/* ---- 할 일 목록(본문 왼쪽) ---- */
/* 빠른 추가 — 아래 구분선 없이(요청) 목록 바로 위에 한 줄. */
.cal-quick { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 6px 10px 0; }
.cal-quick[hidden] { display: none; }
.cal-quick-input { width: 100%; border-bottom-width: 0 !important; box-shadow: none !important; }
.cal-quick-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cal-quick-chips:empty { display: none; }
.cal-quick-chip { padding: 1px 8px; border-radius: 10px; background: rgba(var(--focus-rgb), .14); color: var(--focus-color); }

.cal-todo-group + .cal-todo-group { margin-top: 10px; }
.cal-todo-group-head {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 8px 4px; margin-bottom: 2px;
  border: 0; box-shadow: inset 0 -1px 0 var(--cal-line); background: transparent; color: inherit; text-align: left; font-weight: 600;
}
:is(button, [role="button"]).cal-todo-group-head { cursor: pointer; }
/* [전체] 구분 묶음(소유자): 이름 = 이름 바꾸기, 색 점 = 색 고르기(요청). 점 단추는 줄 끝 색 점과 같은 열(오른쪽 끝). */
.cal-group-name[data-cal-group-name] { cursor: text; }
@media (any-hover: hover) and (any-pointer: fine) {
.cal-group-name[data-cal-group-name]:hover { box-shadow: inset 0 -1px 0 currentColor; }
}
.cal-group-dot { margin-left: auto; display: inline-flex; align-items: center; justify-content: flex-end; width: 18px; height: 18px; padding: 0; margin-right: -2px; cursor: pointer; } /* 단추의 투명 테두리 2px 만큼 — 줄 끝 색 점과 같은 열 */
.cal-group-dot > .cal-dot { margin-left: 0; }
.cal-todo-group-head .cal-group-rename { flex: 1 1 auto; min-width: 0; height: 24px; font-weight: 600; }
/* 묶음 색 점은 머리 오른쪽 끝 — 줄 끝 색 점(.cal-todo-meta 의 마지막)과 같은 열. 이름은 ▾ 바로 뒤에서 시작한다(완료됨 머리와 같은 열). */
.cal-todo-group-head .cal-dot { display: inline-block; margin-left: auto; }
.cal-todo-count { font-weight: 400; color: var(--system-c-area-b-base-desc-font-color); }
.cal-todo-rows { display: flex; flex-direction: column; gap: 2px; }
/* 줄의 칸은 한 줄 높이(18px)에 가운데로 — 체크 칸은 고리(18px)·네모(16px) 모두 18px 자리라 제목 시작선이 같다. */
.cal-todo-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; line-height: 18px;
  user-select: none; -webkit-user-select: none;
}
.cal-todo-row > .cal-check { width: 18px; height: 18px; }
.cal-todo-row > .cal-check:not(.is-ring) { width: 16px; height: 16px; margin: 1px; }
.cal-todo-row > .cal-check.is-ring { border-radius: 50%; }
/* 하위 할 일 줄 — 상위 줄 아래에 들여서, 체크가 상위 제목 시작선(체크 18px + 틈 8px)에 선다. */
.cal-todo-row.is-sub { padding-left: 34px; }
@media (any-hover: hover) and (any-pointer: fine) {
.cal-todo-row:hover { background: rgba(var(--system-c-area-b-accent-rgb), var(--system-c-area-b-accent-alpha)); }
}
/* 달력으로 끌기 — 손가락은 길게 누르면 준비(고리), 끄는 동안 제자리 줄은 흐리고 따라오는 줄은 판 바탕. */
.cal-todo-row.is-drag-ready { box-shadow: inset 0 0 0 2px var(--focus-color); }
.cal-todo-row.is-dragging { opacity: .4; }
.cal-todo-row.cal-drag-ghost { background: rgb(var(--system-c-area-b-base-rgb)); box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
/* 다중 선택(Ctrl/Cmd·Shift+클릭) — 줄은 채팅 백업 선택 줄(.shared-chat-msg.is-selected)과 같은 강조,
   달력 칩·막대·블록은 구분 색 바탕을 지키고 그리드 선택(.grid-cell.is-selected)과 같은 테두리. */
.cal-todo-row.is-selected, .cal-row.is-selected {
  background: rgba(var(--system-c-area-b-accent-rgb), var(--system-c-area-b-accent-alpha));
  box-shadow: inset 0 0 0 1px rgba(var(--system-c-area-b-accent-border-rgb), var(--system-c-area-b-accent-border-alpha));
}
.cal-chip.is-selected, .cal-wk-block.is-selected { outline: 2px solid var(--focus-color); outline-offset: -2px; }
.cal-todo-title { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-todo-meta { flex: none; display: flex; align-items: center; gap: 6px; color: var(--system-c-area-b-base-desc-font-color); }
.cal-due.is-overdue { color: var(--cal-sun); font-weight: 600; }
.cal-due { display: inline-flex; align-items: center; gap: var(--space-1); }
.cal-repeat-icon { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* 중요도 표시 — 높음·보통·낮음은 주말 색과 같은 고정 색(가계부 달력과 같은 예외). */
.cal-prio { font-weight: 700; }
.cal-prio.is-p3 { color: var(--cal-sun); }
.cal-prio.is-p2 { color: var(--cal-mid); }
.cal-prio.is-p1 { color: var(--cal-sat); }

/* ---- 상세(하나의 편집기 — 항목 창) ---- */
/* 항목 창(?app=calendar&post=item/<uuid>) — 창 내용을 덮는 판 하나(.cal-panel, 영역 B)를 위에서 아래로
   구분 · 제목 · 날짜 · 설명 · 하위 항목 · 푸터로 나눈다. 칸 사이는 끝에서 끝까지 1px 선(그림자)만, 칸 안 여백은 모두 같다.
   창 틀·여백은 캘린더 창과 같은 .shared-record 감싸개가 준다(창 내용 여백 0, 감싸개 14px) — 예전엔 판을 창 내용에
   바로 넣어 창 내용 기본 여백(휴대폰 8px)과 스크롤을 따로 받아 테두리가 다른 창과 달라 보였다.
   판은 창 높이에 맞고 설명이 남은 높이를 모두 쓴다. 하위 항목이 많으면 그 칸이 판의 40% 까지 늘고 제 안에서 스크롤한다. */
.cal-todo-detail { text-align: left; }
/* 항목 창은 게시글 상세와 같은 댓글 틀(.post-comments: 본문 판 .post-content + 아래 작성줄 .post-footer) — 판 하나가 통째로 스크롤하고,
   그 안을 위에서 아래로 편집기 칸들 · 댓글로 나눈다. 칸 사이 선이 판 끝에서 끝까지 닿게 판 안쪽 여백은 칸이 갖는다. */
.cal-item-sheet > .post-content { padding: 0; max-width: none; }
/* 댓글 입력줄도 판과 같은 너비(요청: 넓은 창에서 입력줄만 720px 로 가운데 좁게 섰다 — 게시글 입력줄의 max-width). */
.cal-item-sheet > .post-footer > .comment-compose { max-width: none; margin-inline: 0; }
.cal-item-window { display: flex; flex-direction: column; }
.cal-item-sheet > .post-content > .comments { margin-top: 0; padding: 12px 16px 14px; box-shadow: inset 0 1px 0 var(--cal-line); }
.cal-item-sheet > .post-content > .comments:empty { display: none; }
.cal-item-sheet > .post-content > .comments-unsupported:empty { display: none; }
/* 새 항목(초안)은 아직 댓글을 달 곳이 없다. */
.cal-item-sheet.is-draft > .post-content > :is(.comments, .comments-unsupported), .cal-item-sheet.is-draft > .post-footer { display: none; }
.cal-d-sec { flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 16px; box-shadow: inset 0 -1px 0 var(--cal-line); }
.cal-d-sec:last-child { box-shadow: none; }
.cal-d-cat-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
/* 구분 줄 — 구분 고르기가 줄을 다 쓰고, 오른쪽 끝에 공개 범위(다른 글 편집기와 같은 고르기, 특정 친구 공개면 [대상 선택]). */
.cal-d-catbox { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; }
.cal-d-catbox .custom-select-wrap.cal-d-cat-select { width: 100%; min-width: 0; }
.cal-d-visbox { flex: none; display: flex; align-items: center; gap: 4px; }
.cal-d-visbox:empty { display: none; }
.cal-d-sec[hidden], .cal-d-visbox [hidden] { display: none; }
/* 설명 — 소유자는 포스트 에디터(툴바 + 본문), 방문자는 읽기 본문. 최소 높이만 두고 판(.post-content)과 함께 스크롤한다. */
/* 설명 글자는 제목·날짜 글자와 같은 열에서 시작한다 — 칸 여백 16px + 체크(날짜 아이콘) 18px + 틈 8px. */
.cal-d-memo { flex: none; min-height: 160px; align-items: stretch; padding-left: 16px; }
/* 설명 에디터는 위 칸들의 아이콘(체크·달력·색 점)이 시작하는 x 에서 바로 채운다(요청: 글자 시작선 42px 은 좌우가 과했다).
   툴바 단추는 아이콘 둘레 여백(6px)만큼 당겨 아이콘이 같은 열에 선다. */
.cal-d-memo .post-editor-toolbar { margin-left: -6px; }
/* 제목 앞 체크 칸은 체크 상자 높이 그대로 — 글줄 높이(baseline)로 늘면 체크가 제목 가운데보다 아래로 처졌다. */
.cal-d-check { flex: none; display: inline-flex; justify-content: center; width: 18px; } /* 네모(16px)·고리(18px) 모두 18px 자리 — 제목 시작선이 날짜 글자와 같다 */
.cal-memo-editor { flex: 1 1 auto; min-width: 0; height: auto; }
.cal-memo-editor .post-editor-body { gap: 6px; }
.cal-memo-editor .post-editor-content { padding: 4px 0; }
.cal-memo-editor .post-editor-message:empty { display: none; }
.cal-memo-view { flex: 1 1 auto; min-width: 0; overflow-y: auto; scrollbar-width: none; }
.cal-memo-view::-webkit-scrollbar { display: none; }
/* 하위 항목 — 하위가 없고 추가 줄도 닫혀 있으면 자리를 차지하지 않는다. */
.cal-d-subs { flex-direction: column; align-items: stretch; gap: 4px; }
.cal-d-subs:has(> .cal-subs:empty):not(:has(> .cal-sub-new:not([hidden]))) { display: none; }
.cal-todo-progress { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: 8px; }
.cal-todo-progress .cal-ring { width: 28px; height: 28px; }
.cal-todo-pct { font-weight: 600; }
.cal-todo-title-field {
  flex: 1 1 auto; min-width: 0; padding: 4px 0; border: 0; border-bottom: 1px solid transparent;
  background: transparent; color: inherit; font-weight: 600;
}
.cal-todo-title-field:focus { outline: none; box-shadow: 0 1px 0 var(--focus-color); }
/* 날짜 — 달력 단추 + 지금 날짜 요약, 누르면 날짜 대화상자. */
.cal-date-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px;
  background: transparent; color: inherit; text-align: left; cursor: pointer;
}
@media (any-hover: hover) and (any-pointer: fine) {
.cal-date-btn:hover:not(:disabled) { background: rgba(var(--system-c-area-b-accent-rgb), var(--system-c-area-b-accent-alpha)); }
}
.cal-date-btn:disabled { cursor: default; }
.cal-date-btn svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* 날짜 단추는 칸 여백까지 마우스 자리를 넓혀 글자 시작선을 다른 칸과 맞춘다. */
.cal-d-date > .cal-date-btn { margin: -6px -8px; width: calc(100% + 16px); }
.cal-subs { display: flex; flex-direction: column; gap: 2px; }
.cal-subs:empty { display: none; }
/* 하위 줄 = [체크] 제목 [끌기 손잡이](오른쪽 끝). 최상위로 뺀 줄(Shift+Tab)은 왼쪽으로 한 칸 나온다. */
.cal-sub { position: relative; display: flex; align-items: center; gap: 8px; }
.cal-sub.is-outdented { margin-left: -12px; }
.cal-sub-grip { flex: none; display: inline-flex; color: var(--system-c-area-b-base-desc-font-color); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.cal-sub-grip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.cal-sub-grip.is-static { cursor: default; opacity: .6; }
/* 하위 줄의 날짜(있으면)와 › (하위 항목을 제 항목 창으로 연다). */
.cal-sub-due { flex: none; color: var(--system-c-area-b-base-desc-font-color); }
.cal-sub-open { flex: none; }
.cal-sub-input, .cal-sub-add {
  flex: 1 1 auto; min-width: 0; padding: 4px 2px; border: 0;
  background: transparent; color: inherit;
}
.cal-sub-input:focus, .cal-sub-add:focus { outline: none; box-shadow: 0 1px 0 var(--focus-color); }
/* 추가 줄 — 하위 줄과 같은 모양에 글자 시작선부터 오른쪽 끝까지 옅은 밑줄(체크 12px + 틈 8px 뒤). */
.cal-sub-new[hidden] { display: none; }
.cal-sub-new::after { content: ''; position: absolute; left: 20px; right: 0; bottom: -2px; height: 1px; background: var(--cal-line); pointer-events: none; }
.cal-sub-add::placeholder { color: var(--system-c-area-b-base-desc-font-color); }
.cal-todo-stats { color: var(--system-c-area-b-base-desc-font-color); }
.cal-todo-stats:empty { display: none; }

/* 푸터 — 집중 기록(왼쪽) · [하위 할 일] · [🍅 집중 시작](오른쪽에 붙어서). */
.cal-todo-foot { gap: 4px; }
.cal-todo-foot .cal-todo-stats { flex: 1 1 auto; min-width: 0; }
.cal-todo-foot > button:first-of-type { margin-left: auto; }
.cal-todo-foot > .cal-icon-btn svg { width: 18px; height: 18px; }

/* ---- 좁은 창 ① — 할 일 칸과 달력 칸 가운데 하나만(머리의 [할 일]/[달력] 단추로 바꾼다), 달력 머리는 두 줄 ---- */
@container calendar (max-width: 860px) {
  .cal-split:not(.is-todo-open) > .cal-todo-pane { display: none; }
  .cal-split.is-todo-open > .cal-cal-pane { display: none; }
  .cal-todo-pane { flex: 1 1 auto; max-width: none; box-shadow: none; }
  /* 한 칸만 보이는 동안 접기·폭 조절은 쓰지 않는다(접어 둔 상태도 무시). */
  .cal-divider, .cal-todo-collapse { display: none; }
}
@container calendar (max-width: 520px) {
  .cal-cal-head { flex-wrap: wrap; row-gap: 4px; }
  .cal-cal-head .cal-pane-toggle { margin-left: auto; }
  /* 달력 머리가 두 줄이 되어도 칸 바꾸기 단추는 할 일 머리(한 줄, 44px 가운데)와 같은 자리 — 첫 줄 위에서 (44 - 12 - 27) / 2. */
  .cal-pane-toggle { align-self: flex-start; margin-top: 2.5px; }
  .cal-actions { order: 3; width: 100%; justify-content: flex-end; }
  .cal-views { margin-right: auto; }
}
/* ---- 좁은 창 ② — 월간은 칸에 색 점만(고른 날의 일정은 달력 아래), 주간은 시각 칸을 좁힌다 ---- */
@container calendar (max-width: 640px) {
  .cal-month { flex: 0 0 auto; }
  .cal-grid { flex: 0 0 auto; min-height: 0; grid-template-rows: repeat(var(--cal-weeks, 5), 48px); }
  .cal-cell { align-items: center; padding: 3px 0; cursor: pointer; }
  /* 고른 날은 칸 바탕 대신 날짜 칩 고리(오늘은 칩 채움만, 칸 바탕은 칠하지 않는다 — 요청). */
  .cal-cell.is-selected:not(.is-today) .cal-daynum { outline: 1.5px solid var(--focus-color); outline-offset: 1px; }
  .cal-cell-head { justify-content: center; padding-right: 0; }
  .cal-focus-badge { display: none; }
  .cal-daynum { align-self: center; margin-left: 0; }
  .cal-daynum-month { display: none; }
  .cal-daynum-day { display: inline; }
  .cal-cell .cal-chips, .cal-grid-row > .cal-bars { display: none; }
  .cal-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 0 2px; }
  .cal-dots > i { width: 6px; height: 6px; border-radius: 50%; background: var(--cal-color); }
  .cal-daylist { display: block; }
  .cal-row-cat { display: none; }
  .cal-wk-row { grid-template-columns: 36px repeat(var(--cal-days, 7), minmax(0, 1fr)); }
}

/* 직접 고른 날(요청: [+]가 안 보이는 날에 만들었다) — 넓은 월간은 칸 고리(초점 고리와 같다). 좁은 월간은 위의 날짜 칩 고리. */
@container calendar (min-width: 641px) {
  .cal-cal.is-day-picked .cal-cell.is-selected { box-shadow: inset 0 0 0 2px var(--focus-color); }
}
/* 키보드 초점은 테두리 대신 box-shadow 고리(전역 border-color 규칙을 피한다). */
.cal-cell:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-color); }
.cal-chip:focus-visible, .cal-wk-block:focus-visible { outline: none; box-shadow: inset 3px 0 0 var(--cal-color), inset 0 0 0 2px var(--focus-color); }
.cal-row:focus-visible, .cal-todo-row:focus-visible, .cal-more:focus-visible, .cal-date-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-color); }
.cal-check:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; }

/* 빈 화면 — 보조 글자 한 줄, 상자 없음(디자인 공통 규칙 2). 달력·고른 날은 가운데, 사이드바 할 일 목록은 첫 줄 자리(32px, 글자 시작 12px). */
.cal-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 16px auto; text-align: center; color: var(--system-c-area-b-base-desc-font-color);
}
.cal-empty > .settings-empty { padding: 0; margin: 0; }
.cal-empty-hint { margin: 0; color: var(--system-c-area-b-base-desc-font-color); }
.cal-todo-groups > .cal-empty, [data-cal-todo-list] > .cal-empty { align-items: flex-start; min-height: 32px; justify-content: center; margin: 0; padding-left: 12px; text-align: left; }
/* 좁은 창(~860px)에서는 할 일 칸이 사이드바가 아니라 판 전체라 다른 빈 화면처럼 가로·세로 가운데 한 줄 */
@container calendar (max-width: 860px) {
  .cal-todo-groups:has(> .cal-empty:only-child) { display: flex; flex-direction: column; justify-content: center; }
  .cal-todo-groups > .cal-empty:only-child { align-items: center; margin: 0 auto; padding-left: 0; text-align: center; }
}

/* 손가락 기기 — 작은 체크·손잡이·[+]는 모양은 그대로, 누르는 자리만 넓힌다(homepage.css 의 작은 단추와 같은 방법).
   체크의 ::after 는 ✓ 표시라 ::before 를 쓴다. 이웃 줄을 덮지 않게 위아래는 덜 넓힌다.
   막대 손잡이는 막대 안쪽으로만 넓히고, 체크는 손잡이 위에 둔다. 시각 블록 손잡이는 블록 안 위쪽으로. */
@media (pointer: coarse) {
  .cal-check::before { content: ''; position: absolute; inset: -10px -14px; }
  .cal-check.is-mini::before { inset: -6px -8px; }
  .cal-chip .cal-check { z-index: 1; }
  .cal-resize::after { content: ''; position: absolute; top: -4px; bottom: -4px; }
  .cal-resize.is-start::after { left: -3px; right: -10px; }
  .cal-resize.is-end::after { left: -10px; right: -3px; }
  .cal-wk-resize::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: -9px; }
  .cal-icon-btn, .cal-gear, .cal-step { position: relative; }
  .cal-icon-btn::after, .cal-gear::after { content: ''; position: absolute; inset: -9px; }
  .cal-step::after { content: ''; position: absolute; inset: -9px -10px; }
  /* 달력 머리줄 [‹ 오늘 ›](캘린더·다이어리·가계부): 단추 사이가 2px 이라 서로 덮지 않게 바깥쪽으로만 넓히고, 윗줄(연·월)과 6px 라 위아래는 3px 씩.
     오늘도 32px. 넓은 창 한 줄은 톱니 9px [‹ 오늘 ›] 7px [할 일] 이라 그 틈을 반씩 나눈다(가로 28~31px, 세로 32px). */
  .cal-nav-group > button { position: relative; }
  .cal-nav-group > .cal-step:first-child::after { inset: -3px -1px -3px -5px; }
  .cal-nav-group > .cal-step:last-child::after { inset: -3px -3px -3px -1px; }
  .cal-nav-group > button:not(.cal-step)::after { content: ''; position: absolute; inset: -3px -1px; }
  .cal-cal-head .cal-pane-toggle::after { inset: -3px -4px -2px -3px; }
  .cal-gear::after { inset: -3px -4px -3px -1px; }
  .cal-todo-collapse::after { right: -3px; } /* 오른쪽 연 고르기와 7px */
  @container calendar (max-width: 520px) { /* 휴대폰은 머리줄이 두 줄이라 [‹ ›] 바깥·톱니 오른쪽이 비어 있다 */
    .cal-nav-group > .cal-step:first-child::after { left: -8px; }
    .cal-nav-group > .cal-step:last-child::after { right: -8px; }
    .cal-gear::after { right: -7px; }
  }
  /* 연·월·캘린더 고르기(26·24px): 투명 단추만 위아래로 늘린다(테두리·글자는 wrap 이 그대로 그린다) */
  :is(.diary-date-select, .cal-view-select) > .custom-select-button { inset: -3px 0; }
  .cal-view-select > .custom-select-button { inset: -4px 0; }
  /* 두 손가락 벌리기는 달력이 받는다(시간 높이). 한 손가락 스크롤은 그대로. */
  .cal-wk-body { touch-action: pan-x pan-y; }
}

/* 움직임 — 모두 움직임 줄이기를 끈 사람에게만. 크기(scale)는 움직이지 않는다(체크 튀기기는 LusinellMicro.pop). */
@media (prefers-reduced-motion: no-preference) {
  .is-just-done .cal-strike { animation: cal-strike .25s ease-out both; }
  .cal-check.is-auto-done { animation: cal-glow .8s ease-out 1; }
  .cal-check.is-just-checked::after { animation: check-draw .26s ease-out both; } /* 끝낸 줄이 접히기 전(260ms)에 다 그려진다 */
  .cal-check.is-just-unchecked::after { animation: check-undraw .16s ease-in both; }
  .cal-daynum.is-pulse { animation: cal-today-pulse .7s ease-out 1; }
}
@keyframes cal-strike { from { background-size: 0 1px; } to { background-size: 100% 1px; } }
@keyframes cal-glow {
  0%, 100% { filter: none; }
  35% { filter: drop-shadow(0 0 5px var(--cal-color, var(--focus-color))) drop-shadow(0 0 2px var(--cal-color, var(--focus-color))); }
}
@keyframes cal-today-pulse {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--focus-color) 60%, transparent); }
  to { box-shadow: 0 0 0 9px transparent; }
}

/* ---- 알림 · 태그 · 카운트다운(0107) ---- */
/* 항목 창 날짜 칸 아래 한 칸 — 줄마다 [아이콘] 칩들 [+]. 글자 시작선은 날짜 글자와 같다(아이콘 18px + 틈 8px). */
.cal-d-meta { flex-direction: column; align-items: stretch; gap: var(--space-2); padding-top: var(--space-3); padding-bottom: var(--space-3); }
.cal-d-meta:empty { display: none; }
.cal-d-line { display: flex; align-items: center; gap: var(--space-4); min-height: 28px; min-width: 0; }
.cal-d-line-icon { flex: none; display: inline-flex; color: var(--system-c-area-b-base-desc-font-color); }
.cal-d-line-icon svg, .cal-d-line .cal-icon-btn svg, .cal-chip-x svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cal-d-line-icon svg { width: 18px; height: 18px; }
.cal-pills { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.cal-d-none { color: var(--system-c-area-b-base-desc-font-color); }
.cal-d-countdown .settings-toggle { flex: none; }
/* 알림 칩(강조색 옅게)·태그 칩(태그 색 옅게, 색 없으면 테두리만) — 빠른 추가 칩과 같은 알약. */
.cal-pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: 1px var(--space-2) 1px var(--space-4); border-radius: var(--radius-pill); background: rgba(var(--focus-rgb), .14); color: var(--focus-color); }
.cal-chip-x { display: inline-flex; padding: 1px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; opacity: .7; }
.cal-chip-x svg { width: 12px; height: 12px; }
@media (any-hover: hover) and (any-pointer: fine) {
.cal-chip-x:hover { opacity: 1; background: rgba(var(--system-c-area-b-accent-rgb), var(--system-c-area-b-accent-alpha)); }
}
.cal-tag { display: inline-flex; align-items: center; max-width: 8em; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--cal-color) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cal-color) 40%, var(--cal-line)); color: var(--system-c-area-b-base-font-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-pill.cal-tag { max-width: none; padding-right: var(--space-2); }
.cal-tag.is-plain { background: transparent; box-shadow: inset 0 0 0 1px var(--cal-line); }
button.cal-tag { cursor: pointer; }
.cal-tag::before { content: ''; flex: none; width: 6px; height: 6px; margin-right: var(--space-2); border-radius: 50%; background: var(--cal-color); }
.cal-tag.is-plain::before { display: none; }
/* D-day 표시 — 강조색 글자. */
.cal-dday { font-weight: 700; color: var(--focus-color); white-space: nowrap; }
/* 할 일 머리 고르기의 태그 줄 — 색 점이 네모(태그), 하위 태그는 한 칸 들인다. */
.cal-dot.is-tag { border-radius: 2px; }
.cal-dot.is-tag:not([style]) { background: transparent; box-shadow: inset 0 0 0 1.5px var(--system-c-area-b-base-desc-font-color); }
.cal-dot.is-tag.is-child { margin-left: 12px; }
/* 태그 관리 대화상자 — 한 열 목록(하위는 들여서). 색 점·이름은 할 일 묶음 머리와 같은 부품. */
.cal-tag-tree { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; margin-top: var(--space-4); }
.cal-tag-row { display: flex; align-items: center; gap: var(--space-4); min-height: 30px; padding: 0 var(--space-2); border-radius: var(--radius-sm); }
.cal-tag-row.is-child { padding-left: 26px; }
.cal-tag-row .cal-group-dot { order: -1; margin: 0; }
.cal-tag-row .cal-group-name { flex: 1 1 auto; min-width: 0; cursor: text; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-tag-row .cal-inline-new { flex: 1 1 auto; width: auto; min-width: 0; }
.cal-dot.is-plain { background: transparent; box-shadow: inset 0 0 0 1.5px var(--system-c-area-b-base-desc-font-color); }
@media (any-hover: hover) and (any-pointer: fine) {
.cal-tag-row:hover { background: rgba(var(--system-c-area-b-accent-rgb), var(--system-c-area-b-accent-alpha)); }
}
.cal-tag-row .cal-dot:not(.is-plain), .cal-dot.is-tag[style] { box-shadow: inset 0 0 0 1px var(--cal-line); } /* 아주 옅은 태그 색(#F5F5F5 등)도 보이게 */