/* ==========================================================
   Python × セキュリティ学習ノート — 共通スタイル
   ========================================================== */
:root {
  --bg: #f7f8fa;
  --bg-panel: #ffffff;
  --bg-sidebar: #10182b;
  --bg-code: #0f172a;
  --bg-console: #1c2333;
  --text: #1f2733;
  --text-sub: #5b6572;
  --text-inverse: #e6ebf5;
  --accent: #2563eb;
  --accent-soft: #e4edfd;
  --border: #dfe3ea;
  --note-bg: #eef6ff;
  --note-border: #7fb3f0;
  --warn-bg: #fdf1f1;
  --warn-border: #e08a8a;
  --tip-bg: #f0faf1;
  --tip-border: #7fc98c;
  --sec-bg: #f6f1fd;
  --sec-border: #a985e0;
  --exercise-bg: #fffbea;
  --exercise-border: #e0c86a;
  --code-keyword: #93c5fd;
  --code-string: #fcd34d;
  --code-comment: #7c8aa5;
  --code-number: #f9a8d4;
  --code-builtin: #86efac;
  --code-text: #e6ebf5;
  --radius: 10px;
  --sidebar-w: 300px;
  --topbar-h: 52px;
  --trackbar-h: 46px;
  --header-h: 98px;
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

[data-theme="dark"] {
  --bg: #0b1120;
  --bg-panel: #131c31;
  --bg-sidebar: #0a0f1d;
  --bg-code: #0a0f1d;
  --bg-console: #101828;
  --text: #dbe2ef;
  --text-sub: #93a0b4;
  --accent: #60a5fa;
  --accent-soft: #1b2a4a;
  --border: #253147;
  --note-bg: #14233c;
  --note-border: #3b6ea5;
  --warn-bg: #331b1e;
  --warn-border: #a05555;
  --tip-bg: #14291a;
  --tip-border: #4d8a5c;
  --sec-bg: #221a35;
  --sec-border: #7a5cad;
  --exercise-bg: #2c2716;
  --exercise-border: #97852f;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic",
    "Yu Gothic", "Meiryo", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.85;
  font-size: 16px;
}

/* ---------- レイアウト ---------- */
.layout { display: flex; min-height: 100vh; }

main {
  flex: 1;
  min-width: 0;
  padding: calc(var(--header-h) + 20px) 40px 80px;
  max-width: 900px;
  margin: 0 auto;
}

/* ---------- トップバー(JSで挿入) ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  z-index: 50;
}
.topbar .site-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .spacer { flex: 1; }
.topbar button {
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 0.85rem;
}
.topbar button:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- コースタブ(JSで挿入) ---------- */
.trackbar {
  position: fixed;
  top: var(--topbar-h); left: 0; right: 0;
  height: var(--trackbar-h);
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 0 12px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  z-index: 49;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.trackbar a {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 0 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-sub);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.trackbar a:hover { color: var(--text); background: var(--accent-soft); }
.trackbar a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ---------- サイドバー ---------- */
#sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-sidebar);
  color: var(--text-inverse);
  padding: calc(var(--header-h) + 12px) 0 40px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
#sidebar .nav-title {
  padding: 8px 20px 4px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8fa0bd;
  font-weight: 700;
}
#sidebar a {
  display: block;
  padding: 7px 20px 7px 24px;
  color: #c4cfe2;
  text-decoration: none;
  font-size: 0.86rem;
  line-height: 1.5;
  border-left: 3px solid transparent;
}
#sidebar a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
#sidebar a.current {
  background: rgba(96, 165, 250, 0.14);
  border-left-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* ---------- 見出し ---------- */
.page-header { margin-bottom: 36px; }
.part-label {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 999px;
  margin: 0 0 10px;
}
h1 { font-size: 1.9rem; line-height: 1.4; margin: 0 0 12px; }
h2 {
  font-size: 1.35rem;
  margin: 52px 0 16px;
  padding: 8px 0 8px 14px;
  border-left: 5px solid var(--accent);
  background: linear-gradient(90deg, var(--accent-soft), transparent 70%);
  border-radius: 4px;
}
h3 { font-size: 1.1rem; margin: 36px 0 10px; }
.lead { color: var(--text-sub); font-size: 1.02rem; margin: 0; }

p { margin: 0 0 16px; }
ul, ol { padding-left: 1.6em; margin: 0 0 16px; }
li { margin-bottom: 6px; }
a { color: var(--accent); }
strong { font-weight: 700; }

/* ---------- 学習目標 ---------- */
.goals {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 0 0 32px;
  box-shadow: var(--shadow);
}
.goals h2 {
  margin: 0 0 10px;
  padding: 0;
  border: none;
  background: none;
  font-size: 1rem;
}
.goals ul { margin: 0; }

