@charset "UTF-8";

.test-wrap {overflow: visible;}

.speech-area {padding: 30px 0 50px; display: flex; flex-direction: column; align-items: center;}

.style-circle {width: fit-content; position: relative; padding-left: 16px; color: #000; margin: 0 auto; margin-bottom: 26px;}
.style-circle::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--highlight);}

.script {margin-bottom: 40px;}
.select-question {max-width: 200px;}

.illust {width: 100%; max-width: 800px; display: block; object-fit: contain; margin-bottom: 20px; border-radius: 15px;}

.question, .stt {color: #000; font-size: 1.5rem; text-align: center; line-height: 1.4;}
.question {font-weight: 656;}
.stt {font-weight: 450;}

/* 결과 */
.result {max-width: 100%; background: #fff; border-radius: 20px; position: relative; z-index: 1;}
.result {max-height: 0; padding: 0; opacity: 0; visibility: hidden; overflow: hidden; transition: all .5s ease;}
.result.open {max-height: 3000px; padding: 40px clamp(16px, 5.20833333333vw, 100px); margin-top: 40px; border: 2px solid #CBC1FF; opacity: 1; visibility: visible; overflow: visible;}

.play-pause.me {padding: 12px 15px; display: flex; justify-content: center; align-items: center; gap: 10px; border-radius: 999px; box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25); font-weight: 700; font-size: 1rem; color: #FFF; line-height: 1.25rem; text-align: left; background: var(--highlight);}

.pronounce-result {display: flex; align-items: center; gap: 20px; flex-direction: column;}
.pronounce-result .sentence {margin: calc(((1.25rem + 12px*2) - 1.75rem*1.2 - 6px)/2) 0;}
.pronounce-result .sentence {font-weight: 700; font-size: 1.75rem; line-height: 1.2; color: var(--dark); width: -moz-fit-content; width: -webkit-fit-content; width: fit-content;}

.words.excellent {background-color: rgba(21, 181, 143, .7); border-radius: 4px; margin: 0 1px;}
.words .good, 
.words.good {background-color: rgba(255, 193, 73, .7); border-radius: 4px; margin: 0 1px;}
.words .fail, 
.words.fail {background-color: rgba(254, 95, 117, .7); border-radius: 4px; margin: 0 1px;}

.sentence .words:where(.excellent, .good, .fail) {margin: 3px 1px;}
.sentence .words {display: inline-block; padding: 2px 9px;}

.ul-table {width: 100%; display: grid; grid-template-columns: 120px 100px 1fr; gap: 5px; margin-top: 30px;}
.ul-table :is(.th, .td) {display: flex; align-items: center; font-size: 1.125rem; line-height: 1.3; color: var(--dark); padding: 14px 10px;}
.ul-table :is(.th, .td1) {justify-content: center; text-align: center;}
.ul-table .th {font-weight: 600; border-radius: 6px;}
.ul-table .th1 {background: #F4F2FF;}
.ul-table .th2 {background: #f2f7ff;}
.ul-table .td {font-weight: 500;}
.ul-table .td-percent {color: var(--highlight); font-weight: 767;}
.ul-table .td-percent.fail {color: var(--red);}
.ul-table .td-type {color: #5F81FF; font-weight: 660;}
/* //결과 */

.btn-more {padding: 12px 30px; display: -webkit-flex; display: flex; justify-content: start; align-items: center; gap: 10px; text-align: left; font-weight: 600; font-size: 1.25rem; background: var(--highlight); color: #fff; border-radius: 999px; margin-top: 50px;}
.btn-more i {width: 1.25rem; height: 1.25rem; display: flex; justify-content: center; align-items: center; font-size: 0.938rem;}
.player .btn-more {position: absolute; top: 50%; right: 100px; transform: translateY(-50%); margin: 0;}



/* 영어 */
html:lang(en) .speaking-player .speech-bubble::before {content: 'Listening now…';}
/* //영어 */





/* Safari 14.1 이전 버전 */
@supports not (inset: 0){
    .btn-more i {margin-left: 10px;}
}

@media screen and (max-width:1280px){
    .ul-table {grid-template-columns: 102px 88px 1fr;}

    .player .btn-more {right: var(--inner-padding-r);}
}

@media screen and (max-width:768px){
    .ul-table {grid-template-columns: repeat(2, 1fr);}
    .ul-table .td1 {border-radius: 6px;}
    .ul-table .td-percent {border: 2px solid #F4F2FF;}
    .ul-table .td-type {border: 2px solid #f2f7ff;}
    .ul-table .td-comment {grid-column: 1 / span 2;}
}

@media screen and (max-width:700px){
    .test-area {padding-bottom: 50px;}
    .player .btn-more {top: auto; bottom: calc(80px + 15px); right: auto; left: 50%; transform: translateX(-50%);}
}

@media screen and (max-width:480px){
    .player .btn-more {padding: 12px var(--inner-padding-l); bottom: calc(64px + 15px);}
}