.guide-hero { text-align:center; padding:2.75rem 0 1.25rem; }
.guide-chips { display:flex; flex-wrap:wrap; gap:0.5rem; justify-content:center; margin:1.25rem 0 0.5rem; }
.guide-chip {
  display:inline-flex; align-items:center; gap:0.35rem;
  padding:0.35rem 0.75rem; border-radius:999px; font-size:0.85rem; font-weight:600;
  border:1px solid rgba(255,255,255,0.1); color:#cbd5e1; text-decoration:none;
  background:rgba(255,255,255,0.03);
}
.guide-chip:hover { border-color:rgba(0,210,211,0.45); color:#e2e8f0; }
.guide-chip.is-active { background:rgba(0,210,211,0.15); border-color:rgba(0,210,211,0.45); color:#67e8f9; }
.tag-before, .tag-after {
  display:inline-block; font-size:0.75rem; font-weight:700; padding:0.15rem 0.5rem;
  border-radius:999px; margin-right:0.35rem; vertical-align:middle;
}
.tag-before { background:rgba(245,158,11,0.18); color:#fcd34d; border:1px solid rgba(251,191,36,0.35); }
.tag-after { background:rgba(16,185,129,0.16); color:#6ee7b7; border:1px solid rgba(52,211,153,0.35); }
.guide-card {
  background:var(--suio-card); border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-2xl); padding:1.25rem 1.4rem; margin:1rem 0;
}
.guide-card h3 { margin:0 0 0.6rem; color:#f8fafc; font-family:var(--font-display); font-size:1.1rem; }
.guide-card p, .guide-card li { color:var(--suio-slate-400); margin:0.3rem 0; font-size:0.96rem; }
.guide-card ul, .guide-card ol { margin:0.4rem 0 0; padding-left:1.2rem; }
.guide-card strong { color:#e2e8f0; }
.guide-card code {
  background:rgba(15,23,42,0.65); color:#a5f3fc; padding:0.1rem 0.4rem;
  border-radius:6px; font-size:0.88em;
}
.guide-grid-2 {
  display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1rem 0;
}
@media (max-width:800px){ .guide-grid-2 { grid-template-columns:1fr; } }
.guide-ops-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1.5rem 0 2rem;
}
@media (max-width:900px){ .guide-ops-grid { grid-template-columns:1fr; } }
.guide-ops-item {
  display:block; text-decoration:none; color:inherit;
  background:var(--suio-card); border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-2xl); padding:1.2rem 1.25rem;
  transition:border-color .2s, transform .2s;
}
.guide-ops-item:hover { border-color:rgba(0,210,211,0.45); transform:translateY(-2px); }
.guide-ops-item .n {
  width:2rem; height:2rem; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-family:var(--font-display); margin-bottom:0.65rem;
  background:linear-gradient(135deg,var(--suio-aqua),#7dd3fc); color:#071018;
}
.guide-ops-item h3 { margin:0 0 0.35rem; color:#f8fafc; font-size:1.05rem; }
.guide-ops-item p { margin:0; color:var(--suio-slate-400); font-size:0.92rem; }
.guide-cta { display:flex; flex-wrap:wrap; gap:0.75rem; margin:1.25rem 0 0.25rem; }
.guide-table { width:100%; border-collapse:collapse; margin:0.75rem 0; font-size:0.92rem; }
.guide-table th, .guide-table td {
  border:1px solid rgba(255,255,255,0.1); padding:0.55rem 0.7rem; text-align:left; vertical-align:top;
}
.guide-table th { background:rgba(15,23,42,0.9); color:#f8fafc; }
.guide-table td { color:var(--suio-slate-400); }
.guide-nav-bottom {
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin:2rem 0 0.5rem; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,0.08);
}


/* 規則包說明圖示 */
.rp-pack-card {
  border:1px solid rgba(255,255,255,0.1); border-radius:16px;
  padding:1rem 1.1rem; background:rgba(15,23,42,0.45);
}
.rp-pack-standard { border-color:rgba(0,210,211,0.35); }
.rp-pack-segmented { border-color:rgba(244,63,94,0.35); }
.rp-pack-badge {
  display:inline-block; font-weight:800; font-size:0.85rem;
  padding:0.2rem 0.65rem; border-radius:999px; margin-bottom:0.55rem;
}
.rp-pack-standard .rp-pack-badge { background:rgba(0,210,211,0.18); color:#67e8f9; }
.rp-pack-segmented .rp-pack-badge { background:rgba(244,63,94,0.18); color:#fb7185; }
.rp-pack-when { margin-top:0.55rem !important; font-size:0.88rem !important; color:#94a3b8 !important; }
.rp-flow {
  display:flex; flex-wrap:wrap; align-items:stretch; gap:0.5rem; justify-content:center;
  margin:0.5rem 0 1rem;
}
.rp-flow-step {
  display:flex; gap:0.55rem; align-items:flex-start;
  background:rgba(15,23,42,0.7); border:1px solid rgba(255,255,255,0.1);
  border-radius:14px; padding:0.7rem 0.85rem; max-width:16rem;
}
.rp-flow-num {
  width:1.6rem; height:1.6rem; border-radius:999px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; background:linear-gradient(135deg,#00d2d3,#7dd3fc); color:#071018; font-size:0.85rem;
}
.rp-flow-body { display:flex; flex-direction:column; gap:0.25rem; }
.rp-flow-body strong { color:#f8fafc; font-size:0.92rem; }
.rp-flow-body span { color:#94a3b8; font-size:0.82rem; }
.rp-flow-arrow { align-self:center; color:#64748b; font-weight:700; }
.rp-tag-std, .rp-tag-seg {
  display:inline-block; margin-top:0.15rem; padding:0.15rem 0.45rem; border-radius:8px; font-size:0.78rem !important;
}
.rp-tag-std { background:rgba(0,210,211,0.12); color:#67e8f9 !important; }
.rp-tag-seg { background:rgba(244,63,94,0.12); color:#fb7185 !important; }
.rp-svg { width:100%; max-width:720px; height:auto; display:block; margin:0.5rem auto 0; }
.rp-diagram-row { display:flex; flex-wrap:wrap; gap:0.5rem; }
.rp-person {
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:0.4rem 0.7rem; border-radius:999px; font-size:0.85rem; font-weight:600;
  border:1px solid rgba(255,255,255,0.1);
}
.rp-person.ok { background:rgba(16,185,129,0.12); color:#6ee7b7; border-color:rgba(52,211,153,0.35); }
.rp-person.no { background:rgba(100,116,139,0.15); color:#94a3b8; border-color:rgba(148,163,184,0.25); text-decoration:line-through; }
.rp-person .rp-dot { width:0.55rem; height:0.55rem; border-radius:999px; background:currentColor; }
.rp-matrix .cell-yes { color:#6ee7b7; font-weight:700; background:rgba(16,185,129,0.08); }
.rp-matrix .cell-no { color:#94a3b8; background:rgba(100,116,139,0.08); }
.rp-mini-flows {
  display:grid; grid-template-columns:repeat(3,1fr); gap:0.75rem;
}
@media (max-width:800px){ .rp-mini-flows { grid-template-columns:1fr; } .rp-flow-arrow { display:none; } }
.rp-mini {
  border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:0.85rem;
  background:rgba(15,23,42,0.4);
}
.rp-mini h4 { margin:0 0 0.5rem; color:#f8fafc; font-size:0.95rem; }
.rp-pipe {
  font-size:0.85rem; color:#e2e8f0; padding:0.35rem 0.5rem; margin:0.25rem 0;
  border-left:3px solid #00d2d3; background:rgba(0,210,211,0.08); border-radius:0 8px 8px 0;
}
.rp-pipe.muted { border-left-color:#64748b; background:rgba(100,116,139,0.1); color:#94a3b8; }