/* ── 柯的筆記天地 — 資訊網路 共用樣式 ── */

:root {
  --bg: #f8f9fa;
  --surface: #ffffff;
  --border: rgba(49,108,244,0.12);
  --accent: #316cf4;
  --accent-dim: rgba(49,108,244,0.08);
  --accent-text: #1a3aad;
  --text: #1a1a1a;
  --muted: #5a5a6a;
  --muted-2: #9090a0;
  --card-shadow: 0 2px 12px rgba(49,108,244,0.07);
  --card-shadow-hover: 0 6px 24px rgba(49,108,244,0.14);
  --sidebar-w: 240px;
  --radius: 10px;
  --code-bg: #f0f4ff;
  --success: #10b981;
  --warning: #f59e0b;
  /* ── CH8/CH9 IPv4 vs IPv6 系統 ── */
  --ipv4-color: #1a56db;
  --ipv4-bg: #eff6ff;
  --ipv4-dim: rgba(26,86,219,0.08);
  --ipv6-color: #0e7490;
  --ipv6-bg: #ecfeff;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang TC', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  font-size: 15px;
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1.5px solid var(--border);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 1.5rem 1rem;
}
.sidebar-course {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.sidebar-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 1.25rem;
  line-height: 1.3;
}
.sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 0.75rem 0;
}
.sidebar-section-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.sidebar-link {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.88rem;
  transition: background 0.15s, color 0.15s;
  margin-bottom: 2px;
}
.sidebar-link:hover {
  background: var(--accent-dim);
  color: var(--accent-text);
}
.sidebar-link.active {
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 600;
}
.sidebar-link .note-date {
  display: block;
  font-size: 0.72rem;
  color: var(--muted-2);
  margin-top: 1px;
}
.sidebar-link.stub {
  color: var(--muted-2);
  cursor: default;
  opacity: 0.6;
}
.sidebar-link.stub:hover {
  background: transparent;
  color: var(--muted-2);
}

/* ── Main Content ── */
.content {
  flex: 1;
  padding: 2.5rem 3rem;
  max-width: 820px;
}

/* ── Note Header ── */
.note-header {
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1.5px solid var(--border);
}
.note-date {
  font-size: 0.82rem;
  color: var(--muted-2);
  font-weight: 500;
  margin-bottom: 0.4rem;
}
.note-title {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 0.5rem;
}
.note-tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.note-tag {
  font-size: 0.72rem;
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
  background: var(--accent-dim);
  color: var(--accent-text);
  font-weight: 600;
}

/* ── Typography ── */
h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1.5px solid var(--border);
}
h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-text);
  margin: 1.25rem 0 0.5rem;
}
p { margin-bottom: 0.85rem; }
ul, ol { margin: 0.5rem 0 0.85rem 1.25rem; }
li { margin-bottom: 0.35rem; }

strong { font-weight: 700; color: var(--text); }

/* ── Concept Card ── */
.concept-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin: 1rem 0;
  box-shadow: var(--card-shadow);
}
.concept-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.concept-card-desc {
  margin-top: 0.6rem;
  padding: 0.75rem 1rem;
  background: var(--bg);
  border-radius: 6px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text);
}
.concept-card ul,
.concept-card ol {
  margin: 0.5rem 0 0.5rem 1.25rem;
  padding-left: 0.25rem;
}
.concept-card li {
  margin-bottom: 0.35rem;
  line-height: 1.55;
}
.concept-card li:last-child { margin-bottom: 0; }
.concept-card table {
  margin-top: 0.5rem;
}
.concept-card p:last-child { margin-bottom: 0; }

