.archivelist-container {
    visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.0s ease-in-out; /* 서서히 나타나는 효과 */
}

.archivelist-container.active {
    visibility: visible;
    opacity: 1;
}

.archivelist-ui {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.archivelist-ui > .subtitle {
    position: absolute;
    top: 10.64%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(100, 100, 100, 0.80);
    text-align: center;
    font-family: "Apple SD Gothic Neo";
    font-size: 1.35dvw;
}

.archivelist-ui > .title {
    position: absolute;
    top: 18.51%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #323232;
    text-align: center;
    font-family: "Chosun-Regular";
    font-size: 3.65dvw;
}
.archivelist-ui > .title:hover{
    font-weight: initial;
}

.archivelist-ui > .filters {
    position: absolute;
    top: 27.78%;
    left: 0;
    width: 100%;
    height: 6.85%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0%;
}

.archivelist-ui > .filters > * {
    
}

.archivelist-ui > .filters .head {
    cursor: pointer;
    width: 9.32%;
    height: 100%;
    background-image: image-set(url(../images/archive/category_head.png) 1x, url(../images/archive/category_head@2x.png) 2x);
    background-size: contain;
    background-repeat: no-repeat;
}

.archivelist-ui > .filters .btn-filter {
    cursor: pointer;
    width: 9.32%;
    height: 100%;
    color: #665C3F;
    background-image: image-set(url(../images/archive/category_button.png) 1x, url(../images/archive/category_button@2x.png) 2x);
    background-size: contain;
    background-repeat: no-repeat;
    font-family: "Chosun-Regular";
    font-size: 0.83dvw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.archivelist-ui > .filters .btn-filter.on {
    color: #ECDCAF;
    background-image: image-set(url(../images/archive/category_button_selected.png) 1x, url(../images/archive/category_button_selected@2x.png) 2x);
}

.archivelist-ui > .filters .btn-filter > span {
    transform: translateY(-22%);
}

/* .archivelist-ui > .filters .btn-reset {
    cursor: pointer;
    width: 3.85%;
    height: 100%;
    background-image: image-set(url(../images/archive/category_button_reset.png) 1x, url(../images/archive/category_button_reset@2x.png) 2x);
    background-size: contain;
    background-repeat: no-repeat;
} */

.archivelist-ui > .btn-prev {
    cursor: pointer;
    position: absolute;
    top: 54.63%;
    left: 2.24%;
    width: 4.69%;
    height: 8.33%;
    background-image: image-set(url(../images/archive/btn_prev.png) 1x, url(../images/archive/btn_prev@2x.png) 2x);
    background-size: contain;
    background-repeat: no-repeat;
}

.archivelist-ui > .btn-next {
    cursor: pointer;
    position: absolute;
    top: 54.63%;
    right: 2.24%;
    width: 4.69%;
    height: 8.33%;
    background-image: image-set(url(../images/archive/btn_next.png) 1x, url(../images/archive/btn_next@2x.png) 2x);
    background-size: contain;
    background-repeat: no-repeat;
}

.archivelist-ui > .btn-close {
    cursor: pointer;
    position: absolute;
    top: 4.62%;
    right: 2.6%;
    width: 4.17%;
    height: 7.41%;
    background-image: image-set(url(../images/archive/btn_close.png) 1x, url(../images/archive/btn_close@2x.png) 2x);
    background-size: contain;
    background-repeat: no-repeat;
}

.archivelist-ui > .btn-flip {
    z-index: 9999;
    cursor: pointer;
    position: absolute;
    bottom: -1%;
    left: 50%;
    width: 6.66%;
    height: 7.40%;
    transform: translate(-50%, 0);
    background-image: image-set(url(../images/archive/btn_flip.png) 1x, url(../images/archive/btn_flip@2x.png) 2x);
    background-size: contain;
    background-repeat: no-repeat;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    opacity: 0;
    visibility: hidden;
}

.archivelist-ui.flip .btn-flip {
    opacity: 1;
    visibility: visible;
}

.archivelist-ui > .scrollbar {
    position: absolute;
    left: 7.81%;
    right: 7.81%;
    bottom: 18.15%;
    height: 0.74%;
    border-radius: 30px;
    background: rgba(0, 0, 0, 0.10);
}

.archivelist-ui > .scrollbar > .bar {
    position: absolute;
    left: 0;
    top: 50%;
    width: 4.3%;
    height: 750%;
    cursor: pointer;
    transform: translate(-50%, -50%);

    background-image: image-set(url(../images/archive/slider_thumb.png) 1x, url(../images/archive/slider_thumb@2x.png) 2x);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.archivelist {
    position: absolute;
    left: 0;
    right: 0;
    /* top: 41.2%; */
    /* bottom: 26.4%; */
    top: 38.42%;
    bottom: 23.62%;
    padding-top: 1.56%;
    padding-bottom: 1.56%;
    transform: translateY(9%);
    
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: start;
    align-items: center;
    gap: 1.3%;
    overflow-x: hidden;
    overflow-y: hidden;
}

.archivelist:before, .archivelist:after {
    content: "";
    flex: 0 0 auto;
    width: 7.81%;
    /* height: 32.41%; */
    height: 100%;
    /* background: #00f;
    opacity: 0.3; */
}

.archivelist > .cell,
.archivelist-ui > .cell {
    flex: 0 0 auto;
    width: 13.02%;
    /* height: 32.41%; */
    height: 100%;
    background-image: image-set(url(../images/archive/card.png) 1x, url(../images/archive/card@2x.png) 2x);
    background-size: cover;
    filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.25));
    cursor: pointer;

    text-align: center;
    font-family: "Chosun-Regular";
    
    position: relative;
    transition: transform 0.6s ease, left 0.6s ease;
}

.archivelist > .cell.hide {
    visibility: hidden;
}

.archivelist-ui > .cell {
    position: absolute;
    left: 50%;
    top: 60.85%;
    transform: translate(-50%, -50%) rotateY(0deg) scale(1);

    flex: 0 0 auto;
    width: 13.02%;
    height: 32.41%;
    cursor: initial;
}

.archivelist-ui > .cell .btn-close {
    visibility: hidden;
    opacity: 0;
    transition: opacity 1.0s ease 0.5s;
}

.archivelist-ui > .cell.flip .btn-close {
    visibility: visible;
    opacity: 1;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    width: 17.51%;
    height: 12.50%;
    transform: translate(50%, -50%);
    background-image: image-set(url(../images/archive/btn_close.png) 1x, url(../images/archive/btn_close@2x.png) 2x);
    background-size: contain;
}

.archivelist-ui > .cell.flip .title {
    transform: translateY(-50%) scaleX(-1);
}

.archivelist-ui > .cell.flip .contents,
.archivelist-ui > .cell.flip .subtitle {
    transform: scaleX(-1);
}

.archivelist-ui > .cell.flip.front .title {
    transform: translateY(-50%) scaleX(1);
}

.archivelist-ui > .cell.flip.front .contents,
.archivelist-ui > .cell.flip.front .subtitle {
    transform: scaleX(1);
}

.archivelist-ui > .cell.flip .btn-close {
    left: 0;
    right: initial;
    transform: translate(-50%, -50%);
}

.archivelist-ui > .cell.flip.front .btn-close {
    left: initial;
    right: 0;
    transform: translate(50%, -50%);
}

.archivelist-ui > .btn-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    /* background: rgba(0, 0, 0, 0.2); */
}

