/* ============================================================
   基礎ツアー道場 — 共通スタイル
   index.html(トラック一覧) / tour.html(ツアー本体)
   ============================================================ */
:root {
  --accent: #4f7cff;            /* トラックごとに JS が上書きする */
  --bg: #f6f7fb;
  --panel: #ffffff;
  --ink: #1f2430;
  --ink-sub: #5b6372;
  --line: #e3e6ee;
  --code-bg: #171c28;
  --code-ink: #dbe2f1;
  --ok: #2fa463;
  --radius: 12px;
  --maxw: 1200px;
  font-size: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Noto Sans Mono CJK JP", monospace;
}
p code, li code, .lesson-tip code, .lesson-ex code {
  background: #eceef6;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 .35em;
  font-size: .88em;
  color: #263041;
  word-break: break-all;
}

/* ---------- ヘッダー ---------- */
.site-header {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 30;
}
.site-header .inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: .65rem 1rem;
  display: flex;
  align-items: center;
  gap: .9rem;
}
.brand {
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--ink);
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand .logo { color: var(--accent); margin-right: .15rem; }

/* ============================================================
   トラック一覧(index.html)
   ============================================================ */
.home-hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2.6rem 1rem 0.6rem;
}
.home-hero h1 { font-size: 1.7rem; margin: 0 0 .6rem; }
.home-hero p { color: var(--ink-sub); margin: 0; max-width: 46em; }
.track-grid {
  max-width: var(--maxw);
  margin: 1.4rem auto 3rem;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}
.track-card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 4px solid var(--tc, var(--accent));
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem 1rem;
  color: var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.track-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(25, 34, 61, .10);
}
.track-card h2 {
  margin: 0;
  font-size: 1.15rem;
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.track-card .count {
  font-size: .78rem;
  color: var(--ink-sub);
  font-weight: 600;
}
.track-card p { margin: 0; font-size: .88rem; color: var(--ink-sub); flex: 1; }
.track-progress { display: flex; align-items: center; gap: .6rem; }
.track-progress .bar {
  flex: 1;
  height: 6px;
  background: #e9ebf3;
  border-radius: 999px;
  overflow: hidden;
}
.track-progress .bar i {
  display: block;
  height: 100%;
  background: var(--tc, var(--accent));
  border-radius: 999px;
}
.track-progress .pct {
  font-size: .76rem;
  color: var(--ink-sub);
  min-width: 7.5em;
  text-align: right;
}
.home-note {
  max-width: var(--maxw);
  margin: 0 auto 3rem;
  padding: 0 1rem;
  color: var(--ink-sub);
  font-size: .84rem;
}

/* ============================================================
   ツアーページ(tour.html)
   ============================================================ */
.tour-header .track-name {
  font-weight: 700;
  font-size: .95rem;
  color: var(--accent);
  white-space: nowrap;
}
.tour-header .spacer { flex: 1; }
.tour-header .pos {
  font-size: .82rem;
  color: var(--ink-sub);
  white-space: nowrap;
}
.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 8px;
  padding: .42rem .9rem;
  font-size: .88rem;
  cursor: pointer;
  font-family: inherit;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
}
.btn-primary:hover { filter: brightness(1.08); color: #fff; }
.btn:disabled { opacity: .4; cursor: default; pointer-events: none; }

.progress-track {
  height: 3px;
  background: transparent;
}
.progress-track i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .25s ease;
}

/* ---------- 本文レイアウト ---------- */
.tour-main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.6rem 1rem 2rem;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 1.6rem;
  align-items: start;
}
@media (max-width: 920px) {
  .tour-main { grid-template-columns: 1fr; }
}

.module-chip {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  color: var(--accent);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .1rem .7rem;
  margin-bottom: .6rem;
}
.lesson-title { font-size: 1.45rem; margin: 0 0 1rem; line-height: 1.4; }
.lesson-paras p { margin: 0 0 .95rem; }
.lesson-points {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: .7rem 1rem .7rem 1.1rem;
  margin: 1.1rem 0;
}
.lesson-points .head { font-size: .78rem; font-weight: 800; color: var(--accent); }
.lesson-points ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.lesson-points li { margin: .25rem 0; font-size: .9rem; }
.lesson-tip, .lesson-ex {
  border-radius: 8px;
  padding: .65rem 1rem;
  margin: 1rem 0;
  font-size: .9rem;
}
.lesson-tip {
  background: #fff8e6;
  border: 1px solid #f0e0b0;
}
.lesson-tip::before { content: "💡 "; }
.lesson-ex {
  background: #eafaf0;
  border: 1px solid #bfe8cd;
}
.lesson-ex .head { font-weight: 800; font-size: .78rem; color: var(--ok); }

