/* Beauty Spa 스타일 커스텀 커서 - v3 회색 버전 */

/* 기본 커서 숨기기 */
html *, body * {
    cursor: none !important;
}

/* 커스텀 커서 컨테이너 - 회색 */
body .custom-cursor {
    position: fixed !important;
    width: 12px !important;
    height: 12px !important;
    background-color: #444444 !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 99999 !important;
    transition: transform 0.15s ease-out, background-color 0.3s ease, opacity 0.3s ease !important;
    transform: translate(-50%, -50%) !important;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 커서 숨김 상태 */
body .custom-cursor.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 커서 팔로워 (큰 원) - 회색 */
body .cursor-follower {
    position: fixed !important;
    width: 30px !important;
    height: 30px !important;
    border: 2px solid #666666 !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 99998 !important;
    transition: all 0.3s ease-out !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0.5 !important;
    background-color: transparent !important;
    visibility: visible !important;
}

/* 팔로워 숨김 상태 */
body .cursor-follower.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 호버 상태 */
body .custom-cursor.hover,
a:hover ~ .custom-cursor,
button:hover ~ .custom-cursor,
input:hover ~ .custom-cursor,
textarea:hover ~ .custom-cursor,
select:hover ~ .custom-cursor,
[role="button"]:hover ~ .custom-cursor,
.clickable:hover ~ .custom-cursor {
    transform: translate(-50%, -50%) scale(1.5) !important;
    background-color: #007AFF !important;
}

body .cursor-follower.hover,
a:hover ~ .cursor-follower,
button:hover ~ .cursor-follower,
input:hover ~ .cursor-follower,
textarea:hover ~ .cursor-follower,
select:hover ~ .cursor-follower,
[role="button"]:hover ~ .cursor-follower,
.clickable:hover ~ .cursor-follower {
    width: 50px !important;
    height: 50px !important;
    border-color: #007AFF !important;
    opacity: 0.3 !important;
}

/* 클릭 상태 */
body:active .custom-cursor,
body .custom-cursor.click {
    transform: translate(-50%, -50%) scale(0.8) !important;
    background-color: #222222 !important;
}

body:active .cursor-follower,
body .cursor-follower.click {
    width: 40px !important;
    height: 40px !important;
    border-width: 3px !important;
}

/* 텍스트 호버 상태 */
p:hover ~ .custom-cursor,
h1:hover ~ .custom-cursor,
h2:hover ~ .custom-cursor,
h3:hover ~ .custom-cursor,
h4:hover ~ .custom-cursor,
h5:hover ~ .custom-cursor,
h6:hover ~ .custom-cursor,
span:hover ~ .custom-cursor,
li:hover ~ .custom-cursor {
    width: 3px !important;
    height: 20px !important;
    border-radius: 2px !important;
    background-color: #555555 !important;
}

p:hover ~ .cursor-follower,
h1:hover ~ .cursor-follower,
h2:hover ~ .cursor-follower,
h3:hover ~ .cursor-follower,
h4:hover ~ .cursor-follower,
h5:hover ~ .cursor-follower,
h6:hover ~ .cursor-follower,
span:hover ~ .cursor-follower,
li:hover ~ .cursor-follower {
    opacity: 0 !important;
}

/* 이미지 호버 상태 */
img:hover ~ .custom-cursor,
picture:hover ~ .custom-cursor,
svg:hover ~ .custom-cursor,
video:hover ~ .custom-cursor,
iframe:hover ~ .custom-cursor {
    transform: translate(-50%, -50%) scale(2) !important;
    background-color: #FF9500 !important;
}

img:hover ~ .cursor-follower,
picture:hover ~ .cursor-follower,
svg:hover ~ .cursor-follower,
video:hover ~ .cursor-follower,
iframe:hover ~ .cursor-follower {
    width: 60px !important;
    height: 60px !important;
    border-style: dashed !important;
    animation: rotate 4s linear infinite !important;
}

@keyframes rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* 입력 필드 호버 */
input[type="text"]:hover ~ .custom-cursor,
input[type="email"]:hover ~ .custom-cursor,
input[type="tel"]:hover ~ .custom-cursor,
input[type="password"]:hover ~ .custom-cursor,
textarea:hover ~ .custom-cursor {
    width: 2px !important;
    height: 18px !important;
    border-radius: 1px !important;
    animation: blink 1s ease-in-out infinite !important;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* 드래그 상태 */
body.dragging .custom-cursor {
    transform: translate(-50%, -50%) scale(1.2) !important;
    background-color: #FF3B30 !important;
}

body.dragging .cursor-follower {
    width: 45px !important;
    height: 45px !important;
    border-color: #FF3B30 !important;
    border-style: dashed !important;
}

/* 로딩 상태 */
body.loading .cursor-follower {
    border: 2px solid transparent !important;
    border-top-color: #007AFF !important;
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* 숨김 상태 */
.custom-cursor.hidden,
.cursor-follower.hidden {
    opacity: 0 !important;
}

/* 모바일에서는 커스텀 커서 비활성화 */
@media (hover: none) and (pointer: coarse) {
    html *, body * {
        cursor: auto !important;
    }
    
    .custom-cursor,
    .cursor-follower {
        display: none !important;
    }
}

/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
    body .custom-cursor {
        background-color: #BBBBBB !important;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.4) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
    }
    
    body .cursor-follower {
        border-color: #999999 !important;
    }
    
    .cursor-trail {
        background-color: #AAAAAA !important;
    }
}

/* 특수 효과 - Beauty Spa 스타일 */

/* 스파 효과 (물결) */
.spa-effect {
    position: fixed;
    width: 20px;
    height: 20px;
    border: 2px solid #007AFF !important;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99997;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
}

.spa-effect.active {
    animation: ripple 1s ease-out;
}

@keyframes ripple {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(4);
    }
}

/* 자석 효과 */
.magnetic {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 글로우 효과 */
.glow-cursor .custom-cursor {
    box-shadow: 0 0 20px #007AFF, 0 0 40px #007AFF !important;
}

/* 트레일 효과 */
.cursor-trail {
    position: fixed !important;
    width: 6px !important;
    height: 6px !important;
    background-color: #666666 !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 99996 !important;
    opacity: 0 !important;
    animation: trail-fade 0.8s ease-out !important;
}

@keyframes trail-fade {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

/* 프리미엄 호버 효과 */
.premium-hover:hover ~ .custom-cursor {
    background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%) !important;
    transform: translate(-50%, -50%) scale(2) !important;
}

.premium-hover:hover ~ .cursor-follower {
    width: 70px !important;
    height: 70px !important;
    border-width: 3px !important;
    border-color: transparent !important;
    background: radial-gradient(circle at center, transparent 0%, rgba(0, 122, 255, 0.2) 100%) !important;
}

/* 선택 영역 효과 */
::selection {
    background: rgba(0, 122, 255, 0.3);
    color: #1F1F2E;
}

::-moz-selection {
    background: rgba(0, 122, 255, 0.3);
    color: #1F1F2E;
}