@charset "UTF-8";

.cate-area .page-info.important {color: var(--red); font-weight: 550;}

.cate-area .cate {display: -webkit-flex; display: flex; justify-content: start; align-items: center; gap: 8px 20px; flex-wrap: wrap;}

.test-wrap {overflow: visible;}

.readaloud-area {width: 100%; padding: 50px 15px 40px; background: #fff; border-radius: 20px; border: 2px solid #cbc1ff; position: relative;}
.readaloud-area .script {position: relative; width: 100%; padding: 0 35px; min-height: 20rem; max-height: 30rem; margin-bottom: 0;}
.readaloud-area .scroll {overflow-x: hidden; overflow-y: auto;}

.readaloud-area .script {position: relative; color: var(--dark); font-size: 1.5rem; font-weight: 568; line-height: 2.9; letter-spacing: 0.01em;}
.readaloud-area .script * {color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit;}
/* .readaloud-area .script .words:hover {color: var(--highlight);} */

.bg-highlight {position: relative; z-index: 1;}
.bg-highlight::before {content: ''; position: absolute; width: 100%; height: 2.25rem; top: 50%; left: 0; transform: translateY(-50%); z-index: -1; background: #FFF3D4; box-shadow: -5px 0 0 0 #FFF3D4, 5px 0 0 0 #FFF3D4; border-radius: 3px;}

.words.excellent {color: var(--green);}
.words.good {color: var(--orange);}
.words.try-harder {color: var(--red);}


.speaking-player {height: 146px;}

.name-tag-area {display: -webkit-flex; display: flex; justify-content: start; align-items: center; gap: 10px; margin-right: auto; position: relative; top: 50%; transform: translateY(-50%); left: 30px;}

.ul-legend {display: -webkit-flex; display: flex; justify-content: start; align-items: center; gap: 1.625rem; position: absolute; top: calc((50px - 1.125rem)/2); left: 50px;}
.legend {display: -webkit-flex; display: flex; justify-content: start; align-items: center; gap: 0.375rem; position: relative; font-weight: 673; font-size: 1.125rem; line-height: 1;}
.legend.excellent {color: var(--green);}
.legend.good {color: var(--orange);}
.legend.try-harder {color: var(--red);}

.legend::before {content: ''; width: 0.75rem; height: 0.75rem; border-radius: 50%; display: inline-block;}
.legend.excellent::before {background-color: var(--green);}
.legend.good::before {background-color: var(--orange);}
.legend.try-harder::before {background-color: var(--red);}

.ns-area {padding: 12px 15px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; gap: 30px; 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; background: #616161;}

.play-pause {display: -webkit-flex; display: flex; justify-content: center; align-items: center; gap: 10px;}
.play-pause.ns, 
.ns-area .btn-speed, 
.speed-area .ul-option .option {font-weight: inherit; font-size: inherit; color: inherit; line-height: inherit;}
.play-pause.me {padding: 12px 15px;  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; display: none; background: var(--highlight);}
.play-pause svg {height: 1.25rem;}
.play-pause .icon-pause {display: none;}

.ns-area .speed-area {position: relative;}

.btn-speed {padding: 10px; margin: -10px;}

.speed-area .ul-option {position: absolute; bottom: calc(100% + 18px); left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, .35); border-radius: 8px; color: #fff; transition: all 0.3s ease-in-out;}

.speed-area .ul-option, 
.btn-speed.fold ~ .ul-option {padding: 0; max-height: 0px; overflow: hidden; visibility: hidden;}
.btn-speed.open ~ .ul-option {padding: 2px 0; max-height: 100px; overflow: visible; visibility: visible;}

.speed-option + label {cursor: pointer; width: 100%; padding: 8px 18px; display: inline-block; text-align: center;}
.speed-option + label:hover {background: rgba(255, 255, 255, 0.25);}
.speed-option:checked + label {color: var(--highlight); font-weight: 888;}

.timer {position: absolute; top: 0; left: 50%; transform: translateX(-50%);}




/* Safari 14.1 이전 버전 */
@supports not (inset: 0){
    .name-tag-area>* {margin-right: 10px;}
    .name-tag-area>*:last-child {margin-right: 0;}
    .play-pause i {margin-left: 8px;}
}

@media screen and (max-width:1280px){
    .readaloud-area .script {padding-left: calc(var(--inner-padding-l) - 15px); padding-right: calc(var(--inner-padding-l) - 15px);}
    .ul-legend {left: var(--inner-padding-l);}
}

@media screen and (max-width:850px){
    .name-tag-area {flex-direction: column; align-items: start;}
}

@media screen and (max-width:480px){
    .name-tag-area {left: var(--inner-padding-l);}
}