/* 인라이브 노래자랑 블라인드 매치 */
.inlive_blindMatch {display: block; width: 100%; height: auto;}
.blindMatchSec {display: block; width: 100%; height: auto; background-color: #fff;}

.inlive_blindMatch .content {}
.inlive_blindMatch .content>.titCont {display: flex; flex-direction: row; align-items: center; justify-content: space-between;}
.inlive_blindMatch .content>.titCont>.titContTxt {display: block;}
.inlive_blindMatch .content>.titCont>.titContTxt>p>span {padding:5px 10px; display: inline-block; font-size: 12px; color:#f74299; line-height: normal; vertical-align: middle; background-color: #fef3f8;  border:1px solid #fdc2db; border-radius: 10px;}
.inlive_blindMatch .content>.titCont>.titContTxt>p:last-child {font-size: 15px; color: #aaa;}

.inlive_blindMatch .content>.titCont>.titContBox {padding:15px; display: flex; flex-direction: row; align-items: center; background-color: #FEFEFF; border: 1px solid #eee; border-radius: 15px; box-sizing: border-box; box-shadow: 1px 1px 3px #eee;}
.inlive_blindMatch .content>.titCont>.titContBox>.imgBox {margin-right: 20px; display: block;}
.inlive_blindMatch .content>.titCont>.titContBox>.imgBox>.frame {display: block; width: 80px; height: auto;}
.inlive_blindMatch .content>.titCont>.titContBox>.imgBox>.frame>img {display: block; width: 100%; height: 100%; object-fit: cover;}
.inlive_blindMatch .content>.titCont>.titContBox>.txtBox {display: block;}
.inlive_blindMatch .content>.titCont>.titContBox>.txtBox>p {font-size: 15px; color: #aaa;}
.inlive_blindMatch .content>.titCont>.titContBox>.txtBox>p:first-child {margin-bottom: 10px; font-size: 18px; color: #000;}
.inlive_blindMatch .content>.titCont>.titContBox>.txtBox>p>.votingNum {font-weight: bold; font-size: 20px;}


.blindMatchCont {margin-top: 20px; padding: 30px; display: block; width: 100%; height: auto; background-color: #0B0D13; border-radius: 20px; box-sizing: border-box;}
.blindMatchCont>.matchMidCont {position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;}
.blindMatchCont>.matchMidCont>.midContBox {padding: 15px 30px; display: block; border-radius: 20px;}
.blindMatchCont>.matchMidCont>.midContBox>span {padding:5px 10px; display: inline-block; font-size: 13px; color: #fff; border-radius: 10px; letter-spacing: 1px;}
.blindMatchCont>.matchMidCont>.midContBox>.userRandomNick {font-size: 20px; color: #fff;}

.blindMatchCont>.matchMidCont>.midContBox>.flexCont {margin: 20px 0; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;}

.blindMatchCont>.matchMidCont>.midContBox>.flexCont>.frame {margin-right: 20px; display: block; width: 170px; height: auto;}
.blindMatchCont>.matchMidCont>.midContBox>.flexCont>.frame>img {display: block; width: 100%; height: 100%; object-fit: contain;}

.blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont {display: block;}
.blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playBtnArea {display: block;}
.blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playBtnArea>button {position: relative; display: inline-block; width: 65px; height: 65px; background-color: #10151e; border-radius: 50%;}
.blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playBtnArea>button>i {position: absolute; top:50%; left:50%; font-size: 30px; color: #fff; transform: translate(-50%, -50%);}
.blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playBtnArea>button>i.fa-play {margin-left: 3px;}

.blindMatchCont>.matchMidCont>.midContBox.type1>.flexCont>.midiCont>.playBtnArea>button {border:1px solid #6C4BEF;}
.blindMatchCont>.matchMidCont>.midContBox.type3>.flexCont>.midiCont>.playBtnArea>button {border:1px solid #F13C83;}

.blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playActionArea {}


.blindMatchCont>.matchMidCont>.midContBox>.choiceBtnArea {display: block;}
.blindMatchCont>.matchMidCont>.midContBox>.choiceBtnArea>button {display: block; width: 100%; height: 50px; font-size: 18px; color: #fff; border: none; border-radius: 12px;}
.blindMatchCont>.matchMidCont>.midContBox>.choiceBtnArea>button>i {margin-right: 5px; font-size: 22px; vertical-align: bottom;}

.blindMatchCont>.matchMidCont>.midContBox>.choiceBtnArea>button.pcChoiBtn {display: block;}
.blindMatchCont>.matchMidCont>.midContBox>.choiceBtnArea>button.mobChoiBtn {display: none;}

.blindMatchCont>.matchMidCont>.midContBox.type1>.choiceBtnArea>button:disabled {background: #34343D; color: #777780; border: 1px solid #777780; cursor: not-allowed;}
.blindMatchCont>.matchMidCont>.midContBox.type3>.choiceBtnArea>button:disabled {background: #34343D; color: #777780; border: 1px solid #777780; cursor: not-allowed;}


.blindMatchCont>.matchMidCont>.midContBox.type1 {background-color: #131823; border: 1px solid #49318A;}
.blindMatchCont>.matchMidCont>.midContBox.type1>span {background-color: #402289;}

.blindMatchCont>.matchMidCont>.midContBox>.choiceBtnArea {display: block; width: 100%; height: auto;}
.blindMatchCont>.matchMidCont>.midContBox.type1>.choiceBtnArea>button {background: linear-gradient(90deg,#6C4BEF 0%,#7F4ADE 50%,#A52ED0 100%);}

.blindMatchCont>.matchMidCont>.midContBox.type2 {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); display: block;}
.blindMatchCont>.matchMidCont>.midContBox.type2>.frame {display: block; width: 205px; height: auto;}
.blindMatchCont>.matchMidCont>.midContBox.type2>.frame>img {display: block; width: 100%; height: 100%; object-fit: cover;}
.blindMatchCont>.matchMidCont>.midContBox.type2>.txtNotiBox {position: absolute; bottom: 3%; left: 50%; transform: translateX(-50%); text-align: center;}
.blindMatchCont>.matchMidCont>.midContBox.type2>.txtNotiBox>p {font-size: 18px; color: #fff; text-align: center; text-shadow: 0 0 1px #000;}
.blindMatchCont>.matchMidCont>.midContBox.type2>.txtNotiBox>p:first-child {margin-bottom: 3px;}
.blindMatchCont>.matchMidCont>.midContBox.type2>.txtNotiBox>span {display: inline-block; width: 55px; height: 4px; background: linear-gradient(90deg,#A52ED0 0%,#7F4ADE 50%,#6C4BEF 100%); border-radius: 3px;}

.blindMatchCont>.matchMidCont>.midContBox.type3 {background-color: #221823; border: 1px solid #8B285B;}
.blindMatchCont>.matchMidCont>.midContBox.type3>span {background-color: #572945;}

.blindMatchCont>.matchMidCont>.midContBox>.choiceBtnArea {display: block; width: 100%; height: auto;}
.blindMatchCont>.matchMidCont>.midContBox.type3>.choiceBtnArea>button {background: linear-gradient(90deg,#F13C83 0%,#FF3F83 55%,#FF438E 100%);}


.blindMatchCont>.matchBtmCont {margin-top: 20px; padding: 20px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-evenly; align-items: center; background-color: #12151b; border:1px solid #26282f; border-radius: 20px;}
.blindMatchCont>.matchBtmCont>.notiTxt {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center;}
.blindMatchCont>.matchBtmCont>.notiTxt>.frame {margin-right: 20px; position: relative; display: block; width: 50px; height: 50px; border-radius: 50%;}
.blindMatchCont>.matchBtmCont>.notiTxt>.frame>i {position: absolute; top:50%; left:50%; font-size: 25px; transform: translate(-50%, -50%);}

.blindMatchCont>.matchBtmCont>.notiTxt:first-child>.frame {background-color: #301f58; box-shadow:0 0 1px #e8baf6;}
.blindMatchCont>.matchBtmCont>.notiTxt:first-child>.frame>i {color: #e8baf6;}
.blindMatchCont>.matchBtmCont>.notiTxt:last-child>.frame {background-color: #311f2c; box-shadow:0 0 1px #fb8fb5;}
.blindMatchCont>.matchBtmCont>.notiTxt:last-child>.frame>i {color: #fb8fb5;}

.blindMatchCont>.matchBtmCont>.notiTxt>.txtCont {display: block;}
.blindMatchCont>.matchBtmCont>.notiTxt>.txtCont>p {}
.blindMatchCont>.matchBtmCont>.notiTxt>.txtCont>p:first-child {font-weight: 400; font-size: 16px; color: #fff;}
.blindMatchCont>.matchBtmCont>.notiTxt>.txtCont>p:last-child {font-size: 13px; color: #ccc;}




/* 오디오 재생 상태 영역 */
.blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playActionArea {
    margin-top: 20px;
    display: block;
    width: 220px;
}

/* 비주얼 라이브 */
.blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playActionArea>.visualizerArea {display:flex; height:45px; flex-direction:row; justify-content:center; align-items:center; gap:5px;}

.blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playActionArea>.visualizerArea>span {display:block; width:4px; height:10px; background-color:#777; border-radius:5px;}

.blindMatchCont>.matchMidCont>.midContBox.type1 .visualizerArea.playing>span {animation:blindMatchVisualizer 0.8s ease-in-out infinite alternate, visualizerColorLeft 2s linear infinite;}
.blindMatchCont>.matchMidCont>.midContBox.type3 .visualizerArea.playing>span {animation:blindMatchVisualizer 0.8s ease-in-out infinite alternate, visualizerColorRight 2s linear infinite;}

.blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playActionArea>.visualizerArea.playing>span:nth-child(2n) {animation-duration:0.5s,2s; animation-delay:0s,-0.4s;}
.blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playActionArea>.visualizerArea.playing>span:nth-child(3n) {animation-duration:0.7s,2s; animation-delay:0s,-0.8s;}
.blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playActionArea>.visualizerArea.playing>span:nth-child(4n) {animation-duration:0.4s,2s; animation-delay:0s,-1.2s;}
.blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playActionArea>.visualizerArea.playing>span:nth-child(5n) {animation-delay:0s,-1.6s;}

@keyframes blindMatchVisualizer {
    0% {height:8px;}
    100% {height:35px;}
}

@keyframes visualizerColorLeft {
    0% {background-color:#6C4BEF;}
    50% {background-color:#7F4ADE;}
    100% {background-color:#A52ED0;}
}

@keyframes visualizerColorRight {
    0% {background-color:#B91F68;}
    50% {background-color:#FF3F83;}
    100% {background-color:#FF8FBA;}
}


/* 진행 상태 */
.blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playActionArea>.playProgressArea {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}


/* 시간 */
.blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playActionArea>.playProgressArea>span {
    flex-shrink: 0;
    font-size: 11px;
    color: #aaa;
}


/* 진행바 */
.blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playActionArea>.playProgressArea>.progressBar {
    position: relative;
    display: block;
    width: 100%;
    height: 4px;
    overflow: hidden;
    background-color: #343842;
    border-radius: 10px;
    cursor: pointer;
}

.blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playActionArea>.playProgressArea>.progressBar:before {
    content: "";
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: 0;
    right: 0;
}


/* 실제 진행 부분 */
.blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playActionArea>.playProgressArea>.progressBar>.progress {
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 0;
    height: 100%;
    border-radius: 10px;
}


/* 왼쪽 참가자 */
.blindMatchCont>.matchMidCont>.midContBox.type1 .playActionArea .progressBar>.progress {background-color:#7F4ADE;}

/* 오른쪽 참가자 */
.blindMatchCont>.matchMidCont>.midContBox.type3 .playActionArea .progressBar>.progress {background-color:#FF3F83;}




































/* =========================================================
    1500px 이하
    - 기본 레이아웃 유지
    - 좌우 카드 내부 여백 및 주요 요소만 소폭 축소
========================================================= */
@media screen and (max-width: 1500px) {

    .blindMatchCont {
        padding: 25px;
    }

    /* 좌우 참가자 카드 */
    .blindMatchCont>.matchMidCont>.midContBox {
        padding: 15px 25px;
    }

    /* 참가자 닉네임 */
    .blindMatchCont>.matchMidCont>.midContBox>.userRandomNick {
        font-size: 19px;
    }

    /* 참가자 이미지 */
    .blindMatchCont>.matchMidCont>.midContBox>.flexCont>.frame {
        margin-right: 15px;
        width: 155px;
    }

    /* 플레이 영역 */
    .blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playActionArea {
        width: 200px;
    }

    /* 가운데 VS */
    .blindMatchCont>.matchMidCont>.midContBox.type2>.frame {
        width: 190px;
    }

    /* VS 안내문 */
    .blindMatchCont>.matchMidCont>.midContBox.type2>.txtNotiBox>p {
        font-size: 17px;
    }

}


/* =========================================================
    1360px 이하
    - 중앙 VS 간섭 방지
========================================================= */
@media screen and (max-width: 1360px) {

    /* 좌우 참가자 카드 */
    .blindMatchCont>.matchMidCont>.midContBox.type1,
    .blindMatchCont>.matchMidCont>.midContBox.type3 {
        width: calc(50% - 105px);
        box-sizing: border-box;
    }

    /* 카드 내부 */
    .blindMatchCont>.matchMidCont>.midContBox {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* 참가자 이미지 */
    .blindMatchCont>.matchMidCont>.midContBox>.flexCont>.frame {
        width: 140px;
        margin-right: 12px;
        flex-shrink: 0;
    }

    /* 오디오 영역 */
    .blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont {
        min-width: 0;
        flex: 1;
    }

    .blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playActionArea {
        width: 100%;
    }

    /* VS */
    .blindMatchCont>.matchMidCont>.midContBox.type2>.frame {
        width: 175px;
    }

}



/* =========================================================
    1250px 이하
========================================================= */
@media screen and (max-width: 1250px) {

    /* 재생 버튼 가운데 정렬 */
    .blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playBtnArea {
        text-align: center;
    }

    /* 재생 버튼 축소 */
    .blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playBtnArea>button {
        width: 55px;
        height: 55px;
    }

    /* 재생 아이콘 축소 */
    .blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playBtnArea>button>i {
        font-size: 25px;
    }

}


/* =========================================================
    1200px 이하
    - 사이트 content 100% 전환
    - 재생 버튼 원래 크기 / 위치로 복귀
========================================================= */
@media screen and (max-width: 1200px) {

    .blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playBtnArea>button {
        width: 65px;
        height: 65px;
    }

    .blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playBtnArea>button>i {
        font-size: 30px;
    }

}


/* =========================================================
    980px 이하
========================================================= */
@media screen and (max-width: 980px) {

    /* 좌우 카드 */
    .blindMatchCont>.matchMidCont>.midContBox.type1,
    .blindMatchCont>.matchMidCont>.midContBox.type3 {
        padding: 15px 20px;
    }


    /* 이미지 / 오디오 영역 */
    .blindMatchCont>.matchMidCont>.midContBox>.flexCont {
        position: relative;
        display: block;
        margin: 15px 0;
    }


    /* 참가자 이미지 */
    .blindMatchCont>.matchMidCont>.midContBox>.flexCont>.frame {
        margin: 0 auto;
        position: relative;
        width: 150px;
    }

    .blindMatchCont>.matchMidCont>.midContBox>.flexCont>.frame::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.25);
    }


    /* midi 영역을 카드 전체 폭으로 */
    .blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont {
        display: block;
        width: 100%;
    }


    /* 재생 버튼 영역 */
    .blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playBtnArea {
        position: absolute;
        top: 75px;
        left: 50%;
        z-index: 2;
        width: auto;
        transform: translate(-50%, -50%);
    }


    /* 재생 버튼 */
    .blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playBtnArea>button {
        width: 55px;
        height: 55px;
    }


    /* 재생 아이콘 */
    .blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playBtnArea>button>i {
        font-size: 25px;
    }


    /* 비주얼 + 진행바 */
    .blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playActionArea {
        margin-top: 10px;
        display: block;
        width: 100%;
    }


    /* 비주얼라이저 */
    .blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playActionArea>.visualizerArea {
        width: 100%;
        justify-content: center;
    }


    /* 진행 영역 */
    .blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playActionArea>.playProgressArea {
        width: 100%;
    }

}



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

    .blindMatchCont>.matchMidCont>.midContBox>.choiceBtnArea>button {
        font-size: 14px;
    }

    .blindMatchCont>.matchMidCont>.midContBox>.choiceBtnArea>button>i {
        font-size: 17px;
    }

}


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

    .inlive_blindMatch .content>.titCont>.titContBox {
        padding: 5px 10px;
    }

    .inlive_blindMatch .content>.titCont>.titContBox>.imgBox {
        display: none;
    }

    .inlive_blindMatch .content>.titCont>.titContBox>.txtBox>p {
        font-size: 13px;
    }

    .inlive_blindMatch .content>.titCont>.titContBox>.txtBox>p:first-child {
        margin-bottom: 0;
        font-size: 15px;
    }

    .inlive_blindMatch .content>.titCont>.titContBox>.txtBox>p>.votingNum {
        font-size: 17px;
    }


    .blindMatchCont>.matchMidCont>.midContBox>.userRandomNick {
        font-size: 15px;
        text-align: center;
    }

    .blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playActionArea {
        display: none;
    }

    .blindMatchCont>.matchMidCont>.midContBox>.choiceBtnArea>button.pcChoiBtn {display: none;}
    .blindMatchCont>.matchMidCont>.midContBox>.choiceBtnArea>button.mobChoiBtn {display: block;}

    .blindMatchCont>.matchMidCont>.midContBox>.flexCont>.frame {
        width: 100%;
        height: auto;
    }

    /* 좌우 참가자 카드 */
    .blindMatchCont>.matchMidCont>.midContBox.type1,
    .blindMatchCont>.matchMidCont>.midContBox.type3 {
        width: 40%;
    }

    .blindMatchCont>.matchMidCont>.midContBox.type2>.txtNotiBox {display: none;}

    /* VS */
    .blindMatchCont>.matchMidCont>.midContBox.type2>.frame {
        width: 120px;
    }


    .blindMatchCont>.matchBtmCont>.notiTxt>.frame {margin-right: 10px;}
    .blindMatchCont>.matchBtmCont>.notiTxt>.frame>i {font-size: 20px;}

    .blindMatchCont>.matchBtmCont>.notiTxt>.txtCont>p:first-child {font-size: 13px;}
    .blindMatchCont>.matchBtmCont>.notiTxt>.txtCont>p:last-child {font-size: 10px;}
    

}


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

    /* 재생 버튼 */
    .blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playBtnArea>button {
        width: 45px;
        height: 45px;
    }


    /* 재생 아이콘 */
    .blindMatchCont>.matchMidCont>.midContBox>.flexCont>.midiCont>.playBtnArea>button>i {
        font-size: 20px;
    }
}

@media screen and (max-width: 560px) {
    .inlive_blindMatch .content>.titCont>.titContBox>.txtBox>p {display: none;}
    .inlive_blindMatch .content>.titCont>.titContBox>.txtBox>p:first-child {display: block;}
}

@media screen and (max-width: 520px) {
    /* 좌우 참가자 카드 */
    .blindMatchCont>.matchMidCont>.midContBox.type1,
    .blindMatchCont>.matchMidCont>.midContBox.type3 {
        width: 45%;
    }

    .blindMatchCont>.matchBtmCont {display: none;}
}

@media screen and (max-width: 500px) {
    .inlive_blindMatch .content>.titCont>.titContTxt>.content_title {margin-bottom: 0;}
    .inlive_blindMatch .content>.titCont>.titContTxt>p>span {vertical-align: bottom;}
    .inlive_blindMatch .content>.titCont>.titContTxt>p:last-child {display: none;}
}