/* ---------- コード ---------- */
pre {
  position: relative;
  background: var(--bg-code);
  color: var(--code-text);
  border-radius: var(--radius);
  padding: 18px 20px;
  overflow-x: auto;
  font-size: 0.88rem;
  line-height: 1.7;
  margin: 0 0 20px;
}
pre code {
  font-family: "SFMono-Regular", Consolas, "Cascadia Code", Menlo, monospace;
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}
pre.console { background: var(--bg-console); color: #b8c4d8; }
pre .filename {
  display: block;
  color: #8fa0bd;
  font-size: 0.78rem;
  margin-bottom: 8px;
  font-family: inherit;
}
code {
  font-family: "SFMono-Regular", Consolas, "Cascadia Code", Menlo, monospace;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.85em;
}
.tok-kw { color: var(--code-keyword); font-weight: 600; }
.tok-str { color: var(--code-string); }
.tok-com { color: var(--code-comment); font-style: italic; }
.tok-num { color: var(--code-number); }
.tok-fn { color: var(--code-builtin); }

.copy-btn {
  position: absolute;
  top: 8px; right: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #cdd7e8;
  font-size: 0.72rem;
  border-radius: 6px;
  padding: 3px 10px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
pre:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background: rgba(255, 255, 255, 0.18); }

/* ---------- 情報ボックス ---------- */
.note, .warn, .tip, .seccol {
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 0 0 20px;
  border: 1px solid;
  font-size: 0.95rem;
}
.note  { background: var(--note-bg);  border-color: var(--note-border); }
.warn  { background: var(--warn-bg);  border-color: var(--warn-border); }
.tip   { background: var(--tip-bg);   border-color: var(--tip-border); }
.seccol { background: var(--sec-bg);  border-color: var(--sec-border); }
.note > .box-title, .warn > .box-title, .tip > .box-title, .seccol > .box-title {
  font-weight: 700;
  margin-bottom: 6px;
  display: block;
}
.note p:last-child, .warn p:last-child, .tip p:last-child,
.seccol p:last-child, .exercise p:last-child { margin-bottom: 0; }

/* ---------- 練習問題 ---------- */
.exercise {
  background: var(--exercise-bg);
  border: 1px solid var(--exercise-border);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 0 0 20px;
}
.exercise .ex-no { font-weight: 700; margin-bottom: 6px; display: block; }
details.answer {
  margin-top: 12px;
  border-top: 1px dashed var(--exercise-border);
  padding-top: 10px;
}
details.answer summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--accent);
  font-size: 0.9rem;
}
details.answer > *:not(summary) { margin-top: 12px; }

/* ---------- 表 ---------- */
.table-wrap { overflow-x: auto; margin: 0 0 20px; }
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;
  background: var(--bg-panel);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
th, td {
  border: 1px solid var(--border);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
th { background: var(--accent-soft); font-weight: 700; }

/* ---------- 前後の章ナビ ---------- */
#pager {
  display: flex;
  gap: 16px;
  margin-top: 64px;
}
#pager a {
  flex: 1;
  display: block;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow);
}
#pager a:hover { border-color: var(--accent); }
#pager .pager-label { font-size: 0.75rem; color: var(--text-sub); display: block; }
#pager .pager-title { font-weight: 700; color: var(--accent); font-size: 0.95rem; }
#pager a.next { text-align: right; }

/* ---------- トップページ ---------- */
.hero {
  background: linear-gradient(135deg, #1d3461, #24427c 55%, #2f5aa8);
  color: #eef3fb;
  border-radius: 16px;
  padding: 48px 44px;
  margin-bottom: 44px;
}
.hero h1 { color: #fff; font-size: 2.1rem; }
.hero p { color: #ccdaf0; max-width: 640px; }
.hero .badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.hero .badge {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
}

.chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin: 0 0 24px;
}
.chapter-card {
  display: block;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow);
  transition: transform 0.12s, border-color 0.12s;
}
.chapter-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.chapter-card .ch-no {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  display: block;
  margin-bottom: 4px;
}
.chapter-card .ch-title { font-weight: 700; display: block; margin-bottom: 6px; }
.chapter-card .ch-desc { font-size: 0.84rem; color: var(--text-sub); line-height: 1.6; display: block; }

/* ---------- 本文中の用語(ホバーで解説) ---------- */
main h2, .g-item { scroll-margin-top: calc(var(--header-h) + 14px); }

.term {
  border-bottom: 1px dashed var(--accent);
  cursor: help;
  transition: background 0.12s;
}
.term:hover, .term:focus {
  background: var(--accent-soft);
  outline: none;
  border-radius: 3px;
}

#term-tip {
  position: fixed;
  z-index: 80;
  max-width: 340px;
  background: var(--bg-panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.22);
  padding: 12px 15px;
  font-size: 0.84rem;
  line-height: 1.7;
  pointer-events: none;
}
#term-tip .tip-term { font-weight: 700; margin-right: 8px; }
#term-tip .tip-cat {
  font-size: 0.72rem;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 1px 9px;
  white-space: nowrap;
}
#term-tip p { margin: 6px 0 4px; }
#term-tip .tip-more { font-size: 0.74rem; color: var(--text-sub); }

