[id] { scroll-margin-top: 5rem; }

/* 섹션 공통 — script.js 가 data-head 로 가운데 정렬 머리를 채운다 */
.section { padding: 4rem 0; }
.section-tint { background: rgb(23 23 23 / 0.6); }
.inner { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) {
  .section { padding: 6rem 0; }
  .inner { padding: 0 1.5rem; }
}
@media (min-width: 1024px) {
  .section { padding: 8rem 0; }
  .inner { padding: 0 2rem; }
}

.headline {
  font-size: 1rem;
  font-weight: 600;
  color: #34d399;
}

.btn-success, .btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  border-radius: 9999px;
  padding: 0 1.5rem;
  transition: background-color 150ms, transform 150ms;
}
.btn-success { background: #34d399; color: #022c22; font-weight: 600; }
.btn-success:hover { background: #6ee7b7; }
.btn-outline { color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); }
.btn-outline:hover { background: rgb(255 255 255 / 0.06); }
.btn-success:active, .btn-outline:active { transform: scale(0.98); }

/* 일러스트는 밝은 배경용으로 그려져 있어 밝은 패널 위에 올린다 */
.illust { border-radius: 1rem; background: #f5f7f6; }

.hero {
  background:
    radial-gradient(circle at 15% 10%, rgb(52 211 153 / 0.14), transparent 30rem),
    #0a0a0a;
}

.cta-surface {
  background:
    radial-gradient(circle at 50% 0%, rgb(52 211 153 / 0.14), transparent 28rem),
    rgb(23 23 23 / 0.8);
}

details.faq summary::-webkit-details-marker { display: none; }
details.faq[open] .faq-chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}