/* トポロジ・フロー図(ネットワーク課などの左ペイン常設図) */
.lesson-diagram {
  background: var(--code-bg);
  color: var(--code-ink);
  border-radius: 10px;
  padding: .85rem 1rem;
  margin: 0 0 1.1rem;
  font-size: .74rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
  box-shadow: 0 6px 18px rgba(15, 20, 40, .14);
}

/* ---------- コードペイン ---------- */
.code-pane { position: sticky; top: 4.2rem; }
@media (max-width: 920px) { .code-pane { position: static; } }
.code-card {
  background: var(--code-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(15, 20, 40, .18);
}
.code-card .bar {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .9rem;
  background: #10141e;
  color: #8b93a7;
  font-size: .76rem;
}
.code-card .bar .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.code-card .bar .lang-tag { margin-left: auto; color: #aab3c7; }
.code-card pre {
  margin: 0;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  font-size: .84rem;
  line-height: 1.65;
  color: var(--code-ink);
  tab-size: 4;
}
.code-card pre .cl { display: block; min-height: 1.65em; white-space: pre; }

/* ---- 写経モード ---- */
.mode-btn {
  appearance: none;
  border: 1px solid #2c3650;
  background: #1b2233;
  color: #aab3c7;
  border-radius: 6px;
  padding: .12rem .6rem;
  font-size: .74rem;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.mode-btn:hover { border-color: var(--accent); color: #fff; }

/* 写経中: 見本の各行に判定マーク用の余白と色を付ける */
.code-card.practice pre .cl::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  color: #58627a;
}
.code-card.practice pre .cl.l-ok::before   { content: "✓"; color: #39d353; }
.code-card.practice pre .cl.l-ng::before   { content: "✗"; color: #ff6b6b; }
.code-card.practice pre .cl.l-cur::before  { content: "›"; color: #ffd479; }
.code-card.practice pre .cl.l-skip::before { content: "·"; color: #58627a; }
.code-card.practice pre .cl.l-ok   { opacity: .55; }
.code-card.practice pre .cl.l-skip { opacity: .4; }   /* 省略されたコメント行 */
.code-card.practice pre .cl.l-ng   { background: rgba(255, 90, 90, .13); border-radius: 4px; }
.code-card.practice pre .cl.l-cur  { background: rgba(255, 255, 255, .06); border-radius: 4px; }

.editor-card {
  margin-top: .9rem;
  background: var(--code-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(15, 20, 40, .18);
}
.editor-card .bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .9rem;
  background: #10141e;
  color: #8b93a7;
  font-size: .76rem;
}
.editor-card .bar .spacer { flex: 1; }
.type-status { white-space: nowrap; }
.type-status.done { color: #39d353; font-weight: 700; }
.editor-card textarea {
  display: block;
  width: 100%;
  min-height: 120px;
  border: 0;
  margin: 0;
  background: transparent;
  color: var(--code-ink);
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Noto Sans Mono CJK JP", monospace;
  font-size: .84rem;
  line-height: 1.65;
  padding: 1rem 1.1rem;
  resize: vertical;
  outline: none;
  white-space: pre;
  overflow-x: auto;
  caret-color: var(--accent);
  tab-size: 4;
}
.editor-card textarea::placeholder { color: #4d5670; }
.output-card {
  margin-top: .9rem;
  background: #0d1117;
  border-radius: var(--radius);
  overflow: hidden;
}
.output-card .bar {
  padding: .4rem .9rem;
  font-size: .74rem;
  color: #7d8798;
  background: #090c12;
}
.output-card pre {
  margin: 0;
  padding: .8rem 1.1rem;
  overflow-x: auto;
  font-size: .8rem;
  line-height: 1.6;
  color: #9ecb84;
}

/* ---------- 小テスト(4 択) ---------- */
.quiz-card {
  margin-top: .9rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.quiz-card .bar {
  padding: .5rem .9rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent);
  background: #f4f6fc;
  border-bottom: 1px solid var(--line);
}
.quiz-body { padding: .4rem 1rem .2rem; }
.quiz-q { padding: .5rem 0 .7rem; }
.quiz-q + .quiz-q { border-top: 1px dashed var(--line); }
.quiz-q .q-text { margin: 0 0 .55rem; font-size: .92rem; }
.q-choices { display: grid; gap: .45rem; }
.quiz-choice {
  appearance: none;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  text-align: left;
  width: 100%;
  border: 1px solid var(--line);
  background: #fafbfe;
  color: var(--ink);
  border-radius: 8px;
  padding: .5rem .8rem;
  font-size: .88rem;
  font-family: inherit;
  line-height: 1.55;
  cursor: pointer;
}
.quiz-choice:hover { border-color: var(--accent); }
.quiz-choice .q-mk {
  flex: none;
  font-size: .74rem;
  font-weight: 800;
  color: var(--ink-sub);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 .4em;
  background: #fff;
}
.quiz-choice.correct {
  border-color: var(--ok);
  background: #eafaf0;
  font-weight: 700;
}
.quiz-choice.correct .q-mk { color: var(--ok); border-color: var(--ok); }
.quiz-choice.wrong {
  border-color: #e5484d;
  background: #fdf0f0;
  opacity: .75;
  cursor: default;
}
.quiz-choice.wrong .q-mk { color: #e5484d; border-color: #e5484d; }
.quiz-q.done .quiz-choice { cursor: default; pointer-events: none; }
.quiz-q.done .quiz-choice:not(.correct):not(.wrong) { opacity: .5; }
.q-explain {
  margin-top: .55rem;
  font-size: .85rem;
  color: var(--ink-sub);
  background: #f4f6fc;
  border-radius: 8px;
  padding: .5rem .8rem;
}
.quiz-foot {
  padding: .55rem 1rem .7rem;
  font-size: .82rem;
  color: var(--ink-sub);
  border-top: 1px solid var(--line);
}
.quiz-foot.done { color: var(--ok); font-weight: 700; }

/* シンタックスハイライト */
.tok-kw  { color: #ff7b9d; }
.tok-fn  { color: #7cc7ff; }
.tok-cst { color: #d2a8ff; }
.tok-str { color: #a5d6a7; }
.tok-num { color: #f0b26b; }
.tok-cm  { color: #6b7487; font-style: italic; }
.tok-var { color: #ffd479; }
.tok-op  { color: #9fb0ca; }

/* ---------- フッターナビ ---------- */
.tour-nav {
  max-width: var(--maxw);
  margin: 0 auto 3rem;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.tour-nav .spacer { flex: 1; }
.tour-nav .hint { font-size: .76rem; color: var(--ink-sub); }
@media (max-width: 640px) { .tour-nav .hint { display: none; } }

/* ---------- 目次ドロワー ---------- */
.toc-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 40, .45);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.toc-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(340px, 88vw);
  background: var(--panel);
  z-index: 41;
  transform: translateX(-102%);
  transition: transform .2s ease;
  overflow-y: auto;
  padding: 1rem 0 2rem;
  box-shadow: 4px 0 24px rgba(15, 20, 40, .15);
}
body.toc-open .toc-backdrop { opacity: 1; pointer-events: auto; }
body.toc-open .toc-drawer { transform: translateX(0); }
.toc-drawer .toc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem .6rem;
  border-bottom: 1px solid var(--line);
}
.toc-drawer .toc-head b { font-size: .95rem; }
.toc-module { padding: .7rem 0 .1rem; }
.toc-module > b {
  display: block;
  padding: .2rem 1rem;
  font-size: .78rem;
  color: var(--ink-sub);
  letter-spacing: .02em;
}
.toc-lesson {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .34rem 1rem .34rem 1.2rem;
  font-size: .87rem;
  color: var(--ink);
  border-left: 3px solid transparent;
}
.toc-lesson:hover { background: #f2f4fa; text-decoration: none; }
.toc-lesson.current {
  border-left-color: var(--accent);
  background: #f2f4fa;
  font-weight: 700;
}
.toc-lesson .mark {
  width: 1.05em;
  color: var(--ok);
  font-weight: 700;
  flex: none;
}
.toc-lesson .mark.todo { color: #c9cedb; }

/* ---------- 修了画面 ---------- */
.finish-box {
  grid-column: 1 / -1;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  padding: 3rem 1.5rem;
}
.finish-box h2 { margin: 0 0 .6rem; font-size: 1.5rem; }
.finish-box p { color: var(--ink-sub); margin: 0 0 1.4rem; }

/* ---------- エラーページ ---------- */
.error-page {
  max-width: 560px;
  margin: 14vh auto;
  padding: 0 1rem;
  text-align: center;
}
.error-page h1 { font-size: 3rem; margin: 0 0 .4rem; color: var(--accent); }