/* <----------------------------- header css start -----------------------------> */
header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 4.375rem; /* 높이 70px */
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    background: var(--black);
    transition: top 0.2s ease-in-out;
    padding: 0 5%; /* 상하 마진 0px, 좌우 마진 10% */
    z-index: 100;
}

.nav-up {
    top: -5rem;
}

.header-logo {
    width: 2.5rem; /* 너비 40px */
    transition: var(--transition);
    /* margin-top: .5rem; */
}

.header-logo:hover {
    opacity: 0.5;
}

nav {
    display: flex;
    gap: 1.875rem;
}

.nav-link {
    text-decoration: none;
    color: var(--white);
    font-size: 0.95rem;
    font-weight: 500;
    position: relative;
    height: 1.875rem;
    padding: 0.3rem 0.5rem; /* 상하 패딩 4.8px, 좌우 패딩 8px */
    cursor: pointer;
    transition: var(--transition);
}

.nav-link:hover {
    opacity: 0.5;
}
/* <----------------------------- header css end -----------------------------> */