:root {
  --bg: #f4f6fa;
  --panel: #ffffff;
  --border: #e2e6ef;
  --text: #1f2430;
  --muted: #6b7382;
  --item-bg: #eef2fa;
  --item-bg-hover: #e5ebf7;
  --item-border: #ccd6e8;
  --item-done-bg: #f0f1f4;
  --item-done-border: #d8dbe2;
  --accent: #3b6fe0;
  --accent-dark: #2f5ac0;
  --danger: #d2544b;
  --done: #7c8697;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 16px 48px;
  font-family: "Segoe UI", "Yu Gothic UI", "Hiragino Sans", Meiryo, sans-serif;
  color: var(--text);
  line-height: 1.6;

  /* 背景：雲・星・ハートを散らしたパターン（文字が読めるよう淡くしてある） */
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23c5d3ee' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.55'%3E%3Cpath d='M20 44c-5 0-8-3-8-7s3-7 8-7c1-6 6-10 12-10s11 4 12 10c5 0 8 3 8 7s-3 7-8 7z'/%3E%3Cpath d='M132 30l3.5 7.5 8 1-6 5.5 1.5 8-7-4-7 4 1.5-8-6-5.5 8-1z'/%3E%3Cpath d='M60 128c-7-6-9-10-6-13 2.5-2.5 5.5-0.5 6 1.5 0.5-2 3.5-4 6-1.5 3 3 1 7-6 13z'/%3E%3Cpath d='M118 122c-5 0-8-3-8-6.5s3-6.5 8-6.5c1-5 5.5-9 11-9s10 4 11 9c4.5 0 7.5 3 7.5 6.5s-3 6.5-7.5 6.5z'/%3E%3Cpath d='M36 92l3 6.5 7 1-5 4.5 1 7-6-3.5-6 3.5 1-7-5-4.5 7-1z'/%3E%3Cpath d='M152 160c-6-5-7.5-8.5-5-11 2-2 4.5-0.5 5 1 0.5-1.5 3-3 5-1 2.5 2.5 1 6-5 11z'/%3E%3C/g%3E%3Cg fill='%23ccd8f0' opacity='0.5'%3E%3Ccircle cx='90' cy='70' r='3'/%3E%3Ccircle cx='166' cy='84' r='2.5'/%3E%3Ccircle cx='8' cy='140' r='2.5'/%3E%3Ccircle cx='96' cy='168' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 180px 180px;
  background-attachment: fixed;

  /* ▼ 好きな画像を背景にしたいとき
     1. public/images/ フォルダを作り、画像を background.png という名前で置く
     2. 上の background-image の行を消し、下の3行のコメントを外す
  background-image: url("images/background.png");
  background-size: cover;
  background-position: center;
  */
}

main { max-width: 980px; margin: 0 auto; }

.site-header {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 0 16px;
}
.site-header h1 { margin: 0; font-size: 26px; letter-spacing: 0.02em; }
.subtitle { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

/* ダッシュボード */
.dashboard {
  display: grid;
  /* 幅に応じて 4 → 2 → 1 列と自動で折り返す */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.stat {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
}
.stat-accent { border-color: var(--accent); }
.stat-done { border-color: var(--done); }
.stat-label { display: block; font-size: 13px; color: var(--muted); }
.stat-value { display: block; font-size: 30px; font-weight: 700; line-height: 1.2; }
.stat-accent .stat-value { color: var(--accent); }
.stat-done .stat-value { color: var(--done); }

/* ダッシュボード：最新の振り返り */
.latest-review {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.latest-review-heading {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.latest-review-week { font-weight: 700; font-size: 15px; }
.latest-review-comment {
  margin: 6px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
}

/* メッセージ */
.message {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fdecea;
  color: #8f2d26;
  border: 1px solid #f5c4c0;
  font-size: 14px;
}

/* レイアウト */
.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 760px) {
  .columns { grid-template-columns: 1fr; }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
}
.panel h2 { margin: 0 0 12px; font-size: 17px; }
.panel-wide { margin-top: 16px; }

/* 週の選択 */
.week-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
}
.week-picker label { color: var(--muted); }
.week-picker input[type="date"] {
  width: auto;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  background: #fbfcfe;
}
.week-range { color: var(--accent); font-weight: 600; }
.hint { margin: 0; font-size: 13px; color: #8a6d1f; }

/* フォーム */
.form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.form-inline { flex-direction: row; }
.form-inline input { flex: 1; }

input[type="text"], textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  background: #fbfcfe;
  resize: vertical;
}
input[type="text"]:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
}

button {
  padding: 9px 16px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
button:hover { background: var(--accent-dark); }

/* 一覧 */
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.item {
  border: 1px solid var(--item-border);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--item-bg);
}
.item:hover { background: var(--item-bg-hover); }
.item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.item-title { font-weight: 600; word-break: break-word; }
.item-body {
  margin: 6px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  color: #333a47;
}
.item-meta { margin-top: 6px; font-size: 12px; color: var(--muted); }

.badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid currentColor;
}
.badge-open { color: var(--accent); }
.badge-done { color: var(--done); }

.task-done {
  background: var(--item-done-bg);
  border-color: var(--item-done-border);
  border-left-color: var(--done);
}
.task-done:hover { background: #e9ebf0; }
.task-done .item-title { text-decoration: line-through; color: var(--done); }

.actions { display: flex; gap: 6px; flex-shrink: 0; }
.btn-small {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  background: #ffffff;
  color: #374050;
  border: 1px solid var(--item-border);
}
.btn-small:hover { background: #f4f6fa; }
.btn-danger { background: #ffffff; color: var(--danger); border-color: #edc3bf; }
.btn-danger:hover { background: #fdeceb; }

.empty { color: var(--muted); font-size: 14px; padding: 6px 2px; }