@charset "utf-8";

/*
 * File    : sub-demo.css
 * Author  : STUDIO-JT (KMS)
 *
 * Description : 본 파일은 가이드 레이아웃 확인용 데모 파일로 프로젝트 시작시 반드시 삭제되어야 합니다.
 *
 * SUMMARY :
 * DEMO
 * DEMO RWD
 */



/* **************************************** *
 * DEMO
 * **************************************** */
/* NOTICE UI */
.demo-guide { margin-bottom: 80rem; padding: 36rem 40rem; background: var(--color-gray-100); border-radius: 8rem; }
.demo-guide li { padding-left: 12rem; position: relative; }
.demo-guide li + li { margin-top: 12rem; }
.demo-guide li:before { content: ''; display: block; width: 4rem; height: 4rem; position: absolute; left: 0; top: 14rem; background: var(--color-black); border-radius: 50%; }
.demo-guide li em { font-weight: bold; }
.demo-guide li u { display: block; margin-top: 4rem; text-decoration: none; color: var(--color-gray-900); }

/* TABLE UI */
.demo-table { width: 100%; }
.demo-table td { width: 33.33%; padding-left: 26rem; padding-right: 26rem; vertical-align: middle; }
.demo-table td:not(:first-child) { text-align: center; }

.demo-table thead td { padding-bottom: 24rem; }

.demo-table tbody td { padding-top: 12rem; padding-bottom: 12rem; }
.demo-table tbody tr:nth-child(1) td { padding: 12rem 26rem; background: var(--color-gray-100); }
.demo-table tbody tr:nth-child(2) td { padding-top: 24rem; }
.demo-table tbody tr:last-child td { padding-bottom: 24rem; }

/* PREVIEW UI */
.demo-preview > li + li { margin-top: 60rem; padding-top: 60rem; border-top: 1px solid var(--color-gray-400); }

.demo-preview__title { display: block; margin-bottom: 28rem; }

.demo-preview__variant { display: flex; flex-wrap: wrap; gap: 24rem; }
.demo-preview__variant > li { width: 100%; display: flex; align-items: center; gap: 24rem; }
.demo-preview__variant-key { width: 160rem; flex-shrink: 0; }
.demo-preview__variant-value { display: flex; flex-wrap: wrap; align-items: start; gap: 12rem 20rem; }

/* TAB */
.tab-demo { padding: 120rem 32rem; text-align: center; color: var(--color-gray-600); background: var(--color-gray-100); border-radius: 8rem; }

/* MODAL */
.modal-demo { display: flex; gap: 24rem; justify-content: center; }

/* MEDIA POPUP */
a[class^="popup-demo--"] { display: block; width: 160px; height: 90px; margin: 0 auto; }
a[class^="popup-demo--"] img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; }

#popup-demo-append-list { display: grid; grid-template-columns: 1fr; gap: 8rem; }



/* **************************************** *
 * DEMO RWD
 * **************************************** */
@media (max-width: 1023px){

    /* NOTICE UI */
    .demo-guide { margin-bottom: 60rem; padding: 30rem 34rem; }
    .demo-guide li:before { top: 12rem; }

    /* TABLE UI */
    .demo-table td { padding-left: 22rem; padding-right: 22rem; }

    .demo-table thead td { padding-bottom: 20rem; }

    .demo-table tbody td { padding-top: 10rem; padding-bottom: 10rem; }
    .demo-table tbody tr:nth-child(1) td { padding: 12rem 22rem; }
    .demo-table tbody tr:nth-child(2) td { padding-top: 20rem; }
    .demo-table tbody tr:last-child td { padding-bottom: 20rem; }

    /* MODAL */
    .modal-demo { gap: 20rem; }

}

@media (max-width: 860px){

    /* NOTICE UI */
    .demo-guide { margin-bottom: 52rem; padding: 26rem 30rem; }
    .demo-guide li + li { margin-top: 10rem; }
    .demo-guide li u { margin-top: 2rem; }

    /* TABLE UI */
    .demo-table td { padding-left: 20rem; padding-right: 20rem; }
    
    .demo-table thead td { padding-bottom: 18rem; }

    .demo-table tbody td { padding-top: 8rem; padding-bottom: 8rem; }
    .demo-table tbody tr:nth-child(1) td { padding: 10rem 20rem; }
    .demo-table tbody tr:nth-child(2) td { padding-top: 18rem; }
    .demo-table tbody tr:last-child td { padding-bottom: 18rem; }

    /* PREVIEW UI */
    .demo-preview > li + li { margin-top: 52rem; padding-top: 52rem; }

    .demo-preview__title { margin-bottom: 26rem; }

    .demo-preview__variant-key { width: 150rem; }
    .demo-preview__variant-value { gap: 10rem 16rem; }

    /* MODAL */
    .modal-demo { gap: 12rem; }

}

@media (max-width: 540px){

    /* NOTICE UI */
    .demo-guide { margin-bottom: 45rem; padding: 16rem 18rem; }
    .demo-guide li:before { width: 3rem; height: 3rem; }
    .demo-guide li + li { margin-top: 8rem; }

    /* PREVIEW UI */
    .demo-preview > li + li { margin-top: 45rem; padding-top: 45rem; }

    .demo-preview__variant > li { align-items: flex-start; flex-direction: column; gap: 12rem; }
    .demo-preview__variant-value { gap: 10rem; }

    /* MODAL */
    .modal-demo { gap: 8rem; }

    /* MEDIA POPUP */
    a[class^="popup-demo--"] { width: 80px; height: 45px; }

    #popup-demo-append-list { gap: 6rem; }

}