@charset "UTF-8";

.test-wrap {overflow: visible;}

.script {margin-bottom: 40px;}

.eng-area {display: -webkit-flex; display: flex; justify-content: start; align-items: start; gap: 10px 14px; flex-wrap: wrap;}
.timer {width: 100%; margin-bottom: 0;}
.eng-area .english, 
.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;}

.play-pause.ns {display: -webkit-flex; display: flex; justify-content: center; align-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--primary); color: #ffffff; font-weight: 700; font-size: 0.875rem; line-height: 1;}
.play-pause.me {padding: 12px 15px; display: none; justify-content: center; align-items: center; gap: 10px; border-radius: 999px; background: var(--highlight); box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25); font-weight: 700; font-size: 1rem; color: #FFF; line-height: 1.25rem;}
.play-pause.me svg {width: auto; height: 1.25rem;}

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

/* 결과 */
.result {opacity: 0; transition: all .5s ease; visibility: hidden;}
.result.open {opacity: 1; visibility: visible;}

.graph-area, .pronounce-result, .ul-table {margin-top: 30px;}
.canvas-area {position: relative; width: 100%; height: 100px;}
.canvas-area canvas {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

.wave-progress {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.wave-progress-bar {position: absolute; width: 2px; height: 100px; z-index: 10; left: 0%;}
.wave-progress-bar.native {background: var(--darkgray);}
.wave-progress-bar.me {background: var(--red2);}
.wave-progress-bar-arrow {position: absolute; bottom: -7px; width: 0; height: 0; left: 50%; transform: translateX(-50%); border-style: solid; border-width: 7px;}
.native .wave-progress-bar-arrow {border-color: transparent transparent var(--darkgray) transparent;}
.me .wave-progress-bar-arrow {border-color: transparent transparent var(--red2) transparent;}

.wave-progress-bg {position: absolute; top: 0; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;}
.wave-progress-bg-item {width: 0; max-width: 100%; height: 100%;}
.wave-progress-bg.native .wave-progress-bg-item:nth-child(odd) {background: rgba(223, 223, 223, .2);}
.wave-progress-bg.native .wave-progress-bg-item:nth-child(even) {background: rgba(223, 223, 223, .4);}
.wave-progress-bg.me .wave-progress-bg-item:nth-child(odd) {background: rgba(173, 145, 255, .2);}
.wave-progress-bg.me .wave-progress-bg-item:nth-child(even) {background: rgba(173, 145, 255, .4);}

.pronounce-result {display: flex; justify-content: start; align-items: start; gap: 20px; flex-wrap: wrap;}
.pronounce-result .sentence {margin: calc(((1.25rem + 12px*2) - 1.75rem*1.2 - 6px)/2) 0;}

.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;}
.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;}





/* Safari 14.1 이전 버전 */
@supports not (inset: 0){
    .eng-area>* {margin-bottom: 10px; margin-right: 14px;}
    .eng-area>*:last-child {margin-bottom: 0; margin-right: 0;}
    .play-pause.me span {margin-right: 8px;}
    .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 (min-width:993px){
    .score {width: 180px; height: 180px;}
}

@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: 100px;}
    .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);}
}