/* 选岛攻略页 */
.guide-page { padding: 32px 0 60px; }

.guide-hero {
  background: var(--c-primary);
  border-radius: 22px; padding: 48px 40px; color: #fff;
  margin-bottom: 36px; position: relative; overflow: hidden;
}
.guide-hero::after {
  content: ""; position: absolute; right: -60px; bottom: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: rgba(244, 211, 94, 0.18);
}
.guide-hero h1 { font-size: 32px; font-weight: 600; letter-spacing: 1px; margin-bottom: 12px; position: relative; z-index: 1; }
.guide-hero p { font-size: 15px; opacity: 0.92; line-height: 1.8; max-width: 720px; position: relative; z-index: 1; }

.guide-section { margin-bottom: 40px; }
.guide-section-title {
  font-size: 22px; font-weight: 600; color: var(--c-ink);
  margin-bottom: 18px; padding-left: 12px;
  border-left: 4px solid var(--c-primary);
}

/* 注意事项卡片 */
.tip-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.tip-card {
  background: var(--c-paper); border-radius: 14px; padding: 20px 22px;
  border: 1px solid var(--c-line-soft);
  transition: all .2s;
}
.tip-card:hover { border-color: rgba(8, 131, 149, 0.3); box-shadow: 0 4px 16px rgba(26, 34, 56, 0.06); }
.tip-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tip-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-primary);
  color: #fff; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tip-card h4 { font-size: 15px; font-weight: 600; color: var(--c-ink); }
.tip-card p { font-size: 13px; color: var(--c-ink-2); line-height: 1.8; }
.tip-card .tip-tag {
  display: inline-block; margin-top: 10px; padding: 3px 10px;
  border-radius: 10px; font-size: 11px;
  background: rgba(255, 122, 89, 0.1); color: var(--c-secondary);
}

/* 知识条目 */
.know-list { display: flex; flex-direction: column; gap: 12px; }
.know-item {
  background: var(--c-paper); border-radius: 12px; padding: 16px 20px;
  border: 1px solid var(--c-line-soft);
  display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: start;
}
.know-label {
  font-size: 13px; font-weight: 600; color: var(--c-primary);
  padding: 4px 10px; background: rgba(8, 131, 149, 0.08);
  border-radius: 8px; text-align: center;
}
.know-content h5 { font-size: 14px; font-weight: 600; color: var(--c-ink); margin-bottom: 4px; }
.know-content p { font-size: 13px; color: var(--c-ink-2); line-height: 1.8; }

/* 选岛流程 */
.flow-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  counter-reset: step;
}
.flow-step {
  background: var(--c-paper); border-radius: 12px; padding: 18px 16px;
  border: 1px solid var(--c-line-soft); text-align: center;
  position: relative;
}
.flow-step::before {
  counter-increment: step; content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--c-secondary);
  color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 10px;
}
.flow-step h5 { font-size: 14px; font-weight: 600; color: var(--c-ink); margin-bottom: 6px; }
.flow-step p { font-size: 12px; color: var(--c-ink-3); line-height: 1.7; }

/* CTA */
.guide-cta {
  background: rgba(8, 131, 149, 0.06);
  border-radius: 16px; padding: 28px 32px; text-align: center; margin-top: 40px;
}
.guide-cta h3 { font-size: 18px; font-weight: 600; color: var(--c-ink); margin-bottom: 8px; }
.guide-cta p { font-size: 13px; color: var(--c-ink-2); margin-bottom: 18px; }
.guide-cta .btn {
  display: inline-block; padding: 10px 28px; border-radius: 22px;
  background: var(--c-primary);
  color: #fff; font-size: 14px; font-weight: 500; transition: all .2s;
}
.guide-cta .btn:hover { background: var(--c-primary-dark); color: #fff; }

@media (max-width: 900px) {
  .tip-grid { grid-template-columns: 1fr; }
  .flow-grid { grid-template-columns: repeat(2, 1fr); }
  .know-item { grid-template-columns: 1fr; }
  .guide-hero { padding: 32px 24px; }
  .guide-hero h1 { font-size: 24px; }
}