/* =========================================================
   모바일 메인 — 프리미엄 네이비 글로우 레이어
   진한 네이비(#04111d) 위에 샴페인 골드 · 로열블루 · 청록 빛이 천천히 흐르는 오로라
   (mobile-home.css 뒤에 로드, .page-home .cp-mobile 범위에서만 동작)
   ========================================================= */
.page-home .cp-mobile{
  --gl-gold:246,170,88; --gl-blue:58,124,212; --gl-teal:30,150,178; --gl-violet:118,92,222;
  position:relative; isolation:isolate;
}

/* 1) 화면 전체에 고정된 오로라 — 스크롤해도 빛이 따라다닌다 */
.page-home .cp-mobile::before{
  content:""; position:fixed; inset:-18% -30%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(44% 30% at 16% 12%, rgba(var(--gl-blue),.42), transparent 70%),
    radial-gradient(38% 26% at 88% 34%, rgba(var(--gl-gold),.26), transparent 72%),
    radial-gradient(46% 32% at 20% 70%, rgba(var(--gl-teal),.26), transparent 72%),
    radial-gradient(42% 30% at 92% 90%, rgba(var(--gl-violet),.24), transparent 70%),
    radial-gradient(60% 40% at 50% 50%, rgba(10,34,58,.55), transparent 80%);
  animation:glAurora 16s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes glAurora{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(5%,-4%,0) scale(1.14)}
  100%{transform:translate3d(-5%,4%,0) scale(1.06)}
}

