* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  color: #222;
  background: #f7f7f5;
}
.landing { max-width: 480px; margin: 15vh auto; text-align: center; padding: 0 16px; }
.notice {
  background: #fff8c5; border: 1px solid #e6d97a; border-radius: 6px;
  padding: 8px 12px; margin: 12px; font-size: 0.85rem;
}
.layout { display: flex; gap: 24px; padding: 0 16px 32px; max-width: 960px; margin: 0 auto; }
.sidebar { flex: 0 0 240px; }
main { flex: 1; min-width: 0; }

ul.projects, ul.tasks { list-style: none; padding: 0; margin: 0 0 12px; }
.projects li { padding: 6px 8px; border-radius: 6px; }
.projects li.active { background: #e8f0fe; }
.projects a { color: #1a47b8; text-decoration: none; }

.task {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #fff; border: 1px solid #e3e3e0; border-radius: 8px;
  padding: 10px 12px; margin-bottom: 8px;
}
.task.done .title { text-decoration: line-through; color: #999; }
.task .due { font-size: 0.8rem; color: #777; }
.checkbox {
  background: none; border: none; font-size: 1.3rem; cursor: pointer; padding: 0;
  line-height: 1;
}
.row-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

input, button { font-size: 1rem; padding: 8px 10px; border-radius: 6px; border: 1px solid #ccc; }
button { background: #fff; cursor: pointer; }
button.primary { background: #1a47b8; color: #fff; border-color: #1a47b8; padding: 12px 20px; }
button.danger { color: #b3261e; border-color: #d8b2b0; }
.small { font-size: 0.8rem; }
a.small { color: #666; }
form.inline { display: inline; }
form.new-task { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
form.new-task input[name="title"] { flex: 1; min-width: 160px; }

/* スマホ: サイドバーを上に積む */
@media (max-width: 700px) {
  .layout { flex-direction: column; gap: 12px; }
  .sidebar { flex: none; }
}