:root {
  --avatar-size: 96px;
  --badge-scale: 0.75;  /* 0.58 → 0.75 (30% 증가) */
  --badge-inset: -8px;  /* 0px → -8px (살짝 겹침) */
  --badge-padding-scale: 0.12;  /* 0.22 → 0.12 (패딩 절반) */
}

.cu-profile {
  position: relative;
  display: inline-block;
  line-height: 0;
  --cu-avatar-size: var(--avatar-size, 96px);
  --cu-badge-size: calc(var(--cu-avatar-size) * var(--badge-scale, 0.55));
  --cu-badge-inset: var(--badge-inset, calc(var(--cu-avatar-size) * 0.12));
  --cu-badge-padding: calc(var(--cu-badge-size) * var(--badge-padding-scale, 0.18));
  width: var(--cu-avatar-size);
  height: var(--cu-avatar-size);
}

.cu-avatar-btn {
  width: var(--cu-avatar-size);
  height: var(--cu-avatar-size);
  border-radius: 9999px;
  overflow: hidden;
  border: 0;
  padding: 0;
  background: linear-gradient(135deg, #0f1419 0%, #1a2530 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cu-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cu-badge-btn {
  position: absolute;
  right: var(--cu-badge-inset);
  bottom: var(--cu-badge-inset);
  width: var(--cu-badge-size);
  height: var(--cu-badge-size);
  border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  padding: var(--cu-badge-padding);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(2px);
  cursor: pointer;
  z-index: 10;
}

.cu-badge {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 9999px;
  display: block;
  padding: 2px;
}

.cu-avatar-btn:focus-visible,
.cu-badge-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(68, 150, 233, 0.35);
}

.cu-badge-btn img {
  pointer-events: none;
}

.cu-profile--responsive {
  --avatar-size: 56px;
  --badge-inset: -3px;
  --badge-scale: 0.65;
  --badge-padding-scale: 0.18;
}

@media (min-width: 640px) {
  .cu-profile--responsive {
    --avatar-size: 48px;  /* 36px에서 48px로 증가 */
    --badge-inset: -3px;  /* 일관된 겹침 */
    --badge-scale: 0.65;  /* 크기 증가 (48px * 0.65 = 31.2px) */
    --badge-padding-scale: 0.18;  /* 빈 공간 감소 */
  }
}

/* Size Modifiers */
.cu-profile--sm {
  --avatar-size: 40px;
  --badge-scale: 0.75;  /* 0.58 → 0.75 */
  --badge-inset: -6px;  /* 0px → -6px */
  --badge-padding-scale: 0.12;  /* 0.22 → 0.12 */
}

.cu-profile--md {
  --avatar-size: 56px;
  --badge-scale: 0.75;  /* 0.58 → 0.75 */
  --badge-inset: -7px;  /* 0px → -7px */
  --badge-padding-scale: 0.12;  /* 0.22 → 0.12 */
}

.cu-profile--lg {
  --avatar-size: 96px;
  --badge-scale: 0.75;  /* 0.58 → 0.75 */
  --badge-inset: -8px;  /* 6px → -8px (겹침으로 변경) */
  --badge-padding-scale: 0.12;  /* 0.22 → 0.12 */
}

.cu-profile--xl {
  --avatar-size: 128px;
  --badge-scale: 0.75;  /* 0.58 → 0.75 */
  --badge-inset: -10px;  /* 8px → -10px */
  --badge-padding-scale: 0.12;  /* 0.22 → 0.12 */
}