/* Reset and base body background (optional if shared) */
body {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #000000 100%);
    position: relative;
    overflow-x: hidden;
}

/* Animated background wrapper */
.bg-animation {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

/* Circles */
.bg-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    animation: pulse 3s ease-in-out infinite;
}

.bg-circle-1 {
    top: -160px;
    right: -160px;
    width: 320px;
    height: 320px;
    background: rgba(71, 85, 105, 0.1);
}

.bg-circle-2 {
    bottom: -160px;
    left: -160px;
    width: 320px;
    height: 320px;
    background: rgba(6, 182, 212, 0.15);
    animation-delay: 1s;
}

.bg-circle-3 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    background: rgba(59, 130, 246, 0.1);
    animation-delay: 0.5s;
}

/* Background animation keyframe */
@keyframes pulse {
    0%, 100% { opacity: 0.1; transform: scale(1); }
    50% { opacity: 0.2; transform: scale(1.1); }
}

/* Responsive (optional) */
@media (max-width: 768px) {
    .bg-circle {
        width: 200px;
        height: 200px;
    }

    .bg-circle-1 {
        top: -100px;
        right: -100px;
    }

    .bg-circle-2 {
        bottom: -100px;
        left: -100px;
    }
}

.bg-watermark {
  position: fixed;
  font-size: 12px;
  font-weight: 600;
  color: rgba(180, 180, 180, 0.035);  /* 회색 + 매우 낮은 불투명도 */
  transform: rotate(-15deg);
  pointer-events: none;
  user-select: none;
  z-index: 9999;
  white-space: nowrap;
  mix-blend-mode: normal;
}




/* 위치 지정 */
.wm-top-left {
    top: 10%;
    left: 5%;
    transform: rotate(-10deg);
}
.wm-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(10deg);
}
.wm-bottom-right {
    bottom: 10%;
    right: 5%;
    transform: rotate(-7deg);
}