:root {
  color-scheme: light;
  --cover: #2b2f36;
  --paper: #fbfbf7;
  --grid: #dde2e6;
  --rule: #4b5563;
  --print: #5b6470;       /* 印刷文字(見出し・説明) */
  --ink: #1f2430;         /* 書いた文字 */
  --ink-blue: #24467a;
  --red: #c0392b;
  --muted: #8a919b;
  --cell: 16px;
  --hand: "Klee One", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  --print-font: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --tab-h: 58px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--cover);
  color: var(--ink);
  font-family: var(--hand);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

#app { max-width: 560px; margin: 0 auto; min-height: 100dvh; }
#main {
  padding: calc(env(safe-area-inset-top) + 10px) 10px calc(var(--tab-h) + env(safe-area-inset-bottom) + 16px);
}

/* ---------- 方眼の紙 ---------- */
.page {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: -1px -1px;
  border-radius: 4px 10px 10px 4px;
  box-shadow: 0 1px 0 #00000010, 0 8px 24px #0000004d;
  padding: 18px 16px 22px;
  margin-bottom: 14px;
  position: relative;
}
.page + .page { margin-top: 0; }

/* 印刷された見出し */
.ph {
  font-family: var(--print-font);
  font-weight: 700;
  color: #2f3540;
  font-size: 17px;
  margin: 0 0 2px;
  display: flex; align-items: center; gap: 8px;
}
.ph::before { content: ""; width: 4px; height: 16px; background: #2f3540; border-radius: 1px; }
.ph.plain::before { display: none; }
.pnote {
  font-family: var(--print-font);
  font-size: 11px; color: var(--print);
  margin: 0 0 10px;
}
.sec { margin-top: 18px; }
.sec:first-child { margin-top: 0; }
.sech {
  font-family: var(--print-font); font-weight: 700;
  font-size: 14px; color: #2f3540;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  border-bottom: 1.5px solid var(--rule);
  padding-bottom: 3px; margin-bottom: 6px;
}
.sech small { font-weight: 500; font-size: 11px; color: var(--print); }
.boxlabel {
  display: inline-block; border: 1.2px solid #2f3540; padding: 0 8px;
  font-family: var(--print-font); font-size: 13px; color: #2f3540;
}

/* ---------- 日付のヘッダー ---------- */
.dhead { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.dhead .meta { font-family: var(--print-font); color: #2f3540; font-size: 13px; }
.dhead h1 {
  font-family: var(--hand); font-weight: 600; font-size: 26px; margin: 0; flex: 1;
  letter-spacing: .02em;
}
.navbtn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.2px solid #c7cdd3; background: #ffffffcc;
  font-size: 20px; line-height: 1; color: #2f3540;
}
.todaybtn {
  border: 1.2px solid #2f3540; background: #fff; border-radius: 16px;
  font-family: var(--print-font); font-size: 12px; padding: 5px 10px;
}
.today-mark { color: var(--red); font-size: 13px; font-family: var(--print-font); }

/* ---------- 行(タスク・目標) ---------- */
ul.lines { list-style: none; margin: 0; padding: 0; }
.line {
  display: flex; align-items: center; gap: 6px;
  min-height: calc(var(--cell) * 2.5);
  border-bottom: 1px dashed #c9cfd5;
  padding: 3px 0;
}
.chk {
  flex: 0 0 auto; width: 30px; height: 30px; border: none; background: none; padding: 0;
  display: grid; place-items: center;
}
.chk::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.6px solid var(--ink);
}
.line.done .chk::before { content: "✓"; width: auto; height: auto; border: 0; color: var(--muted); font-size: 16px; }
.ltext {
  flex: 1; min-width: 0; font-size: 17px; line-height: 1.45; padding: 4px 0;
  background: none; border: 0; text-align: left; word-break: break-word;
}
.line.done .ltext {
  color: var(--muted);
  text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: #2a2f3a;
}
.star { color: var(--red); font-size: 17px; margin-right: 2px; }
.prio { font-size: 19px; margin-right: 3px; color: var(--ink-blue); }
.hrs {
  flex: 0 0 auto; min-width: 30px; height: 30px; padding: 0 4px;
  border: 1.4px solid var(--ink); border-radius: 50%;
  display: grid; place-items: center; font-size: 13px;
}
.line.done .hrs { border-color: var(--muted); color: var(--muted); }
.gtag {
  display: inline-block; font-family: var(--print-font); font-size: 10.5px;
  color: var(--ink-blue); border: 1px solid #b8c6dc; background: #eef3fa;
  border-radius: 8px; padding: 0 6px; margin-left: 4px; vertical-align: 2px;
}
.carried { color: var(--muted); font-size: 12px; margin-right: 3px; }
.prog { font-family: var(--print-font); font-size: 11px; color: var(--print); white-space: nowrap; }

/* 書き込み行 */
.addline { display: flex; align-items: center; gap: 6px; min-height: 40px; }
.addline input {
  flex: 1; border: 0; border-bottom: 1.5px solid var(--rule); background: transparent;
  font-size: 17px; padding: 6px 2px; outline: none; border-radius: 0;
}
.addline input::placeholder { color: #a7adb5; }
.addline button {
  border: 1.4px solid #2f3540; background: #fff; border-radius: 50%;
  width: 34px; height: 34px; font-size: 20px; line-height: 1; flex: 0 0 auto;
}

textarea.note {
  width: 100%; border: 0; background: transparent; resize: none; outline: none;
  font-size: 17px; line-height: calc(var(--cell) * 2); min-height: calc(var(--cell) * 6);
  padding: 0 2px; display: block;
}
textarea.note::placeholder { color: #a7adb5; }

.sumbar {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center;
  font-family: var(--print-font); font-size: 12px; color: var(--print);
  margin: 4px 0 2px;
}
.sumbar b { color: var(--ink); font-size: 14px; }
.sumbar .over { color: var(--red); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 14px; border: 1.2px solid #b8c6dc; background: #eef3fa;
  border-radius: 14px; padding: 3px 10px; color: var(--ink-blue);
}
.chip.done { text-decoration: line-through; color: var(--muted); border-color: #d3d7dc; background: #f3f4f5; }
.empty { color: #a7adb5; font-size: 14px; padding: 6px 2px; }

.pillbtn {
  border: 1.2px solid #2f3540; background: #fff; border-radius: 16px;
  font-family: var(--print-font); font-size: 13px; padding: 7px 12px;
}
.pillbtn.ghost { border-color: #c7cdd3; color: var(--print); }
.pillbtn.danger { border-color: #e2b6b0; color: var(--red); }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- 週のページ ---------- */
.day { border-bottom: 1.2px solid var(--rule); padding: 6px 0 8px; }
.day:last-child { border-bottom: 0; }
.dayh {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  border: 0; background: none; padding: 2px 0; text-align: left;
}
.dayh .dn { font-family: var(--print-font); font-size: 12px; color: #2f3540; }
.dayh .dd { font-size: 17px; font-weight: 600; }
.dayh .ds { margin-left: auto; font-family: var(--print-font); font-size: 11px; color: var(--print); }
.dayh.is-today .dd { color: var(--red); }
.dayh.sun .dd { color: #b04a3a; } .dayh.sat .dd { color: #2f5d9a; }
.dlist { list-style: none; margin: 2px 0 0; padding: 0 0 0 10px; }
.dlist li { font-size: 15px; line-height: 1.6; }
.dlist li.done { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }

/* ---------- 目標のページ ---------- */
.capgrid { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; font-size: 15px; }
.capgrid label { font-family: var(--print-font); font-size: 12px; color: var(--print); }
.capgrid input {
  width: 100%; border: 0; border-bottom: 1.5px solid var(--rule); background: transparent;
  font-size: 17px; padding: 3px 2px; outline: none; border-radius: 0;
}
.capgrid input[type=date] { min-height: 32px; }
.calc { font-size: 15px; margin-top: 6px; }
.calc b { font-size: 20px; }
.remain { font-family: var(--print-font); font-size: 12px; color: var(--red); }

/* ---------- 振り返り ---------- */
.rv { margin-top: 12px; }
.rv h3 { font-family: var(--print-font); font-weight: 700; font-size: 14px; margin: 0; color: #2f3540; }
.rv p { font-family: var(--print-font); font-size: 11px; color: var(--print); margin: 0 0 2px; }
.rv + .rv { border-top: 1.2px solid var(--rule); padding-top: 10px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; margin: 6px 0 4px; }
.stats div { border: 1.2px solid #c7cdd3; background: #ffffffb0; border-radius: 6px; padding: 6px 2px; }
.stats b { display: block; font-size: 22px; }
.stats span { font-family: var(--print-font); font-size: 11px; color: var(--print); }
.wkcard { border-top: 1px dashed #c9cfd5; padding: 8px 0; }
.wkcard button { border: 0; background: none; padding: 0; text-align: left; width: 100%; }
.wkcard .wt { font-family: var(--print-font); font-size: 12px; color: #2f3540; font-weight: 700; }
.wkcard .wb { font-size: 15px; white-space: pre-wrap; margin-top: 2px; }
.wkcard .wb em { font-style: normal; font-family: var(--print-font); font-size: 11px; color: var(--print); margin-right: 4px; }

/* ---------- タブ ---------- */
#tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: center;
  background: #23272ef2; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 0 8px env(safe-area-inset-bottom);
  border-top: 1px solid #ffffff14;
}
#tabs button {
  flex: 1; max-width: 140px; height: var(--tab-h); border: 0; background: none;
  color: #9aa3ad; font-family: var(--print-font); font-size: 11px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
#tabs .ti { font-size: 20px; line-height: 1; }
#tabs button.on { color: #fff; }
#tabs button.on .ti { color: #f2c94c; }

/* ---------- 下から出るシート ---------- */
#sheet {
  position: fixed; inset: 0; z-index: 30; background: #0008;
  display: flex; align-items: flex-end; justify-content: center;
}
#sheet[hidden] { display: none; }
.sheetbox {
  width: 100%; max-width: 560px; max-height: 88dvh; overflow: auto;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  border-radius: 14px 14px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
}
.sheetbox textarea {
  width: 100%; border: 0; border-bottom: 1.5px solid var(--rule); background: transparent;
  font-size: 18px; line-height: 1.6; outline: none; resize: none; padding: 4px 2px; border-radius: 0;
}
.sheetbox select {
  width: 100%; font-size: 16px; padding: 8px; border: 1.2px solid #c7cdd3; border-radius: 6px; background: #fff;
}
.flabel { font-family: var(--print-font); font-size: 12px; color: var(--print); margin: 14px 0 6px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button {
  min-width: 42px; height: 38px; padding: 0 10px; border-radius: 19px;
  border: 1.2px solid #c7cdd3; background: #fff; font-size: 15px;
}
.seg button.on { border-color: #2f3540; background: #2f3540; color: #fff; }
.seg button.star-on { border-color: var(--red); background: var(--red); color: #fff; }
.sheetact { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.sheetact .grow { flex: 1; }
.primary { border: 0; background: #2f3540; color: #fff; border-radius: 22px; padding: 11px 20px; font-family: var(--print-font); font-size: 15px; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 14px);
  transform: translateX(-50%); background: #2f3540; color: #fff; z-index: 40;
  font-family: var(--print-font); font-size: 13px; padding: 9px 16px; border-radius: 20px;
  box-shadow: 0 4px 14px #0005;
}
.nomark { flex: 0 0 auto; width: 30px; text-align: center; color: var(--red); font-size: 18px; }

.notetitle {
  width: 100%; border: 0; border-bottom: 1.5px solid var(--rule); background: transparent; border-radius: 0;
  font-family: var(--hand); font-weight: 600; font-size: 22px; padding: 4px 2px; outline: none; margin-bottom: 8px;
}
.notepeek { color: var(--print); font-size: 14px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }