/* ── CHECKLIST ── */
.post-checklist {
  background: var(--surface);
  border: var(--border-subtle);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 24px 0;
  box-shadow: var(--shadow-sm);
}
.post-checklist .check-title {
  font-size: var(--text-ui-large-size); font-weight: var(--font-weight-bold); color: var(--gray-800);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.post-checklist ul { list-style: none; padding: 0; margin: 0; }
.post-checklist li {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--text-ui-size); color: var(--gray-700);
  padding: 8px 0; border-bottom: var(--border-bottom-muted);
}
.post-checklist [hidden] { display: none; }
.post-checklist li::before { display: none; }
.post-checklist li:last-child { border-bottom: var(--border-none); padding-bottom: 0; }
.post-checklist .check-item {
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: transparent;
  padding: 10px 0;
  gap: 12px;
}
.post-checklist .check-item:hover {
  background: rgba(34, 68, 232, 0.04);
}
.post-checklist .check-item input[type="checkbox"] {
  display: block;
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.post-checklist .check-item input[type="checkbox"]:focus-visible ~ .check-box {
  outline: 2px solid var(--accent-color-border);
  outline-offset: 2px;
}
.post-checklist .check-box {
  border-color: var(--green);
}
.post-checklist .check-text {
  flex: 1;
}

.post-checklist.post-checklist-compact {
  padding: 16px 18px;
}
.post-checklist.post-checklist-compact .check-title {
  margin-bottom: 10px;
}
.post-checklist.post-checklist-compact li {
  padding: 3px 0;
}
.post-checklist.post-checklist-compact .check-item {
  border-radius: 8px;
  gap: 10px;
  padding: 5px 0;
}
.post-checklist.post-checklist-compact .check-box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
}
.post-checklist.post-checklist-compact .check-box::after {
  width: 4px;
  height: 8px;
}
.post-checklist.post-checklist-compact .check-text {
  font-size: 16px;
  line-height: 1.4;
}
.checklist-progress {
  margin-top: 14px;
  padding-top: 14px;
  border-top: var(--border-top-muted);
}
.checklist-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.checklist-progress-label {
  color: var(--gray-500);
  font-size: var(--text-caption-size);
  font-weight: var(--font-weight-bold);
  transition: color .25s ease;
}
.checklist-progress-percent {
  color: var(--accent-color-text);
  font-size: var(--text-caption-size);
  font-weight: var(--font-weight-bold);
}
.checklist-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--gray-100);
}
.checklist-progress-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-color-bg);
  transition: width .35s ease, background-color .25s ease;
}
.checklist-progress.is-complete .checklist-progress-label,
.checklist-progress.is-complete .checklist-progress-percent {
  color: var(--green);
}
.checklist-progress.is-complete .checklist-progress-fill {
  background: var(--green-bg);
}
.checklist-progress.is-complete .checklist-progress-label {
  animation: checklist-celebrate .45s ease both;
}
@keyframes checklist-celebrate {
  0% { opacity: .3; transform: translateY(4px) scale(.98); }
  65% { transform: translateY(-1px) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .checklist-progress-fill { transition: none; }
  .checklist-progress.is-complete .checklist-progress-label { animation: none; }
}