/* 同期のボタンと画面。サイト側の変数（--acc など）をそのまま借りる */
.sync-b[data-状態="未設定"]{opacity:.45}
.sync-b[data-状態="失敗"]{color:#c0392b}
.sync-b[data-状態="済"]{color:var(--acc)}

.sync-toast{position:fixed; left:16px; bottom:16px; z-index:9000; max-width:min(92vw,420px);
  display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:12px;
  background:var(--bg,#fff); color:var(--tx,#111); border:1px solid var(--line,#ddd);
  box-shadow:0 8px 28px rgba(0,0,0,.16); font-size:14px; line-height:1.5}
.sync-toast button{flex:none; border:1px solid var(--acc,#333); background:transparent;
  color:var(--acc,#333); border-radius:999px; padding:5px 12px; font-size:13px; cursor:pointer}

.sync-dlg{border:1px solid var(--line,#ddd); border-radius:16px; padding:22px 22px 18px;
  max-width:min(94vw,480px); background:var(--bg,#fff); color:var(--tx,#111);
  font:15px/1.7 system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif}
.sync-dlg::backdrop{background:rgba(0,0,0,.5)}
.sync-dlg h3{margin:0 0 .6em; font-size:17px}
.sync-dlg p{margin:0 0 1em}
.sync-dlg label{display:block; font-size:13px; font-weight:600; margin-bottom:.35em}
.sync-dlg input{width:100%; box-sizing:border-box; padding:9px 11px; font:14px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  border:1px solid var(--line,#ccc); border-radius:9px; background:transparent; color:inherit}
.sync-dlg .row{display:flex; gap:8px; margin:.7em 0}
.sync-dlg .row.end{justify-content:flex-end; flex-wrap:wrap; margin-top:1.2em}
.sync-dlg button{border:1px solid var(--line,#ccc); background:transparent; color:inherit;
  border-radius:9px; padding:7px 14px; font-size:14px; cursor:pointer}
.sync-dlg button:hover{border-color:var(--acc,#333)}
/* 主色は明暗で入れ替わるので、文字は地の色を使うと どちらでも読める */
.sync-dlg button.pri{background:var(--acc,#333); border-color:var(--acc,#333); color:var(--bg,#fff); font-weight:600}
.sync-dlg .note{font-size:12.5px; color:var(--tx2,#666); margin:.5em 0 0}
@media (max-width:420px){ .sync-dlg .row.end{justify-content:stretch} .sync-dlg .row.end button{flex:1} }

/* ============================================================
   共通の見た目（同期のほかに、全体地図まわりの部品もここに置く）
   ============================================================ */

/* 各教材の帯に出る「全体地図へ戻る」 */
.mzup{display:inline-flex; align-items:center; gap:6px; flex:none; margin-right:2px;
  text-decoration:none; color:var(--tx2,#667); font-size:13px; font-weight:600;
  border:1px solid var(--line,#ddd); border-radius:999px; padding:5px 12px 5px 10px;
  transition:color .12s, border-color .12s}
.mzup:hover{color:var(--acc,#333); border-color:var(--acc,#333)}
.mzup .mzui{font-size:13px; line-height:1}
/* 狭い画面では帯に入りきらないので、帯の側を下げる。
   同じ行き先がページ末尾にあるので、たどれなくなることはない。 */
@media (max-width:820px){ .mzup{display:none} .sync-b{display:none} }

/* 全体地図の入口 */
.mzsec{margin:34px 0 0}
.mzh{font-size:19px; font-weight:700; margin:0 0 .3em; color:var(--tx,#111)}
.mzp{font-size:14.5px; color:var(--tx2,#667); margin:0 0 1em; line-height:1.75}
.mzgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
.mzc{display:grid; grid-template-columns:auto 1fr; grid-template-areas:"n t" "n d" "n k";
  gap:0 12px; align-content:start;
  text-decoration:none; color:inherit; background:var(--panel,var(--bg,#fff));
  border:1px solid var(--line,#ddd); border-left:4px solid var(--c,#888);
  border-radius:12px; padding:15px 16px; transition:border-color .12s, transform .12s}
.mzc:hover{border-color:var(--c,#888); transform:translateY(-1px)}
.mzc .mzn{grid-area:n; align-self:center; font:600 15px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--c,#888); background:color-mix(in srgb, var(--c,#888) 12%, transparent);
  border-radius:8px; padding:9px 8px; min-width:34px; text-align:center}
.mzc .mzt{grid-area:t; font-size:16px; font-weight:700; line-height:1.5}
.mzc .mzd{grid-area:d; font-size:13px; color:var(--tx2,#667); line-height:1.6; margin-top:1px}
.mzc .mzk{grid-area:k; font-size:12px; color:var(--tx2,#667); opacity:.8; margin-top:5px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mzc{border-left-color:var(--cd,#888)}
  :root:not([data-theme="light"]) .mzc:hover{border-color:var(--cd,#888)}
  :root:not([data-theme="light"]) .mzc .mzn{color:var(--cd,#888);
    background:color-mix(in srgb, var(--cd,#888) 16%, transparent)}
}
:root[data-theme="dark"] .mzc{border-left-color:var(--cd,#888)}
:root[data-theme="dark"] .mzc:hover{border-color:var(--cd,#888)}
:root[data-theme="dark"] .mzc .mzn{color:var(--cd,#888);
  background:color-mix(in srgb, var(--cd,#888) 16%, transparent)}
@media (max-width:420px){ .mzgrid{grid-template-columns:1fr} }

/* ページの末尾に置く行き先。狭い画面では、帯の代わりにこちらを使う */
.mzfoot{margin:0; padding:26px 20px 34px; border-top:1px solid var(--line,#ddd);
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.mzfoot .mzf-a{display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  color:var(--tx2,#667); font:600 14px/1.4 inherit; background:transparent;
  border:1px solid var(--line,#ddd); border-radius:999px; padding:9px 18px; cursor:pointer;
  transition:color .12s, border-color .12s}
.mzfoot .mzf-a:hover{color:var(--acc,#333); border-color:var(--acc,#333)}
.mzfoot:empty{display:none}
.sync-f[data-状態="未設定"]{opacity:.6}
.sync-f[data-状態="失敗"]{color:#c0392b; border-color:#c0392b}
.sync-f[data-状態="済"]{color:var(--acc); border-color:var(--acc)}
@media print{ .mzfoot{display:none} }