/* ==================== [추가] Section Navigation Dots (우측 중간) ==================== */
        .section-nav {
            position: fixed;
            right: 35px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .nav-dot {
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            border: 2px solid rgba(255, 255, 255, 0.65);
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            position: relative;
        }

        .nav-dot:hover {
            background: rgba(255, 255, 255, 0.75);
            transform: scale(1.2);
        }

        .nav-dot.active {
            background: #ffffff;
            border-color: #ffffff;
            box-shadow: 0 0 15px rgba(255,255,255,0.9);
            transform: scale(1.25);
        }

        /* 호버 시 섹션명 툴팁 */
        .nav-dot::after {
            content: attr(data-title);
            position: absolute;
            right: 100%;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(15, 15, 15, 0.92);
            color: #fff;
            padding: 7px 16px;
            border-radius: 8px;
            font-size: 0.96rem;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
            margin-right: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.4);
        }

        .nav-dot:hover::after {
            opacity: 1;
            right: calc(100% + 10px);
        }

        
        @media (max-width: 768px) {
            .section-nav {
                right: 15px; /* 화면 끝에 너무 붙지 않게 조정 */
                gap: 25px;   /* 도트 사이 간격을 넓혀서 오클릭 방지 */
            }

            .nav-dot {
                width: 18px;  /* 크기를 키움 (기존 13px) */
                height: 18px;
                background: rgba(255, 255, 255, 0.5); /* 모바일은 호버가 없으므로 기본 투명도를 높임 */
            }

            /* 모바일에서는 툴팁(data-title)이 불필요하거나 화면을 가리므로 숨김 처리 */
            .nav-dot::after {
                display: none;
            }
            } 

           
            
        /* 
            //모바일일땐 가린이유
            //터치 간섭: 사용자가 화면 우측 끝을 잡고 스크롤할 때 의도치 않게 도트가 클릭되어 화면이 튀는 현상이 발생합니다.
            시각적 노이즈: 화면이 좁은데 우측에 도트와 툴팁이 있으면 콘텐츠(텍스트)를 가릴 수 있습니다.
            정밀도 부족: 마우스 포인터와 달리 손가락은 정밀도가 낮아 작은 도트를 정확히 누르기 어렵습니다.
            @media (max-width: 768px) {
                .section-nav { display: none; }
            } 
        */


        /* ==================== [추가] Section Navigation Dots (우측 중간) ==================== */