.task-row { display: flex; align-items: flex-start; gap: 0; border-bottom: 1px solid var(--line); position: relative; transition: background var(--fast), opacity var(--fast); }
.task-row:not(.is-completed) .task-content { cursor: pointer; }
.task-row.is-completing { opacity: 1; transition: opacity var(--fast), transform var(--fast); }
.task-row.is-leaving { opacity: 0; transform: translateX(12px); }
.task-row.is-completing .completion-circle { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.task-row.is-completing .completion-circle .icon { opacity: 1; }
.task-row.is-completing .task-title { text-decoration: line-through; color: var(--muted); }
.task-row > form { flex: none; margin: var(--row-inset) var(--task-control-gap) 0 calc(-1 * var(--task-control-shift)); }
.completion-button { width: var(--task-control); height: var(--task-control); padding: 0; display: grid; place-items: center; border-radius: var(--radius); color: var(--muted); }
.completion-circle { border: 1px solid var(--muted); width: var(--task-circle); height: var(--task-circle); border-radius: 50%; display: grid; place-items: center; }
.completion-circle .icon { width: 13px; height: 13px; opacity: 0; }
.completion-button:hover .completion-circle { border-color: var(--accent); color: var(--accent); background: var(--selected); }
.completion-button:hover .icon, .completion-button:focus-visible .icon { opacity: 1; }
.task-content { flex: 1; min-width: 0; padding: var(--row-inset) 0; }
.task-title { display: block; color: var(--ink); font-size: var(--text-base); line-height: var(--task-line); letter-spacing: var(--task-tracking); padding: 1px 1px 1px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-title:hover { color: var(--ink); }
.task-description { font-size: var(--text-sm); color: var(--secondary); margin-top: var(--space-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-meta { display: flex; align-items: center; gap: 0 var(--space-2); margin-top: var(--task-meta-gap); min-height: var(--task-meta-line); flex-wrap: wrap; font-size: var(--text-xs); line-height: var(--task-meta-line); }
.task-project { gap: var(--space-1); font-size: var(--text-xs); margin-left: auto; }
.task-project .project-mark { font-size: 15px; }
.task-edit { position: absolute; top: var(--row-inset); right: calc(-1 * var(--chip-height)); width: var(--task-control); height: var(--task-control); opacity: 0; }
.task-edit .icon { width: 18px; height: 18px; }
.task-row:hover .task-edit, .task-row:focus-within .task-edit { opacity: 1; }
.task-more-button { position: absolute; top: var(--row-inset); right: calc(-1 * var(--chip-height) - var(--task-control) - 2px); width: var(--task-control); height: var(--task-control); opacity: 0; }
.task-row:hover .task-more-button, .task-row:focus-within .task-more-button, .task-row.is-menu-open .task-more-button { opacity: 1; }
.task-menu form { display: contents; }
.task-menu { width: 264px; }
.menu-row { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-4); }
.menu-row-label { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--ink); }
.menu-row-label > .icon { width: 18px; height: 18px; color: var(--muted); }
.menu-quick-dates { display: flex; gap: 2px; margin-left: auto; }
.menu-value { margin-left: auto; font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.menu-quick-dates .icon-button { width: 30px; height: 30px; }
.menu-quick-dates .icon-button .icon { width: 18px; height: 18px; }
.menu-submenu .menu-row-label { display: flex; min-height: 32px; padding: 0 var(--space-4); }
.picker-option-sub { padding-left: calc(var(--space-4) + 30px); }
.task-progress { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); max-width: 180px; }
.task-progress span { font-size: var(--text-xs); color: var(--secondary); font-variant-numeric: tabular-nums; }
progress { display: block; height: 4px; width: 100%; border: 0; border-radius: 4px; background: var(--line); accent-color: var(--project-color, var(--accent)); }
progress::-webkit-progress-bar { background: var(--line); border-radius: 4px; }
progress::-webkit-progress-value { background: var(--project-color, var(--accent)); border-radius: 4px; }
progress::-moz-progress-bar { background: var(--project-color, var(--accent)); border-radius: 4px; }
.is-completed .task-title { text-decoration: line-through; color: var(--muted); }
.is-completed .completion-circle { background: var(--muted); border-color: var(--muted); color: var(--on-accent); }
.is-completed .completion-circle .icon { opacity: 1; }
.task-meta .overdue { color: var(--danger); }
.task-meta .due-today { color: var(--due-today); font-weight: 600; }
.task-meta .due-tomorrow { color: var(--due-tomorrow); font-weight: 600; } /* 오늘 green, 내일 purple — saturated enough to read (user) */
.task-composer { margin-top: 0; }
.task-composer > summary { display: flex; align-items: center; justify-content: flex-end; gap: var(--composer-gap); min-height: var(--nav-height); color: var(--muted); list-style: none; border-radius: var(--radius); font-size: var(--text-ui); }
.board .task-composer > summary { justify-content: flex-start; }
.task-composer > summary::-webkit-details-marker { display: none; }
/* Desktop: the 할 일 추가 line appears when the pointer is over its list (or the composer is open/focused). */
@media (hover: hover) {
  .task-composer:not([open]) > summary { opacity: 0; transition: opacity var(--fast); }
  .task-section:hover .task-composer > summary, .board-column:hover .task-composer > summary, .group-body:hover .task-composer > summary, .task-composer:focus-within > summary, .task-composer[open] > summary { opacity: 1; }
}
.task-composer > summary > .icon { color: var(--muted); transition: color var(--fast); }
.task-composer > summary:hover, .task-composer > summary:hover > .icon, .task-composer > summary:focus-visible > .icon { color: var(--accent); }
.task-composer[open] { border: 1px solid var(--border); border-radius: var(--radius-chip); margin-top: var(--space-2); }
.task-composer[open] > summary { display: none; }
.task-form { padding: var(--dialog-inset); }
.task-composer .task-form { padding: var(--space-3); }
.task-composer[open] > .task-form, .task-inline-editor > .task-form { animation: fade-in 140ms ease-out; }
.task-inline-editor { border: 1px solid var(--border); border-radius: var(--radius-chip); margin: var(--space-2) 0; }
.task-row[aria-busy="true"] { opacity: 0.6; }
/* Enter 직후 서버 응답 전까지 보여 주는 임시 행(실제 .task-row와 구분해 포커스 이동·선택 대상에서 제외) */
.task-row-pending { display: flex; align-items: flex-start; position: relative; border-bottom: 1px solid var(--line); opacity: .6; pointer-events: none; animation: fade-in 140ms ease-out; }
.task-row-pending > .completion-button { flex: none; margin: var(--row-inset) var(--task-control-gap) 0 calc(-1 * var(--task-control-shift)); }
.task-row-pending .task-title { color: var(--ink); }
.board .task-row-pending { padding: 0 var(--space-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.board .task-row-pending > .completion-button { margin-left: 0; }
.task-primary-row { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control); }
.task-primary-row > .icon-button, .task-inline-actions > .icon-button { border-radius: var(--radius-chip); }
.task-name-input, .task-description-input { width: 100%; border: 0; background: transparent; resize: none; border-radius: var(--radius-sm); }
.task-name-input { flex: 1; min-width: 0; font-size: var(--text-lg); font-weight: 400; line-height: var(--input-line); letter-spacing: var(--task-tracking); min-height: var(--control); padding: var(--space-1) 0; }
.task-composer .task-primary-row { min-height: var(--input-line); }
.task-composer .task-name-input { min-height: var(--input-line); padding: 0; }
.task-description-region { margin-top: var(--space-2); }
.task-description-input { display: block; min-height: var(--input-line); line-height: var(--input-line); color: var(--secondary); font-size: var(--text-sm); padding: 0; resize: vertical; }
.task-name-input::placeholder { color: var(--muted); font-weight: 400; }
.task-description-input::placeholder { color: var(--muted); }
.task-name-input:focus-visible, .task-description-input:focus-visible { outline: none; }
.task-options-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.task-chip { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--chip-height); padding: 0 var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-chip); font-size: var(--text-xs); line-height: var(--task-meta-line); color: var(--secondary); white-space: nowrap; }
.task-chip:hover { background: var(--subtle); color: var(--ink); }
.task-chip .icon { width: var(--icon-sm); height: var(--icon-sm); }
.task-chip [data-picked-icon] { display: flex; }
.task-chip [data-picked-mark] { font-size: var(--task-circle); }
.task-project-chip { min-width: 0; max-width: 180px; }
.task-project-chip [data-picked-label] { overflow: hidden; text-overflow: ellipsis; }
.task-project-chip > .icon:last-child { width: var(--text-xs); height: var(--text-xs); }
.task-more { width: var(--chip-height); height: var(--chip-height); }
.task-inline-actions { display: flex; gap: var(--space-1); margin-left: auto; }
.task-submit { background: var(--accent); color: var(--on-accent); }
.task-submit:hover { background: var(--accent-hover); color: var(--on-accent); }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.form-actions > .field-hint { margin-right: auto; max-width: 220px; }
.progress-field { margin-top: var(--space-3); }
.progress-field > div { display: flex; justify-content: space-between; font-size: var(--text-xs); margin-bottom: 8px; }
.progress-field input { accent-color: var(--accent); width: 100%; min-height: 32px; }
.progress-field output { color: var(--accent); font-variant-numeric: tabular-nums; }
.editor-secondary-actions { display: flex; align-items: center; justify-content: flex-end; border-top: 1px solid var(--line); padding: var(--space-1) var(--space-3); gap: var(--space-3); }
.editor-secondary-actions > span { color: var(--muted); font-size: var(--text-xs); }
.editor-secondary-actions .button { font-size: var(--text-xs); }
.search-form { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-lg); gap: 12px; padding: 4px 4px 4px 12px; margin-bottom: 24px; }
.search-form input[type="search"] { border: none; flex: 1; width: 0; min-height: 44px; background: transparent; }
.task-date-button { padding: 0; border-radius: var(--radius-sm); cursor: pointer; }
.task-date-button:hover, .task-date-button:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.task-meta .overdue.task-date-button:hover { color: var(--danger); }
.task-parse-preview { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); font-size: var(--text-xs); color: var(--secondary); }
.task-parse-preview .text-link { font-size: var(--text-xs); color: var(--accent); padding: 0; }
.section-action { font-size: var(--text-xs); min-height: var(--chip-height); padding: 0 var(--space-2); font-weight: 400; }
.task-row[data-task-id] { position: relative; }
.drag-handle { position: absolute; top: calc(var(--row-inset) + 1px); left: calc(-1 * var(--task-control) - var(--task-control-gap)); width: var(--task-control); height: var(--task-control); display: grid; place-items: center; color: var(--muted); opacity: 0; cursor: grab; border-radius: var(--radius); touch-action: none; }
.drag-handle .icon { width: 16px; height: 16px; stroke-width: 2.4; }
.task-row:hover .drag-handle, .task-row:focus-within .drag-handle { opacity: 1; }
.task-row.is-dragging { opacity: .45; }
.task-row.drop-before::before, .task-row.drop-after::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); border-radius: 1px; pointer-events: none; z-index: 1; }
.task-row.drop-before::before { top: -1px; }
.task-row.drop-after::after { bottom: -1px; }
.task-row.drop-indent:not(.task-row-nested)::after, .task-row.drop-indent:not(.task-row-nested)::before { left: 30px; }
.task-row-nested.drop-after:not(.drop-indent)::after, .task-row-nested.drop-before:not(.drop-indent)::before { left: -30px; }
.task-children { margin-left: 30px; }
.task-row-nested .task-title { font-size: var(--text-sm); }
.task-parent-pill, .task-subtask-count { gap: 3px; }
.task-recurrence { gap: 3px; }
.subtasks { border-top: 1px solid var(--line); padding: var(--space-3) var(--dialog-inset) var(--space-2); }
.subtasks h3 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); margin-bottom: var(--space-1); }
.subtask-list { list-style: none; margin: 0; padding: 0; }
.subtask { display: flex; align-items: center; gap: var(--task-control-gap); min-height: var(--control); border-bottom: 1px solid var(--line); }
.subtask > form { margin: 0 0 0 calc(-1 * var(--task-control-shift)); }
.subtask-title { flex: 1; min-width: 0; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subtask.is-completed .subtask-title { text-decoration: line-through; color: var(--muted); }
.subtask-form { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.subtask-input { flex: 1; min-width: 0; min-height: var(--control); border: 1px solid var(--line); border-radius: var(--radius-chip); padding: var(--space-1) var(--space-2); background: var(--surface); font-size: var(--text-sm); }
.subtask-form .task-submit { width: var(--chip-height); height: var(--chip-height); border-radius: var(--radius-chip); }
@media (min-width: 1000px) {
  .task-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title meta" "description meta" "progress meta"; column-gap: var(--space-4); align-items: start; }
  .task-content > .task-title { grid-area: title; }
  .task-content > .task-description { grid-area: description; }
  .task-content > .task-progress { grid-area: progress; }
  .task-content > .task-meta { grid-area: meta; justify-content: flex-end; max-width: 340px; margin-top: 3px; }
  .task-content > .task-meta .task-project { margin-left: 0; }
}
.task-name-field { position: relative; flex: 1; min-width: 0; }
.task-name-field .task-name-input { position: relative; width: 100%; flex: none; }
.task-name-backdrop { position: absolute; inset: 0; overflow: hidden; white-space: pre; pointer-events: none; color: transparent; font-size: var(--text-lg); font-weight: 400; line-height: var(--input-line); letter-spacing: var(--task-tracking); padding: var(--space-1) 0; }
.task-composer .task-name-backdrop { padding: 0; }
.task-name-backdrop mark { color: transparent; background: var(--mark-date); border-radius: 4px; box-shadow: 0 0 0 2px var(--mark-date); }
.task-name-backdrop mark[data-token-kind="project"] { background: var(--mark-project); box-shadow: 0 0 0 2px var(--mark-project); }
.task-parse-hint { color: var(--muted); }

/* project sections */
.project-section .section-heading { gap: var(--space-2); }
.section-title { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.section-toggle-form { display: inline-flex; }
/* 목록에서는 Todoist처럼 섹션 이름이 페이지 왼쪽(체크 원 열)에서 시작하고, 접기 화살표는 왼쪽 여백에 두어 hover·접힘일 때만 보인다 */
.project-section .section-title { position: relative; }
.project-section .section-toggle-form { position: absolute; top: 50%; left: calc(-1 * var(--task-control) - var(--task-control-gap)); transform: translateY(-50%); opacity: 0; transition: opacity var(--fast); }
.project-section .section-heading:hover .section-toggle-form, .project-section .section-heading:focus-within .section-toggle-form, .project-section.is-collapsed .section-toggle-form { opacity: 1; }
.section-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-lg); height: var(--icon-lg); border-radius: var(--radius-sm); color: var(--muted); }
.section-toggle:hover { background: var(--subtle); color: var(--ink); }
.section-toggle .icon { width: var(--icon-sm); height: var(--icon-sm); transition: transform var(--fast); }
.project-section.is-collapsed .section-toggle .icon { transform: rotate(-90deg); }
.section-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 프로젝트 섹션: a calendar beside the name opens its schedule list under the header. */
.section-schedule-form, .schedule-form { display: contents; }
.section-schedule-toggle { width: 24px; height: 24px; margin-left: 2px; color: var(--muted); }
.section-schedule-toggle .icon { width: 16px; height: 16px; }
.section-schedule-toggle[aria-pressed="true"], .section-schedule-toggle:hover { color: var(--accent); }
.section-schedule-count { margin-left: 2px; font-size: 10px; font-weight: 600; color: var(--secondary); }
.section-schedule { margin: var(--space-1) 0 var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--subtle); }
.section-schedule-empty { margin: 0 0 var(--space-2); font-size: var(--text-xs); color: var(--muted); }
.section-schedule-list { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: flex; flex-direction: column; gap: 2px; }
.schedule-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 24px; align-items: center; gap: var(--space-3); min-height: 28px; font-size: var(--text-sm); }
.schedule-dates { color: var(--secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.schedule-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-state { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.schedule-item.is-current .schedule-state { color: var(--accent); font-weight: 600; }
.schedule-item.is-past { color: var(--muted); }
.schedule-item.is-past .schedule-title { text-decoration: line-through; }
.schedule-delete { width: 24px; height: 24px; opacity: 0; }
.schedule-item:hover .schedule-delete, .schedule-delete:focus-visible { opacity: 1; }
.schedule-delete .icon { width: 14px; height: 14px; }
.section-schedule-adder > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 var(--space-1); list-style: none; color: var(--muted); font-size: var(--text-xs); cursor: pointer; border-radius: var(--radius-sm); }
.section-schedule-adder > summary::-webkit-details-marker { display: none; }
.section-schedule-adder > summary .icon { width: 14px; height: 14px; }
.section-schedule-adder > summary:hover, .section-schedule-adder[open] > summary { color: var(--accent); }
.section-schedule-add { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.section-schedule-tilde { color: var(--muted); }
.section-tools { display: flex; align-items: center; margin-left: auto; opacity: 0; transition: opacity var(--fast); }
/* In lists the section ⋯ hangs in the right margin exactly where the row ⋯ does, so the goal figures
   end on the same line as the row pills. */
.project-section .section-heading { position: relative; }
/* Section headings drag to reorder (section_reorder.js). */
.project-section[data-move-url] > .section-heading { cursor: grab; }
.project-section[data-move-url] > .section-heading :is(button, a, input) { cursor: pointer; }
.project-section.is-dragging { opacity: .55; }
body.is-section-sorting { cursor: grabbing; user-select: none; }
body.is-section-sorting .project-section > .section-heading, body.is-section-sorting .project-section > .section-heading * { cursor: grabbing; }
.project-section .section-tools { position: absolute; top: 50%; right: calc(-1 * var(--chip-height) - var(--task-control) - 2px); margin-left: 0; transform: translateY(-50%); }
.project-section:hover .section-tools, .project-section:focus-within .section-tools, .section-tools:has(:popover-open) { opacity: 1; }
.section-menu { width: 260px; }
.section-menu .menu-row-label { color: var(--muted); font-size: var(--text-xs); }
.section-menu form { display: contents; }
.section-goal[hidden] { display: none; }
/* Goal panel (Todoist 생산성 panel as the model): ring hero, seven-day bars, display switches, actions. */
.section-goal-slot { display: contents; }
.section-goal { border: 0; padding: 2px 8px; margin-right: -8px; border-radius: var(--radius); cursor: pointer; font: inherit; transition: background var(--fast); }
.section-goal:hover, .section-goal:focus-visible { background: var(--subtle); }
.goal-panel { width: 320px; padding: 0 0 var(--space-3); }
.goal-panel-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-2); }
.goal-panel-kicker { font-size: var(--text-xs); color: var(--muted); }
.goal-panel-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-base); }
.goal-panel-close .icon { width: 18px; height: 18px; }
.goal-panel-hero { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); border-bottom: 1px solid var(--line); text-align: center; }
.goal-ring-wrap { position: relative; width: 88px; height: 88px; }
.goal-panel .goal-ring-large { width: 88px; height: 88px; }
.goal-panel .goal-ring-large .goal-ring-track { stroke-width: 3.2; }
.goal-panel .goal-ring-large .goal-ring-value { stroke-width: 3.2; stroke-dasharray: 106.81; stroke-dashoffset: calc(106.81 * (1 - var(--goal-fraction, 0))); }
.goal-ring-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1px; font-variant-numeric: tabular-nums; }
.goal-ring-count strong { font-size: 22px; font-weight: 700; line-height: 1; }
.goal-ring-count small { font-size: var(--text-sm); color: var(--muted); }
.goal-panel-headline { font-size: var(--text-base); font-weight: 600; }
.goal-panel-sub { font-size: var(--text-sm); color: var(--secondary); font-variant-numeric: tabular-nums; }
.goal-panel.is-achieved .goal-ring-value { stroke: var(--success); }
.goal-panel.is-at_risk .goal-ring-value, .goal-panel.is-missed .goal-ring-value { stroke: var(--danger); }
.goal-panel h3 { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.goal-panel-recent { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.goal-panel-recent ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.goal-panel-recent li { display: grid; grid-template-columns: 28px 1fr 20px; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--secondary); }
.goal-panel-recent .goal-bar { position: relative; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.goal-panel-recent .goal-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--accent); }
.goal-panel-recent .goal-count { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.goal-panel-display { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.goal-panel-display .display-toggle { min-height: 32px; }
.goal-panel-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-3) var(--space-4) 0; }
.goal-panel-actions form { display: contents; }
.picker-option:disabled { opacity: 0.45; cursor: default; }
.picker-option:disabled:hover { background: none; }
.picker-danger { color: var(--danger); }
.section-rename { flex-basis: 100%; }
/* While a section is being edited the heading turns into the form row: title, figures and ⋯ step aside. */
.project-section .section-heading:has(.section-rename:not([hidden])) { flex-wrap: wrap; }
.project-section .section-heading:has(.section-rename:not([hidden])) .section-goal-slot, .project-section .section-heading:has(.section-rename:not([hidden])) .section-tools { display: none; }
.section-name-input { flex: 1; min-width: 0; min-height: var(--control); padding: 0 var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-sm); }
.section-name-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.button-small { min-height: var(--chip-height); padding: 0 var(--space-2); font-size: var(--text-xs); }
.section-adder { margin: 0; }
/* 오늘 sections: the adder line stays visible (there is no section to hover), bodies keep a drop area. */
.day-section-adder { margin-top: var(--space-4); }
.day-section-adder > summary { opacity: .8; height: 14px; line-height: 14px; }
.day-section-body { min-height: 36px; }
.day-section + .day-section { margin-top: var(--space-2); }
.section-adder > summary { display: flex; align-items: center; gap: var(--space-2); height: 10px; line-height: 10px; list-style: none; cursor: pointer; opacity: 0; transition: opacity var(--fast); }
/* Project pages sit tighter (user: "상하 간격이 너무 넓다"): the hover-only 할 일 추가 line below each
   section takes 26px instead of 34px, so a section's last row and the next heading are ~40px apart. */
