/* =====================================================================
 * platform.css — keywordmaster.net 플랫폼 디자인 레이어
 * 기능에 영향을 주지 않는 CSS 전용 시각 강화
 *  - anti-gravity entrance (떠오르는 등장)
 *  - floating loop (부유 모션)
 *  - hero aurora illustration (그라데이션 블롭 일러스트)
 *  - grid bg illustration (격자 배경)
 *  - glass card (글래스모피즘)
 *  - bi 아이콘 정렬/색상 보정
 * ===================================================================== */

/* ---------- 안티그래비티 등장 (한 번 실행) ---------- */
@keyframes kmpRise{
  0%   {opacity:0;transform:translateY(80px) scale(.9);filter:blur(8px);}
  55%  {opacity:1;transform:translateY(-12px) scale(1.02);filter:blur(0);}
  75%  {transform:translateY(4px) scale(.99);}
  100% {transform:translateY(0) scale(1);}
}
.kmp-rise{animation:kmpRise .9s cubic-bezier(.22,1.2,.36,1) both;}
.kmp-rise-delay-1{animation-delay:.08s;}
.kmp-rise-delay-2{animation-delay:.16s;}
.kmp-rise-delay-3{animation-delay:.24s;}
.kmp-rise-delay-4{animation-delay:.32s;}
.kmp-rise-delay-5{animation-delay:.40s;}

/* ---------- 부유 (반복) ---------- */
@keyframes kmpFloat{
  0%,100%{transform:translateY(0) rotate(0);}
  50%    {transform:translateY(-10px) rotate(.4deg);}
}
.kmp-float{animation:kmpFloat 4.2s ease-in-out infinite;}
.kmp-float-slow{animation:kmpFloat 7s ease-in-out infinite;}
.kmp-float-fast{animation:kmpFloat 3s ease-in-out infinite;}

/* ---------- 글로우 펄스 ---------- */
@keyframes kmpGlowPulse{
  0%,100%{opacity:.45;transform:scale(1);}
  50%    {opacity:.75;transform:scale(1.06);}
}

/* ---------- 시머 (배지/버튼 위에 흐르는 빛) ---------- */
@keyframes kmpShimmer{
  0%  {transform:translateX(-120%) skewX(-18deg);}
  100%{transform:translateX(220%) skewX(-18deg);}
}

/* ---------- Hero 일러스트 (그라데이션 블롭 + 격자) ---------- */
.kmp-hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.kmp-hero::before,
.kmp-hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:.55;
  pointer-events:none;
  z-index:-1;
  animation:kmpGlowPulse 8s ease-in-out infinite;
}
.kmp-hero::before{
  width:480px;height:480px;
  background:radial-gradient(circle at 30% 30%,#6366f1,#8b5cf6 45%,transparent 70%);
  top:-160px;left:-120px;
}
.kmp-hero::after{
  width:520px;height:520px;
  background:radial-gradient(circle at 70% 70%,#06b6d4,#22d3ee 40%,transparent 70%);
  top:-80px;right:-160px;
  animation-delay:-3s;
}

/* 격자 배경 (서브틀) */
.kmp-grid-bg{
  position:relative;
}
.kmp-grid-bg::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(99,102,241,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(99,102,241,.06) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%);
  pointer-events:none;
  z-index:-1;
}
[data-bs-theme="dark"] .kmp-grid-bg::before,
.theme-dark .kmp-grid-bg::before{
  background-image:
    linear-gradient(rgba(139,92,246,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(139,92,246,.10) 1px,transparent 1px);
}

/* ---------- Floating illustrations (장식 도형) ---------- */
.kmp-illust-wrap{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-1;
}
.kmp-illust{
  position:absolute;
  border-radius:24px;
  background:linear-gradient(135deg,rgba(99,102,241,.20),rgba(139,92,246,.10));
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 40px rgba(99,102,241,.18);
  animation:kmpFloat 6s ease-in-out infinite;
}
.kmp-illust.diamond{transform:rotate(45deg);}
.kmp-illust.circle{border-radius:50%;}
.kmp-illust.bar{
  border-radius:6px;
  background:linear-gradient(180deg,#6366f1,#8b5cf6);
  opacity:.55;
}

/* 일러스트 위치 프리셋 */
.kmp-illust-tl{top:8%;left:6%;width:80px;height:80px;}
.kmp-illust-tr{top:14%;right:8%;width:64px;height:64px;animation-delay:-2s;}
.kmp-illust-bl{bottom:10%;left:10%;width:48px;height:48px;animation-delay:-1s;}
.kmp-illust-br{bottom:18%;right:6%;width:96px;height:96px;animation-delay:-3.5s;}
.kmp-illust-cl{top:48%;left:3%;width:36px;height:36px;animation-delay:-4s;}
.kmp-illust-cr{top:56%;right:4%;width:42px;height:42px;animation-delay:-2.5s;}

/* ---------- 글래스 카드 ---------- */
.kmp-glass{
  background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.35));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(99,102,241,.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 12px 32px -12px rgba(99,102,241,.25);
}
[data-bs-theme="dark"] .kmp-glass,
.theme-dark .kmp-glass{
  background:linear-gradient(180deg,rgba(30,41,59,.55),rgba(15,23,42,.45));
  border-color:rgba(139,92,246,.25);
}

/* ---------- 호버 리프트 ---------- */
.kmp-lift{transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s;}
.kmp-lift:hover{transform:translateY(-6px);box-shadow:0 18px 40px -16px rgba(99,102,241,.35);}

/* ---------- 그라데이션 텍스트 ---------- */
.kmp-text-gradient{
  background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#06b6d4 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* ---------- bi 아이콘 표시 보정 (이모지 자리에 들어갈 때) ---------- */
.kmp-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:-2px;
  line-height:1;
}
.kmp-ico.lg{font-size:1.25em;}
.kmp-ico.xl{font-size:1.6em;}
.kmp-ico.xxl{font-size:2.4em;}
/* 카드 아이콘 박스 */
.kmp-iconbox{
  width:48px;height:48px;
  border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(139,92,246,.10));
  color:#6366f1;
  font-size:22px;
  box-shadow:inset 0 0 0 1px rgba(99,102,241,.20);
}
.kmp-iconbox.accent{
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff;
  box-shadow:0 8px 22px -8px rgba(99,102,241,.55);
}
.kmp-iconbox.cyan{
  background:linear-gradient(135deg,rgba(6,182,212,.18),rgba(34,211,238,.10));
  color:#06b6d4;
  box-shadow:inset 0 0 0 1px rgba(6,182,212,.22);
}
.kmp-iconbox.amber{
  background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(251,191,36,.10));
  color:#f59e0b;
  box-shadow:inset 0 0 0 1px rgba(245,158,11,.22);
}

