@charset "UTF-8";

/* header */
#lnb_pc .ul-second-menu-wrap>.demo {display: inline-block;}
/* //header */


/* 데모 공통 */
.demo .demo-description {padding: 60px var(--inner-padding-l) 113px; margin: 0 0 -83px; background-image: linear-gradient(135deg, #6E52FF, #585CF5); text-align: center; color: #fff; font-weight: 727; font-size: 32px;}

.demo .dropdown-area {width: 250px; position: relative;}
.demo .dropdown-area .btn-lang-dropdown {
    width: 100%; height: 3.125rem; padding: 10px 15px; padding-right: 48px; border-radius: 10px; border: var(--border-solid); background-repeat: no-repeat; background-position: calc(100% - 15px) center, center; background-size: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.25rem; font-weight: 600; color: #000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='13' viewBox='0 0 18 13' fill='none'%3E%3Cpath d='M8.06888 12.504C8.57184 13.1021 9.42808 13.1021 9.93104 12.504L17.6569 3.31702C18.4135 2.41737 17.8367 0.952564 16.7258 0.952564H1.27409C0.16324 0.952564 -0.413571 2.41737 0.343005 3.31702L8.06888 12.504Z' fill='%23A291FA'/%3E%3C/svg%3E"), linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
}
.demo:has(.cn) :is(
    .demo .dropdown-area .btn-lang-dropdown, 
    .script .english
) {font-family: 'Noto Sans SC Variable';}
.demo:has(.jp) :is(
    .demo .dropdown-area .btn-lang-dropdown, 
    .script .english
) {font-family: 'Pretendard JP Variable';}
.demo .dropdown-area .btn-lang-dropdown, 
.demo .ul-lang-dropdown .lang-tab-item .btn-lang-tab {display: -webkit-flex; display: flex; justify-content: start; align-items: center;}
.demo .ul-lang-dropdown {min-width: 100%; width: max-content; border-radius: 10px; border: 1px solid var(--border); overflow: hidden; background: #fff; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1); position: absolute; top: 100%; left: 0; z-index: 10;}
.demo .ul-lang-dropdown.fold {display: none;}
.demo .ul-lang-dropdown.open {display: block;}
.demo .ul-lang-dropdown .lang-tab-item {width: 100%;}
.demo .ul-lang-dropdown .lang-tab-item .btn-lang-tab {width: 100%; padding: 10px 15px; color: #000; font-size: 1.25rem; font-weight: 400; border-radius: 0;}
.demo .ul-lang-dropdown .lang-tab-item .btn-lang-tab:hover {background-color: #F4F2FF;}
.demo .ul-lang-dropdown .lang-tab-item .btn-lang-tab:where(:focus, :active, .on) {color: #9F63FF;}

.demo .cate-area .cate .flag {-webkit-flex-shrink: 0; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); display: inline-block; margin-right: 15px;}
.demo .cate-area .cate .flag img {width: 100%; height: 100%; object-fit: cover; display: block;}

.select-mode {width: 160px; font-size: 1.25rem; font-weight: 600; color: #000;}
.select-mode optgroup {color: #000; font-size: 1.25rem; font-weight: 500; font-style: normal;}
.select-mode option {color: #000; font-size: 1.25rem; font-weight: 400;}

.demo .ul-tab {width: calc(100% + 60px); display: -webkit-flex; display: flex; align-items: stretch; position: relative; overflow-x: auto; overflow-y: hidden; padding: 30px; margin: -30px;}
.demo .ul-tab>.tab-item + .tab-item {margin-left: -10px;}
.demo .ul-tab>.tab-item {position: relative;}
.demo .ul-tab>.tab-item:has(.tab.on) {z-index: 99;}
.demo .ul-tab>.tab-item:first-child {z-index: 10;}
.demo .ul-tab>.tab-item:nth-child(2) {z-index: 9;}
.demo .ul-tab>.tab-item:nth-child(3) {z-index: 8;}
.demo .ul-tab>.tab-item:nth-child(4) {z-index: 7;}
.demo .ul-tab>.tab-item:nth-child(5) {z-index: 6;}
.demo .ul-tab>.tab-item:nth-child(6) {z-index: 5;}
.demo .ul-tab>.tab-item:nth-child(7) {z-index: 4;}
.demo .ul-tab>.tab-item:nth-child(8) {z-index: 3;}
.demo .ul-tab>.tab-item:nth-child(9) {z-index: 2;}
.demo .ul-tab>.tab-item:nth-child(10) {z-index: 1;}
.demo .ul-tab>.tab-item::after {content: ''; width: 110%; height: 14px; background-color: #fff; display: block; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 5;}

.demo .ul-tab>.tab-item .tab {min-width: 165px; height: 53px; padding: 0 22px; display: flex; justify-content: center; align-items: center; font-weight: 500; font-size: 20px; line-height: 1.4; text-align: center; position: relative; z-index: 1; white-space: nowrap; filter: drop-shadow(3px -5px 10px rgba(0, 0, 0, 0.15));}

.demo .ul-tab>.tab-item .tab:not(.on) {background: linear-gradient(to right, rgba(132, 121, 255, 0) 0px, rgba(132, 121, 255, 0) 80px, rgba(132, 121, 255, 1) 80px, rgba(132, 121, 255, 1) calc(100% - 80px), rgba(132, 121, 255, 0) calc(100% - 80px), rgba(132, 121, 255, 0) 100%); color: #fff;}

.demo .ul-tab>.tab-item .tab.on, 
.demo .ul-tab>.tab-item a.tab[href='#'] {cursor: default; pointer-events: none;}

.demo .ul-tab>.tab-item .tab::before, 
.demo .ul-tab>.tab-item .tab::after {width: 83px; height: 53px; display: block; position: absolute; z-index: -1;}
.demo .ul-tab>.tab-item .tab::before {top: 0; left: 0;}
.demo .ul-tab>.tab-item .tab::after {top: 0; right: 0;}
/* .demo .ul-tab>.tab-item .tab:not(.on)::before {content: url("data:image/svg+xml,%3Csvg width='165' height='53' viewBox='0 0 165 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.6926 15.9357C9.61892 6.65428 17.7961 0 27.2753 0H137.725C147.204 0 155.381 6.65429 157.307 15.9357L165 53H0L7.6926 15.9357Z' fill='%238479FF'/%3E%3C/svg%3E%0A");} */
.demo .ul-tab>.tab-item .tab:not(.on)::before {content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='83' height='53' viewBox='0 0 83 53' fill='none'%3E%3Cpath d='M7.6926 15.9357C9.61892 6.65428 17.7961 0 27.2753 0H82.5V53H0L7.6926 15.9357Z' fill='%238479FF'/%3E%3C/svg%3E");}
.demo .ul-tab>.tab-item .tab:not(.on)::after {content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='83' height='53' viewBox='0 0 83 53' fill='none'%3E%3Cpath d='M0 0H55.2247C64.7039 0 72.881 6.65429 74.8074 15.9357L82.5 53H0V0Z' fill='%238479FF'/%3E%3C/svg%3E");}
.demo .ul-tab>.tab-item .tab:hover, 
.demo .ul-tab>.tab-item .tab.on {background: linear-gradient(to right, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 80px, rgba(255, 255, 255, 1) 80px, rgba(255, 255, 255, 1) calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px), rgba(255, 255, 255, 0) 100%); color: #705BF4; font-weight: 578;}
/* .demo .ul-tab>.tab-item .tab:hover::before, 
.demo .ul-tab>.tab-item .tab.on::before {content: url("data:image/svg+xml,%3Csvg width='165' height='53' viewBox='0 0 165 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.6926 15.9357C9.61892 6.65428 17.7961 0 27.2753 0H137.725C147.204 0 155.381 6.65429 157.307 15.9357L165 53H0L7.6926 15.9357Z' fill='%23FFFFFF'/%3E%3C/svg%3E%0A");} */
.demo .ul-tab>.tab-item .tab:hover::before, 
.demo .ul-tab>.tab-item .tab.on::before {content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='83' height='53' viewBox='0 0 83 53' fill='none'%3E%3Cpath d='M7.6926 15.9357C9.61892 6.65428 17.7961 0 27.2753 0H82.5V53H0L7.6926 15.9357Z' fill='white'/%3E%3C/svg%3E");}

.demo .ul-tab>.tab-item .tab:hover::after, 
.demo .ul-tab>.tab-item .tab.on::after {content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='83' height='53' viewBox='0 0 83 53' fill='none'%3E%3Cpath d='M0 0H55.2247C64.7039 0 72.881 6.65429 74.8074 15.9357L82.5 53H0V0Z' fill='white'/%3E%3C/svg%3E");}

.demo .ul-tab + .cate-area {margin-top: 64px;}
.cate-area .cate {font-size: 2.5rem; font-weight: 800; line-height: 1.2; color: #000; letter-spacing: 0.01em;}
.cate-area .cate + .page-info {margin-top: 8px;}
.cate-area .page-info {color: #797979; font-size: 1.5rem; font-weight: 700; line-height: 1.3;}

.test-wrap {width: 100%; margin-top: 2.5rem; background: #F4F2FF; border: 2px solid #CBC1FF; border-radius: 20px; overflow: hidden;}
.test-area {padding: 40px 30px;}

.test-wrap + .notice-info {margin-top: 30px;}
.notice-info {color: #797979; font-size: 1.25rem; font-weight: 450; line-height: 1.3;}
.notice-info {display: -webkit-flex; display: flex; justify-content: start; align-items: start; column-gap: 7px;}
.notice-info .icon-info {-webkit-flex-shrink: 0; flex-shrink: 0; width: 20px; height: 20px; display: block; margin: calc((1.25rem*1.3 - 20px)/2);}
/* //데모 공통 */


/* 옵션 영역 */
.option-area {min-height: calc(1.25rem*1.2 + 35px); display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; column-gap: var(--inner-padding-l); position: relative; margin-bottom: 2.875rem;}
.option-area::after {content: ''; width: 100%; height: 5px; border-radius: 999px; background: #fff; position: absolute; bottom: 0; left: 0;}

.ul-sample-tab {width: 100%; display: -webkit-flex; display: flex; align-items: stretch;}
.ul-sample-tab .sample-tab-item .btn-tab {width: 100%; height: 100%; padding: 15px 35px 20px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; font-weight: 700; font-size: 1.25rem; color: #969696; text-align: center;}
.ul-sample-tab .sample-tab-item:hover .btn-tab {color: #000;}
.ul-sample-tab .sample-tab-item.on {position: relative;}
.ul-sample-tab .sample-tab-item.on::after {content: ''; width: 100%; height: 5px; border-radius: 999px; background: var(--highlight); position: absolute; bottom: 0; left: 0; z-index: 1;}
.ul-sample-tab .sample-tab-item.on .btn-tab {color: #000;}

.ul-lang-tab, 
.ul-type-tab {display: -webkit-flex; display: flex; align-items: stretch; margin: 10px 0; margin-left: auto;}
.ul-lang-tab .lang-tab-item + .lang-tab-item .btn-lang-tab, 
.ul-type-tab .type-tab-item + .type-tab-item .btn-tab {border-left: 1px solid #e5e5e5;}
.ul-lang-tab .lang-tab-item .btn-lang-tab, 
.ul-type-tab .type-tab-item .btn-tab {width: 80px; position: relative; display: -webkit-flex; display: flex; justify-content: center; align-items: center; background-color: #fff; font-weight: 400; font-size: 13px; line-height: 32px; text-align: center; color: var(--primary); border-radius: 0;}
.ul-lang-tab .lang-tab-item:first-child .btn-tab, 
.ul-type-tab .type-tab-item:first-child .btn-tab {border-radius: 4px 0 0 4px;}
.ul-lang-tab .lang-tab-item:last-child .btn-tab, 
.ul-type-tab .type-tab-item:last-child .btn-tab {border-radius: 0 4px 4px 0;}

.ul-lang-tab .lang-tab-item.on .btn-tab, 
.ul-type-tab .type-tab-item.on .btn-tab {background-color: var(--highlight); font-weight: 700; color: #fff;}
.ul-lang-tab .lang-tab-item.on .btn-tab, 
.ul-lang-tab .lang-tab-item a.btn-tab[href='#'], 
.ul-type-tab .type-tab-item.on .btn-tab, 
.ul-type-tab .type-tab-item a.btn-tab[href='#'] {cursor: default; pointer-events: none;}

.ul-lang-tab .lang-tab-item .btn-lang-tab img {width: 18px; height: 12px; object-fit: cover; display: block; border-radius: 2px; box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1);}
/* //옵션 영역 */


/* 하단 플레이바 */
.player {border-top: 2px solid #CBC1FF; background: #fff; position: relative; width: 100%; height: 120px;}
.speaking-player {border-radius: 0 0 20px 20px;}
.speaking-player .play-area {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;}
.speaking-player .btn-record {width: 70px; height: 70px; border-radius: 50%; color: #fff; font-size: 34px; position: relative;}
.speaking-player .btn-record:where(.start, .end, .stop) {background-color: var(--highlight); display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
.speaking-player .btn-record.active {background-color: #fff;}

.speaking-player .btn-record::before {position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; transition: all 0.2s ease-in-out;}
/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */
.speaking-player .btn-record.start::before {
    border: 2px solid rgba(162, 121, 255, .5);
    -o-animation: 900ms ease-in infinite ring;
    -moz-animation: 900ms ease-in infinite ring;
    -webkit-animation: 900ms ease-in infinite ring;
    animation: 900ms ease-in infinite ring;
}
.speaking-player .btn-record.active::before, .speaking-player .btn-record.end::before {content: none;}

@keyframes ring {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

.speaking-player .btn-record img {width: 40%; object-fit: contain; display: block;}
.speaking-player .btn-record svg {width: 100%; height: 100%; display: block;}

.speaking-player .btn-record.start>* {display: none;}
.speaking-player .btn-record.start .icon-microphone {display: inline-block;}

.speaking-player .btn-record.active>* {display: none;}
.speaking-player .btn-record.active .voice-bar {display: inline-block;}

.speaking-player .btn-record.end>* {display: none;}
.speaking-player .btn-record.end .icon-retry {display: inline-block;}

.speaking-player .btn-record.stop>* {display: none;}
.speaking-player .btn-record.stop .icon-stop {display: inline-block;}

.voice-bar {margin: 0 auto; width: 48px; height: 100%; position: relative;}
.voice-bar span {
    position: absolute; width: 6px; height: 6px; border-radius: 50%; top: 50%; transform: translateY(-50%); transition: all .3s;
}
/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */
.voice-bar.updown span {
    -o-animation: 1.2s ease-in-out infinite alternate updown;
    -moz-animation: 1.2s ease-in-out infinite alternate updown;
    -webkit-animation: 1.2s ease-in-out infinite alternate updown;
    animation: 1.2s ease-in-out infinite alternate updown;
}
/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */
.voice-bar.sound span {
    -o-animation: 1.2s ease-in-out infinite alternate sound;
    -moz-animation: 1.2s ease-in-out infinite alternate sound;
    -webkit-animation: 1.2s ease-in-out infinite alternate sound;
    animation: 1.2s ease-in-out infinite alternate sound;
}

.voice-bar .bar1 {background: var(--highlight);}
.voice-bar .bar2 {background: var(--red);}
.voice-bar span:first-child {
    left: 0;
}
.voice-bar span:nth-child(2) {
    left: 14px;
    -o-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.voice-bar span:nth-child(3) {
    left: 28px;
    -o-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}
.voice-bar span:nth-child(4) {
    left: 42px;
    -o-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

@keyframes updown {
    0% {
        top: 50%;
    }

    50% {
        top: calc(50% + 4px);
    }

    100% {
        top: calc(50% - 4px);
    }
}

@keyframes sound {
    0% {
        height: 20px;
        border-radius: 999px;
    }

    20% {
        height: 40px;
        border-radius: 999px;
    }

    40% {
        height: 30px;
        border-radius: 999px;
    }

    60% {
        height: 40px;
        border-radius: 999px;
    }

    80% {
        height: 30px;
        border-radius: 999px;
    }

    100% {
        height: 20px;
        border-radius: 50%;
    }
}
/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */
.speaking-player .bubble {
    padding: 6px 20px; position: absolute; bottom: -62px; left: 50%; transform: translateX(-50%); border-radius: .4rem; font-weight: 500; font-size: 1rem; text-align: center;
    -o-animation: 900ms ease-in infinite bounce;
    -moz-animation: 900ms ease-in infinite bounce;
    -webkit-animation: 900ms ease-in infinite bounce;
    animation: 900ms ease-in infinite bounce;
}

.speaking-player .bubble::after {content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 0;}

.speaking-player .speech-bubble {min-width: 8.25rem; background: var(--highlight);  color: #Fff;}

@keyframes bounce {
    0% {
        transform: translate(-50%, 0);
    }

    50% {
        transform: translate(-50%, -5px);
    }

    100% {
        transform: translate(-50%, 0);
    }
}

.speaking-player .speech-bubble::before {content: '따라 말하세요.'; white-space: nowrap;}
.speaking-player .speech-bubble::after {
	border: 10px solid transparent;
	border-bottom-color: var(--highlight);
	border-top: 0;
	margin-left: -10px;
	margin-top: -10px;
}

.speaking-player .tab-bubble {min-width: 8.375rem; background: #F4F2FF; color: var(--highlight);}
.speaking-player .tab-bubble::before {content: 'Tap to speak'; white-space: nowrap;}
.speaking-player .tab-bubble::after {
	border: 10px solid transparent;
	border-bottom-color: #F4F2FF;
	border-top: 0;
	margin-left: -10px;
	margin-top: -10px;
}

.speaking-player .retry-bubble {min-width: 5rem; background: #F4F2FF; color: var(--highlight);}
.speaking-player .retry-bubble::before {content: 'Retry'; white-space: nowrap;}
.speaking-player .retry-bubble::after {
	border: 10px solid transparent;
	border-bottom-color: #F4F2FF;
	border-top: 0;
	margin-left: -10px;
	margin-top: -10px;
}
/* //하단 플레이바 */


.script {margin-bottom: 1rem;}
.script select, .select-topic {cursor: pointer;}
.script .english {width: 100%; font-weight: 700; font-size: 1.313rem; line-height: 1.2;}
.script .english option {font-size: 1.313rem; line-height: 1.2;}
.script .korean {line-height: 1.2;}
.highlight {color: #9976FE;}

.wave-wrap {position: relative; width: 100%; padding: 30px 50px; background: #fff; border-radius: 20px; border: 2px solid #cbc1ff;}

/* 도장 */
/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */
.score {
    -o-animation: 0.5s .1s forwards stamp;
    -moz-animation: 0.5s .1s forwards stamp;
    -webkit-animation: 0.5s .1s forwards stamp;
    animation: 0.5s .1s forwards stamp;
    opacity: 0;
    display: none;
}

@keyframes stamp {
    0% {
        opacity: 0;
    }

    10% {
        opacity: .50;
        transform-origin: 50% 50%;
        transform: rotate(-2deg) scale(5);
        transition: all .3s cubic-bezier(0.6, 0.04, 0.98, 0.335);
    }

    100% {
        opacity: 1;
        transform: rotate(-15deg) scale(1);
    }
}

.score-box {position: relative; background: rgba(255, 255, 255, .6); text-align: center; display: -webkit-flex; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 50%; border-width: 2px; border-style: solid; border-color: #FDD643;}
.score-box::before {content: ''; position: absolute; width: 96%; height: 96%; border-radius: 50%; border-width: 8px; border-style: solid; border-color: #FDD643;}
.score-box::after {content: ''; position: absolute; width: 84%; height: 84%; border-radius: 50%; border-width: 3px; border-style: dotted; border-color: #FDD643;}

.score-box .star-area {position: relative;}
.score-box .icon-area {position: relative; width: 50px; height: 50px; margin: 10px 0;}
.score-box .icon-area img {display: block; width: 100%; height: 100%; object-fit: cover;}
.score-box .score-num {position: relative; font-family: 'Gmarket Sans'; font-weight: 700; font-size: 1.25rem; color: var(--darkgray); line-height: 1.1;}

.star-gray-area {
    display: block; position: relative; height: 100%;
    background: url('../img/star.svg') no-repeat;
}
.star-color-area {
    display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%;
    background: url('../img/star.svg') no-repeat;
}
/* //도장 */

/* 타이머 시작 */
.timer {display: -webkit-flex; display: flex; justify-content: center; align-items: center; margin: 10px 0;}
.timer>* {margin-right: 6px;}
.timer>*:last-child {margin-right: 0;}
.timer .icon-timer {width: 16px; height: 18px;}
.timer .icon-timer img {width: 100%; display: block; object-fit: contain;}
.timer .timer-item {width: 16px; height: 16px; border: 1px solid #195BFF; border-radius: 50%; color: #195BFF; font-size: 12px; text-align: center; line-height: 16px; font-weight: 700;}
.timer .start {width: 25px; height: 16px; background: #195BFF; color: #fff; border-radius: 4px;}
/* //타이머 끝 */

.pronounce-area {display: none; justify-content: start; align-items: start; flex-wrap: wrap; gap: 20px;}
.pronounce-area .word-pronounce + .word-pronounce {border-left: 1px solid var(--border); padding-left: 20px;}
.word-pronounce .word {font-weight: 700; font-size: 1.125rem; color: var(--darkgray); margin-bottom: 6px; padding-left: 2px;}
.ul-phoneme {display: -webkit-flex; display: flex; justify-content: start; align-items: start; gap: 6px;}
.ul-phoneme .phoneme {text-align: center;}

.box-phoneme {min-width: 36px; height: 38px; padding: 0 4px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; background: #ffffff; border-width: 2px; border-style: solid; border-radius: 4px; font-weight: 700; font-size: 1.125rem;}
.box-phoneme {transition: transform .1s ease-in-out;}
button.box-phoneme:hover, 
[onclick].box-phoneme:hover {transform: scale(1.1);}
.box-phoneme.excellent {border-color: var(--green); color: var(--green);}
.box-phoneme.good {border-color: var(--orange); color: var(--orange);}
.box-phoneme.fail {border-color: var(--red); color: var(--red);}

.score-phoneme {font-size: 0.75rem;}

#loading {display: none; width: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999;}
.loading {width: 50px; margin: 0 auto;}
.loading img {width: 100%; height: 100%; object-fit: contain; display: block;}


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





/* Safari 14.1 이전 버전 */
@supports not (inset: 0){
    .pronounce-area>* {margin-bottom: 20px; margin-right: 20px;}
    .pronounce-area>*:nth-last-child(-n+3) {margin-bottom: 0;}
    .pronounce-area>*:last-child {margin-right: 0;}
    .ul-phoneme>* {margin-right: 6px;}
    .ul-phoneme>*:last-child {margin-right: 0;}
}

@media screen and (max-width:1280px){
    .demo .ul-tab>.tab-item .tab {font-size: 19px;}

    .cate-area .page-info {font-size: 16px;}

    .test-area {padding-top: 30px; padding-bottom: 30px;}

    .ul-sample-tab .sample-tab-item .btn-tab {padding: 15px var(--inner-padding-l) 20px;}
    
    .player {height: 80px;}
    .player .pagination {left: 40px;}
    .player .swiper-prev, .player .swiper-next {width: 40px; height: 40px;}
    .player .swiper-prev {right: 96px;}
    .player .swiper-next {right: 40px;}
    
    .speaking-player .btn-record {width: 56px; height: 56px;}
    
    .wave-wrap {padding: 30px var(--inner-padding-l);}
}

@media screen and (min-width:993px){
    .score-box {width: 180px; height: 180px;}

    .score-box .star-area {width: 81px; height: 24px;}
    .star-gray-area {
        -moz-background-size: 81px 52px;
        -o-background-size: 81px 52px;
        -webkit-background-size: 81px 52px;
        background-size: 81px 52px;
        background-position: 0 -28px;
    }
    .star-color-area {
        -moz-background-size: 81px 52px;
        -o-background-size: 81px 52px;
        -webkit-background-size: 81px 52px;
        background-size: 81px 52px;
        background-position: 0 0;
    }
}

@media screen and (max-width:992px){
    .score-box {width: 150px; height: 150px;}

    .score-box .star-area {width: 67.5px; height: 20px;}
    .star-gray-area {
        -moz-background-size: 67.5px 43.3333px;
        -o-background-size: 67.5px 43.3333px;
        -webkit-background-size: 67.5px 43.3333px;
        background-size: 67.5px 43.3333px;
        background-position: 0 -23.3333px;
    }
    .star-color-area {
        -moz-background-size: 67.5px 43.3333px;
        -o-background-size: 67.5px 43.3333px;
        -webkit-background-size: 67.5px 43.3333px;
        background-size: 67.5px 43.3333px;
        background-position: 0 0;
    }

    .score-box .icon-area {width: 40px; height: 40px; margin: 8px 0;}

    .box-phoneme {min-width: 34px; height: 36px;}
}

@media screen and (max-width:768px){
    .player .pagination {left: 30px;}
    .player .swiper-next {right: 30px;}
    .player .swiper-prev {right: 86px;}

    .speaking-player .pagination-area {right: 30px;}
}

@media screen and (max-width:660px){
    .option-area {flex-direction: column; align-items: start;}
    .option-area .ul-sample-tab:not(.tts .option-area .ul-sample-tab) {order: 2;}
    .option-area .ul-lang-tab:not(.tts .option-area .ul-lang-tab), 
    .option-area .ul-type-tab:not(.tts .option-area .ul-type-tab) {order: 1;}
    .ul-sample-tab, 
    .ul-lang-tab, 
    .ul-type-tab {width: 100%; flex-wrap: wrap;}
    .ul-sample-tab .sample-tab-item, 
    .ul-lang-tab .lang-tab-item, 
    .ul-type-tab .type-tab-item {flex: 1 1 20%;}
    .ul-sample-tab .sample-tab-item .btn-tab, 
    .ul-lang-tab .lang-tab-item .btn-lang-tab, 
    .ul-type-tab .type-tab-item .btn-tab {width: 100%;}
}

@media screen and (max-width:480px){
    .demo .ul-tab>.tab-item .tab {font-size: 17px;}

    .demo .dropdown-area {width: 220px;}

    .cate-area .page-info {font-size: 15px;}
    
    .test-area {padding-left: var(--inner-padding-l); padding-right: var(--inner-padding-r);}

    .player {height: 64px;}
    .player .swiper-prev, .player .swiper-next {width: 26px; height: 26px;}
    .swiper-button-next:after, .swiper-button-prev:after {font-size: 14px;}
    .player .pagination {left: 10px; font-size: 1.375rem;}
    .player .swiper-next {right: 10px;}
    .player .swiper-prev {right: 46px;}

    .play-area .play-pause {margin: 0 20px;}

    .speaking-player .btn-record {width: 40px; height: 40px; font-size: 24px;}

    .score-box {width: 120px; height: 120px;}
    .score-box::before {border-width: 6px;}
    .score-box .star-area {width: 54px; height: 16px;}

    .star-gray-area {
        -moz-background-size: 54px 34.6667px;
        -o-background-size: 54px 34.6667px;
        -webkit-background-size: 54px 34.6667px;
        background-size: 54px 34.6667px;
        background-position: 0 -18.6667px;
    }
    .star-color-area {
        -moz-background-size: 54px 34.6667px;
        -o-background-size: 54px 34.6667px;
        -webkit-background-size: 54px 34.6667px;
        background-size: 54px 34.6667px;
        background-position: 0 0;
    }

    .score-box .icon-area {width: 36px; height: 36px;}

    .pronounce-area {gap: 16px;}
    .pronounce-area::before {margin-top: 16px;}
    .pronounce-area .word-pronounce + .word-pronounce {padding-left: var(--inner-padding-r);}

    .ul-phoneme {flex-wrap: wrap;}

    .box-phoneme {width: 32px; height: 34px;}
    
    /* Safari 14.1 이전 버전 */
    @supports not (inset: 0){
        .pronounce-area>* {margin-bottom: 16px; margin-right: var(--inner-padding-r);}
        .pronounce-area>*:nth-last-child(-n+3) {margin-bottom: 0;}
        .pronounce-area>*:last-child {margin-right: 0;}
    }
}