/* ── Protocol/Header Card ── */
.layer-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 0.75rem 0;
  border-left: 4px solid var(--accent);
}
.layer-card-num {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.2rem;
}
.layer-card-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-text);
  margin-bottom: 0.5rem;
}
.layer-card-desc {
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.layer-card-desc ul,
.layer-card-desc ol {
  margin: 0.5rem 0 0.5rem 1.25rem;
  padding-left: 0.25rem;
}
.layer-card-desc li {
  margin-bottom: 0.3rem;
  line-height: 1.55;
}
.layer-card-desc li:last-child { margin-bottom: 0; }
.layer-card table {
  margin-top: 0.75rem;
}
.layer-card pre {
  margin: 0.75rem 0;
}
.layer-card ul {
  margin: 0.5rem 0 0.5rem 1.25rem;
}
.layer-card li {
  margin-bottom: 0.3rem;
  line-height: 1.55;
}

 /* ── UDP / TCP 標頭格子元件 ── */
.header-box-grid {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.header-box-item {
  flex: 1;
  min-width: 120px;
  background: var(--accent-dim);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  text-align: center;
}
.header-box-item .field-label {
  font-size: 0.72rem;
  color: var(--muted-2);
}
.header-box-item .field-name {
  font-weight: 700;
  color: var(--accent-text);
}

/* ── ASCII 流程圖 <pre> 統一樣式 ── */
.code-diagram {
  margin: 0.75rem 0;
  background: #1e2530;
  color: #c9d1d9;
  font-size: 0.8rem;
  line-height: 1.6;
}

/* ── 頁尾 ── */
.note-footer a {
  color: var(--accent);
}

/* ── Header Field Row（名稱: 值 橫排）── */
.header-field {
  display: flex;
  gap: 0.5rem;
  font-size: 0.82rem;
  padding: 0.2rem 0;
  border-bottom: 1px dashed var(--border);
}
.header-field:last-child { border-bottom: none; }
.header-field-name {
  font-weight: 700;
  color: var(--accent-text);
  min-width: 90px;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
}
.header-field-desc { color: var(--muted); }

/* ── Code / Inline ── */
code {
  font-family: 'Courier New', Courier, monospace;
  background: var(--code-bg);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.85em;
  color: var(--accent-text);
}
pre {
  background: #1e2530;
  color: #c9d1d9;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 1rem 0;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.85rem;
  line-height: 1.6;
}
pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* ── Comparison Table ── */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.88rem;
}
.compare-table th {
  background: var(--accent-dim);
  color: var(--accent-text);
  font-weight: 700;
  padding: 0.6rem 0.85rem;
  text-align: left;
  border-bottom: 2px solid var(--accent);
}
.compare-table td {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.compare-table tr:hover td { background: var(--accent-dim); }

/* ── Highlight Box ── */
.highlight-box {
  background: #fffbeb;
  border: 1.5px solid #f59e0b;
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  margin: 1rem 0;
  font-size: 0.9rem;
}
.highlight-box::before {
  content: '💡 ';
  font-size: 0.85rem;
}

/* ── Two Column Grid ── */
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* ── ARP Flow（CH10 步驟流程圖）── */
.arp-flow {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1rem 0;
}
.arp-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.88rem;
}
.arp-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arp-step-arrow {
  text-align: center;
  color: var(--primary);
  font-size: 1.2rem;
  font-weight: 700;
  padding: 0.1rem 0;
}
.arp-step-success {
  border-color: #22c55e;
  background: #f0fdf4;
}
.arp-step-success .arp-step-num {
  background: #22c55e;
}
.arp-step-broadcast {
  border-color: #f59e0b;
  background: #fffbeb;
}
.arp-step-broadcast .arp-step-num {
  background: #f59e0b;
}

/* ── ICMP Type 雙欄分類卡片（CH10）── */
.icmp-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}
.icmp-type-card {
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  border: 1.5px solid;
}
.icmp-type-card.error {
  background: #fef2f2;
  border-color: #ef4444;
}
.icmp-type-card.query {
  background: #f0fdf4;
  border-color: #22c55e;
}
.icmp-type-card-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.6rem;
}
.icmp-type-card.error .icmp-type-card-title { color: #dc2626; }
.icmp-type-card.query .icmp-type-card-title { color: #16a34a; }
.icmp-type-item {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
}
.icmp-type-item:last-child { margin-bottom: 0; }
.icmp-type-num {
  font-weight: 700;
  color: var(--primary);
  min-width: 2.5rem;
}
.icmp-type-name { color: var(--text); }

/* ── ARP/RARP 比較左右卡片（CH10）── */
.arp-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}
.arp-compare-card {
  padding: 1rem;
  border-radius: var(--radius);
  border: 2px solid;
}
.arp-compare-card.arp {
  background: #eff6ff;
  border-color: #3b82f6;
}
.arp-compare-card.rarp {
  background: #faf5ff;
  border-color: #a855f7;
}
.arp-compare-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.arp-compare-card.arp .arp-compare-title { color: #1d4ed8; }
.arp-compare-card.rarp .arp-compare-title { color: #7e22ce; }
.arp-compare-row {
  display: flex;
  gap: 0.4rem;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
  align-items: baseline;
}
.arp-compare-label {
  color: #6b7280;
  min-width: 4rem;
}
.arp-compare-val { font-weight: 600; color: var(--text); }
.arp-compare-arrow {
  font-size: 1.1rem;
  text-align: center;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1.5rem;
}

/* ── ARP 9欄位視覺化（CH10）── */
.arp-9field {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.5rem;
  margin: 1rem 0;
}
.arp-9field-item {
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.8rem;
  border: 1.5px solid;
}
.arp-9field-item.fixed {
  background: #eff6ff;
  border-color: #3b82f6;
}
.arp-9field-item.variable {
  background: #f0fdf4;
  border-color: #22c55e;
}
.arp-9field-item.operation {
  background: #fef9c3;
  border-color: #eab308;
}
.arp-9field-name {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.2rem;
}
.arp-9field-meta {
  color: #6b7280;
  font-size: 0.75rem;
}
.arp-9field-legend {
  font-size: 0.8rem;
  color: #6b7280;
  margin-top: 0.25rem;
}
.arp-flow-context {
  margin-bottom: 0.5rem;
  font-size: 0.88rem;
  color: #6b7280;
}
.arp-compare-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #6b7280;
}

/* ── Destination Unreachable 分群（CH10）── */
.dest-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.5rem;
  margin: 1rem 0;
}
.dest-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.85rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border);
}
.dest-item:last-child { border-bottom: none; }
.dest-code {
  font-weight: 700;
  color: var(--primary);
  min-width: 2.5rem;
}
.dest-reason { color: var(--text); }

