/* ===== 공통 아바타 래퍼 ===== */
.user-avatar-frame{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
}

.user-avatar-frame img{
  border-radius:50%;
  display:block;
  object-fit:cover;
}
/* ============================
   프로필 뱃지 (Frame보다 위)
   ============================ */

.user-avatar-wrap{
  position:relative;
  display:inline-block;
}

/* 뱃지 아이콘 */
.user-badge-item{
  position:absolute;
  right:-4px;          /* 미세 조정 가능 */
  bottom:-4px;         /* 미세 조정 가능 */
  width:50px;
  height:50px;
  z-index:5;           /* 프레임보다 반드시 높게 */
  pointer-events:none; /* 클릭 방해 X */
}

.user-badge-item img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}



/*-------------------------------------- */
/*			포인트 상점용			 */
/*-------------------------------------- */
/* DB css_class = frame-neon-blue */
.frame-neon-blue{
  padding:4px;
  border-radius:50%;
  border:2px solid rgba(0,180,255,.95);
  box-shadow:
    0 0 8px rgba(0,180,255,.8),
    0 0 18px rgba(0,180,255,.6);
}

/* DB css_class = frame-gold-ring */
.frame-gold-ring{
  padding:4px;
  border-radius:50%;
  border:2px solid #f5d26a;
  box-shadow:0 0 10px rgba(245,210,106,.6);
}


/* ===========================================
   ★ 레인보우 프레임 (Rainbow Frame)
   - 프레임이 회전하며 7색 그라데이션이 흐름
   - 다른 페이지와 충돌 없도록 전역 클래스 형태로 정의
   =========================================== */

/* 얇은 기본 레인보우 링 */
.frame-rainbow{
  position:relative;
  padding:3px;
  border-radius:50%;
}

.frame-rainbow::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:conic-gradient(
    #ff4b6b,
    #ffb64b,
    #ffe94b,
    #7bff4b,
    #4bfff3,
    #4b7bff,
    #b44bff,
    #ff4b6b
  );
  animation:frameRingSpinSlow 7s linear infinite;
  z-index:0;
}

.frame-rainbow > img{
  position:relative;
  z-index:1;
}



/* ===========================================
   ★ 레인보우6종
   =========================================== */
/* ===== 공통 애니메이션 ===== */

/* 부드러운 숨쉬기 (scale) */
@keyframes framePulseSoft{
  0%   { transform:scale(1);   opacity:0.6; }
  50%  { transform:scale(1.08);opacity:1;   }
  100% { transform:scale(1);   opacity:0.6; }
}

/* 링 회전 */
@keyframes frameRingSpinSlow{
  0%   { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}

/* 안쪽 빛 흐름(수평 이동) */
@keyframes frameLightSweep{
  0%   { transform:translateX(-120%); opacity:0; }
  30%  { opacity:1; }
  70%  { opacity:1; }
  100% { transform:translateX(120%); opacity:0; }
}
/* 레인보우 링 전용: 회전 + 크기 펄스 */
@keyframes frameRainbowSpinPulse {
  0% {
    transform:scale(0.85) rotate(0deg);
    opacity:0.9;
  }
  50% {
    transform:scale(1.00) rotate(180deg);
    opacity:1;
  }
  100% {
    transform:scale(0.85) rotate(360deg);
    opacity:0.9;
  }
}

/* ============================
   1. 레인보우 펄스 프레임
   - 프로필 이미지는 고정
   - 레인보우 링만 회전 + 커졌다/작아졌다
   ============================ */

.frame-rainbow-pulse{
  position:relative;
  padding:5px;           /* 프레임 두께 */
  border-radius:50%;
}

/* 레인보우 링 (여기에만 애니메이션) */
.frame-rainbow-pulse::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:conic-gradient(
    #ff4b6b,
    #ffb64b,
    #ffe94b,
    #7bff4b,
    #4bfff3,
    #4b7bff,
    #b44bff,
    #ff4b6b
  );
  box-shadow:
    0 0 10px rgba(255,120,120,.7),
    0 0 24px rgba(120,180,255,.6);
  transform-origin:center center;
  animation:frameRainbowSpinPulse 2.4s ease-in-out infinite;
  z-index:0;
}