/* 체크 아이콘 (pricing) */
.kmp-check{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;
  border-radius:50%;
  background:linear-gradient(135deg,#6366f1,#06b6d4);
  color:#fff;
  font-size:11px;
  flex-shrink:0;
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  .kmp-rise,
  .kmp-float,.kmp-float-slow,.kmp-float-fast,
  .kmp-illust,.kmp-hero::before,.kmp-hero::after{
    animation:none !important;
  }
}

/* ---------- 모바일 ---------- */
@media (max-width:768px){
  .kmp-hero::before{width:280px;height:280px;top:-80px;left:-60px;}
  .kmp-hero::after{width:300px;height:300px;top:-40px;right:-80px;}
  .kmp-illust-tr,.kmp-illust-tl{width:48px;height:48px;}
  .kmp-illust-br,.kmp-illust-bl{width:36px;height:36px;}
}

/* ---------- 비로그인 alert 박스 플랫폼화 ---------- */
.alert.alert-warning,
.alert.alert-danger,
.alert.alert-info{
  border:none;
  border-radius:16px;
  padding:24px 28px;
  font-size:14px;
  font-weight:600;
  text-align:center;
  max-width:520px;
  margin:32px auto;
  position:relative;
  overflow:hidden;
  animation:kmpRise .9s cubic-bezier(.22,1.2,.36,1) both;
  box-shadow:0 12px 32px -12px rgba(99,102,241,.20);
}
.alert.alert-warning{
  background:linear-gradient(135deg,rgba(245,158,11,.10),rgba(251,191,36,.06));
  color:#92400e;
  border:1px solid rgba(245,158,11,.30);
}
.alert.alert-danger{
  background:linear-gradient(135deg,rgba(239,68,68,.10),rgba(244,63,94,.06));
  color:#991b1b;
  border:1px solid rgba(239,68,68,.30);
}
.alert.alert-info{
  background:linear-gradient(135deg,rgba(99,102,241,.10),rgba(139,92,246,.06));
  color:#3730a3;
  border:1px solid rgba(99,102,241,.30);
}
.alert.alert-warning::before,
.alert.alert-danger::before,
.alert.alert-info::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#6366f1,#8b5cf6,#06b6d4);
}
[data-bs-theme="dark"] .alert.alert-warning,
.theme-dark .alert.alert-warning{background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(251,191,36,.10));color:#fcd34d;}
[data-bs-theme="dark"] .alert.alert-danger,
.theme-dark .alert.alert-danger{background:linear-gradient(135deg,rgba(239,68,68,.18),rgba(244,63,94,.10));color:#fca5a5;}
[data-bs-theme="dark"] .alert.alert-info,
.theme-dark .alert.alert-info{background:linear-gradient(135deg,rgba(99,102,241,.20),rgba(139,92,246,.12));color:#c7d2fe;}

/* ---------- 글로벌 페이지 단위 미세 진입 ---------- */
.km-pricing-card,.gd-card,.mn-step,.api-card,.bf-banner,.kg-hero,.kd-card,.br-card{
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,border-color .25s;
}
.km-pricing-card:hover,.gd-card:hover,.api-card:hover,.kg-hero:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px -16px rgba(99,102,241,.30);
}

/* 일반 h1 그라데이션 (선택적) */
.kg-hero h1,.kd h1,.api-page h1,.referral-container h1{
  background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#06b6d4 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}