.compare-table {
  margin-top: 0.5rem;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

 /* ── Question Section ── */
.question-section {
  text-align: center;
  padding: 2rem;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-radius: 12px;
  margin: 2rem 0;
}
.question-section h2 {
  border: none;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

/* ── Stack Diagram ── */
.stack-diagram {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 1rem 0;
  max-width: 380px;
}
.stack-layer {
  background: var(--accent);
  color: white;
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.stack-layer.app { background: #316cf4; }
.stack-layer.trans { background: #0891b2; }
.stack-layer.net { background: #059669; }
.stack-layer.data { background: #64748b; }
.stack-layer.phys { background: #6b7280; }
.stack-layer-label { opacity: 0.85; font-size: 0.78rem; }

/* ── Footer ── */
.note-footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1.5px solid var(--border);
  font-size: 0.82rem;
  color: var(--muted-2);
  display: flex;
  justify-content: space-between;
}

/* ── Responsive ── */
@media (max-width: 680px) {
  body { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; border-right: none; border-bottom: 1.5px solid var(--border); }
  .content { padding: 1.5rem 1.25rem; }
}

/* ── Section Separation ── */
.content section {
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1.5px solid var(--border);
}
.content section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

/* ── Table Enhancement ── */
.compare-table {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
.compare-table th {
  background: var(--accent) !important;
  color: #ffffff !important;
  font-weight: 700;
  padding: 0.65rem 0.9rem;
  text-align: left;
  border-bottom: 2px solid var(--accent) !important;
}
.compare-table td {
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.compare-table tr:nth-child(even) td {
  background: rgba(49,108,244,0.04);
}
.compare-table tr:last-child td {
  border-bottom: none;
}
.compare-table tr:hover td {
  background: var(--accent-dim);
}

/* ── TOC Grid（CH8/CH9 大綱）── */
.toc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 1.5rem;
  margin-bottom: 1.5rem;
}
.toc-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--muted);
  padding: 0.3rem 0;
  border-bottom: 1px dashed var(--border);
}
.toc-item:last-child { border-bottom: none; }
.toc-num {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  min-width: 1.5rem;
}

/* ── IP 彩色標籤（CH8/CH9）── */
.ip-block {
  border-radius: var(--radius);
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-block;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.ip-block.ipv4 { background: var(--ipv4-bg); color: var(--ipv4-color); }
.ip-block.ipv6 { background: var(--ipv6-bg); color: var(--ipv6-color); }

/* ── Header Diagram（CH8/CH9/CH10 深色程式碼區塊）── */
.header-diagram {
  background: #1e2530;
  color: #c9d1d9;
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  line-height: 1.8;
  margin: 0.75rem 0;
  overflow-x: auto;
}
.header-diagram .field { color: #79c0ff; }
.header-diagram .bits { color: #8b949e; }
.header-diagram .note { color: #7ee787; }

/* ── Formula（CH8 內聯公式）── */
code.formula,
span.formula {
  font-family: 'Courier New', monospace;
  background: var(--code-bg);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.88em;
  color: var(--accent-text);
}

/* ── IPv6 Section（左側紫色豎線）── */
.ipv6-section {
  border-left: 4px solid #0e7490;
  padding-left: 1rem;
  margin-left: 0.5rem;
}

/* ── 步驟流程（.step-flow）── */
.frame-structure {
  margin: 20px 0;
  padding: 15px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  box-shadow: var(--card-shadow);
}
.frame-label {
  font-size: 0.82rem;
  color: var(--muted-2);
  margin-bottom: 10px;
  font-weight: 600;
}
.frame-bar {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  min-height: 46px;
  border: 1px solid var(--border);
}
.frame-segment {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background: var(--accent);
  border-right: 1px solid rgba(255,255,255,0.25);
  line-height: 1.3;
}
.frame-segment:last-child { border-right: none; }
.frame-segment span { font-weight: 400; font-size: 0.68rem; opacity: 0.85; display: block; }
.frame-segment.data { background: #4a90d9; }
.frame-total {
  margin-top: 10px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-text);
  padding: 0.4rem;
  background: var(--accent-dim);
  border-radius: 6px;
}
.field-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.field-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: var(--card-shadow);
}
.field-card-name { font-weight: 700; color: var(--accent); font-size: 0.88rem; margin-bottom: 3px; }
.field-card-size { font-size: 0.72rem; color: var(--muted-2); margin-bottom: 6px; font-weight: 600; }
.field-card-desc { font-size: 0.8rem; color: var(--muted); line-height: 1.5; }
.field-card-desc br { line-height: 1.8; }

/* ── 步驟流程（.step-flow）── */
.step-flow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 1rem 0;
}
.step-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
}
.step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.step-text {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.5;
  padding-top: 2px;
}

/* ── 時間線（.timeline）── */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 1.25rem 0;
  padding-left: 4px;
  border-left: 3px solid var(--accent);
}
.timeline-item {
  padding: 10px 16px;
  position: relative;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
}
.timeline-year {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 4px;
}
.timeline-content {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.5;
}
.timeline-note {
  display: block;
  font-size: 0.78rem;
  color: var(--muted-2);
  margin-top: 3px;
}

/* ── 延伸學習（.learn-more）── */
.learn-more {
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border: 1.5px solid rgba(49,108,244,0.2);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 1rem 0;
}
.learn-more-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0369a1;
  margin-bottom: 6px;
}
.learn-more p {
  font-size: 0.88rem;
  color: var(--text);
  margin-bottom: 0;
  line-height: 1.6;
}

/* ── 狀態標籤（.status-badge）── */
.status-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
}
.status-badge.active { background: #d1fae5; color: #065f46; }
.status-badge.retired { background: #f3f4f6; color: #6b7280; }
.status-badge.paused { background: #fef3c7; color: #92400e; }

/* ── 優先級標籤（.priority）── */
.priority { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 20px; font-size: 0.72rem; font-weight: 700; }
.priority.p1 { background: #d1fae5; color: #065f46; }
.priority.p2 { background: #dbeafe; color: #1e40af; }
.priority.p3 { background: #fef3c7; color: #92400e; }
.priority.p4 { background: #fee2e2; color: #991b1b; }

/* ── Footer ── */
.note-footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1.5px solid var(--border);
  font-size: 0.82rem;
  color: var(--muted-2);
  display: flex;
  justify-content: space-between;
}
.content-footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1.5px solid var(--border);
  font-size: 0.82rem;
  color: var(--muted-2);
  text-align: center;
}

/* ── Section Separation ── */
.content > h2 {
  padding-bottom: 0.6rem;
  margin-bottom: 1.25rem;
  margin-top: 2.5rem;
  border-bottom: 1.5px solid var(--border);
}
.content > h2:first-child {
  margin-top: 0;
}

/* ── IP 標頭比例圖（CH8 IPv4 視覺化）── */
.ip-header-bar {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  min-height: 44px;
  border: 1px solid var(--border);
  margin: 14px 0;
}
.ip-header-segment {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 3px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.3;
  background: #4a90d9;
}
.ip-header-segment span { font-weight: 400; font-size: 0.62rem; opacity: 0.85; display: block; }
.ip-header-segment.ver { background: var(--ipv4-color); flex: 1; }
.ip-header-segment.ihl { background: #5b9fe8; flex: 1; }
.ip-header-segment.tos { background: #6baae8; flex: 2; }
.ip-header-segment.tl { background: #7bb5f0; flex: 4; }
.ip-header-segment.id { background: #3a7fc1; flex: 4; }
.ip-header-segment.flags { background: #5a9fd4; flex: 0.5; }
.ip-header-segment.fo { background: #4a8fc5; flex: 3; }
.ip-header-segment.ttl { background: #2d6ca8; flex: 2; }
.ip-header-segment.prot { background: #3a7fc1; flex: 2; }
.ip-header-segment.hc { background: #5b9fd4; flex: 4; }
.ip-header-segment.sa { background: var(--ipv4-color); flex: 8; }
.ip-header-segment.da { background: #5b9fe8; flex: 8; }
.ip-header-segment.opt { background: #8b9eb0; flex: 2; }

/* ── AND 運算視覺圖（CH8 網路遮罩）── */
.and-examples {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.and-example {
  flex: 1;
  min-width: 200px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--card-bg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.and-example-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.75rem;
  background: rgba(49,108,244,0.06);
  border-bottom: 1px solid var(--border);
  font-size: 0.72rem;
}

.and-example-header.diff {
  background: #fef3c7;
  border-bottom-color: #f59e0b;
}

.and-example-num {
  font-weight: 700;
  color: var(--accent-text);
}

.and-example-header.diff .and-example-num {
  color: #92400e;
}

.and-example-desc {
  color: var(--muted-2);
}

.and-example-header.diff .and-example-desc {
  color: #92400e;
}

.and-visual {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0.75rem;
  margin: 0;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
}
.and-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 6px;
}
.and-row.label { background: var(--code-bg); font-weight: 700; color: var(--accent-text); }
.and-row.ip { color: var(--ipv4-color); }
.and-row.mask { color: var(--muted); }
.and-row.result { background: var(--ipv4-dim); border-color: var(--ipv4-color); font-weight: 700; color: var(--ipv4-color); }
.and-operator {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.and-label {
  font-size: 0.75rem;
  color: var(--muted-2);
  min-width: 40px;
}

/* ── 密集表格增強（子網路速查表）── */
.dense-table {
  font-size: 0.8rem;
}
.dense-table th {
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 700;
  padding: 0.45rem 0.75rem;
}
.dense-table td {
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.dense-table tr:nth-child(even) td {
  background: rgba(49,108,244,0.04);
}
.dense-table tr:last-child td {
  border-bottom: none;
}

/* ── IP Class 分類卡片（CH8）── */
.ip-class-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 1rem 0;
}
.ip-class-card {
  border-radius: var(--radius);
  padding: 12px 10px;
  text-align: center;
  background: var(--surface);
  border: 1.5px solid var(--border);
  box-shadow: var(--card-shadow);
}
.ip-class-card.class-a { border-top: 4px solid var(--ipv4-color); }
.ip-class-card.class-b { border-top: 4px solid #5b9fe8; }
.ip-class-card.class-c { border-top: 4px solid #7bb5f0; }
.ip-class-card.class-d { border-top: 4px solid #9090a0; }
.ip-class-card.class-e { border-top: 4px solid #6b7280; }
.ip-class-name { font-size: 1.2rem; font-weight: 800; color: var(--ipv4-color); margin-bottom: 4px; }
.ip-class-range { font-size: 0.78rem; color: var(--muted); margin-bottom: 4px; }
.ip-class-hosts { font-size: 0.72rem; font-weight: 600; color: var(--success); }
.ip-class-badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 700;
  margin-top: 4px;
}
.badge-unicast { background: #d1fae5; color: #065f46; }
.badge-multicast { background: #fef3c7; color: #92400e; }
.badge-reserved { background: #f3f4f6; color: #6b7280; }

/* ── DNS 查詢流程圖（CH8）── */
.dns-flow {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 1rem 0;
  overflow-x: auto;
  padding: 4px 0;
}
.dns-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  text-align: center;
  min-width: 90px;
  box-shadow: var(--card-shadow);
}
.dns-node-name { font-size: 0.82rem; font-weight: 700; color: var(--accent); margin-bottom: 3px; }
.dns-node-desc { font-size: 0.72rem; color: var(--muted-2); }
.dns-arrow {
  font-size: 1.2rem;
  color: var(--accent);
  flex-shrink: 0;
  padding: 0 4px;
}

/* ── 響應式 ── */
@media (max-width: 680px) {
  .ip-class-grid { grid-template-columns: repeat(2, 1fr); }
  .dns-flow { flex-direction: column; }
  .dns-arrow { transform: rotate(90deg); }
  .and-visual { font-size: 0.78rem; }
  .subsystem-grid { grid-template-columns: 1fr 1fr; }
  .mdf-idf-diagram { flex-direction: column; }
  .backbone-type-grid { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════
   CH6 — 網路規劃設計 專用元件
   ══════════════════════════════════════════ */

/* ── 六大子系統視覺化卡片（.subsystem-grid）── */
.subsystem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 1.25rem 0;
}
.subsystem-card {
  border-radius: var(--radius);
  padding: 14px 12px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  box-shadow: var(--card-shadow);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.subsystem-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.subsystem-card.sys1::before { background: #316cf4; }
.subsystem-card.sys2::before { background: #0891b2; }
.subsystem-card.sys3::before { background: #059669; }
.subsystem-card.sys4::before { background: #f59e0b; }
.subsystem-card.sys5::before { background: #7c3aed; }
.subsystem-card.sys6::before { background: #dc2626; }
.subsystem-icon {
  font-size: 1.8rem;
  margin-bottom: 6px;
  display: block;
}
.subsystem-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 3px;
}
.subsystem-sub {
  font-size: 0.72rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 6px;
}
.subsystem-desc {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
}

/* ── 纜線長度比例圖（.cable-length-bar）── */
.cable-length-bar {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  min-height: 48px;
  border: 1px solid var(--border);
  margin: 1rem 0;
}
.cable-segment {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.3;
}
.cable-segment span { font-weight: 400; font-size: 0.65rem; opacity: 0.85; display: block; }
.cable-segment.horizontal { background: #316cf4; flex: 90; }
.cable-segment.work { background: #7bb5f0; flex: 3; }
.cable-segment.patch { background: #5b9fe8; flex: 3; }
.cable-total {
  margin-top: 10px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-text);
  padding: 0.4rem;
  background: var(--accent-dim);
  border-radius: 6px;
}

/* ── MDF/IDF 架構圖（.mdf-idf-diagram）── */
.mdf-idf-diagram {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 1.25rem 0;
  overflow-x: auto;
  padding: 4px 0;
}
.mdf-box {
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
  border: 2px solid var(--accent);
  border-radius: 10px;
  padding: 12px 16px;
  text-align: center;
  min-width: 120px;
  box-shadow: var(--card-shadow);
}
.mdf-box-name { font-size: 0.95rem; font-weight: 800; color: var(--accent); margin-bottom: 2px; }
.mdf-box-sub { font-size: 0.72rem; color: var(--muted-2); font-weight: 600; }
.mdf-box-desc { font-size: 0.75rem; color: var(--muted); margin-top: 4px; }
.idf-box {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  text-align: center;
  min-width: 100px;
  box-shadow: var(--card-shadow);
}
.idf-box-name { font-size: 0.9rem; font-weight: 700; color: #0891b2; margin-bottom: 2px; }
.idf-box-sub { font-size: 0.7rem; color: var(--muted-2); font-weight: 600; }
.idf-box-desc { font-size: 0.72rem; color: var(--muted); margin-top: 4px; }
.diagram-arrow {
  font-size: 1.4rem;
  color: var(--accent);
  flex-shrink: 0;
}
.diagram-label {
  font-size: 0.72rem;
  color: var(--muted-2);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
.diagram-label.vertical { writing-mode: vertical-lr; transform: rotate(180deg); }

/* ── Rack Unit 視覺圖（.rack-visual）── */
.rack-visual {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0.75rem 0;
  font-family: 'Courier New', monospace;
}
.rack-slot {
  width: 36px;
  height: 36px;
  border: 2px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted-2);
}
.rack-slot.filled { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-text); }
.rack-label { font-size: 0.8rem; color: var(--muted); }
.rack-label strong { color: var(--accent); }

/* ── 骨幹佈線四大型態（.backbone-type-grid）── */
.backbone-type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 1rem 0;
}
.backbone-type-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
}
.backbone-type-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1.3;
}
.backbone-type-text {}
.backbone-type-title { font-size: 0.88rem; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.backbone-type-desc { font-size: 0.78rem; color: var(--muted); line-height: 1.4; }

/* ── 規劃流程視覺圖（.planning-flow）── */
.planning-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 1rem 0;
}
.planning-step {
  text-align: center;
  padding: 14px 10px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  position: relative;
}
.planning-step::after {
  content: '→';
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  color: var(--accent);
  font-weight: 700;
}
.planning-step:last-child::after { display: none; }
.planning-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
}
.planning-step-icon { font-size: 1.6rem; display: block; margin-bottom: 6px; }
.planning-step-title { font-size: 0.88rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.planning-step-desc { font-size: 0.75rem; color: var(--muted); line-height: 1.4; }

/* ── 校園網路架構圖（.campus-network-diagram）── */
.campus-network-diagram {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 1rem 0;
  padding: 16px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}
.campus-layer {
  display: flex;
  align-items: center;
  gap: 10px;
}
.campus-layer-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  min-width: 50px;
}
.campus-node {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
}
/* ── TCP/UDP 比較雙欄（CH9）── */
.tcp-udp-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}
.tcp-card, .udp-card {
  padding: 1rem;
  border-radius: var(--radius);
  border: 2px solid;
}
.tcp-card {
  background: #eff6ff;
  border-color: #3b82f6;
}
.udp-card {
  background: #f0fdf4;
  border-color: #22c55e;
}
.tcp-card-title, .udp-card-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.tcp-card-title { color: #1d4ed8; }
.udp-card-title { color: #15803d; }
.tcp-card-prop, .udp-card-prop {
  font-size: 0.85rem;
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
  align-items: baseline;
}
.tcp-card-prop { color: #1e40af; }
.udp-card-prop { color: #166534; }
.prop-label {
  color: #6b7280;
  min-width: 3.5rem;
  font-size: 0.8rem;
}
.prop-val { font-weight: 600; }
.tcp-card-apps, .udp-card-apps {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: #6b7280;
}
.tcp-apps-list { color: #3b82f6; font-weight: 600; }
.udp-apps-list { color: #22c55e; font-weight: 600; }

/* ── Port 類型彩色分類（CH9）── */
.port-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 1rem 0;
}
.port-type-card {
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1.5px solid;
}
.port-type-card.well-known {
  background: #fef2f2;
  border-color: #ef4444;
}
.port-type-card.registered {
  background: #fffbeb;
  border-color: #f59e0b;
}
.port-type-card.dynamic {
  background: #f0fdf4;
  border-color: #22c55e;
}
.port-type-name {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}
.port-type-card.well-known .port-type-name { color: #dc2626; }
.port-type-card.registered .port-type-name { color: #d97706; }
.port-type-card.dynamic .port-type-name { color: #16a34a; }
.port-type-range {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.port-type-desc {
  font-size: 0.8rem;
  color: #6b7280;
}

/* ── Port 表格 Protocol Badge（CH9）── */
.proto-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
}
.proto-badge.tcp {
  background: #dbeafe;
  color: #1d4ed8;
}
.proto-badge.udp {
  background: #dcfce7;
  color: #15803d;
}
.proto-badge.both {
  background: #fef3c7;
  color: #d97706;
}

/* ── 控制旗標彩色 Badge 網格（CH9）── */
.flag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.5rem;
  margin: 1rem 0;
}
.flag-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1.5px solid var(--border);
  font-size: 0.82rem;
}
.flag-abbr {
  font-weight: 700;
  font-size: 0.88rem;
  min-width: 2.2rem;
  color: var(--primary);
}
.flag-name { color: var(--text); }
.flag-item.established {
  border-color: #22c55e;
  background: #f0fdf4;
}
.flag-item.established .flag-abbr { color: #15803d; }

/* ── TCP 標頭欄位加強（CH9）── */
.header-field {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
}
.header-field:last-child { border-bottom: none; }
.header-field-name {
  font-weight: 700;
  color: var(--primary);
  min-width: 5.5rem;
  font-size: 0.85rem;
}
.header-field-desc {
  font-size: 0.85rem;
  color: var(--text);
}

/* ── 三向交握時序圖（CH9）── */
.handshake-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 1rem 0;
}
.hs-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  min-height: 36px;
}
.hs-client { justify-content: flex-start; }
.hs-server { justify-content: flex-end; }
.hs-center { justify-content: center; font-size: 0.8rem; color: var(--muted); }
.hs-label {
  font-weight: 700;
  min-width: 4rem;
  text-align: center;
  font-size: 0.8rem;
}
.hs-line {
  flex: 1;
  height: 2px;
  position: relative;
  margin: 0 0.5rem;
}
.hs-line.right { background: #3b82f6; }
.hs-line.left { background: #22c55e; }
.hs-line.right::after {
  content: '▶';
  position: absolute;
  right: -2px;
  top: -9px;
  font-size: 0.8rem;
  color: #3b82f6;
}
.hs-line.left::after {
  content: '◀';
  position: absolute;
  left: -2px;
  top: -9px;
  font-size: 0.8rem;
  color: #22c55e;
}
.hs-annotation {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}
.hs-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hs-step-client {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}
.hs-step-server {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  justify-content: flex-end;
}

/* ── 四向終止時序圖（CH9）── */
.term-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 1rem 0;
}
.term-row {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  min-height: 36px;
}
.term-client { justify-content: flex-start; }
.term-server { justify-content: flex-end; }
.term-center { justify-content: center; font-size: 0.8rem; color: var(--muted); }
.term-line {
  flex: 1;
  height: 2px;
  position: relative;
  margin: 0 0.5rem;
}
.term-line.right { background: #ef4444; }
.term-line.left { background: #f59e0b; }
.term-line.right::after {
  content: '▶';
  position: absolute;
  right: -2px;
  top: -9px;
  font-size: 0.8rem;
  color: #ef4444;
}
.term-line.left::after {
  content: '◀';
  position: absolute;
  left: -2px;
  top: -9px;
  font-size: 0.8rem;
  color: #f59e0b;
}

/* ── 偽標頭視覺化（CH9）── */
.pseudo-header-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
  margin: 0.75rem 0;
}
.pseudo-header-item {
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius);
  background: #eff6ff;
  border: 1.5px solid #3b82f6;
  font-size: 0.8rem;
}
.pseudo-header-item .ph-name {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.15rem;
}
.pseudo-header-item .ph-meta {
  color: #6b7280;
  font-size: 0.75rem;
}

/* ── 尋徑流程圖（CH11）── */
.routing-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 1rem 0;
}
.rf-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  min-height: 40px;
}
.rf-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rf-content {
  flex: 1;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1.5px solid var(--border);
}
.rf-content strong { color: var(--primary); }
.rf-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-2);
  font-size: 1rem;
  padding-left: 0.75rem;
}

/* ── 尋徑類型彩色分類（CH11）── */
.routing-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.rt-item {
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 2px solid;
}
.rt-item.static {
  background: #f9fafb;
  border-color: #9ca3af;
}
.rt-item.dynamic {
  background: #eff6ff;
  border-color: #3b82f6;
}
.rt-item.dv {
  background: #fffbeb;
  border-color: #f59e0b;
}
.rt-item.ls {
  background: #f0fdf4;
  border-color: #22c55e;
}
.rt-item.hybrid {
  background: #fdf4ff;
  border-color: #a855f7;
}
.rt-name {
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 0.3rem;
}
.rt-item.static .rt-name { color: #6b7280; }
.rt-item.dynamic .rt-name { color: #1d4ed8; }
.rt-item.dv .rt-name { color: #d97706; }
.rt-item.ls .rt-name { color: #15803d; }
.rt-item.hybrid .rt-name { color: #7e22ce; }
.rt-desc { font-size: 0.78rem; color: #6b7280; }
.rt-example {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
}
.rt-item.dv .rt-example { color: #d97706; }
.rt-item.ls .rt-example { color: #15803d; }
.rt-item.hybrid .rt-example { color: #7e22ce; }

/* ── DV vs LS 對比卡片（CH11）── */
.dv-ls-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}
.dv-card, .ls-card {
  padding: 1rem;
  border-radius: var(--radius);
  border: 2px solid;
}
.dv-card {
  background: #fffbeb;
  border-color: #f59e0b;
}
.ls-card {
  background: #f0fdf4;
  border-color: #22c55e;
}
.dv-card-title, .ls-card-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
.dv-card-title { color: #d97706; }
.ls-card-title { color: #15803d; }
.dv-card-prop, .ls-card-prop {
  display: flex;
  gap: 0.4rem;
  font-size: 0.82rem;
  margin-bottom: 0.3rem;
  align-items: baseline;
}
.dv-card-prop { color: #92400e; }
.ls-card-prop { color: #166534; }

/* ── RIP 定時器時間軸（CH11）── */
.rip-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1rem 0;
  position: relative;
  padding-left: 1.5rem;
}
.rip-timeline::before {
  content: '';
  position: absolute;
  left: 0.35rem;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, #3b82f6 33%, #f59e0b 33% 66%, #ef4444 66%);
  border-radius: 2px;
}
.rip-timer-item {
  position: relative;
  font-size: 0.82rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1.5px solid var(--border);
}
.rip-timer-item::before {
  content: '';
  position: absolute;
  left: -1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.rip-timer-item.update::before { background: #3b82f6; }
.rip-timer-item.invalid::before { background: #f59e0b; }
.rip-timer-item.flush::before { background: #ef4444; }
.timer-name { font-weight: 700; margin-bottom: 0.1rem; }
.timer-sec { font-size: 0.78rem; color: var(--muted); }

/* ── 內外尋徑對比（CH11）── */
.igp-egp-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}
.igp-card, .egp-card {
  padding: 1rem;
  border-radius: var(--radius);
  border: 2px solid;
}
.igp-card {
  background: #eff6ff;
  border-color: #3b82f6;
}
.egp-card {
  background: #fef3c7;
  border-color: #f59e0b;
}
.igp-card-title, .egp-card-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
.igp-card-title { color: #1d4ed8; }
.egp-card-title { color: #d97706; }
.igp-card-name, .egp-card-name {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.igp-card-examples, .egp-card-examples {
  font-size: 0.82rem;
  font-weight: 700;
}
.igp-card-examples { color: #1d4ed8; }
.egp-card-examples { color: #d97706; }

/* ── AS 三大問題彩色分類（CH11）── */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.problem-card {
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1.5px solid;
}
.problem-card.loop {
  background: #fef2f2;
  border-color: #ef4444;
}
.problem-card.count {
  background: #fffbeb;
  border-color: #f59e0b;
}
.problem-card.timer {
  background: #eff6ff;
  border-color: #3b82f6;
}
.problem-card.delay {
  background: #f0fdf4;
  border-color: #22c55e;
}
.problem-card-title {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.2rem;
}
.problem-card.loop .problem-card-title { color: #dc2626; }
.problem-card.count .problem-card-title { color: #d97706; }
.problem-card.timer .problem-card-title { color: #1d4ed8; }
.problem-card.delay .problem-card-title { color: #15803d; }
.problem-card-solution {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.3rem;
}
.problem-card-sub {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 400;
  margin-top: 0.1rem;
}

/* ── CIA 三大目標（CH12）── */
.cia-triple {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 1rem 0;
}
.cia-item {
  padding: 1rem;
  border-radius: var(--radius);
  border: 2px solid;
  text-align: center;
}
.cia-item.confidentiality {
  background: #fef2f2;
  border-color: #ef4444;
}
.cia-item.integrity {
  background: #f0fdf4;
  border-color: #22c55e;
}
.cia-item.availability {
  background: #eff6ff;
  border-color: #3b82f6;
}
.cia-name {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}
.cia-item.confidentiality .cia-name { color: #dc2626; }
.cia-item.integrity .cia-name { color: #15803d; }
.cia-item.availability .cia-name { color: #1d4ed8; }
.cia-en { font-size: 0.75rem; color: #6b7280; margin-bottom: 0.4rem; }
.cia-desc { font-size: 0.8rem; color: #4b5563; }

/* ── 威脅來源視覺化（CH12）── */
.threat-level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
  margin: 1rem 0;
}
.threat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  background: #fef2f2;
  border: 1.5px solid #ef4444;
  font-size: 0.82rem;
}
.threat-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.threat-name { color: #991b1b; font-weight: 600; }

/* ── 安全五大領域（CH12）── */
.security-domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.sec-domain {
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1.5px solid;
  background: var(--surface);
}
.sec-domain.physical { border-color: #6b7280; }
.sec-domain.software { border-color: #8b5cf6; }
.sec-domain.data { border-color: #f59e0b; }
.sec-domain.system { border-color: #3b82f6; }
.sec-domain.network { border-color: #22c55e; }
.sec-domain-name {
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 0.25rem;
}
.sec-domain.physical .sec-domain-name { color: #6b7280; }
.sec-domain.software .sec-domain-name { color: #7c3aed; }
.sec-domain.data .sec-domain-name { color: #d97706; }
.sec-domain.system .sec-domain-name { color: #1d4ed8; }
.sec-domain.network .sec-domain-name { color: #15803d; }
.sec-domain-desc { font-size: 0.78rem; color: #6b7280; }

/* ── 防火牆類型比較（CH12）── */
.firewall-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}
.fw-card {
  padding: 1rem;
  border-radius: var(--radius);
  border: 2px solid;
}
.fw-card.packet {
  background: #eff6ff;
  border-color: #3b82f6;
}
.fw-card.app {
  background: #f0fdf4;
  border-color: #22c55e;
}
.fw-card-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
.fw-card.packet .fw-card-title { color: #1d4ed8; }
.fw-card.app .fw-card-title { color: #15803d; }
.fw-card-layer {
  font-size: 0.78rem;
  color: #6b7280;
  margin-bottom: 0.5rem;
}
.fw-card-points {
  font-size: 0.82rem;
  color: #374151;
}

/* ── 金鑰比較（對稱vs非對稱）（CH12）── */
.key-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}
.key-sym-card, .key-asym-card {
  padding: 1rem;
  border-radius: var(--radius);
  border: 2px solid;
}
.key-sym-card {
  background: #fffbeb;
  border-color: #f59e0b;
}
.key-asym-card {
  background: #f0fdf4;
  border-color: #22c55e;
}
.key-card-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
.key-sym-card .key-card-title { color: #d97706; }
.key-asym-card .key-card-title { color: #15803d; }
.key-card-prop {
  display: flex;
  gap: 0.4rem;
  font-size: 0.82rem;
  margin-bottom: 0.3rem;
  align-items: baseline;
}
.key-sym-card .key-card-prop { color: #92400e; }
.key-asym-card .key-card-prop { color: #166534; }

/* ── 金鑰數量視覺化（CH12）── */
.key-count-bar {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1rem 0;
}
.kcb-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.kcb-label {
  font-size: 0.82rem;
  font-weight: 600;
  min-width: 5rem;
  color: var(--text);
}
.kcb-bar-bg {
  flex: 1;
  height: 20px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
}
.kcb-bar-fill {
  height: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding-left: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
}
.kcb-bar-fill.sym { background: #f59e0b; }
.kcb-bar-fill.asym { background: #22c55e; }
.kcb-count {
  font-size: 0.82rem;
  font-weight: 700;
  min-width: 3rem;
  text-align: right;
}

/* ── 雜湊演算法比較（CH12）── */
.hash-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.hash-item {
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1.5px solid;
}
.hash-item.weak {
  background: #fef2f2;
  border-color: #ef4444;
}
.hash-item.md5 {
  background: #fffbeb;
  border-color: #f59e0b;
}
.hash-item.sha {
  background: #f0fdf4;
  border-color: #22c55e;
}
.hash-name {
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 0.25rem;
}
.hash-item.weak .hash-name { color: #dc2626; }
.hash-item.md5 .hash-name { color: #d97706; }
.hash-item.sha .hash-name { color: #15803d; }
.hash-bits {
  font-size: 0.78rem;
  color: #6b7280;
  margin-bottom: 0.2rem;
}
.hash-status {
  font-size: 0.75rem;
  font-weight: 700;
}
.hash-item.weak .hash-status { color: #dc2626; }
.hash-item.md5 .hash-status { color: #d97706; }
.hash-item.sha .hash-status { color: #15803d; }

/* ── IDS 類型比較（CH12）── */
.ids-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}
.ids-card {
  padding: 1rem;
  border-radius: var(--radius);
  border: 2px solid;
}
.ids-card.host {
  background: #f5f3ff;
  border-color: #8b5cf6;
}
.ids-card.network {
  background: #eff6ff;
  border-color: #3b82f6;
}
.ids-card-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
.ids-card.host .ids-card-title { color: #6d28d9; }
.ids-card.network .ids-card-title { color: #1d4ed8; }
.ids-card-type {
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.5rem;
}
.ids-card-points { font-size: 0.82rem; }
.ids-card.host .ids-card-points { color: #5b21b6; }
.ids-card.network .ids-card-points { color: #1e40af; }

/* ── IDS 三大功能流程（CH12）── */
.ids-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 1rem 0;
}
.ids-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  min-height: 40px;
}
.ids-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #8b5cf6;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ids-content {
  flex: 1;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius);
  background: #f5f3ff;
  border: 1.5px solid #8b5cf6;
  font-size: 0.85rem;
}
.ids-content strong { color: #6d28d9; }

/* ── 惡意軟體威脅等級（CH12）── */
.malware-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.malware-item {
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1.5px solid;
}
.malware-item.virus {
  background: #fef2f2;
  border-color: #ef4444;
}
.malware-item.worm {
  background: #fff7ed;
  border-color: #f97316;
}
.malware-item.trojan {
  background: #fef3c7;
  border-color: #f59e0b;
}
.malware-item.spyware {
  background: #eff6ff;
  border-color: #3b82f6;
}
.malware-name {
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 0.2rem;
}
.malware-item.virus .malware-name { color: #dc2626; }
.malware-item.worm .malware-name { color: #c2410c; }
.malware-item.trojan .malware-name { color: #d97706; }
.malware-item.spyware .malware-name { color: #1d4ed8; }
.malware-en { font-size: 0.72rem; color: #6b7280; margin-bottom: 0.3rem; }
.malware-trait {
  font-size: 0.75rem;
  color: #4b5563;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.malware-trait::before { content: '•'; }

/* ── 威脅方法視覺化（CH12）── */
.threat-method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.threat-method-item {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border: 1.5px solid;
  background: var(--surface);
}
.threat-method-item.high {
  border-color: #ef4444;
  background: #fef2f2;
}
.threat-method-item.medium {
  border-color: #f59e0b;
  background: #fffbeb;
}
.threat-method-item.low {
  border-color: #6b7280;
  background: #f9fafb;
}
.tm-num {
  font-size: 0.72rem;
  font-weight: 700;
  color: #9ca3af;
  margin-bottom: 0.15rem;
}
.tm-name {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.15rem;
}
.threat-method-item.high .tm-name { color: #dc2626; }
.threat-method-item.medium .tm-name { color: #d97706; }
.threat-method-item.low .tm-name { color: #6b7280; }
.tm-desc { font-size: 0.75rem; color: #6b7280; }

/* ── 數位簽章流程（CH12）── */
.ds-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 1rem 0;
}
.ds-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  min-height: 40px;
}
.ds-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ds-content {
  flex: 1;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius);
  background: #f0fdf4;
  border: 1.5px solid #22c55e;
  font-size: 0.85rem;
}
.ds-content strong { color: #15803d; }

/* ── concept-card p 樣式（通用）── */
.concept-card p {
  margin: 0.5rem 0 0.5rem 0;
  font-size: 0.88rem;
}

.fw-card-sub {
  font-size: 0.8rem;
  color: #6b7280;
  font-weight: 400;
  margin-bottom: 0.5rem;
}
.kcb-fill-full { width: 100%; }
.kcb-fill-44 { width: 44%; }
.kcb-count-warn { color: #d97706; }
.kcb-count-ok { color: #15803d; }

/* ── Scheduling Algorithm Cards（CH8 Section 12）── */
.sched-algo-cards {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1.5rem 0;
}

.sched-algo-card {
  flex: 1;
  min-width: 210px;
  max-width: 270px;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.sched-algo-card.pq  { border-top: 3px solid var(--accent); }
.sched-algo-card.rr  { border-top: 3px solid #7ba8e8; }
.sched-algo-card.wfq { border-top: 3px solid #a0c4f0; }

.sac-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.85rem 0.5rem;
  background: rgba(49,108,244,0.04);
  border-bottom: 1px solid var(--border);
  gap: 0.5rem;
}

.sac-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
}
.sac-sub {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--muted-2);
  margin-left: 0.4rem;
}

.sac-badge {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
  white-space: nowrap;
}
.sac-badge.starvation { background: #fef3c7; color: #92400e; }
.sac-badge.fair       { background: #dbeafe; color: #1e40af; }
.sac-badge.balanced   { background: #e0e7ff; color: #3730a3; }

.sac-body { padding: 0.75rem 0.85rem 0.9rem; }

.sac-queue-label {
  font-size: 0.68rem;
  color: var(--muted-2);
  margin-bottom: 0.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sac-queue-input,
.sac-queue-out {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.sac-pkt {
  font-size: 0.65rem;
  padding: 3px 7px;
  border-radius: 5px;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}

.sac-arrow-down {
  text-align: center;
  font-size: 0.7rem;
  color: var(--muted-2);
  margin: 0.25rem 0 0.6rem;
}

.sac-output {
  background: rgba(49,108,244,0.04);
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
}

.sac-note {
  font-size: 0.68rem;
  margin-top: 0.5rem;
  padding: 5px 7px;
  border-radius: 5px;
  line-height: 1.45;
}
.sac-note.danger  { background: #fef3c7; color: #92400e; }
.sac-note.fair    { background: #dbeafe; color: #1e40af; }
.sac-note.balanced { background: #e0e7ff; color: #3730a3; }

/* ── Buffer Management - soften colors（CH8 Section 12）── */
.buffer-viz {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}
.bv-stage {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
}
.bv-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted-2);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bv-bars {
  display: flex;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 0.6rem;
}
.bv-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  transition: width 0.3s;
}
.bv-bar-empty {
  background: rgba(49,108,244,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--muted-2);
}
.bv-bar.normal  { background: #dbeafe; color: #1e40af; }
.bv-bar.warn    { background: #fef3c7; color: #92400e; }
.bv-bar.danger  { background: #fce7f3; color: #9d174d; }
.bv-status {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.3rem 0.5rem;
  border-radius: 20px;
  display: inline-block;
}
.bv-status.ok     { background: #dbeafe; color: #1e40af; }
.bv-status.warn   { background: #fef3c7; color: #92400e; }
.bv-status.danger { background: #fce7f3; color: #9d174d; }