/* 프로필 이미지는 고정 (애니메이션 없음) */
.frame-rainbow-pulse > img{
  position:relative;
  z-index:1;
  border-radius:50%;
  display:block;
}




/* 2) 레드 계열 레인보우 */
.frame-rainbow-red{
  position:relative;
  padding:4px;
  border-radius:50%;
}

/* 레드 그라데이션 링 */
.frame-rainbow-red::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:conic-gradient(
    #ff1744,
    #ff8a00,
    #ffeb3b,
    #ff1744
  );
  box-shadow:
    0 0 10px rgba(255,71,71,.9),
    0 0 24px rgba(255,111,0,.65);
  animation:frameRingSpinSlow 6s linear infinite;
  z-index:0;
}

/* 아주 얕은 숨쉬기 */
.frame-rainbow-red::after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.35);
  opacity:0.5;
  animation:framePulseSoft 3s ease-in-out infinite;
}

/* 이미지 */
.frame-rainbow-red > img{
  position:relative;
  z-index:1;
}


/* 4) 오로라 프레임 (퍼플/그린) */
.frame-rainbow-aurora{
  position:relative;
  padding:4px;
  border-radius:50%;
}

.frame-rainbow-aurora::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:inherit;
  background:conic-gradient(
    #b388ff,
    #64ffda,
    #80d8ff,
    #b388ff
  );
  filter:blur(0.3px);
  box-shadow:
    0 0 12px rgba(179,136,255,.85),
    0 0 26px rgba(100,255,218,.5);
  animation:frameRingSpinSlow 8s linear infinite;
}

/* 부드러운 숨쉬기 오로라 헤일로 */
.frame-rainbow-aurora::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:inherit;
  background:radial-gradient(circle, rgba(140,255,255,.4), transparent 70%);
  filter:blur(6px);
  opacity:0.75;
  animation:framePulseSoft 3.4s ease-in-out infinite;
}

.frame-rainbow-aurora > img{
  position:relative;
  z-index:1;
}

/* 5) 선셋 네온 (오렌지/핑크/보라) */
.frame-rainbow-sunset{
  position:relative;
  padding:4px;
  border-radius:50%;
}

.frame-rainbow-sunset::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:conic-gradient(
    #ff8a00,
    #ff4081,
    #7c4dff,
    #ff8a00
  );
  box-shadow:
    0 0 10px rgba(255,138,0,.9),
    0 0 24px rgba(255,64,129,.6);
  animation:frameRingSpinSlow 5.5s linear infinite;
}

/* 안쪽 따뜻한 글로우 */
.frame-rainbow-sunset::after{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:inherit;
  box-shadow:0 0 18px rgba(255,188,117,.65) inset;
  opacity:0.8;
}

.frame-rainbow-sunset > img{
  position:relative;
  z-index:1;
}


/* 6) 다크 보이드 레인보우 (미니멀) */
.frame-rainbow-void{
  position:relative;
  padding:3px;
  border-radius:50%;
  background:#050510;
}

.frame-rainbow-void::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:conic-gradient(
    rgba(255,64,129,.9),
    rgba(3,169,244,.9),
    rgba(0,230,118,.9),
    rgba(255,235,59,.9),
    rgba(255,64,129,.9)
  );
  mask:
    radial-gradient(farthest-side, transparent calc(100% - 3px), #000 100%);
  -webkit-mask:
    radial-gradient(farthest-side, transparent calc(100% - 3px), #000 100%);
  animation:frameRingSpinSlow 9s linear infinite;
  opacity:.9;
}

/* 아주 느리고 얕은 숨쉬기 */
.frame-rainbow-void::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.16);
  opacity:0.4;
  animation:framePulseSoft 4.4s ease-in-out infinite;
}

.frame-rainbow-void > img{
  position:relative;
  z-index:1;
}