@charset "UTF-8";

.test-wrap {overflow: visible;}

.phonics-word-area {padding: 30px 0 50px;}
.script-phonics-word {margin-bottom: 40px; display: -webkit-flex; display: flex; justify-content: start; align-items: center; gap: 10px;}
/* .script-phonics-word .english {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} */
.script-phonics-word .english {margin: 0 auto;}

.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 {font-weight: 700; font-size: 1.75rem; line-height: 1.2; 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;}
.words.sp-wrong {border-bottom: 2px solid var(--red); color: var(--red);}

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

.pronounce-area {margin: 50px auto 10px;}

.select-cate {max-width: 300px;}
.select-phoneme-txt {max-width: 140px;}

.con-area {position: relative; width: 100%; margin: 0 auto; display: -webkit-flex; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.con-area .title2 {margin-bottom: 14px;}
.con-area .text2 {margin-bottom: 26px;}

#audio_speak {display: none;}
#audio_practice {display: none;}

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

.card {min-width: 12.5rem; height: 7.5rem; padding: 0 20px; background: #fff; border-radius: 10px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; font-weight: 700; font-size: clamp(1rem, 7.24vw, 3rem); line-height: 1; gap: 16px; box-shadow: 0 0 20px rgba(63, 36, 126, 0.15); color: var(--dark); position: relative; z-index: 3;}
.card :is(i, svg) {width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #616161; color: #fff; font-size: 0.875rem; display: -webkit-flex; display: flex; justify-content: center; align-items: center;}

.result {max-width: 100%; padding: calc(7.5rem/2 + 40px) clamp(16px, 5.20833333333vw, 100px) 40px; background: #fff; border: 2px solid #CBC1FF; border-radius: 20px; position: relative; top: calc(-7.5rem / 2); z-index: 2;}

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

/* 결과 */
.phonics-word-area .result>* + * {margin-top: 50px;}
.phonics-word-area .result .my-pronounce {display: flex; justify-content: center; align-items: center; gap: 1.5rem;}
.phonics-word-area .result .pronounce {color: var(--primary); text-align: center; font-size: 2.25rem; font-weight: 550; line-height: 1.666;}

.phonics-word-area .result .pronounce-area {justify-content: center;}

.phonics-word-area .result .phonics-word-score {max-width: fit-content; padding: 15px 25px; background: #F4F2FF; border-radius: 15px; font-size: 1.25rem; text-align: center; margin: 50px auto 10px;}
.phonics-word-area .result .phonics-word-score .tit {color: #000; font-weight: 500; margin-bottom: 4px;}
.phonics-word-area .result .phonics-word-score .score-num {color: var(--highlight); font-weight: 500; font-size: 2em;}
.phonics-word-area .result .phonics-word-score .score-num .point {font-weight: 727;}

.phonics-word-area .result .comment {color: #000; font-size: 1.5rem; font-weight: 500; display: flex; justify-content: center; align-items: start; gap: 20px 10px; position: relative;}
.phonics-word-area .result .comment .target-phoneme {color: var(--highlight); font-weight: 666;}
.phonics-word-area .result .comment .btn-exam {-webkit-flex-shrink: 0; flex-shrink: 0; padding: 5px 10px; background: #ececec; border-radius: 5px; color: #797979; font-weight: 600; font-size: 0.75em; margin-top: calc((1.5rem*1.2 - (1.5rem*1.2*0.75 + 10px))/2);}
.phonics-word-area .result .example-box {padding: 20px; border-radius: 14px; box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.1); background-color: #fff; font-size: 1.25rem; position: absolute; bottom: calc(100% + 15px); right: 0; z-index: 10;}
.phonics-word-area .result .example-box {transform: scale(0); opacity: 0; transform-origin: bottom right; transition: all 0.4s ease; visibility: hidden;}
.phonics-word-area .result .example-box.open {transform: scale(1); opacity: 1; visibility: visible;}

.example-box .btn-close {width: 1.75rem; height: 1.75rem; display: block; margin-left: auto; margin-top: -10px; margin-bottom: 10px;}
.example-box .btn-close img {width: 100%; height: 100%; object-fit: contain; display: block;}

.example-box .type {padding: 4px 10px; background: #F4F2FF; border-radius: 5px; color: var(--highlight); font-weight: 700;}
.example-box .ul-exam-box {font-size: 0.9em; margin-top: 12px;}
.example-box .ul-exam-box>li + li {margin-top: 10px;}
.example-box .ul-exam-box .pronounce {font-size: 1em;}
.example-box .exam-word-area {position: relative; padding-left: 15px;}
.example-box .exam-word-area::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--highlight);}

.example-box .exam-word-area>* {display: inline-block;}
.example-box .exam-word-area .icon-arrow {width: 1em;}
/* //결과 */

.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; white-space: nowrap;}



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





/* Safari 14.1 이전 버전 */
@supports not (inset: 0){
    .script-phonics-word>* {margin-right: 10px;}
    .script-phonics-word>*:last-child {margin-right: 0;}
    .eng-area>* {margin-bottom: 10px; margin-right: 14px;}
    .eng-area>*:last-child {margin-bottom: 0; margin-right: 0;}
    .card i {margin-right: 16px;}
    .btn-more i {margin-left: 10px;}
}

@media screen and (max-width:1280px){
    .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){
    .phonics-word-area .result .comment {flex-direction: column;}
    .phonics-word-area .result .example-box {bottom: auto; right: auto; top: calc(100% + 15px); left: 0; transform-origin: top left;}

}

@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);}
}