body{
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 0.9rem;
}

a{
    text-decoration: none;
    color: black;
}

/* a :hover{
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 550;
    font-style: normal;
} */

.header{
    z-index: 999;
    position: fixed;
    top: 50%;
    left: 0;
    /* background-color: gray; */
    width: 25vw;
    height: 10vh;
    margin: 0 15px;
    /* display: flex;
    flex-direction: row;
    justify-content: space-between; */
    align-items: center;
}

.footer{
    position: fixed;
    top: 50%;
    right: 0;
    /* background-color: gray; */
    width: 98vw;
    height: 10vh;
    margin: 0 15px;
    /* display: flex;
    flex-direction: row;
    justify-content: space-between; */
    align-items: center;
    width: 10vw;
    padding: 0 50px 0 25px;
}

.logo{
    font-size: 1.8rem;
    font-weight: 600;
}

.header-left{
    padding-left: 1vw;
    width: 15vw;
}

.header-center{
    width: 75vw;
}



.info{
    margin: 5px 0;
}

.main{
    position: absolute;
    /* z-index: 998; */
    overflow-y: scroll;
    width: 100%;
    transform: translateX(0vw);
}

/* .project-container{

} */

.project-list{
    margin-left: 10%;
    width: 75%;
    list-style: none;
}

.project-item > a{
    width: 65vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: fit-content;
    margin: 1vh 0;
}

.project-title{
    line-height: 1.3rem;
}

.project-thumbimg{
    width: 50vw;
    height: 90vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: right;
}

.project-thumbimg > img{
    width: auto;
    max-width: 100%;
    height: auto; /* 이미지 높이를 부모에 맞게 설정 */
    max-height: 100%;
    object-fit: contain; /* 이미지가 잘리더라도 비율 유지 */
}

.project-info{
    margin-left: 50px;
    width: 20%;
    transform: translateY(41%);
}

.project-year{
    margin-top: 1px;
}

.project-item :hover{
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 550;
    font-style: normal;
}

/* 부모 컨테이너 */
.project-container {
    scroll-snap-type: y mandatory; /* 세로 방향 스냅 효과 */
    overflow-y: scroll; /* 스크롤은 활성화 */
    height: 100vh; /* 화면 높이 */
    -ms-overflow-style: none; /* IE와 Edge에서 스크롤 바 숨기기 */
    scrollbar-width: none; /* Firefox에서 스크롤 바 숨기기 */
}

  /* Chrome, Safari, Edge */
.project-container::-webkit-scrollbar {
    display: none; /* 스크롤 바 숨기기 */
}

  /* 자식 요소 */
.project-item {
    scroll-snap-align: center; /* 아이템을 중앙에 정렬 */
    display: flex;
    /* justify-content: center; */
    align-items: center;
    overflow: hidden; /* 내부 내용이 넘치지 않도록 설정 */
}

.project-list > li:first-child{
    margin-top: 5vh;
}

.project-list > li:last-child{
    margin-bottom: 5vh;
}

                            /****** Detail Page ******/

.project-detail-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed; /* 스크롤과 상관없이 화면에 고정 */
    bottom: 15px;
    left: 50%; /* 화면의 가로 중앙 */
    transform: translate(-50%, -50%); /* 정확히 중앙으로 이동 */
    text-align: center; /* 텍스트 중앙 정렬 */
    z-index: 999; /* 다른 요소 위에 표시 */
}

.detail-project-title{
    margin-bottom: 5px;
}

.project-detail-gallery {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    height: 100vh; /* 화면 높이에 맞춤 */
    align-items: center; /* 내부 요소를 수직 중앙 정렬 */
    justify-content: flex-start;
    padding: 0 10px; /* 양쪽 간격을 조금 추가해서 중앙 정렬 */
}

.project-detail-gallery > ul{
    display: flex;
    height: 100vh; /* 부모 컨테이너 높이 맞춤 */
    align-items: center;
    padding: 0;
    margin: 0;
    gap: 20px; /* 이미지 사이 간격 설정 */
}

.project-detail-gallery > ul > li{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 calc(30vw - 40px); /* 화면 너비보다 약간 작게 설정해서 양옆 이미지 보이게 */
    height: 100vh; /* 컨테이너 높이에 맞춤 */
    scroll-snap-align: center; /* 가로 스크롤 시 중앙 정렬 */
}

