:root {
  /* SPEC §8 グリーンスケール */
  --g1: #8af697;
  --g2: #56c278;
  --g3: #1a915d;
  --g4: #006243;
  --g5: #00361e;

  --correct: #1a915d;
  --wrong: #d6453d;
  --untried: #e4e4df;
  --excluded: #b8c9bf;

  --bg: #f6f8f7;
  --surface: #ffffff;
  --text: #1a2420;
  --text-sub: #5d6b64;
  --border: #e2e7e4;
  --shadow: 0 1px 3px rgba(0, 54, 30, 0.08);
  --radius: 14px;
}



* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", "Segoe UI", Meiryo, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
}

/* top bar */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px;
  background: var(--g3);
  color: #fff;
}
.topbar h1 { font-size: 17px; font-weight: 600; margin: 0; line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.brand { display: flex; align-items: baseline; gap: 4px; min-width: 0; flex: 1 1 auto; flex-wrap: nowrap; overflow: hidden; }
.topsub { font-size: 15px; font-weight: 600; color: #fff; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
/* タイトル＋サブを1行・同サイズに。サブ表示中（＝ホーム）のみ見出しも15pxへ揃える。 */
.brand:has(#topSub:not([hidden])) h1 { font-size: 15px; }
.top-cover {
  flex: none; align-self: center; width: 34px; height: 48px; object-fit: cover;
  border-radius: 4px; border: 1px solid rgba(255, 255, 255, .35);
}
.icon-btn {
  background: rgba(255,255,255,.18); color: #fff; border: 0;
  width: 30px; height: 30px; border-radius: 8px; font-size: 20px;
  line-height: 1; cursor: pointer;
}

.app { max-width: 720px; margin: 0 auto; padding: 16px 14px 40px; }

/* generic card */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px; margin-bottom: 12px;
}
.muted { color: var(--text-sub); font-size: 13px; }
.section-label {
  font-size: 12px; color: var(--g4); font-weight: 600;
  letter-spacing: .04em;
}

/* book / chapter list */
.book-title {
  font-size: 14px; font-weight: 600; margin: 0; line-height: 1.4;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.book-card { display: flex; gap: 14px; align-items: center; }
.book-card > div { min-width: 0; }
.cover {
  flex: none; width: 40px; height: 56px; object-fit: cover;
  border-radius: 6px; box-shadow: var(--shadow);
  background: var(--untried); border: 1px solid var(--border);
}
/* 章リスト: 多数章でも見出し・並び替えを残してスクロール（約20件ぶんを上限に内部スクロール） */
.chapter-list { max-height: calc(100dvh - 170px); overflow-y: auto; }
.chapter-card { cursor: pointer; transition: transform .05s; padding: 12px; margin-bottom: 8px; }
.chapter-card:active { transform: scale(.99); }
.ch-count { flex: none; font-size: 12px; font-weight: 600; color: var(--text-sub); }
.book-link { cursor: pointer; transition: transform .05s; }
.book-link:active { transform: scale(.99); }

/* ライブラリ（検索・カテゴリ絞り込み・コンパクト一覧） */
.lib-controls { margin-bottom: 10px; }
.lib-search {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; color: var(--text);
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px;
}
.lib-search:focus { outline: none; border-color: var(--g3); }
/* カテゴリ・プルダウン（2列グリッド） */
.catpick { position: relative; margin-top: 8px; }
.catpick-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 9px 12px; cursor: pointer; color: var(--text);
  font: inherit; text-align: left;
}
.cp-label { flex: 1; min-width: 0; font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catpick-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 54, 30, .18); max-height: 60vh; overflow: auto;
}
.cp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; }
.cp-opt {
  display: block; min-width: 0; padding: 9px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 600;
  text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-opt:hover, .cp-opt.on { background: var(--bg); }
.cp-opt.on { color: var(--g4); }
.cp-all { grid-column: 1 / -1; } /* 「すべて」は全幅 */
.lib-count { font-size: 12px; color: var(--text-sub); margin: 0 2px 8px; }
.lib-list { display: flex; flex-direction: column; gap: 6px; }
.lib-item {
  display: flex; gap: 10px; align-items: center; padding: 8px 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); cursor: pointer; transition: transform .05s;
}
.lib-item:active { transform: scale(.99); }
.li-cover {
  flex: none; width: 34px; height: 48px; object-fit: cover; border-radius: 5px;
  background: var(--untried); border: 1px solid var(--border);
}
.li-main { flex: 1; min-width: 0; }
.li-cat {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 11px; font-weight: 600; margin: 0; line-height: 1.3;
}
.li-tags { flex: 1; min-width: 0; color: var(--g4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-count { flex: none; color: var(--text-sub); }
.li-title {
  font-size: 14px; font-weight: 600; margin: 1px 0 4px; line-height: 1.25;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
/* 実施率／正答率の2本バー（左:実施・右:正答） */
.li-stats { display: flex; gap: 12px; }
.li-stat { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.li-lbl { flex: none; font-size: 10px; font-weight: 700; color: var(--text-sub); }
.li-stat .bar { flex: 1; }
.li-pct { flex: none; min-width: 34px; font-size: 12px; font-weight: 600; text-align: right; }
/* バー色はトップ画面と統一（既定の .bar > span = --g3 を使用） */
.chapter-card .li-stats { margin-top: 8px; } /* 章カードの2本バーは見出しの下に余白 */
.chapter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.chapter-name { font-size: 15px; font-weight: 600; }
.progress-line { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.bar { flex: 1; height: 8px; background: var(--untried); border-radius: 99px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--g3); border-radius: 99px; }
.rate { font-size: 13px; font-weight: 600; min-width: 48px; text-align: right; }

/* block grid */
.blocks {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 8px; margin: 14px 0 4px;
}
.block {
  aspect-ratio: 1 / 1; border-radius: 8px; border: 1.5px solid transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #fff; cursor: pointer; user-select: none;
  background: var(--untried); color: var(--text-sub);
}
.block.correct { background: var(--correct); color: #fff; border-color: var(--correct); }
.block.wrong   { background: var(--wrong);   color: #fff; border-color: var(--wrong); }
.block.excluded {
  background: transparent; color: var(--excluded);
  border: 1.5px dashed var(--excluded);
}

/* mode toggle / buttons */
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--untried); border-radius: 10px; padding: 3px; }
.seg button {
  border: 0; background: transparent; color: var(--text-sub);
  padding: 6px 14px; border-radius: 8px; font-size: 14px; cursor: pointer;
}
.seg button.on { background: var(--surface); color: var(--g4); font-weight: 600; box-shadow: var(--shadow); }

.btn {
  appearance: none; border: 0; border-radius: 12px; cursor: pointer;
  font-size: 16px; font-weight: 600; padding: 13px 18px; width: 100%;
}
.btn.primary { background: var(--g3); color: #fff; }
.btn.primary:active { background: var(--g4); }
.btn.ghost { background: transparent; color: var(--g4); border: 1.5px solid var(--border); }
.btn:disabled { opacity: .4; cursor: default; }
.btn-row { display: flex; gap: 10px; margin-top: 12px; }
.btn-row .btn { width: auto; flex: 1; }
/* 3ボタンのナビ行（次の章／章を選択／トップ画面）は1行に収まるよう詰める */
.btn-row.navrow { gap: 8px; }
.btn-row.navrow .btn { font-size: 14px; padding: 11px 6px; white-space: nowrap; }

/* quiz */
.q-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.q-progress { font-size: 13px; color: var(--text-sub); font-weight: 600; }
.q-body { font-size: 18px; font-weight: 600; margin: 6px 0 16px; }
.choices { display: flex; flex-direction: column; gap: 10px; }
.choice {
  text-align: left; background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 13px 14px; font-size: 15px; cursor: pointer;
  display: flex; gap: 10px; align-items: flex-start; color: var(--text);
}
.choice .num {
  flex: none; width: 24px; height: 24px; border-radius: 7px;
  background: var(--untried); color: var(--text-sub);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.choice:disabled { cursor: default; }
.choice.correct { border-color: var(--correct); background: rgba(26,145,93,.10); }
.choice.correct .num { background: var(--correct); color: #fff; }
.choice.wrong { border-color: var(--wrong); background: rgba(214,69,61,.10); }
.choice.wrong .num { background: var(--wrong); color: #fff; }

.explain {
  margin-top: 16px; border-left: 3px solid var(--g3);
  background: var(--surface); border-radius: 0 10px 10px 0;
  padding: 12px 14px; font-size: 14px;
}
.explain .verdict { font-weight: 700; margin-bottom: 6px; }
.explain .verdict.ok { color: var(--correct); }
.explain .verdict.ng { color: var(--wrong); }

.center { text-align: center; }
.spacer { height: 8px; }

/* mode toggle row on chapter detail */
.mode-row { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 2px; }
.mode-hint { font-size: 12px; color: var(--text-sub); }
/* 章一覧ヘッダ右端の「トップ画面」ボタン（並び替えセグと同じ高さ） */
.btn-top {
  flex: none; padding: 7px 14px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--g4); font: inherit; font-size: 13px; font-weight: 600;
  white-space: nowrap; cursor: pointer;
}
.btn-top:active { background: var(--bg); }

/* result summary banner（演出） */
.result {
  background: var(--surface); border: 1.5px solid var(--g2);
  border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
  animation: popIn .32s cubic-bezier(.2,.8,.2,1);
}
.result .r-title { font-size: 13px; font-weight: 700; color: var(--g4); }
.result .r-main { display: flex; align-items: center; gap: 16px; margin: 10px 0 6px; }
.result .ring {
  --p: 0; flex: none; width: 76px; height: 76px; border-radius: 50%;
  background: conic-gradient(var(--g3) calc(var(--p) * 1%), var(--untried) 0);
  display: flex; align-items: center; justify-content: center;
}
.result .ring > div {
  width: 58px; height: 58px; border-radius: 50%; background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.result .ring b { font-size: 20px; line-height: 1; color: var(--g4); }
.result .ring span { font-size: 10px; color: var(--text-sub); }
.result .r-stats { font-size: 14px; }
.result .r-stats b { font-size: 18px; }
.result .r-msg { font-size: 14px; font-weight: 600; color: var(--g3); margin-top: 4px; }

@keyframes popIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes blockPop {
  0% { transform: scale(.5); opacity: .2; }
  60% { transform: scale(1.12); }
  100% { transform: none; opacity: 1; }
}
.block.pop { animation: blockPop .34s ease both; }

@media (prefers-reduced-motion: reduce) {
  .result, .block.pop { animation: none; }
}

/* ---------- ホーム/ダッシュボード ---------- */
.card-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
/* 見出しと凡例を同じ行に（凡例は右詰め） */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-head .card-title { margin-bottom: 0; }
.card-head .hm-legend { margin-top: 0; }
/* 本セレクタ（書影つきカスタムドロップダウン） */
.bookpick { position: relative; margin-bottom: 12px; }
.bookpick-btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: 8px 12px; cursor: pointer; color: var(--text);
  font: inherit; text-align: left;
}
.bp-cover {
  flex: none; width: 26px; height: 37px; border-radius: 4px; overflow: hidden;
  background: var(--untried); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.bp-cover img { width: 100%; height: 100%; object-fit: cover; }
.bp-cover.all { font-size: 12px; font-weight: 700; color: var(--text-sub); }
.bp-title {
  flex: 1; min-width: 0; font-size: 15px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bp-caret { flex: none; color: var(--text-sub); font-size: 12px; }
.bookpick-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  margin: 0; padding: 0; list-style: none;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 54, 30, .18); max-height: 60vh; overflow: auto;
}
/* 検索バー（スクロールしても上部に固定） */
.bp-search {
  position: sticky; top: 0; z-index: 1; width: 100%; box-sizing: border-box;
  padding: 11px 12px; font: inherit; color: var(--text);
  background: var(--surface); border: 0; border-bottom: 1.5px solid var(--border);
  border-radius: 12px 12px 0 0;
}
.bp-search:focus { outline: none; }
/* 2列グリッド（書影＋短縮名でコンパクトに） */
.bp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; }
.bp-opt {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 8px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--text); font: inherit; text-align: left;
}
/* メニュー項目名: 1段階小さく＋最大2行（画像サイズは据え置き、文字数を多く表示） */
.bp-opt .bp-title {
  font-size: 14px; line-height: 1.3; white-space: normal;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.bp-opt:hover, .bp-opt.on { background: var(--bg); }
.bp-all { grid-column: 1 / -1; } /* 「すべての本」は全幅 */

/* 正答率: 1行 = 左[バー+％] / 中[書影] / 右[書籍名｜章名]。枠は4行ぶん確保。 */
.acc-list { height: 180px; overflow-y: auto; } /* 表示は5行ぶん固定・スクロールで最大20行 */
.acc-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.acc-row:first-child { margin-top: 0; }
.acc-left { flex: none; display: flex; align-items: center; gap: 8px; }
.acc-left .bar { width: 64px; flex: none; }
.acc-left .rate { min-width: 34px; text-align: right; font-size: 12px; }
.acc-row .bp-cover { width: 20px; height: 28px; }
.acc-meta {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline;
  font-size: 12px; font-weight: 600;
}
.acc-book { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-ch { flex: none; white-space: nowrap; }

/* ホーム「学習実績」: 1枠内に ヒートマップ(左2/3) + 集計(右1/3・縦並び) */
.learn-card { padding: 12px; }
.home-top { display: flex; gap: 12px; align-items: stretch; }
.hm-col { flex: 1; min-width: 0; } /* 余白を使って右へ拡張 */
/* 見出し＋凡例はヒートマップ列の幅内（凡例はその右端に揃う） */
/* 見出し＋凡例。右98px(=集計86+gap12)あけてヒートマップ幅に合わせ、凡例をその右端に揃える */
.lc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 98px 8px 0; }
.lc-head .card-title { margin-bottom: 0; }
.lc-head .hm-legend { margin-top: 0; }
.stats-col {
  flex: none; width: 86px;
  display: flex; flex-direction: column; justify-content: space-around; text-align: center;
}
.stats-col .stat span { display: block; font-size: 11px; color: var(--text-sub); margin-bottom: 1px; }
.stats-col .stat b { display: block; font-size: 16px; color: var(--g4); line-height: 1.2; white-space: nowrap; }
.stats-col .stat b small { font-size: 11px; font-weight: 600; }

.stats-row { display: flex; gap: 8px; text-align: center; padding: 11px 16px; }
.stat { flex: 1; }
.stat b { display: block; font-size: 15px; color: var(--g4); line-height: 1.3; white-space: nowrap; }
.stat b small { font-size: 11px; font-weight: 600; }
.stat span { font-size: 11px; color: var(--text-sub); }

/* heatmap: 左端に曜日(月〜日)列 + 13週、左→右で過去→今週。
   1列目(18px)=曜日ラベル、2〜14列目=各週。grid-auto-flow:column で列ごとに上→下に配置。 */
.heatmap {
  display: grid; grid-template-rows: repeat(7, 1fr);
  grid-template-columns: 18px repeat(13, 1fr);
  grid-auto-flow: column; gap: 3px;
}
.hm-day {
  aspect-ratio: auto; background: transparent;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 3px; font-size: 12px; line-height: 1; color: var(--text-sub);
}
.hm { aspect-ratio: 1 / 1; border-radius: 3px; background: var(--untried); }
.hm-empty { background: transparent; }
.hm0 { background: var(--untried); }
.hm1 { background: var(--g1); }
.hm2 { background: var(--g2); }
.hm3 { background: var(--g3); }
.hm4 { background: var(--g4); }
.hm5 { background: var(--g5); }
.week-marks {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--text-sub); margin-top: 6px;
  padding-left: 21px; /* 曜日ラベル列(18px)+gap(3px) ぶん右へ寄せて週列に揃える */
}
.hm-legend { display: flex; align-items: center; justify-content: center; gap: 3px; margin-top: 8px; }
.hm-legend .hm { width: 12px; height: 12px; aspect-ratio: auto; }
.hm-legend .muted { font-size: 10px; }
/* 2/3幅のヒートマップ列ではマス間隔・目盛をやや詰める */
.hm-col .heatmap { gap: 2px; }
.hm-col .week-marks { font-size: 9px; padding-left: 20px; } /* 曜日列18px+gap2px */

/* 正答率 */
.overall { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.overall .ring {
  --p: 0; flex: none; width: 72px; height: 72px; border-radius: 50%;
  background: conic-gradient(var(--g3) calc(var(--p) * 1%), var(--untried) 0);
  display: flex; align-items: center; justify-content: center;
}
.overall .ring > div {
  width: 56px; height: 56px; border-radius: 50%; background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.overall .ring b { font-size: 18px; color: var(--g4); line-height: 1; }
.overall .ring span { font-size: 10px; color: var(--text-sub); }
.cr-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cr-name { font-size: 14px; min-width: 64px; }

.home-actions { display: flex; gap: 10px; }
.home-actions .btn { flex: 1; }