/* .archivelist > .cell.selected {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateY(180deg) scale(2);
    z-index: 1000;
} */

/* .archivelist .cell > * {
    flex: 0 0 auto;
} */


.archivelist > .cell .title,
.archivelist-ui > .cell .title {
    position: absolute;
    top: 19%;
    left: 18%;
    right: 18%;
    transform: translateY(-50%);
    /* background-color: rgba(255, 0, 0, 0.5); */
    color: #636363;
    font-size: 1.04dvw;
    /* font-weight: 600; */ /*600으로 하면, '트, 흐' 글자 깨짐*/
    line-height: 115%;
    word-break: keep-all; /* 한글 단어가 잘리지 않도록 유지 */
    white-space: normal; /* 기본 줄바꿈 설정 */
    overflow-wrap: break-word; /* 긴 텍스트에서 공백 기준으로 줄바꿈 */
}

.archivelist > .cell .contents,
.archivelist-ui > .cell .contents {
    visibility: hidden;
}

.archivelist-ui > .cell.flip .contents {
    visibility: visible;
    position: absolute;
    top: 35%;
    left: 15%;
    width: 70%;
    height: 50%;
    box-shadow: initial;

    color: #000;
    font-family: "Apple SD Gothic Neo";
    font-size: 0.42dvw;
    font-style: normal;
    font-weight: 400;
    line-height: 185%;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}
.archivelist-ui > .cell.flip.front .contents {
    visibility: hidden;
}

.archivelist > .cell .subtitle,
.archivelist-ui > .cell .subtitle {
    position: absolute;
    bottom: 13%;
    left: 15%;
    right: 15%;
    /* transform: translateY(-50%); */
    /* background-color: rgba(255, 0, 0, 0.5); */
    color: rgba(100, 100, 100, 0.80);
    font-size: 0.42dvw;
    font-weight: 600;
    font-family: "Apple SD Gothic Neo";
    visibility: hidden;
}

.archivelist-ui > .cell.flip .subtitle {
    visibility: visible;
}
.archivelist-ui > .cell.flip.front .subtitle {
    visibility: hidden;
}
    

/* .archivelist .cell .img {
    position: absolute;
    top: 87%;
    left: 20%;
    right: 20%;
    transform: translateY(-50%);
} */

.archivelist > .cell img,
.archivelist-ui > .cell img {
    position: absolute;
    top: 30%;
    left: 15%;
    width: 70%;
    height: 59%;
    /* background-color: rgba(255, 0, 0, 0.5); */

    /* width: 100%; */
    /* height: 100%; */
    object-fit: contain;

    opacity: 0;
    transition: opacity 0.5s ease-in-out; /* 서서히 나타나는 효과 */
}

.archivelist-ui > .cell img {
    opacity: 1;
    transition: initial;
}

.archivelist > .cell img.visible,
.archivelist-ui > .cell img.visible {
    opacity: 1;
}

.archivelist-ui > .cell.flip img {
    visibility: hidden;
}
.archivelist-ui > .cell.flip.front img {
    visibility: visible;
}

@media only screen and (max-width: 768px) {
    
}


@media (min-aspect-ratio: 1920 / 1080) {
    .archivelist-ui > .subtitle {
        font-size: 2.41dvh;
    }

    .archivelist-ui > .title {
        font-size: 6.48dvh;
    }

    .archivelist-ui > .filters .btn-filter {
        font-size: 1.48dvh;
    }

    .archivelist > .cell .title,
    .archivelist-ui > .cell .title {
        font-size: 1.85dvh;
    }

    .archivelist-ui > .cell.flip .contents {
        font-size: 0.74dvh;
    }

    .archivelist > .cell .subtitle,
    .archivelist-ui > .cell .subtitle {
        font-size: 0.74dvh;
    }
}