:root {
  --bg: #f2f3f5;
  --surface: #ffffff;
  --ink: #1f2430;
  --ink-soft: #6b7280;
  --accent: #3b5bdb;
  --accent-soft: #eef1fd;
  --danger: #d1453b;
  --line: #e3e5ea;
  --on-color: #ffffff;

  /* 種類ごとの色分け */
  --memo: #c75b84;       /* メモ: やさしいピンク */
  --memo-soft: #fdf0f5;
  --task: #3b5bdb;       /* タスク: 青 */
  --task-soft: #eef1fd;
  --open: #c2255c;       /* 未完了: ピンク */
  --open-soft: #fdecf2;
  --done: #2b8a3e;       /* 完了: 緑 */
  --done-soft: #ebf7ee;
  --diary: #6741d9;      /* 日記: 紫 */
  --diary-soft: #f3f0ff;
  --review: #0b7285;     /* 週次振り返り: 青緑 */
  --review-soft: #e6f7f9;
  --good: #8f6b00;       /* 今日よかったこと: 黄 */
  --good-soft: #fff8db;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181d;
    --surface: #202329;
    --ink: #e8e9ec;
    --ink-soft: #9aa0ac;
    --accent: #7f9bf0;
    --accent-soft: #262b3d;
    --danger: #e57369;
    --line: #2c2f36;
    --on-color: #16181d;

    --memo: #f4a6c0;
    --memo-soft: #3a2430;
    --task: #7f9bf0;
    --task-soft: #232a40;
    --open: #f27aa3;
    --open-soft: #3a2029;
    --done: #69c77b;
    --done-soft: #1e3324;
    --diary: #b197fc;
    --diary-soft: #2a2440;
    --review: #3bc9db;
    --review-soft: #16323a;
    --good: #f5cc4a;
    --good-soft: #33301a;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  line-height: 1.6;
}

.app {
  max-width: 920px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

.app-header h1 {
  font-size: 1.5rem;
  margin: 0 0 1.5rem;
}

.load-error {
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--danger);
  border-radius: 8px;
  color: var(--danger);
  background: var(--surface);
  font-size: 0.9rem;
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.stat-card--memo { --section: var(--memo); --section-soft: var(--memo-soft); }
.stat-card--task { --section: var(--task); --section-soft: var(--task-soft); }
.stat-card--open { --section: var(--open); --section-soft: var(--open-soft); }
.stat-card--done { --section: var(--done); --section-soft: var(--done-soft); }
.stat-card--diary { --section: var(--diary); --section-soft: var(--diary-soft); }
.stat-card[class*="stat-card--"] {
  background: var(--section-soft);
  border-color: var(--section);
  border-left-width: 5px;
}
.stat-card[class*="stat-card--"] .stat-number { color: var(--section); }

.latest-review {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--review);
  border-left-width: 5px;
  border-radius: 10px;
  background: var(--review-soft);
  color: var(--ink);
  text-decoration: none;
}
.latest-review:hover { filter: brightness(0.98); }
.latest-review-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--review);
}
.latest-review-week {
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.latest-review-week:empty { display: none; }
.latest-review-comment {
  font-size: 0.95rem;
  white-space: pre-wrap;
  /* 長いコメントは3行で省略 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.stat-number {
  font-size: 1.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 700px) {
  .columns { grid-template-columns: 1fr; }
  .dashboard { grid-template-columns: 1fr 1fr; }
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.25rem;
}
.panel h2 {
  margin: 0 0 0.9rem;
  font-size: 1.1rem;
}
.panel--memo { --section: var(--memo); --section-soft: var(--memo-soft); }
.panel--task { --section: var(--task); --section-soft: var(--task-soft); }
.panel--diary { --section: var(--diary); --section-soft: var(--diary-soft); }
.panel--review { --section: var(--review); --section-soft: var(--review-soft); }
.panel--good { --section: var(--good); --section-soft: var(--good-soft); }
.panel--wide { grid-column: 1 / -1; }
.panel[class*="panel--"] { border-top: 5px solid var(--section); }
.panel[class*="panel--"] h2 {
  display: inline-block;
  color: var(--section);
  background: var(--section-soft);
  padding: 0.15rem 0.75rem;
  border-radius: 999px;
}

.entry-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.entry-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.entry-form input,
.entry-form select,
.entry-form textarea {
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  resize: vertical;
}
.entry-form input:focus,
.entry-form select:focus,
.entry-form textarea:focus {
  outline: 2px solid var(--section, var(--accent));
  outline-offset: 1px;
}
.entry-form button {
  align-self: flex-start;
  font: inherit;
  font-weight: 600;
  background: var(--section, var(--accent));
  color: var(--on-color);
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.entry-form button:hover { opacity: 0.9; }

.entry-form--inline {
  flex-direction: row;
  align-items: center;
}
.entry-form--inline input { flex: 1; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 420px;
  overflow-y: auto;
}

.memo-item, .task-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.65rem 0.8rem;
}
.memo-item {
  border-left: 4px solid var(--memo);
  background: var(--memo-soft);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.memo-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}
.memo-item-header h3 {
  margin: 0;
  font-size: 0.98rem;
}
.memo-item p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  white-space: pre-wrap;
}
.item-meta {
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-left: 4px solid var(--open);
  background: var(--open-soft);
}
.task-item.done {
  border-left-color: var(--done);
  background: var(--done-soft);
}
.task-item input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--done);
  flex-shrink: 0;
}
.task-item .task-body {
  flex: 1;
  min-width: 0;
}
.task-item .task-text {
  font-size: 0.95rem;
}
.task-item.done .task-text {
  text-decoration: line-through;
  color: var(--ink-soft);
}
.icon-btn {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.2rem 0.4rem;
  flex-shrink: 0;
}
.icon-btn:hover { text-decoration: underline; }

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.diary-item {
  border: 1px solid var(--line);
  border-left: 4px solid var(--diary);
  background: var(--diary-soft);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.diary-item-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.diary-item-header h3 {
  margin: 0;
  font-size: 0.98rem;
  color: var(--diary);
}
.diary-mood {
  font-size: 0.8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 0.6rem;
}
.diary-item-header .icon-btn { margin-left: auto; }
.diary-item p {
  margin: 0;
  font-size: 0.92rem;
  white-space: pre-wrap;
}

.review-week-hint {
  align-self: flex-end;
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--review);
}

.review-item {
  border: 1px solid var(--line);
  border-left: 4px solid var(--review);
  background: var(--review-soft);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.review-item-header {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.review-item-header h3 {
  margin: 0 auto 0 0;
  font-size: 0.98rem;
  color: var(--review);
}
.review-item-header .review-edit-btn { color: var(--review); }
.review-item p {
  margin: 0;
  font-size: 0.92rem;
  white-space: pre-wrap;
}

.good-inputs {
  margin: 0;
  padding-left: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.good-inputs li::marker {
  font-weight: 700;
  color: var(--good);
}
.good-inputs input { width: 100%; }

.good-item {
  border: 1px solid var(--line);
  border-left: 4px solid var(--good);
  background: var(--good-soft);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.good-item-header {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.good-item-header h3 {
  margin: 0 auto 0 0;
  font-size: 0.98rem;
  color: var(--good);
}
.good-item-header .good-edit-btn { color: var(--good); }
.good-item ol {
  margin: 0;
  padding-left: 1.4rem;
  font-size: 0.92rem;
}
.good-item ol li::marker {
  font-weight: 700;
  color: var(--good);
}

.empty {
  color: var(--ink-soft);
  font-size: 0.88rem;
  padding: 0.5rem 0;
}