:root {
  --bg: #ffffff;
  --ink: #1f2420;
  --sub: #5f655f;
  --line: #d9ddd8;
  --green: #0f5a2a;
  --green-soft: #ddf2df;
  --cream: #f8f6ee;
  /* 5段階の色（5がいちばん良い） */
  --v5: #0f5a2a;
  --v4: #5c9a6c;
  --v3: #c9a23f;
  --v2: #d98a5f;
  --v1: #9a9d9a;
  --danger: #b4432f;
  --radius: 10px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
main { max-width: 560px; margin: 0 auto; padding: 16px 16px calc(40px + env(safe-area-inset-bottom)); }
[hidden] { display: none !important; }

/* 見出し */
.head { padding-top: env(safe-area-inset-top); }
.org { margin: 0; font-size: 14px; font-weight: 700; }
.head h1 { margin: 0 0 10px; font-size: 32px; line-height: 1.25; font-weight: 900; color: var(--green); letter-spacing: .01em; }
.autosave {
  margin: 0; padding: 8px 12px; border-radius: var(--radius);
  background: var(--green-soft); color: var(--green);
  font-weight: 800; font-size: 17px; text-align: center;
}
.autosave-sub { margin: 6px 0 0; font-size: 14px; color: var(--ink); }

.date-line { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; font-size: 14px; color: var(--sub); }
.date-line input, select {
  font: inherit; color: var(--ink); background: #fff;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px;
}

h2, h3 { margin: 0; }
.hint { color: var(--sub); font-size: 14px; margin: 8px 0 0; }
.foot { color: var(--sub); font-size: 14px; margin: 8px 0 0; text-align: center; }
.error { color: var(--danger); padding: 16px 0; }

/* 役割を選ぶ */
.band {
  margin-top: 18px; padding: 10px 12px; border-radius: var(--radius);
  background: var(--green); color: #fff; font-size: 20px; font-weight: 800; text-align: center;
}
.band-sub { margin: 0; padding: 6px 0 10px; text-align: center; font-size: 14px; background: var(--cream); }
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.role {
  display: flex; align-items: center; gap: 8px; text-align: left;
  font: inherit; font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--ink);
  min-height: 52px; padding: 8px 8px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.role.none { grid-column: 1 / -1; }
.role .box {
  flex: none; width: 22px; height: 22px; border: 2px solid #8b908b; border-radius: 4px; background: #fff;
  display: grid; place-items: center;
}
.role-text { display: flex; flex-direction: column; line-height: 1.35; }
.role-sub { font-weight: 400; font-size: 13px; color: var(--sub); }
.role[aria-pressed="true"] { border: 2px solid var(--green); background: #eef8ef; padding: 7px 9px; }
.role[aria-pressed="true"] .box { background: var(--green); border-color: var(--green); }
.role[aria-pressed="true"] .box::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
.selected { margin: 14px 0 8px; padding: 8px; border-radius: var(--radius); background: var(--cream); text-align: center; font-weight: 800; color: var(--green); }

.primary {
  display: block; width: 100%; text-align: center; text-decoration: none;
  font: inherit; font-weight: 800; font-size: 20px;
  padding: 12px; min-height: 56px; border: 0; border-radius: var(--radius);
  background: var(--green); color: #fff; cursor: pointer;
}
.primary:disabled { opacity: .35; cursor: default; }
.secondary {
  font: inherit; font-weight: 700; padding: 8px 14px; min-height: 44px; border-radius: 8px;
  border: 1.5px solid var(--green); background: #fff; color: var(--green); cursor: pointer;
}
.link {
  font: inherit; font-size: 16px; font-weight: 700; border: 0; background: none; color: var(--green);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px 4px; margin-left: 14px;
}

/* 答える */
.my-role { margin: 14px 0 0; font-size: 20px; font-weight: 700; }
.lead { margin: 0 0 8px; font-size: 15px; }
.howto { margin: 0 0 8px; padding: 8px 12px; border-radius: var(--radius); background: var(--cream); font-size: 14px; }
.bar-title { border-left: 6px solid var(--green); padding-left: 10px; font-size: 22px; font-weight: 900; margin: 12px 0 6px; }
.bar-title small { margin-left: 10px; font-size: 14px; font-weight: 400; color: var(--sub); }
.block-sec { margin-top: 26px; }
.block-sec:first-child { margin-top: 12px; }
.cat-title {
  margin: 16px 0 0; padding: 6px 10px; border-radius: 6px;
  background: var(--green-soft); color: var(--green); font-size: 15px; font-weight: 800;
}
.cat-title + .items { border-top: 0; }
.prog-text { margin: 0; font-size: 15px; color: var(--sub); font-weight: 700; }
.track { height: 10px; background: #e7e9e6; border-radius: 99px; overflow: hidden; margin: 6px 0 4px; }
.fill { height: 100%; width: 0; background: var(--green); border-radius: 99px; transition: width .25s; }
.items { border-top: 1px solid var(--line); }
.item { padding: 14px 0 16px; border-bottom: 1px solid var(--line); }
.q { display: flex; gap: 10px; margin: 0 0 10px; font-size: 17px; font-weight: 700; line-height: 1.5; }
.no {
  flex: none; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%;
  background: var(--green); color: #fff; font-size: 14px; font-weight: 800; display: grid; place-items: center;
}
.item.done .no { background: #9fb8a6; }
.scale { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.opt {
  font: inherit; font-size: 24px; font-weight: 700; line-height: 1; white-space: nowrap;
  min-height: 52px; padding: 6px 2px;
  border: 1.5px solid #b9bdb8; border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background .12s;
}
.opt.v5[aria-pressed="true"] { background: var(--v5); border-color: var(--v5); color: #fff; }
.opt.v4[aria-pressed="true"] { background: var(--v4); border-color: var(--v4); color: #fff; }
.opt.v3[aria-pressed="true"] { background: var(--v3); border-color: var(--v3); color: #fff; }
.opt.v2[aria-pressed="true"] { background: var(--v2); border-color: var(--v2); color: #fff; }
.opt.v1[aria-pressed="true"] { background: var(--v1); border-color: var(--v1); color: #fff; }

/* 進み具合のゲージ（スクロールしても上に残る） */
.gauge {
  position: sticky; top: 0; z-index: 5;
  margin: 0 -16px; padding: 8px 16px 10px; padding-top: calc(8px + env(safe-area-inset-top));
  background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.gauge-text { margin: 0; font-size: 15px; font-weight: 700; color: var(--sub); }
.gauge-text strong { font-size: 20px; color: var(--green); }
.gauge .track { margin: 4px 0 0; }
.saved-line {
  margin: 14px 0 4px; padding: 8px; border-radius: var(--radius); text-align: center;
  background: var(--green-soft); color: var(--green); font-weight: 800; font-size: 17px;
}

/* 折りたたみ */
.fold { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.fold > summary {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 52px;
  cursor: pointer; list-style: none;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after {
  content: ""; margin-left: auto; width: 9px; height: 9px; flex: none;
  border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s;
}
.fold[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.fold-title { font-size: 18px; font-weight: 800; }
.fold-count { font-size: 15px; color: var(--sub); }
.fold-body { padding: 0 14px 6px; }
.fold .items { border-top: 1px solid var(--line); }
.sub-title { font-size: 16px; color: var(--green); margin: 14px 0 4px; }
.note-fold { margin-bottom: 16px; }
.note-fold + .primary { margin-top: 8px; }
textarea {
  font: inherit; width: 100%; padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 8px; resize: vertical;
}
#sections > .hint { margin-bottom: 16px; }

/* 保存のお知らせ */
.toast {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  width: max-content; max-width: calc(100% - 32px);
  background: var(--green); color: #fff; font-size: 14px; font-weight: 700;
  padding: 10px 16px; border-radius: 999px; transition: .2s;
}
.toast.show { opacity: .96; transform: translate(-50%, 0); }
.toast.warn { background: #7a5a14; border-radius: 12px; }
.toast.error { background: var(--danger); border-radius: 12px; }

/* 集計 */
.page-title { margin: 0 0 10px; font-size: 32px; font-weight: 900; }
.filters { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; margin: 14px 0; font-size: 14px; color: var(--sub); }
.filters select { width: 100%; font-size: 16px; padding: 10px; border: 2px solid var(--green); }
.people { margin: 0 0 6px; font-size: 15px; }
.people strong { font-size: 20px; }
.note-soft { margin: 8px 0 0; padding: 6px 12px; border-radius: 8px; background: var(--green-soft); color: var(--green); font-weight: 700; font-size: 15px; }
.attention { margin-top: 16px; padding: 12px 14px; border-left: 6px solid var(--danger); background: #fbf1ee; border-radius: 0 var(--radius) var(--radius) 0; }
.attention h2 { font-size: 17px; }
.attention ol { margin: 6px 0 0; padding-left: 1.4em; }
.group-title { display: flex; align-items: baseline; gap: 12px; border-left: 6px solid var(--green); padding-left: 10px; font-size: 24px; font-weight: 900; margin: 22px 0 6px; }
.group-title small { font-size: 15px; font-weight: 400; color: var(--sub); }
.result { padding: 12px 0 14px; border-top: 1px solid var(--line); }
.result .q { display: block; font-size: 17px; margin: 0 0 2px; }
.count { margin: 0 0 6px; font-size: 15px; color: var(--sub); }
.stack { display: flex; height: 30px; border-radius: 6px; overflow: hidden; background: #eceeeb; }
.stack span { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 800; min-width: 0; overflow: hidden; }
.stack .v5 { background: var(--v5); } .stack .v4 { background: var(--v4); } .stack .v3 { background: var(--v3); }
.stack .v2 { background: var(--v2); } .stack .v1 { background: var(--v1); }
.avg { margin: 0 0 6px; font-size: 15px; color: var(--sub); }
.avg strong { font-size: 20px; color: var(--ink); margin-right: 2px; }
.legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--sub); }
.legend i { display: inline-block; width: 13px; height: 13px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.legend .k5 { background: var(--v5); } .legend .k4 { background: var(--v4); } .legend .k3 { background: var(--v3); }
.legend .k2 { background: var(--v2); } .legend .k1 { background: var(--v1); }
.empty { color: var(--sub); font-size: 14px; }
.notes { margin: 6px 0 0; padding-left: 1.2em; }
.notes li { margin-bottom: 6px; white-space: pre-wrap; }
.actions { margin-top: 22px; display: grid; gap: 10px; }