/* 2) 반짝이는 별가루 */
.page-home .cp-mobile::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 12%, rgba(255,236,200,.95), transparent 60%),
    radial-gradient(1.2px 1.2px at 22% 28%, rgba(205,225,255,.9), transparent 60%),
    radial-gradient(1.8px 1.8px at 37% 8%, rgba(255,214,150,.95), transparent 60%),
    radial-gradient(1.2px 1.2px at 52% 22%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.6px 1.6px at 68% 12%, rgba(205,225,255,.95), transparent 60%),
    radial-gradient(1.2px 1.2px at 84% 24%, rgba(255,236,200,.9), transparent 60%),
    radial-gradient(1.6px 1.6px at 94% 8%, rgba(255,214,150,.95), transparent 60%),
    radial-gradient(1.4px 1.4px at 12% 46%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.8px 1.8px at 30% 58%, rgba(255,214,150,.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 46% 44%, rgba(205,225,255,.9), transparent 60%),
    radial-gradient(1.6px 1.6px at 62% 56%, rgba(255,236,200,.95), transparent 60%),
    radial-gradient(1.2px 1.2px at 78% 48%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.8px 1.8px at 91% 62%, rgba(255,214,150,.95), transparent 60%),
    radial-gradient(1.4px 1.4px at 6% 78%, rgba(205,225,255,.9), transparent 60%),
    radial-gradient(1.6px 1.6px at 24% 90%, rgba(255,236,200,.95), transparent 60%),
    radial-gradient(1.2px 1.2px at 42% 80%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.8px 1.8px at 58% 94%, rgba(255,214,150,.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 73% 76%, rgba(205,225,255,.95), transparent 60%),
    radial-gradient(1.6px 1.6px at 88% 88%, rgba(255,236,200,.9), transparent 60%);
  animation:glTwinkle 5s ease-in-out infinite;
}
@keyframes glTwinkle{0%,100%{opacity:.25}35%{opacity:1}65%{opacity:.5}}

/* 3) 단색 네이비 구간 → 빛이 번지는 그라데이션 (투명도를 줘서 오로라가 비친다) */
.page-home .cp-mobile .mlx-ticker{
  background:linear-gradient(100deg,#04111d 0%,#0a2640 28%,#1b4468 50%,#0a2640 72%,#04111d 100%);
  background-size:220% 100%; animation:glSheen 7s linear infinite;
  box-shadow:inset 0 1px 0 rgba(246,170,88,.45),inset 0 -1px 0 rgba(246,170,88,.3);
}
@keyframes glSheen{to{background-position:-220% 0}}

.page-home .cp-mobile .cp-benefits--motion,
.page-home .cp-mobile .cp-benefits-motion{
  background:
    radial-gradient(70% 260px at 50% 0%, rgba(var(--gl-blue),.30), transparent 72%),
    radial-gradient(60% 220px at 100% 100%, rgba(var(--gl-gold),.22), transparent 72%),
    linear-gradient(180deg,rgba(4,17,29,.78),rgba(6,24,42,.55) 50%,rgba(4,17,29,.8));
}
.page-home .cp-mobile .ds-stack{
  background:
    radial-gradient(70% 420px at 50% 0%, rgba(var(--gl-blue),.30), transparent 72%),
    radial-gradient(60% 360px at 0% 50%, rgba(var(--gl-teal),.20), transparent 72%),
    radial-gradient(60% 360px at 100% 80%, rgba(var(--gl-gold),.18), transparent 72%),
    linear-gradient(180deg,rgba(4,17,29,.7),rgba(7,26,46,.5) 50%,rgba(4,17,29,.7));
  background-size:100% 100%,100% 1100px,100% 1300px,100% 100%;
  background-repeat:no-repeat,repeat-y,repeat-y,no-repeat;
}
.page-home .cp-mobile .cp-brand-panel{
  background:
    radial-gradient(80% 280px at 50% 0%, rgba(var(--gl-gold),.30), transparent 72%),
    radial-gradient(70% 240px at 50% 100%, rgba(var(--gl-blue),.30), transparent 72%),
    linear-gradient(180deg,rgba(4,17,29,.8),rgba(7,26,46,.6) 55%,rgba(4,17,29,.85));
  box-shadow:inset 0 1px 0 rgba(246,170,88,.4);
}

/* 4) 섹션 경계 — 금빛 헤어라인 + 은은한 빛 */
.page-home .cp-mobile .ds-kin,
.page-home .cp-mobile .official-home-links,
.page-home .cp-mobile .cp-visit-banner,
.page-home .cp-mobile .mlx-form{
  box-shadow:inset 0 1px 0 rgba(246,170,88,.4),inset 0 -1px 0 rgba(246,170,88,.16),inset 0 28px 60px -34px rgba(var(--gl-blue),.32);
}
.page-home .cp-mobile .official-home-links{
  background:
    radial-gradient(80% 240px at 50% 0%, rgba(var(--gl-blue),.34), transparent 72%),
    radial-gradient(70% 220px at 50% 100%, rgba(var(--gl-gold),.22), transparent 72%),
    linear-gradient(135deg,#04111d,#0a1d2e 55%,#04111d);
}

/* 5) 패널 이미지 · 카드 — 빛나는 테두리와 후광 */
.page-home .cp-mobile img[data-panel-gif],
.page-home .cp-mobile .mlx-sec picture img{
  box-shadow:0 0 0 1px rgba(246,170,88,.28),0 18px 50px -12px rgba(var(--gl-blue),.55),0 0 60px -6px rgba(var(--gl-gold),.18);
  animation:glHalo 5s ease-in-out infinite alternate;
}
@keyframes glHalo{
  to{box-shadow:0 0 0 1px rgba(246,170,88,.5),0 22px 60px -10px rgba(var(--gl-blue),.7),0 0 84px -4px rgba(var(--gl-gold),.32)}
}

/* 6) 헤더 — 같은 네이비에 위로 번지는 빛 */
.page-home .hd{
  background:linear-gradient(180deg,#04111d 0%,#061a2e 100%)!important;
  box-shadow:0 1px 0 rgba(246,170,88,.45),0 10px 34px -10px rgba(var(--gl-blue),.55);
}

/* 7) 하단 고정바 · 플로팅 전화 — 샴페인 골드 후광 */
.page-home .cp-mobile-bar{box-shadow:0 -1px 0 rgba(246,170,88,.35),0 -14px 40px -14px rgba(var(--gl-blue),.6)}
.page-home .cp-call-float{animation:glFloat 3.6s ease-in-out infinite}
@keyframes glFloat{
  0%,100%{box-shadow:0 0 0 0 rgba(var(--gl-gold),.55),0 12px 30px rgba(0,0,0,.45)}
  50%{box-shadow:0 0 0 14px rgba(var(--gl-gold),0),0 12px 36px rgba(var(--gl-gold),.4)}
}

@media (prefers-reduced-motion:reduce){
  .page-home .cp-mobile::before,.page-home .cp-mobile::after,.page-home .cp-mobile .mlx-ticker,
  .page-home .cp-mobile img[data-panel-gif],.page-home .cp-mobile .mlx-sec picture img,.page-home .cp-call-float{animation:none}
}