.project-detail-gallery > ul >li > a{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90vh;
    width: fit-content;
}

.project-detail-gallery > ul > :first-child{
    padding-left: 29vw;
}

.project-detail-gallery > ul > :last-child{
    margin-right: 30vw;
}

.project-detail-gallery > ul > li > a > img{
    /* height: 85vh;
    width: fit-content;
    object-fit: contain; */
    width: 40vw;
}

.project-detail-gallery::-webkit-scrollbar {
    display: none;
}

.project-detail-photo {
    scroll-snap-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100vw - 40px); /* 한 번에 보이는 이미지 크기를 화면보다 살짝 작게 */
}

.project-detail-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 비율 유지 */
}

/* Chrome, Safari, Edge */
.project-detail-gallery::-webkit-scrollbar {
    display: none; /* 스크롤 바 숨기기 */
}


          /******************* mo *******************/

@media (max-width: 750px) {


    .body{
        font-size: 0.8em;
    }

    .header{
        top: 15px;
        width: 100vw;
        /* height: 95vh; */
        margin: 0;
        flex-direction: column;
        font-size: 0.75em;
    }

    .footer{
        top: unset;
        right: unset;
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 10dvh;
        margin-left: 35%;
        padding: unset;
        background-color: white;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0px;
    }

    .header-left{
        width: 100%;
        margin-left: 35%;
        padding: unset;
        z-index: 999;
    }

    .logo{
        font-size: 1.5rem;
    }

    .logo-text{
        font-size: 0.65rem;
    }

    .info{
        margin: 0;
        padding: 0;
        font-size: 0.65rem;
        line-height: 0.9rem;
        text-decoration: none;
        color: black;
        width: 50%;
    }
    .main{
        top: 10vh;
        width: 90%;
        transform: translateX(0);
        margin-left: 5%;
    }

    .project-list{
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .project-container{
        display: flex;
        flex-direction: column;
        scroll-snap-type: y mandatory;
        overflow-y: scroll;
        height: 78dvh; /* 브라우저 UI를 제외한 실제 높이 */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

        /* Chrome, Safari, Edge */
    .project-container::-webkit-scrollbar {
        display: none;
    }



    .project-item > a{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: fit-content;
        max-height: 100%;
    }

    .project-thumbimg{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .project-thumbimg > img {
        width: 100%;
        height: auto;
        max-height: 65vh;
        object-fit: contain;
    }

    .project-info{
        width: 100%;
        margin: 0;
        transform: unset;
    }

    .project-title{
        font-size: 0.65rem;
        line-height: 1rem;
        margin-top: 5px;
    }

    .project-year{
        display: none;
    }

    .project-item{
        display: flex; /* Flexbox 활성화 */
        justify-content: center; /* 수평 중앙 정렬 */
        align-items: center; /* 수직 중앙 정렬 */
        height: fit-content;
        margin: 5vh 0;
        scroll-snap-align: center;
        width: 100%;
        overflow: hidden;
    }


    /****** Mo Detail  *******/

    .project-detail-gallery{
                display: flex;
        flex-direction: row; /* 가로 정렬 */
        scroll-snap-type: x mandatory; /* 가로 스크롤 스냅 */
        overflow-x: scroll; /* 가로 스크롤 허용 */
        overflow-y: hidden; /* 세로 스크롤 방지 */
        height: 90dvh; /* 전체 높이를 화면에 맞춤 */
        -ms-overflow-style: none;
        scrollbar-width: none;
        white-space: nowrap; /* 요소가 줄바꿈되지 않도록 */
    }

    .project-detail-info{
        flex-direction: row;
        width: 100vw;
        height: 0vh;
        transform: rotate(-90deg);
        transform-origin: center;
        top: 40%;
        left: -52%;
        align-items: flex-start;
        text-align: left;
        justify-content: space-between;
        font-size: 0.75em;
    }

    .project-detail-gallery > ul > li > a > img{
        width: 85vw;
        margin: 1vh 10px 0 10px;
        transform: translateY(-10vh);
    }

    .project-detail-gallery > ul > :first-child{
    padding-left: unset;
    }

    .detail-project-title{
        font-size: 0.65rem;
    }








}