*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html, body{
    width:100%;
    height:100%;
    overflow:hidden;
    background:#000;
    font-family: 'Work Sans', sans-serif;
}

#player-wrap{
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
}

#slider{
    position:relative;
    width:100%;
    height:100%;
}

/* 슬라이드는 한 자리에 겹쳐 두고, 보이는 것만 표시 */
.slide{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#000;
    visibility:hidden;
}

.slide.active{
    visibility:visible;
    z-index:2;
}

.slide.leaving{
    visibility:visible;
    z-index:1;
}

/* ---------------------------------------------------------
   화면 전환 효과 (시간은 js/player.js TRANSITION_MS 와 맞춤)
--------------------------------------------------------- */

.fx-slide-left-in,
.fx-slide-left-out,
.fx-slide-right-in,
.fx-slide-right-out{
    animation-duration:.7s;
    animation-timing-function:cubic-bezier(.4, 0, .2, 1);
    animation-fill-mode:both;
    will-change:transform;
}

/* 오른쪽 → 왼쪽 */
.fx-slide-left-in{ animation-name:fxFromRight; }
.fx-slide-left-out{ animation-name:fxToLeft; }

/* 왼쪽 → 오른쪽 */
.fx-slide-right-in{ animation-name:fxFromLeft; }
.fx-slide-right-out{ animation-name:fxToRight; }

/* 가운데에서 양쪽으로 열리며 다음 화면 표시 (나가는 화면은 그대로 아래에) */
.fx-split-in{
    animation:fxSplitOpen .7s cubic-bezier(.4, 0, .2, 1) both;
    will-change:clip-path;
}

@keyframes fxFromRight{ from{ transform:translate3d(100%,0,0); } to{ transform:translate3d(0,0,0); } }
@keyframes fxToLeft{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-100%,0,0); } }
@keyframes fxFromLeft{ from{ transform:translate3d(-100%,0,0); } to{ transform:translate3d(0,0,0); } }
@keyframes fxToRight{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(100%,0,0); } }

@keyframes fxSplitOpen{
    from{ -webkit-clip-path:inset(0 50% 0 50%); clip-path:inset(0 50% 0 50%); }
    to{ -webkit-clip-path:inset(0 0 0 0); clip-path:inset(0 0 0 0); }
}

.slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    background:#000;
    /*object-fit:contain;*/
}

.slide video{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
    background:#000;
    /*object-fit:cover;*/
}

.slide iframe{
    width:100%;
    height:100%;
    border:0;
    background:#000;
}

.slide-shield{
    position:absolute;
    inset:0;
}

#clock{
    position:absolute;
    top:20px;
    right:20px;
    color:#fff;
    z-index:999;
    font-size: 30px;
}

#progress-wrap{
    position:absolute;
    top:20px;
    right:20px;
    z-index:9999;
    width:70px;
    height:70px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.35);
    border-radius:50%;
}

#progress-ring{
    transform:rotate(-90deg);
}

.progress-bg{
    fill:none;
    stroke:rgba(255,255,255,.15);
    stroke-width:5;
}

.progress-bar{
    fill:none;
    stroke:#ffffff;
    stroke-width:5;
    stroke-linecap:round;

    stroke-dasharray:188.5;
    stroke-dashoffset:188.5;

    transition:
        stroke-dashoffset linear,
        stroke .3s ease;
}

#sound-unlock{
    position:fixed;
    inset:0;
    z-index:99999;
    background:rgba(0,0,0,.72);
    display:flex;
    justify-content:center;
    align-items:center;
}

.sound-box{
    background:#181818;
    border:1px solid rgba(255,255,255,.18);
    border-radius:24px;
    padding:40px;
    color:#fff;
    text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.sound-title{
    font-size:24px;
    margin-bottom:24px;
}

#sound-unlock-btn{
    border:none;
    border-radius:14px;
    background:#fff;
    color:#000;
    padding:16px 28px;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
}