.page[data-plan-side-host] .task-composer > summary { min-height: 20px; }
/* Project rows sit closer too (user: "할일들 상하 간격 더 줄여줘"): 5px insets make a 34px row. */
.page[data-plan-side-host] { --row-inset: 5px; }
.section-adder > summary::-webkit-details-marker { display: none; }
.section-adder:hover > summary, .section-adder > summary:focus-visible { opacity: 1; }
.section-adder[open] > summary { display: none; }
.section-adder-line { flex: 1; height: 1px; background: var(--accent); }
.section-adder-label { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--accent); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.section-adder-label .icon { width: 12px; height: 12px; }
/* Section forms (add, rename, schedule): one card — name on top, options, actions bottom-right. */
.section-form { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); margin: var(--space-2) 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.section-form .section-name-input { width: 100%; min-height: 34px; font-size: var(--text-base); font-weight: 600; }
.section-form-options { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); min-height: 30px; }
.section-form-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.section-rename.section-form { margin: 0; }
.section-schedule-add .section-name-input { font-weight: 400; font-size: var(--text-sm); }
/* Date field chip (section 목표일, schedule dates): looks like the task chips, opens the same popover. */
.date-field { position: relative; display: inline-flex; }
.date-field-button { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 var(--space-2); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--secondary); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.date-field-button .icon { width: 16px; height: 16px; color: var(--muted); }
.date-field-button:hover { border-color: var(--muted); color: var(--ink); }
.date-field-button.is-set { color: var(--ink); }
.date-field-button.is-set .icon { color: var(--accent); }
.date-field-popover { padding-top: var(--space-2); }
.section-body { border-radius: var(--radius); transition: box-shadow var(--fast); }
/* Rows sit a step in from the section title (user: 할 일 블록이 섹션보다 조금 더 들여쓰기). */
.project-section .section-body { padding-left: 14px; }
.section-body.drop-into, .task-section.drop-into { box-shadow: inset 0 0 0 2px var(--accent); }
.task-section-chip.is-set { color: var(--ink); }
.task-section-name { color: var(--muted); }
.task-name-backdrop mark[data-token-kind="section"] { background: var(--mark-section); box-shadow: 0 0 0 2px var(--mark-section); }
/* hit areas and feedback */
.task-meta .pill { position: relative; }
.task-meta button.pill::before, .task-meta a.pill::before { content: ""; position: absolute; inset: -6px -3px; }
.task-project:hover { color: var(--ink); }
.task-parent-pill:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* multi-select */
/* ⌘/X selection: a rounded fill drawn outside the row (same breathing room as the focus ring), no left bar. */
/* ⌘/X selection and the row whose ⋯ menu is open (click or right-click) share one rounded fill
   behind the content, with breathing room on both sides and no accent bar. */
