/*
** html tag reset
*/
@import url('https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.1/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css');

* { margin: 0; padding: 0; font-family: "Wanted Sans Variable", sans-serif;line-height: 1; vertical-align: middle; background: transparent; max-height: 99999px; -webkit-text-size-adjust: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; touch-action: manipulation; box-sizing: border-box;}

html, body { margin: 0; height: 100%; overflow: hidden;}
body {background: #000;}

::-webkit-scrollbar { width: 5px; height: 5px;}
::-webkit-scrollbar-thumb {background-color: #ABADB5; border-radius: 32px; background-clip: padding-box;}
::-webkit-scrollbar-track {background-color: #CCCCCC; box-shadow: inset 0px 0px 5px white;}

a { text-decoration: none;}
ul { list-style: none; padding: 0 0 0;}
input { outline: none;  width: 200px; border: 1px solid #DCE3EB; height: 32px; padding: 0 10px; border-radius: 3px; font-size: 14px;}
input:focus { outline: none;}
input:read-only {background: #F7F8F9;}
select { border: 1px solid #DCE3EB; border-radius: 4px;font-size: 14px; width: 95px; height: 32px; padding: 0 10px; -webkit-appearance: none;-moz-appearance: none; appearance: none; background: #FFF url('/assets/image/select_arrow.png') no-repeat right 5px top 50%;}
select:focus { outline: none;}


/* index */
.previewFlex {height: 100%; display: flex; align-items: center; background: #000;}

.previewMessageRolling {position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; height: 50px; z-index: 1; background: #00000099; overflow:hidden;}
.previewMessageRolling .previewMessageList {position:relative;}
.previewMessageRolling .previewMessageList > li {height: auto;  padding: 30px 0 30px;}
.previewMessageRolling .previewMessageList .previewMessageRow {display: flex; color: #ddd; justify-content: center; padding: 0 20px; font-size: 26px;}
.previewMessageRolling .previewMessageList .previewMessageRow > dt {font-weight: 500; margin: 0 25px 0 0; position: relative;}
.previewMessageRolling .previewMessageList .previewMessageRow > dt:after {content: ''; display: block; width: 1px; height: calc(100% - 10px); background: #ddd; position: absolute; right: -12px; top: 50%; transform: translateY(-50%);}

.previewMessageQr {display: inline-flex; width: 100px; height: 124px; padding: 10px;flex-direction: column;justify-content: center;align-items: center;gap: 10px; position: fixed; right: 10px; bottom: 10px; z-index: 101; border-radius: var(--Radius-MD, 8px);background: #FFF;box-shadow: 0 10px 15px -3px rgba(108, 92, 231, 0.10);}
.previewMessageQr::before {content: '추모 메세지'; font-family: "Wanted Sans Variable", sans-serif; display: block; color: var(--Neutral-900, #212529);font-size: 14px;font-weight: 700;line-height: 100%; }
.previewMessageQr > img {width: 100%;}

.previewContent {overflow: hidden; position: relative; margin: 0 auto;}

.previewCommon {width: 1920px; height: 1080px; transform: scale(1); transform-origin: 0 0; background: #FFF; box-shadow: 0 10px 15px -3px rgba(108, 92, 231, 0.10);}
.previewCommon .swiper {height: 100%;}
.previewCommon .swiper-wrapper {height: 100%;}
.previewCommon .swiper-slide {height: 100%;}
.previewCommon .swiper-slide .swiper-slide-box {display: none;}
.previewCommon .swiper-slide.swiper-slide-active .swiper-slide-box {display: block;}
.previewCommon .swiper-slide.swiper-slide-prev .swiper-slide-box {display: block;}
.previewCommon .swiper-slide-box {width: 100%; height: 100%; position: relative; background: #FFF; }

.previewCommon .editorSwiperBg {position: relative; left: 0; top: 0; width: 100%; height: 100%;  overflow: hidden;}

.previewCommon .editorSwiperEtc {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5;}
.previewCommon .editorSwiperPhoto {position: absolute; left: 0; top: 0; width: 272px; height: 340px;}
.previewCommon .editorSwiperPhoto img {width: 100%; height: 100%; pointer-events: none;}
.previewCommon .editorSwiperPhoto video {width: 100%; height: 100%; pointer-events: none; background: #000;}
.previewCommon .editorSwiperPhoto .editorSwiperAniMain,
.previewCommon .editorSwiperPhoto .editorSwiperAniSub,
.previewCommon .editorSwiperPhoto .editorSwiperEl {width: 100%; height: 100%; user-select: none;}

.previewCommon .editorSwiperTxt {max-width: 100%; max-height: 100%; position: absolute; left: 0; top: 0;  outline: none; line-height: 140%; color: #000; z-index: 0; transform-origin: center center;}
.previewCommon .editorSwiperTxt .editorSwiperAniMain,
.previewCommon .editorSwiperTxt .editorSwiperAniSub,
.previewCommon .editorSwiperTxt .editorSwiperEl {width: 100%; height: 100%; user-select: none; line-height: 140%;}
.previewCommon .editorSwiperTxt .editorSwiperEl {padding: 12px 12px;}
.previewCommon .editorSwiperTxt .editorSwiperEl .tm-char {display: inline;color: inherit;font-family: inherit;font-size: inherit;font-weight: inherit;line-height: inherit;letter-spacing: inherit;font-style: inherit; vertical-align: baseline;}



.previewEtc {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 100;}
.previewEtc .previewCover {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%);}
.previewEtc .previewCover::before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 88px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.00) 100%);}
.previewEtc .previewCover::after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 126px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.40) 50%, rgba(0, 0, 0, 0.00) 100%);}

.previewEtc .previewCover.noActive {display: none;}
.previewEtc .previewCover.noActive + .previewProgress {display: block;  position: absolute; left: 0; bottom: -126px; width: 100%; padding: 24px; transition: bottom 0.4s; background: linear-gradient(0deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.40) 50%, rgba(0, 0, 0, 0.00) 100%);}
.previewEtc .previewCover .previewPlayBtn {width: 96px;height: 96px;aspect-ratio: 1/1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; border-radius: 111.222px;border: 1px solid rgba(255, 255, 255, 0.10);background: rgba(255, 255, 255, 0.10);backdrop-filter: blur(5.05555534362793px); cursor: pointer;}
.previewEtc .previewCover .previewPlayBtn::after {content: ''; width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: url('../images/preview/i_play.svg') no-repeat center; }

.previewEtc .previewProgress {display: none;  }
.previewEtc .previewProgress .previewProgressBar {display: none;}
.previewEtc .previewProgress .previewProgressBtn {width: 100%; display: flex;height: 48px;justify-content: center;align-items: center;align-self: stretch;}
.previewEtc .previewProgress .previewProgressBtn .previewProgressGroup {display: flex;align-items: center;gap: var(--Spacing-LG, 24px);}

.previewEtc .previewProgress .previewProgressBtn .previewPrevBtn {display: flex;width: 40px;height: 40px;padding: 0 8px;flex-direction: column;justify-content: center;align-items: center; cursor: pointer; background: url('../images/preview/i_prev.svg') no-repeat center;}
.previewEtc .previewProgress .previewProgressBtn .previewStopBtn {display: flex;width: 48px;height: 48px;justify-content: center;align-items: center; cursor: pointer; border-radius: var(--Radius-Pill, 999px); background: var(--Primary-500, #6C5CE7) url('../images/preview/i_stop.svg') no-repeat center;}
.previewEtc .previewProgress .previewProgressBtn .previewNextBtn {display: flex;width: 40px;height: 40px;padding: 0 8px;flex-direction: column;justify-content: center;align-items: center; cursor: pointer; background: url('../images/preview/i_next.svg') no-repeat center;}
.previewEtc .previewProgress .previewProgressBtn .previewTime {}

.previewEtc .previewProgress .previewProgressBtn .previewProgressVolume {}

.previewEtc:hover .previewCover.noActive + .previewProgress {bottom: 0px; transition: bottom 0.4s;}

/* Idle UI: 3초 무동작 시 커서 숨김 + 재생 중 하단 컨트롤 숨김 / 정지 중 커버 숨김 */
body.previewCursorIdle,
body.previewCursorIdle * {
    cursor: none !important;
}
.previewEtc.previewUiIdlePlaying .previewCover.noActive + .previewProgress {
    bottom: -126px !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: bottom 0.4s, opacity 0.3s, visibility 0.3s;
}
.previewEtc.previewUiIdlePlaying:hover .previewCover.noActive + .previewProgress {
    bottom: -126px !important;
    opacity: 0;
    visibility: hidden;
}
.previewEtc.previewUiIdleStopped .previewCover:not(.noActive) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s, visibility 0.3s;
}

/* ***** MOBILE ***** */
@media screen and (max-width:799px) {
    .previewMessageRolling {display: none;}

    .previewMessageQr {display: none;}

    .previewEtc .previewCover .previewPlayBtn {width: 40px; height: 40px;}
    .previewEtc .previewCover .previewPlayBtn:after {content: ''; background-size: 13px;}
    .previewEtc .previewCover.noActive + .previewProgress {padding: 8px 8px;}

    .previewEtc .previewProgress .previewProgressBtn {height: 36px;}
    .previewEtc .previewProgress .previewProgressBtn .previewProgressGroup {gap: 8px;}

    .previewEtc .previewProgress .previewProgressBtn .previewPrevBtn { width: 36px; height: 36px; background-size: 18px;}
    .previewEtc .previewProgress .previewProgressBtn .previewNextBtn { width: 36px; height: 36px; background-size: 18px;}
    .previewEtc .previewProgress .previewProgressBtn .previewStopBtn {width: 36px; height: 36px; background-size: 10px;}
}