/* ============================================================================
   aurora.css — 교회 사이트 "따뜻하고 밝은 미래형" 리스킨 오버라이드
   hub.css 뒤에 로드. 레이아웃은 건드리지 않고 색·배경·그림자·모션만 덧입힘.
   ============================================================================ */

:root{
  /* 밝고 따뜻한 베이스 + 오로라 강조색 */
  --bg:        #fcfbf8;     /* 더 밝은 크림 */
  --bg-warm:   rgba(255,252,245,.72);
  --card:      rgba(255,255,255,.72);
  --line:      rgba(13,110,110,.12);
  --line-soft: rgba(13,110,110,.08);

  --brand:      #0e8f86;    /* 한 톤 밝은 틸 */
  --brand-deep: #0a6f68;
  --brand-soft: #e2f5f2;
  --gold:       #d4ab4f;
  --gold-soft:  #f6eccf;
  --coral:      #ff7a6b;

  /* 오로라 4색 */
  --a1:#15c2b6;  --a2:#5b8cff;  --a3:#ff7aa8;  --a4:#ffc24b;

  --shadow-sm: 0 2px 8px rgba(20,60,70,.06);
  --shadow-md: 0 12px 32px rgba(20,60,70,.10);
  --shadow-lg: 0 26px 60px rgba(20,60,70,.16);
  --radius:    20px;
}

/* ---- 움직이는 오로라 배경 (밝고 은은하게) ---------------------------------- */
body{ background: var(--bg); position:relative; }
body::before{
  content:""; position:fixed; inset:-25%; z-index:-2; pointer-events:none;
  filter: blur(70px); opacity:.55;
  background:
    radial-gradient(32vw 32vw at 18% 22%, var(--a1), transparent 60%),
    radial-gradient(34vw 34vw at 82% 16%, var(--a2), transparent 60%),
    radial-gradient(30vw 30vw at 70% 82%, var(--a3), transparent 62%),
    radial-gradient(28vw 28vw at 24% 80%, var(--a4), transparent 62%);
  background-repeat:no-repeat;
  animation: auroraDrift 22s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  0%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(2.5%,-2%) scale(1.07); }
  100%{ transform:translate(-2.5%,2%) scale(1.03); }
}
@media (prefers-reduced-motion: reduce){ body::before{ animation:none; } }

/* 본문이 배경 위로 뜨도록 */
.topbar, .nav, main, .site-footer{ position:relative; z-index:1; }

/* ---- 섹션: 투명/글래스로 오로라가 비치게 -------------------------------- */
.section--warm{
  background: var(--bg-warm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.section--brand{
  background:
    linear-gradient(125deg, rgba(14,143,134,.95), rgba(91,140,255,.92) 55%, rgba(255,122,168,.9));
  box-shadow: inset 0 0 120px rgba(255,255,255,.12);
}

/* ---- 제목/강조: 오로라 그라디언트 텍스트 -------------------------------- */
.section-title{
  background: linear-gradient(100deg, var(--brand), var(--a2) 45%, var(--coral));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section--brand .section-title{ background:none; color:#fff; }
.eyebrow{
  background: var(--brand-soft);
  border:1px solid var(--line);
}
.hero h1 .accent{
  background: linear-gradient(100deg, var(--brand), var(--a2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero h1 .accent-gold{
  background: linear-gradient(100deg, var(--gold), var(--coral));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-slogan .slogan-main .accent-gold{ color: var(--gold); }

/* ---- 히어로 배경 강화 ---------------------------------------------------- */
.hero{
  background:
    radial-gradient(900px 460px at 78% -12%, rgba(255,194,75,.20), transparent 60%),
    radial-gradient(760px 420px at 8% 0%, rgba(21,194,182,.16), transparent 60%);
}

/* ---- 버튼: 그라디언트 + 글로우 ----------------------------------------- */
.btn--primary{
  background: linear-gradient(100deg, var(--brand), var(--a2));
  box-shadow: 0 12px 30px rgba(91,140,255,.28);
}
.btn--primary:hover{ background: linear-gradient(100deg, var(--brand-deep), #4a7cf0); }
.btn--gold{
  background: linear-gradient(100deg, var(--gold), var(--coral));
  color:#3a2410;
  box-shadow: 0 12px 30px rgba(255,122,107,.26);
}
.btn--gold:hover{ filter:brightness(1.05); }
.btn--ghost{
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(6px);
  border-color: var(--line);
  color: var(--brand-deep);
}
.btn--ghost:hover{ border-color: var(--brand); background:#fff; }

/* ---- 카드 글래스모피즘 (가격/갤러리/신뢰지표) --------------------------- */
.price-card,
.gallery-grid > *,
.trust-strip{
  background: var(--card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: var(--shadow-md);
}
.price-card{ transition: transform .3s, box-shadow .3s; }
.price-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.gallery-grid > *{ transition: transform .3s, box-shadow .3s; }
.gallery-grid > *:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* 추천 카드: 흐르는 오로라 테두리 */
.price-card--featured{
  border-color: transparent;
  box-shadow: 0 22px 56px rgba(91,140,255,.20);
}
.price-card--featured::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px;
  background: linear-gradient(120deg, var(--a1), var(--a2), var(--a3), var(--a4));
  background-size:220% auto;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: auroraFlow 7s linear infinite; pointer-events:none;
}
@keyframes auroraFlow{ to{ background-position:220% center; } }
.price-tag--brand{ background: linear-gradient(100deg, var(--brand), var(--a2)); }
.price-ribbon{ background: linear-gradient(100deg, var(--a2), var(--a3)); }

/* ---- 상단바/네비 글래스 ------------------------------------------------- */
.topbar{
  background: linear-gradient(100deg, var(--brand-deep), #2a5fb0);
}
.nav{
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-links a.nav-cta{ background: linear-gradient(100deg, var(--brand), var(--a2)); }
.nav-links a.nav-cta--soft{
  background: linear-gradient(100deg, var(--gold), var(--coral)); color:#3a2410;
}

/* ---- 푸터 ---------------------------------------------------------------- */
.site-footer{
  background: linear-gradient(160deg, #0a6f68, #163a6e 70%, #2a2350);
}

/* ---- 살짝 떠오르는 등장 모션 (이미 .reveal 있으면 보강) ----------------- */
.trust-strip, .price-card, .gallery-grid > *{ will-change: transform; }