.task-row.is-selected, .task-row.is-menu-open { background: transparent; box-shadow: none; isolation: isolate; }
.task-row.is-selected > .task-content::after, .task-row.is-menu-open > .task-content::after { content: ""; position: absolute; inset: -3px -14px; background: var(--selected); border-radius: 10px; pointer-events: none; z-index: -1; }
.board .task-row.is-selected > .task-content::after, .board .task-row.is-menu-open > .task-content::after { inset: -2px; border-radius: var(--radius); }
.bulk-bar { position: fixed; left: calc(var(--rail) + (100vw - var(--rail)) / 2); top: calc(var(--topbar-height) + 10px); transform: translateX(-50%); z-index: 85; max-width: calc(100vw - var(--rail) - 48px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--picker-shadow); animation: rise-in 160ms ease-out; }
.bulk-form { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); flex-wrap: wrap; }
.bulk-count { font-size: var(--text-sm); font-weight: 600; margin-right: var(--space-2); }
.bulk-group { display: inline-flex; align-items: center; gap: 2px; padding-left: var(--space-2); border-left: 1px solid var(--line); }
.bulk-group .button-small .icon { width: 16px; height: 16px; }
.bulk-select { min-height: var(--chip-height); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-xs); padding: 0 var(--space-1); }
.task-row.is-collapsed .task-subtask-count { background: var(--selected); border-radius: var(--radius-chip); padding: 0 var(--space-1); }
/* priorities (Todoist colors: p1 red, p2 orange, p3 blue): the title carries the colour and the check
   circle stays plain (user: "동그라미 색깔은 안 변하고, 글자색이 변하게"); done rows stay muted. */
