* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  background: #f4f5f7;
  color: #222;
}

header {
  background: #2f4a6d;
  color: #fff;
  padding: 16px 24px;
}
header h1 { margin: 0; font-size: 1.4rem; }

main { max-width: 1100px; margin: 0 auto; padding: 20px 16px; }

/* ダッシュボード */
.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 600px) {
  .dashboard { grid-template-columns: repeat(2, 1fr); }
}
.stat {
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat .label { font-size: .9rem; color: #666; }
.stat .num { font-size: 2rem; font-weight: bold; color: #2f4a6d; }
.stat.accent .num { color: #d9534f; }
.stat.done .num { color: #3c8f47; }

/* ダッシュボード：最新の振り返り */
.latest-review {
  grid-column: 1 / -1;
  background: #fff;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  border-left: 4px solid #e0a83a;
  color: inherit;
  text-decoration: none;
}
.latest-review:hover { background: #fffaf0; }
.latest-review .label { font-size: .9rem; color: #666; }
.week-label { font-weight: bold; color: #2f4a6d; margin-left: 6px; }
.latest-text {
  margin: 6px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 週次の振り返り */
.reviews { margin-top: 20px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: #555; }
select { font: inherit; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
.review-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.review-actions { display: flex; gap: 6px; flex-shrink: 0; }
button.secondary { background: #6c7a8c; padding: 4px 10px; font-size: .85rem; }

/* 2カラム */
.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 760px) {
  .columns { grid-template-columns: 1fr; }
}

.panel {
  background: #fff;
  border-radius: 10px;
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.panel h2 {
  font-size: 1.05rem;
  border-left: 4px solid #2f4a6d;
  padding-left: 8px;
  margin: 8px 0 12px;
}

form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
form.row { flex-direction: row; }
form.row input { flex: 1; min-width: 0; }
.panel { min-width: 0; }
.memo-title, .task-title { overflow-wrap: anywhere; }

input, textarea {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}
button {
  font: inherit;
  background: #2f4a6d;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
}
button:hover { opacity: .85; }
button.danger { background: #d9534f; padding: 4px 10px; font-size: .85rem; }

.list { list-style: none; padding: 0; margin: 0; }
.list li {
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.empty { color: #999; text-align: center; border: none !important; }

.memo-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.memo-title { font-weight: bold; }
.memo-body { white-space: pre-wrap; margin: 6px 0; }
.meta { font-size: .8rem; color: #888; }

.task { display: flex; align-items: center; gap: 10px; }
.task input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.task .content { flex: 1; }
.task.done .task-title { text-decoration: line-through; color: #999; }
.badge {
  display: inline-block;
  font-size: .75rem;
  padding: 1px 8px;
  border-radius: 10px;
  margin-left: 6px;
  background: #fde8e7;
  color: #d9534f;
}
.task.done .badge { background: #e3f4e5; color: #3c8f47; }