:root {
  /* メモ = アンバー系 / タスク = ブルー系 で色分けする */
  --note-accent: #c9761b;
  --note-tint:   #fff7ea;
  --note-line:   #f0d7ae;

  --task-accent: #2f6fb5;
  --task-tint:   #eff5fc;
  --task-line:   #c6dcf2;

  --review-accent: #6b4fa8;
  --review-tint:   #f5f1fc;
  --review-line:   #d9cdf0;

  --open-accent: #c2410c;
  --done-accent: #17803d;

  --ink:     #23272f;
  --ink-sub: #6b7484;
  --bg:      #f4f6f9;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", "Yu Gothic UI", "Meiryo", sans-serif;
  background: var(--bg);
  color: var(--ink);
}

header {
  background: #2b3648;
  color: #fff;
  padding: 18px 24px;
}

header h1 { margin: 0; font-size: 20px; }

main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}

/* ================= ダッシュボード ================= */
.dashboard {
  display: grid;
  /* カード数が変わっても、幅に応じて自動で折り返す */
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

/* ダッシュボード内：最新の振り返り */
.latest-review {
  background: var(--review-tint);
  border: 1px solid var(--review-line);
  border-left: 5px solid var(--review-accent);
  border-radius: 10px;
  padding: 12px 16px 14px;
  margin-bottom: 26px;
}

.latest-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.latest-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--review-accent);
}

.latest-week {
  font-size: 13px;
  color: var(--ink-sub);
}

.latest-comment {
  margin: 8px 0 0;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.latest-comment.is-empty { color: #97a0af; }

.stat {
  background: #fff;
  border-radius: 10px;
  border-top: 4px solid var(--accent);
  padding: 14px 16px 16px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.stat-note { --accent: var(--note-accent); background: var(--note-tint); }
.stat-task { --accent: var(--task-accent); background: var(--task-tint); }
.stat-open { --accent: var(--open-accent); background: #fff1ec; }
.stat-done { --accent: var(--done-accent); background: #eefaf0; }

.stat-label {
  font-size: 13px;
  color: var(--ink-sub);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.stat-value {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 2px;
  color: var(--accent);
}

/* ================= レイアウト ================= */
.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 780px) {
  .columns { grid-template-columns: 1fr; }
  /* 4枚が 3+1 に割れると不格好なので、狭い画面では 2×2 に揃える */
  .dashboard { grid-template-columns: 1fr 1fr; }
}

.card {
  background: #fff;
  border-radius: 10px;
  border-top: 5px solid var(--accent);
  padding: 0 18px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.card-note { --accent: var(--note-accent); --tint: var(--note-tint); --line: var(--note-line); }
.card-task { --accent: var(--task-accent); --tint: var(--task-tint); --line: var(--task-line); }
.card-review {
  --accent: var(--review-accent);
  --tint: var(--review-tint);
  --line: var(--review-line);
  margin-top: 18px;
}

/* カード見出し（帯） */
.card-title {
  margin: 0 -18px 4px;
  padding: 11px 18px;
  background: var(--tint);
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title .icon { font-size: 18px; }

.card h2 {
  font-size: 14px;
  color: var(--ink-sub);
  margin: 20px 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--line);
}

.count { color: var(--ink-sub); font-weight: normal; font-size: 13px; }

/* ================= フォーム ================= */
form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.field { display: flex; align-items: center; gap: 10px; }

.field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.hint { margin: 0; font-size: 12px; color: var(--ink-sub); }

input[type="week"] {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}

input[type="week"]:focus {
  outline: none;
  border-color: var(--accent);
}

input[type="text"], textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  resize: vertical;
}

input[type="text"]:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .05);
}

form button {
  align-self: flex-start;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

form button:hover { filter: brightness(1.12); }

/* ================= 一覧 ================= */
.list { list-style: none; margin: 0; padding: 0; }

.list li {
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 6px;
  background: var(--tint);
  padding: 10px 12px;
  margin-bottom: 8px;
}

/* 完了したタスクはトーンを落として一目で区別する */
.list li.done {
  background: #f5f7f9;
  border-color: #e2e6ec;
  border-left-color: var(--done-accent);
}

.item-head { display: flex; align-items: flex-start; gap: 8px; }

.item-title { font-weight: 600; flex: 1; word-break: break-word; }

.item-body {
  margin: 6px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  color: #414855;
}

.meta {
  font-size: 12px;
  color: var(--ink-sub);
  margin-top: 6px;
}

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  margin-right: 6px;
}

.badge.current {
  background: var(--review-accent);
  color: #fff;
  margin-left: 8px;
  margin-right: 0;
}

.badge.open { background: #ffe2d3; color: var(--open-accent); }
.badge.done { background: #d7f0da; color: var(--done-accent); }

.done .item-title { text-decoration: line-through; color: #97a0af; }

.actions { display: flex; gap: 6px; }

.actions button {
  padding: 4px 10px;
  font-size: 12px;
  background: #fff;
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
}

.actions button:hover { background: var(--accent); color: #fff; }

.actions button.danger { color: #a3252f; border-color: #ecccd0; }
.actions button.danger:hover { background: #a3252f; color: #fff; }

.empty {
  color: #97a0af;
  font-size: 14px;
  padding: 14px 2px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 6px;
}