/* ========================================
   Navigation Dots
======================================== */

html {
    scroll-behavior: smooth;
}

.nav {
    position: fixed;

    top: 50%;
    right: 22px;

    transform: translateY(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: clamp(4px, 0.55vh, 7px);

    z-index: 1000;
}


/* ----------------------------------------
   Dot
---------------------------------------- */

.nav a {
    display: block;

    width: clamp(6px, 0.65vh, 9px);
    height: clamp(6px, 0.65vh, 9px);

    flex-shrink: 0;

    border: 1px solid #9ca3af;
    border-radius: 50%;

    background-color: transparent;

    /* 숫자는 접근성/HTML 구조상 유지하고
       시각적으로만 숨김 */
    font-size: 0;
    line-height: 0;
    color: transparent;
    text-indent: -9999px;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        opacity 0.18s ease;
}


/* ----------------------------------------
   Hover
---------------------------------------- */

.nav a:hover {
    border-color: #347bd6;

    transform: scale(1.25);
}


/* ----------------------------------------
   Current Section
---------------------------------------- */

.nav a.active {
    border-color: #347bd6;
    background-color: #347bd6;

    transform: scale(1.15);
}


/* ----------------------------------------
   Keyboard Focus
---------------------------------------- */

.nav a:focus-visible {
    outline: 2px solid #347bd6;
    outline-offset: 3px;
}


/* ----------------------------------------
   Small-height screens
---------------------------------------- */

@media (max-height: 760px) {

    .nav {
        gap: 4px;
        right: 16px;
    }

    .nav a {
        width: 6px;
        height: 6px;
    }
}


/* ----------------------------------------
   Mobile
---------------------------------------- */

@media (max-width: 768px) {

    .nav {
        display: none;
    }
}