.guide-main { overflow: hidden; }

.guide-hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 74px;
  background: radial-gradient(circle at 88% 20%, #dfeaff 0, transparent 32%), linear-gradient(145deg, #f7fbff 0%, #eef4fa 100%);
}

.guide-hero-grid {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: 48px;
  align-items: center;
}

.guide-hero h1 {
  max-width: 760px;
  margin: 14px 0 20px;
  font-size: clamp(48px, 7vw, 78px);
  line-height: .98;
  letter-spacing: -.065em;
}

.guide-hero-note { max-width: 650px; margin: 18px 0 0; color: var(--muted); font-size: 13px; }
.guide-orbit-wrap { min-height: 420px; display: grid; place-items: center; }
.guide-orbit { width: min(100%, 580px); overflow: visible; }
.guide-orbit-path { animation: guide-dash 22s linear infinite; }
.guide-orbit-node { transform-box: fill-box; transform-origin: center; animation: guide-float 5.5s ease-in-out infinite; }
.guide-node-two { animation-delay: 1s; }
.guide-node-three { animation-delay: 2s; }
.guide-node-four { animation-delay: 3s; }
.guide-orbit-core { transform-box: fill-box; transform-origin: center; animation: guide-pulse 4s ease-in-out infinite; }

.guide-anchor-bar { position: sticky; top: 76px; z-index: 10; padding: 12px 0; border-bottom: 1px solid var(--line); background: #ffffffeb; backdrop-filter: blur(14px); }
.guide-anchor-links { display: flex; flex-wrap: wrap; gap: 8px; }
.guide-anchor-links a { padding: 7px 10px; border-radius: 999px; color: #4d6275; font-size: 12px; font-weight: 850; }
.guide-anchor-links a:hover { background: #edf4ff; color: var(--a); }

.guide-section { padding: 78px 0; }
.guide-band { background: #eef4fa; }
.guide-section .head { margin-bottom: 34px; }
.guide-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.guide-what-why-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; }
.guide-panel { padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.guide-panel h3 { margin: 0 0 12px; font-size: 22px; }
.guide-panel p, .guide-panel li { color: var(--muted); }
.guide-panel ul { display: grid; gap: 11px; padding-left: 20px; margin: 0; }
.guide-panel-dark { background: #102131; border-color: #102131; }
.guide-panel-dark h3 { color: #fff; }
.guide-panel-dark p { color: #b7c7d5; }

.guide-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.guide-timeline article { position: relative; min-height: 235px; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.guide-timeline article::after { position: absolute; top: 44px; right: -13px; width: 13px; border-top: 1px dashed #94b7f6; content: ''; }
.guide-timeline article:last-child::after { display: none; }
.guide-timeline span, .guide-number { color: var(--a); font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.guide-timeline h3 { margin: 22px 0 8px; font-size: 20px; }
.guide-timeline p { margin: 0; color: var(--muted); font-size: 13px; }

.guide-loop { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 18px; }
.guide-loop div { position: relative; padding: 18px; border-radius: 16px; background: #fff; }
.guide-loop div:not(:last-child)::after { position: absolute; right: -10px; top: 50%; z-index: 2; color: var(--a); content: '→'; transform: translateY(-50%); }
.guide-loop b, .guide-loop span { display: block; }
.guide-loop span { margin-top: 4px; color: var(--muted); font-size: 12px; }

.guide-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.guide-number { margin-bottom: 16px; }
.guide-search-flow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; padding: 18px; border: 1px solid #cfddee; border-radius: 18px; background: #f8fbff; }
.guide-search-flow span { color: #354c60; font-size: 13px; font-weight: 800; text-align: center; }
.guide-search-flow i { color: var(--a); font-size: 20px; font-style: normal; }
.guide-source { margin: 16px 0 0; color: var(--muted); font-size: 13px; }
.guide-source a { color: var(--a); font-weight: 800; }

.guide-ad-route { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 9px; align-items: center; margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #f8fbff; }
.guide-ad-route div { padding: 11px; border-radius: 12px; background: #fff; }
.guide-ad-route b, .guide-ad-route span { display: block; }
.guide-ad-route span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.guide-ad-route i { color: var(--a2); font-size: 21px; font-style: normal; }

.guide-architecture { display: grid; gap: 8px; padding: 6px 0; }
.guide-architecture-step { display: grid; grid-template-columns: 126px 1fr; gap: 14px; align-items: center; padding: 14px 16px; border-left: 3px solid var(--a); background: #fff; }
.guide-architecture-step:nth-child(2n) { border-color: var(--a2); }
.guide-architecture-step span { color: var(--muted); font-size: 13px; }

.guide-build-path { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 20px; }
.guide-build-path div { padding: 21px; border: 1px solid var(--line); border-radius: 18px; background: #fbfdff; }
.guide-build-path span { display: block; color: var(--a); font-size: 12px; font-weight: 900; }
.guide-build-path b { display: block; margin-top: 12px; font-size: 18px; }
.guide-build-path p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }

.guide-toolkit { background: #102131; color: #fff; }
.guide-toolkit .head h2 { color: #fff; }
.guide-toolkit .copy { color: #b7c7d5; }
.guide-tool-group + .guide-tool-group { margin-top: 38px; }
.guide-tool-group h3 { margin: 0 0 14px; color: #dce7ef; font-size: 17px; }
.guide-tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.guide-tool-card { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; min-height: 88px; padding: 16px; border: 1px solid #ffffff19; border-radius: 16px; background: #ffffff08; transition: background .2s ease, transform .2s ease; }
.guide-tool-card:hover { background: #ffffff12; transform: translateY(-2px); }
.guide-tool-card b { display: block; color: #fff; font-size: 14px; }
.guide-tool-card small { display: block; margin-top: 3px; color: #b7c7d5; font-size: 11px; line-height: 1.35; }
.guide-tool-logo { display: grid; width: 40px; height: 40px; place-items: center; overflow: hidden; border-radius: 12px; background: #fff; color: var(--ink); font-size: 11px; font-weight: 900; }
.guide-tool-logo img { width: 23px; height: 23px; object-fit: contain; }
.guide-tool-arrow { color: #8db5ff; font-size: 17px; }

.guide-action { background: radial-gradient(circle at 86% 30%, #deeafe 0, transparent 34%), #f7fafc; }
.guide-action-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; align-items: center; }
.guide-action h2 { max-width: 630px; margin: 8px 0; font-size: clamp(35px, 5vw, 60px); line-height: 1; letter-spacing: -.05em; }
.guide-action ol { display: grid; gap: 10px; padding-left: 20px; color: var(--muted); }
.guide-action .btn { margin-top: 10px; }

@keyframes guide-dash { to { stroke-dashoffset: -280; } }
@keyframes guide-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes guide-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }

@media (max-width: 1040px) {
  .guide-timeline { grid-template-columns: repeat(3, 1fr); }
  .guide-timeline article::after { display: none; }
  .guide-loop { grid-template-columns: repeat(3, 1fr); }
  .guide-loop div:nth-child(3)::after { display: none; }
  .guide-tool-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .guide-hero-grid, .guide-action-grid { grid-template-columns: 1fr; }
  .guide-orbit-wrap { min-height: 330px; }
  .guide-anchor-bar { top: 68px; }
  .guide-split { grid-template-columns: 1fr; }
  .guide-what-why-how { grid-template-columns: 1fr; }
  .guide-three { grid-template-columns: 1fr; }
  .guide-build-path { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .guide-hero { padding: 58px 0 42px; }
  .guide-hero h1 { font-size: clamp(42px, 12vw, 58px); }
  .guide-orbit-wrap { min-height: 270px; }
  .guide-section { padding: 56px 0; }
  .guide-anchor-links { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .guide-anchor-links a { white-space: nowrap; }
  .guide-timeline, .guide-loop, .guide-build-path, .guide-tool-grid { grid-template-columns: 1fr; }
  .guide-loop div::after { display: none; }
  .guide-search-flow { align-items: stretch; flex-direction: column; }
  .guide-search-flow i { text-align: center; transform: rotate(90deg); }
  .guide-ad-route { grid-template-columns: 1fr; }
  .guide-ad-route i { text-align: center; transform: rotate(90deg); }
  .guide-architecture-step { grid-template-columns: 1fr; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-orbit-path, .guide-orbit-node, .guide-orbit-core { animation: none !important; }
  .guide-tool-card { transition: none; }
}