/* 홈 첫 화면·기능 소개·정책 안내 전용 스타일. 공통은 site.css. */

/* 첫 화면 */
.hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 72px;
  background:
    radial-gradient(640px 420px at 78% 18%, rgba(109, 85, 230, 0.42), transparent 70%),
    radial-gradient(520px 360px at 12% 80%, rgba(148, 119, 255, 0.22), transparent 70%),
    linear-gradient(180deg, #12172f 0%, var(--night) 100%);
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 48px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 6px 14px;
  border: 1px solid rgba(183, 169, 255, 0.4);
  border-radius: 999px;
  background: rgba(33, 26, 82, 0.6);
  color: var(--brand-light);
  font-size: 14px;
  font-weight: 600;
}

.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-light);
  box-shadow: 0 0 10px var(--brand-light);
}

.hero h1 {
  margin: 0 0 18px;
  font-size: clamp(38px, 6vw, 60px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.hero h1 em {
  font-style: normal;
  color: var(--brand-light);
}

.hero .lead {
  margin: 0 0 32px;
  max-width: 34em;
  font-size: clamp(17px, 2vw, 20px);
  color: var(--night-muted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 달 장면: 실제 앱 아이콘 + CSS 빛과 별 */
.moon-scene {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 360px;
}

.moon-glow {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183, 169, 255, 0.45) 0%, rgba(109, 85, 230, 0.18) 45%, transparent 70%);
  filter: blur(6px);
}

.moon-scene img {
  position: relative;
  width: min(240px, 60vw);
  height: auto;
  border-radius: 22%;
  box-shadow: 0 30px 60px rgba(5, 8, 24, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.star {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.6);
  opacity: 0.85;
  animation: twinkle 3.2s ease-in-out infinite;
}

.star:nth-child(2) { top: 12%; left: 18%; animation-delay: 0.4s; }
.star:nth-child(3) { top: 24%; right: 14%; width: 4px; height: 4px; animation-delay: 1.1s; }
.star:nth-child(4) { bottom: 18%; left: 10%; width: 4px; height: 4px; animation-delay: 1.9s; }
.star:nth-child(5) { bottom: 10%; right: 20%; animation-delay: 2.5s; }

@keyframes twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .star { animation: none; }
}

/* 기능 소개 */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.feature {
  padding: 28px;
  border: 1px solid var(--night-line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--night-elevated), var(--night-surface));
}

.feature .glyph {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: var(--brand-deep);
  color: var(--brand-light);
}

.feature .glyph svg {
  width: 28px;
  height: 28px;
}

.feature h3 {
  margin: 0 0 8px;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.feature .tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(148, 119, 255, 0.18);
  color: var(--brand-light);
  font-size: 13px;
  font-weight: 600;
  vertical-align: middle;
}

.feature p {
  margin: 0;
  color: var(--night-muted);
}

/* 정책 안내 */
.policy-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 32px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(109, 85, 230, 0.28), rgba(33, 26, 82, 0.7));
  border: 1px solid rgba(148, 119, 255, 0.35);
}

.policy-callout h2 {
  margin: 0 0 8px;
  font-size: 24px;
}

.policy-callout p {
  margin: 0;
  color: var(--night-muted);
}

@media (max-width: 860px) {
  .hero {
    padding: 56px 0 48px;
  }

  .hero .wrap {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .moon-scene {
    order: -1;
    min-height: 280px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .policy-callout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .actions .button {
    flex: 1 1 100%;
  }
}