/* =====================================
   TOUR PROGRAM
===================================== */

.tour-page{
    box-sizing:border-box;

    width:100%;
    min-height:100vh;

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

    padding-top:22px;
    padding-bottom:100px;
}


/* =====================================
   PAGE TITLE
===================================== */

.tour-title{
    margin:0;
    padding:0;

    font-family:inherit;
    font-size:inherit;
    font-weight:400;
    line-height:1.5;
    letter-spacing:0;

    text-align:center;
}


/* =====================================
   MAIN CONTENT
===================================== */

.tour-content{
    width:min(900px, 58vw);

    /* TOUR PROGRAM 제목과 영상 사이 */
    margin-top:70px;
}


/* =====================================
   VIDEO ROW
===================================== */

.tour-video-row{
    display:grid;
    grid-template-columns:40px minmax(0, 1fr) 40px;
    align-items:center;

    width:100%;

    column-gap:16px;
}


.tour-video-area{
    width:100%;
    min-width:0;
}


/* =====================================
   VIDEO
===================================== */

.tour-video-frame{
    position:relative;

    width:100%;
    aspect-ratio:16 / 9;

    overflow:hidden;

    background:#111;
}


.tour-video-frame iframe{
    display:block;

    width:100%;
    height:100%;

    margin:0;
    padding:0;

    border:0;
}


.tour-video-frame iframe[hidden]{
    display:none;
}


/* 영상이 아직 없는 챕터 */

.tour-video-placeholder{
    position:absolute;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    font-family:inherit;
    font-size:inherit;
    font-weight:400;
    line-height:1.5;

    text-align:center;
}


.tour-video-placeholder[hidden]{
    display:none;
}


/* =====================================
   ARROWS
===================================== */

.tour-arrow{
    display:flex;
    align-items:center;
    justify-content:center;

    width:40px;
    height:40px;

    margin:0;
    padding:0;

    border:0;
    border-radius:0;

    background:transparent;
    color:inherit;

    font-family:inherit;
    font-size:22px;
    font-weight:400;
    line-height:1;

    cursor:pointer;

    appearance:none;
    -webkit-appearance:none;

    transition:opacity 0.2s ease;
}


.tour-arrow:hover{
    opacity:0.5;
}


.tour-arrow:focus-visible{
    outline:1px solid currentColor;
    outline-offset:4px;
}


/* =====================================
   COUNTER
===================================== */

.tour-counter{
    margin-top:20px;

    font-family:inherit;
    font-size:inherit;
    font-weight:400;
    line-height:1.5;

    text-align:center;
}


/* =====================================
   CHAPTER INFORMATION
===================================== */

.tour-information{
    /* 영상 영역과 챕터 정보 사이 */
    margin-top:70px;

    text-align:center;
}


/* 챕터 제목 */

.tour-chapter-title{
    /* 제목과 설명 사이 */
    margin:0 0 20px;
    padding:0;

    font-family:inherit;
    font-size:inherit;
    font-weight:400;
    line-height:1.5;
    letter-spacing:0;

    text-align:center;
}


/* 한국어·영어 설명 */

.tour-description{
    margin:0;
    padding:0;

    text-align:center;
}


.tour-description p{
    margin:0;
    padding:0;

    font-family:inherit;
    font-size:inherit;
    font-weight:400;
    line-height:1.5;
}


/* 한국어와 영어 사이 추가 여백 없음 */

.tour-description p + p{
    margin-top:0;
}


/* 내용이 비어 있으면 숨김 */

.tour-description p:empty{
    display:none;
}


/* =====================================
   BOTTOM LINKS
===================================== */

/*
   Email은 왼쪽 아래,
   Top은 화면 아래 정중앙
*/

.email-link,
.top-link{
    position:fixed;
    bottom:22px;

    z-index:100;

    color:inherit;
    text-decoration:none;
}


.email-link{
    left:22px;
}


.top-link{
    left:50%;
    transform:translateX(-50%);
}


.email-link:hover,
.top-link:hover{
    opacity:0.5;
}


/* =====================================
   TABLET
===================================== */

@media screen and (max-width:1100px){

    .tour-content{
        width:min(820px, 70vw);
    }


    .tour-video-row{
        grid-template-columns:36px minmax(0, 1fr) 36px;
        column-gap:12px;
    }


    .tour-arrow{
        width:36px;
        height:40px;

        font-size:20px;
    }

}


/* =====================================
   MOBILE
===================================== */

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

    .tour-page{
        padding-top:16px;
        padding-bottom:80px;
    }


    .tour-content{
        width:calc(100% - 24px);

        margin-top:70px;
    }


    .tour-video-row{
        grid-template-columns:28px minmax(0, 1fr) 28px;

        column-gap:4px;
    }


    .tour-arrow{
        width:28px;
        height:36px;

        font-size:18px;
    }


    .tour-counter{
        margin-top:16px;
    }


    .tour-information{
        margin-top:50px;

        padding:0 8px;
    }


    .tour-chapter-title{
        margin-bottom:20px;

        line-height:1.5;
    }


    .tour-description p{
        line-height:1.5;
    }


    .email-link,
    .top-link{
        bottom:16px;
    }


    .email-link{
        left:16px;
    }

}