.task-row.priority-1:not(.is-completed, .is-completing) > .task-content .task-title { color: var(--priority-1); }
.task-row.priority-2:not(.is-completed, .is-completing) > .task-content .task-title { color: var(--priority-2); }
.task-row.priority-3:not(.is-completed, .is-completing) > .task-content .task-title { color: var(--priority-3); }
/* 제목 굵게 (user): rows, the form's title field while the B chip is on, calendar and Gantt labels. */
.task-row.is-bold > .task-content .task-title, .task-form.is-bold-title .task-name-input, .calendar-event.is-bold .event-title, .gantt-task.is-bold .gantt-label a { font-weight: 700; }
.task-bold-chip { width: var(--chip-height); padding: 0; justify-content: center; }
.task-bold-chip .icon { width: 15px; height: 15px; }
.task-bold-chip[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--selected); }
.menu-bold[aria-pressed="true"] > .icon { color: var(--accent); }
.menu-bold[aria-pressed="true"] > span { font-weight: 700; } /* on: bold label, not red text (red reads as 삭제) */
.task-priority-chip .icon, .priority-picker .picker-option > .icon, .menu-priorities .icon-button .icon, .bulk-group .icon-button .icon { width: 16px; height: 16px; }
.priority-1 > .icon, .task-priority-chip.priority-1, .menu-priorities .priority-1, .bulk-group .priority-1 { color: #d1453b; }
.priority-2 > .icon, .task-priority-chip.priority-2, .menu-priorities .priority-2, .bulk-group .priority-2 { color: #eb8909; }
.priority-3 > .icon, .task-priority-chip.priority-3, .menu-priorities .priority-3, .bulk-group .priority-3 { color: #246fe0; }
.task-priority-chip.priority-1 .icon, .task-priority-chip.priority-2 .icon, .task-priority-chip.priority-3 .icon, .menu-priorities .priority-1 .icon, .menu-priorities .priority-2 .icon, .menu-priorities .priority-3 .icon { fill: currentColor; fill-opacity: 0.25; }
.menu-priorities .icon-button[aria-pressed="true"] { background: var(--subtle); }
.priority-picker .picker-option kbd { margin-left: auto; font: inherit; font-size: 11px; color: var(--muted); }

/* 보드 레이아웃: 섹션(또는 표시 그룹)마다 한 칸, 할 일은 카드 */
.page.is-board { max-width: none; }
.board { display: flex; align-items: flex-start; gap: var(--space-3); overflow-x: auto; padding: var(--space-1) 0 var(--space-4); scroll-padding: var(--space-3); }
.board-column { flex: 0 0 min(280px, 82vw); width: min(280px, 82vw); background: var(--subtle); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-2) var(--space-1); }
.board-column > .section-heading { min-height: 32px; margin: 0 0 var(--space-2); padding: 0 var(--space-1); border: 0; }
.board-column .section-tools { opacity: 1; }
.board-column { display: flex; flex-direction: column; max-height: calc(100dvh - var(--topbar-height) - 190px); }
.board-column-body { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 auto; min-height: 36px; padding: 2px; overflow-y: auto; border-radius: var(--radius); transition: box-shadow var(--fast); }
.board-column-body[hidden] { display: none; }
.board .task-edit { right: calc(var(--task-control) + 4px); top: 2px; background: var(--surface); border-radius: var(--radius); }
.board .task-more-button { right: 2px; top: 2px; background: var(--surface); border-radius: var(--radius); }
.board-column-body.drop-into { box-shadow: inset 0 0 0 2px var(--accent); }
.board .task-row { display: flex; padding: 0 var(--space-2) 0 var(--space-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); cursor: grab; }
.board .task-row > form { margin: var(--row-inset) var(--task-control-gap) 0 0; }
.board .drag-handle { display: none; }
.board .task-row.is-dragging { opacity: .35; }
.board .task-row.drop-before::before, .board .task-row.drop-after::after { left: 0; right: 0; }
.board .task-row.drop-before::before { top: calc(-1 * var(--space-2) / 2 - 1px); }
.board .task-row.drop-after::after { bottom: calc(-1 * var(--space-2) / 2 - 1px); }
.board .task-children { margin-left: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.board .task-composer > summary { min-height: 32px; padding: 0 var(--space-1); }
.board .task-composer[open] { background: var(--surface); }
.board-column-adder { background: transparent; padding: 0; }
.board-column-adder .section-adder > summary { opacity: 1; min-height: 40px; padding: 0 var(--space-3); border: 1px dashed var(--border); border-radius: var(--radius); }
.board-column-adder .section-adder-line { display: none; }
.board-column-adder .section-form { padding: var(--space-2); background: var(--subtle); border-radius: var(--radius); }

/* 라벨: @토큰 하이라이트, 칩, 행의 라벨 알약 */
.task-name-backdrop mark[data-token-kind="label"] { background: var(--mark-label); box-shadow: 0 0 0 2px var(--mark-label); }
.task-label-chip.is-set { color: var(--ink); }
.task-label-chip [data-picked-label] { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.task-label-pill { color: var(--project-color, var(--secondary)); gap: 1px; }
.task-label-pill .label-at { font-weight: 700; }
.label-mark { font-weight: 700; }
.label-picker { min-width: 220px; }
.picker-link { color: var(--secondary); text-decoration: none; }

/* ⋯ 메뉴(우클릭 포함)가 열려 있는 동안 그 행을 선택된 것처럼 표시 */

/* 섹션 제목 색 (섹션 ⋯ 메뉴의 색 견본) */
.section-name.is-colored { color: var(--project-color); }
.section-colors { display: flex; align-items: center; gap: 6px; }
.section-colors .menu-row-label { margin-right: auto; }
.section-color-form, .section-move-form { display: contents; }
.section-color-swatch { width: 20px; height: 20px; padding: 0; display: grid; place-items: center; border: 2px solid var(--surface); border-radius: 50%; background: var(--project-color, var(--surface)); box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: transform var(--fast), box-shadow var(--fast); }
.section-color-swatch:hover { transform: scale(1.12); }
.section-color-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.section-color-swatch.is-default { background: var(--surface); }
.section-color-swatch .icon { width: 11px; height: 11px; color: var(--muted); }

/* 카드 안에서는 제목·메타를 세로로 쌓는다(넓은 화면의 2열 그리드가 카드 폭을 쪼개던 문제) */
.board .task-content { display: block; }
.board .task-content > .task-meta { justify-content: flex-start; max-width: none; margin-top: var(--task-meta-gap); }
.board .task-description { white-space: normal; }

/* 마감일(deadline): 날짜와 별개로 "늦어도 이날까지" */
.task-deadline-pill { gap: 3px; color: var(--secondary); }
.task-deadline-pill.overdue { color: var(--danger); }
.task-deadline-chip.is-set { color: var(--ink); }
.task-name-backdrop mark[data-token-kind="deadline"] { background: var(--mark-date); box-shadow: 0 0 0 2px var(--mark-date); }
.picker-deadline { margin-bottom: var(--space-2); }
.picker-deadline > span { display: inline-flex; align-items: center; gap: 4px; }
.picker-deadline .icon { width: var(--icon-sm); height: var(--icon-sm); }
/* 다음 화면의 기간 이동 */
.upcoming-nav .filter-tab-spacer { flex: 1; }

/* 목표 섹션: 제목 오른쪽에 목표일·D-day·달성률, 아래에 경고와 조치 */
.section-goal { display: inline-flex; align-items: center; gap: var(--space-3); margin-left: auto; font-size: var(--text-xs); color: var(--secondary); white-space: nowrap; }
.section-goal .icon { width: var(--icon-sm); height: var(--icon-sm); }
.goal-target { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.goal-sep { color: var(--line-strong, var(--line)); }
.goal-dday { font-weight: 600; color: var(--secondary); }
.goal-rate { display: inline-flex; align-items: center; gap: 6px; }
/* Completion rate as a ring (user request): the value circle is 2π·8 ≈ 50.27 long and offset by the
   remaining fraction. */
.goal-ring { width: 16px; height: 16px; flex: none; transform: rotate(-90deg); }
.goal-ring-track { fill: none; stroke: var(--line); stroke-width: 3; }
.goal-ring-value { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 50.27; stroke-dashoffset: calc(50.27 * (1 - var(--goal-fraction, 0))); transition: stroke-dashoffset var(--fast); }
.goal-count { color: var(--muted); }
.goal-status { padding: 0 6px; border-radius: var(--radius-chip); border: 1px solid var(--line); font-weight: 600; }
.section-goal.is-achieved .goal-status, .section-goal.is-achieved .goal-dday { color: var(--success); border-color: var(--success); }
.section-goal.is-achieved .goal-ring-value { stroke: var(--success); }
.section-goal.is-at_risk .goal-status, .section-goal.is-at_risk .goal-dday { color: var(--danger); border-color: var(--danger); }
.section-goal.is-at_risk .goal-ring-value, .section-goal.is-missed .goal-ring-value { stroke: var(--danger); }
.section-goal.is-missed .goal-status, .section-goal.is-missed .goal-dday { color: var(--danger); border-color: var(--danger); }
.goal-alert { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-1) 0; padding: var(--space-1) var(--space-2); border-radius: var(--radius); background: color-mix(in srgb, var(--danger) 9%, transparent); color: var(--danger); font-size: var(--text-xs); }
.goal-alert-text { display: inline-flex; align-items: center; gap: 6px; }
.goal-alert-text .icon { width: var(--icon-sm); height: var(--icon-sm); }
.goal-alert-actions { display: inline-flex; align-items: center; gap: var(--space-1); }
.goal-alert-actions form { display: contents; }
.goal-alert-actions .button { color: var(--danger); }
.section-goal-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); color: var(--secondary); white-space: nowrap; }
.section-kind-select { min-height: var(--control); padding: 0 var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-sm); }
.board-column .section-goal { margin-left: 0; gap: var(--space-2); }
.board-column .goal-count, .board-column .goal-status { display: none; }

/* 터치 드래그: 길게 누른 뒤 따라다니는 행 복사본 */
.drag-ghost { position: fixed; z-index: 60; margin: 0; pointer-events: none; opacity: .92; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transform: scale(1.02); }
.is-touch-dragging, .is-drag-arming .task-row { user-select: none; -webkit-user-select: none; }
.is-touch-dragging, .is-touch-dragging * { cursor: grabbing !important; }
@media (hover: none) {
  .board .drag-handle { display: grid; position: static; width: 20px; margin-top: var(--row-inset); opacity: 1; }
}

/* Weekly dots on recurring rows: one per day of this week, in the user's week order. */
.week-dots { display: inline-flex; align-items: center; gap: 3px; margin-right: var(--space-1); }
/* Days off the rule: faint gray fill · rule days still ahead: thin accent ring · checked: accent fill ·
   passed unchecked: warm yellow fill (user spec). */
.week-dot { position: relative; width: 7px; height: 7px; box-sizing: border-box; border-radius: 50%; border: 1px solid transparent; background: var(--line); }
.week-dot.is-scheduled { background: transparent; border-color: var(--accent); }
/* Today carries a tiny accent marker centred under its circle (user request) instead of a different ring. */
.week-dot.is-today::before { content: ""; position: absolute; left: calc(50% - 1px); bottom: -4px; width: 2px; height: 2px; border-radius: 50%; background: var(--accent); }
.week-dot.is-done { background: var(--accent); border-color: var(--accent); }
.week-dot.is-missed { background: var(--dot-missed); border-color: var(--dot-missed); }
.task-row.is-completed .week-dots { opacity: 0.6; }
.task-title .task-recurrence { display: inline-flex; align-items: center; vertical-align: -1px; margin-left: 6px; color: var(--muted); }
.task-recurrence .icon { width: 12px; height: 12px; }
.completion-button[aria-disabled="true"] { cursor: not-allowed; }
.completion-button[aria-disabled="true"] .completion-circle { opacity: .4; border-style: dotted; }

/* Keyboard focus on a row (after closing a dialog, J/K, list updates): Todoist's thin rounded ring around
   the whole block, no fill, instead of the global outline box around the title. */
.task-title:focus-visible { outline: none; }
/* The ring is drawn outside the row (14px to the sides, 3px above and below) so it breathes like Todoist's. */
.task-row:has(.task-title:focus-visible) > .task-content::before { content: ""; position: absolute; inset: -3px -14px; border: 1.5px solid var(--row-focus); border-radius: 10px; pointer-events: none; z-index: 1; }
.board .task-row:has(.task-title:focus-visible) > .task-content::before { inset: -2px; border-radius: var(--radius); }
@media (max-width: 599px) {
  .task-row:has(.task-title:focus-visible) > .task-content::before { inset: -3px -8px; }
  .task-row.is-selected > .task-content::after, .task-row.is-menu-open > .task-content::after { inset: -3px -8px; }
}