/*
 * 루니버스랩 사이트 전역 커스텀 커서 스타일입니다.
 * 배경: main.css에 누적된 커서 전용 스타일을 분리해 레이아웃 CSS와 책임을 나눕니다.
 */

/* ── 커스텀 커서 — PC 마우스 전용 ── */
@media (hover: hover) and (pointer: fine) {
    body {
        cursor: none;
    }

    /* 모달과 내부 옵션 위에서도 브랜드 커서를 유지하고 네이티브 커서는 숨깁니다. */
    body.ll-modal-open,
    body.ll-modal-open *,
    body.ll-privacy-open,
    body.ll-privacy-open * {
        cursor: none !important;
    }

    /* 중첩 개인정보 모달보다도 위에 배치해 어느 레이어에서도 사라지지 않게 합니다. */
    body.ll-modal-open .ll-cursor,
    body.ll-privacy-open .ll-cursor {
        display: block !important;
        z-index: 2147483647 !important;
        opacity: 1 !important;
        visibility: visible !important;
        mix-blend-mode: normal !important;
    }

    .ll-cursor {
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        /* z-index: 99999 → 1000000: ll-privacy-modal(z:999990) 등 모든 모달 위에 표시 */
        z-index: 1000000;
        opacity: 1;
        transition: opacity 0.3s ease;
    }

    .ll-cursor__pointer {
        position: absolute;
        width: 14px;
        height: 19px;
        color: #202527;
        fill: currentColor;
        filter:
            drop-shadow(0 0 0.8px rgba(255, 255, 255, 0.72))
            drop-shadow(0 5px 8px rgba(0, 0, 0, 0.14));
        transform: translate(-2px, -1px) rotate(-6deg);
        transform-origin: 2px 1px;
        opacity: 0.96;
        transition: opacity 0.16s ease, transform 0.16s ease;
        will-change: left, top, transform;
    }

    .ll-cursor__planet {
        position: absolute;
        width: 42px;
        height: 42px;
        border-radius: 999px;
        background: url("../images/cursor-planet.png") center / contain no-repeat;
        filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.18));
        opacity: 0.92;
        transform: translate(-50%, -50%) rotate(-9deg);
        transition:
            width 0.22s ease,
            height 0.22s ease,
            opacity 0.22s ease,
            filter 0.22s ease;
        will-change: left, top, width, height, transform;
    }

    .ll-cursor__outer {
        position: absolute;
        width: 36px;
        height: 36px;
        border: 1.5px solid rgba(32, 37, 39, 0.45);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition:
            width 0.22s ease,
            height 0.22s ease,
            background 0.22s ease,
            border-color 0.22s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        opacity: 0;
    }

    .ll-cursor__inner {
        position: absolute;
        width: 5px;
        height: 5px;
        background: #202527;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: width 0.15s ease, height 0.15s ease, opacity 0.15s ease;
    }

    /* 실제 사진/게시글 링크처럼 보기 맥락에서만 VIEW 원형 커서를 표시합니다. */
    .ll-cursor--view .ll-cursor__outer {
        width: 68px;
        height: 68px;
        background: #202527;
        border-color: #202527;
        opacity: 1;
    }

    .ll-cursor--view .ll-cursor__planet {
        opacity: 0;
    }

    .ll-cursor--view .ll-cursor__pointer {
        opacity: 0;
        transform: translate(-2px, -1px) rotate(-6deg) scale(0.82);
    }

    .ll-cursor--view .ll-cursor__inner {
        width: 0;
        height: 0;
        background: transparent;
        opacity: 0;
    }

    .ll-cursor--view .ll-cursor__outer::after {
        content: 'VIEW';
        color: #ffffff;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.1em;
    }
}

/* ── 커서 색상 반전 — 행성 이미지는 원본 컬러로 유지하고 기본 점/원 커서만 반전 처리합니다. */
@media (hover: hover) and (pointer: fine) {
    /* 행성 이미지는 원본 컬러를 유지하고, 기본 점/원 커서에만 반전 효과를 적용합니다. */
    .ll-cursor {
        mix-blend-mode: normal !important;
    }
    /* outer를 흰 원으로 채워 반전 마스크 역할 */
    .ll-cursor__outer {
        background: #ffffff !important;
        border: none !important;
        overflow: visible !important;
        mix-blend-mode: difference !important;
    }
    .ll-cursor__inner {
        background: #ffffff !important;
        mix-blend-mode: difference !important;
    }
    .ll-cursor__planet {
        mix-blend-mode: normal !important;
    }
    /* VIEW 커서 — 반전 해제 */
    .ll-cursor--view {
        mix-blend-mode: normal !important;
    }
    .ll-cursor--view .ll-cursor__outer {
        background: #202527 !important;
        opacity: 1 !important;
    }
    .ll-cursor--view .ll-cursor__inner {
        background: transparent !important;
    }
}