/* ---------- サイト内検索 ---------- */
#search-ov {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(10, 15, 29, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 9vh 16px 16px;
}
#search-ov[hidden] { display: none; }
#search-panel {
  width: min(660px, 100%);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 74vh;
}
#search-in {
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  font-size: 1.02rem;
  padding: 16px 18px;
  outline: none;
  font-family: inherit;
}
#search-results { overflow-y: auto; flex: 1; }
#search-results .sr-count,
#search-results .sr-empty {
  margin: 0;
  padding: 12px 18px;
  font-size: 0.82rem;
  color: var(--text-sub);
}
.sr-item {
  display: block;
  padding: 10px 18px;
  text-decoration: none;
  color: var(--text);
  border-top: 1px solid var(--border);
}
.sr-item:hover, .sr-item.active { background: var(--accent-soft); }
.sr-item .sr-meta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.sr-item .sr-track {
  font-size: 0.7rem;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 8px;
  white-space: nowrap;
}
.sr-item.active .sr-track, .sr-item:hover .sr-track { background: var(--bg-panel); }
.sr-item .sr-page { font-weight: 700; font-size: 0.88rem; }
.sr-item .sr-x {
  display: block;
  font-size: 0.8rem;
  color: var(--text-sub);
  line-height: 1.6;
  margin-top: 2px;
}
.sr-item .sr-x mark {
  background: none;
  color: var(--accent);
  font-weight: 700;
}
#search-hint {
  padding: 8px 18px;
  font-size: 0.72rem;
  color: var(--text-sub);
  border-top: 1px solid var(--border);
  background: var(--bg);
}
body.search-open { overflow: hidden; }

/* ---------- 用語集ページ ---------- */
.g-toolbar { margin: 0 0 10px; }
#g-filter {
  width: 100%;
  font-size: 1rem;
  font-family: inherit;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  box-shadow: var(--shadow);
}
#g-filter:focus { outline: none; border-color: var(--accent); }
.g-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.g-cat-btn {
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-sub);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.g-cat-btn:hover { border-color: var(--accent); color: var(--accent); }
.g-cat-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.g-count { color: var(--text-sub); font-size: 0.84rem; }
dl.glossary { margin: 0; }
.g-item {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 0 0 10px;
  box-shadow: var(--shadow);
}
.g-item dt { font-weight: 700; font-size: 1rem; }
.g-item dt .g-alias {
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--text-sub);
  margin-left: 6px;
}
.g-item dd { margin: 6px 0 0; font-size: 0.92rem; color: var(--text); }
.g-item.g-hit { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- 学習ロードマップ ---------- */
.rm-progress-wrap { margin: 0 0 20px; }
.rm-stats { margin: 0 0 8px; font-weight: 700; color: var(--accent); font-size: 0.95rem; }
.rm-progress {
  height: 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  overflow: hidden;
}
.rm-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.rm-wk-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-sub);
  margin-left: 8px;
}
.rm-list { margin: 0 0 8px; }
.rm-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 0 0 8px;
  box-shadow: var(--shadow);
}
.rm-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 4px 0 0;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.rm-item .rm-no {
  font-weight: 700;
  color: var(--accent);
  min-width: 2em;
  text-align: right;
  flex-shrink: 0;
}
.rm-item .rm-body { line-height: 1.6; }
.rm-item a { font-weight: 600; text-decoration: none; }
.rm-item a:hover { text-decoration: underline; }
.rm-item .rm-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 1px 10px;
  margin-left: 6px;
  white-space: nowrap;
}
.rm-item.done { opacity: 0.55; }
.rm-item.done a { text-decoration: line-through; }
.rm-item.rm-next {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.rm-item.rm-next .rm-no::after { content: " ▶"; font-size: 0.8em; }
.rm-sync-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.rm-sync-btns button {
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.rm-sync-btns button:hover { border-color: var(--accent); color: var(--accent); }
.rm-sync-btns button[hidden] { display: none; }
#rm-sync-status { font-weight: 600; }
.rm-sync-note { font-size: 0.82rem; color: var(--text-sub); margin-bottom: 0; }

/* ---------- モバイル ---------- */
#menu-btn { display: none; }
@media (max-width: 900px) {
  #menu-btn { display: inline-block; }
  #sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 60;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
  }
  body.sidebar-open #sidebar { transform: translateX(0); }
  main { padding: calc(var(--header-h) + 16px) 20px 60px; }
  .hero { padding: 32px 24px; }
  #pager { flex-direction: column; }
}