@charset "UTF-8";


:root {
    /* Color styles */
    --primary: #555555;
    --darkgray: #333333;
    --dark: #222222;
    --gray: #666666;
    --light-gray: #e6e6e6;
    --blue50: #e7f0fc;
    --blue100: #d0e1f9;
    --blue200: #a2c4f4;
    --blue300: #73a6ee;
    --blue400: #4589e9;
    --highlight: #176ae3;
    --blue600: #1256b5;
    --blue700: #0d4088;
    --blue800: #092b5b;
    --blue900: #04152d;
    --blue: #0057ff;
    --green: #00cc99;
    --raspberry: #ff0f74;
    --border: #dfdfdf;
    --yellow-green: #a7ed4c;
    --carmine: #ff3333;
    --lavender-indigo: #b553ff;
    --blue-violet: #4c167c;
    
    --placeholder: #ACACAC;

    --dim: rgba(0, 0, 0, .65);

    --gray90: #1E2124; --gray80: #33363D; --gray60: #58616A; --gray40: #8A949E; --gray20: #CDD1D5; --gray5: #F4F5F6; /* footer */

    /* typography */
    --fs-title1: clamp(24px, 2.5vw, 48px);
    --fs-title2: clamp(22px, 2.29166666667vw, 44px);
    --fs-title3: clamp(18px, 1.5625vw, 30px);
    --fs-title4: clamp(14px, 1.04166666667vw, 20px);

    --fs-text1: clamp(17px, 1.45833333333vw, 28px);
    --fs-text2: clamp(15px, 1.25vw, 24px);
    --fs-text3: clamp(14px, 1.04166666667vw, 20px);
    --fs-text4: clamp(13px, 0.9375vw, 18px);
    --fs-text5: clamp(12.5px, 0.83333333333vw, 16px);

    --fs-score-phoneme: 12px;
    
    --fw-title-en: 742;
    --fw-text-en: 453;
    
    --fst-title-en: 84%;
    --fst-text-en: 83.4%;

    --ls-title-en: -0.045em;
    --ls-text-en: -0.05em;
    --ls-title-ko: -0.025em;
    --ls-text-ko: -0.03em;
    
    /* Effect styles */
    --bs-header: 0px 3px 10px rgba(4, 21, 45, 0.08);
    --bs-box: 0px 0px 10px rgba(4, 21, 45, 0.10);
    --bs-box2: 0px 5px 0px rgba(7, 64, 149, 0.18);
    --bs-box3: 0px 0px 5px rgba(7, 28, 60, 0.18);
    
    /* inner */
    --inner-width: 1350px;
    --inner-padding: 0px;
    --inner-padding-l: 0px;
    --inner-padding-r: 0px;

    /* viewport */
    --vh: 100dvh;

    /* border */
    --border-solid: 1px solid var(--border);
    --border-width10: 10px;

    --header-height: 98px;
    --header-height-minus: -98px;
}

@media (min-width:1281px) and (max-width:1920px){
    :root {
        --header-height: 5.10416666667vw;
        --header-height-minus: -5.10416666667vw;
    }
}

@media (min-width:851px) and (max-width:1280px){
    :root {
        --header-height: clamp(60px, 5.9375vw, 76px);
        --header-height-minus: clamp(-76px, -5.9375vw, -60px);
    }
}

@media (min-width:481px) and (max-width:850px){
    :root {
        --header-height: 82px;
        --header-height-minus: -82px;
    }
}

@media (max-width:1440px){
    :root {
        --inner-padding: 0px 45px;
        --inner-padding-l: 45px;
        --inner-padding-r: 45px;
    }
}

@media (max-width:1280px){
    :root {
        --inner-padding: 0px 38px;
        --inner-padding-l: 38px;
        --inner-padding-r: 38px;
    }
}

@media (max-width:1024px){
    :root {
        --inner-padding: 0px 36px;
        --inner-padding-l: 36px;
        --inner-padding-r: 36px;
    }
}

html {scroll-behavior: smooth;}

.sound-only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

.wrap {position: relative; width: 100%; min-height: var(--vh, 100dvh); overflow: hidden; display: -webkit-flex; display: flex; flex-direction: column;}

.inner {width: 100%; max-width: var(--inner-width); padding: var(--inner-padding); margin: 0 auto;}

.required {
    background-image: 
    url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='5.414' height='5.564' viewBox='0 0 5.414 5.564'%3E%3Cpath d='M3.021-4.334H4.2L4.088-6.289l1.654, 1.08.574-1.025-1.75-.875L6.316-8, 5.742-9.023, 4.088-7.943, 4.2-9.9H3.021l.109, 1.955L1.49-9.023.9-8l1.764.889L.9-6.234, 1.49-5.209l1.641-1.08Z' transform='translate(-0.902 9.898)' fill='%23eb2c57'/%3E%3C/svg%3E"), 
    linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)) !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 10px) 10px, center !important;
}

input, input[type="text"], input[type="password"], input[type="search"], input[type='date'], input[type="email"], input[type="tel"], select, textarea {border-radius: 6px;}

input, select {height: 44px; border: 1px solid var(--border); background-color: #fff;}
input, select, textarea {padding: 0px 20px; color: var(--primary); line-height: 44px;}
input[type="file"] {padding: 0;}
input[type="number"] {padding: 0 0 0 20px;}

textarea {min-height: 200px; border: 1px solid var(--border); resize: none;}
textarea:where(:hover, :focus) {border-color: var(--highlight);}

input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="tel"], textarea {caret-color: var(--highlight);}

select {
    -moz-appearance: none; -webkit-appearance: none; appearance: none;
    padding-right: 58px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.125rem; color: var(--darkgray); 
    background-repeat: no-repeat; background-size: auto; background-position: calc(100% - 20px) center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10' fill='none'%3E%3Cpath d='M7.91377 9.58157C8.47168 10.1395 9.37773 10.1395 9.93564 9.58157L17.0769 2.4403C17.6348 1.88238 17.6348 0.976341 17.0769 0.418419C16.519 -0.139473 15.6129 -0.139473 15.055 0.418419L8.92247 6.55099L2.78991 0.422874C2.232 -0.135017 1.32595 -0.135017 0.768044 0.422874C0.210131 0.980797 0.210131 1.88686 0.768044 2.44476L7.90931 9.58602L7.91377 9.58157Z' fill='%23222222'/%3E%3C/svg%3E");
}
select.required {
    background-position: calc(100% - 10px) 10px, calc(100% - 20px) center; background-size: auto;
    background-image: 
    url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='5.414' height='5.564' viewBox='0 0 5.414 5.564'%3E%3Cpath d='M3.021-4.334H4.2L4.088-6.289l1.654, 1.08.574-1.025-1.75-.875L6.316-8, 5.742-9.023, 4.088-7.943, 4.2-9.9H3.021l.109, 1.955L1.49-9.023.9-8l1.764.889L.9-6.234, 1.49-5.209l1.641-1.08Z' transform='translate(-0.902 9.898)' fill='%23eb2c57'/%3E%3C/svg%3E"), 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10' fill='none'%3E%3Cpath d='M7.91377 9.58157C8.47168 10.1395 9.37773 10.1395 9.93564 9.58157L17.0769 2.4403C17.6348 1.88238 17.6348 0.976341 17.0769 0.418419C16.519 -0.139473 15.6129 -0.139473 15.055 0.418419L8.92247 6.55099L2.78991 0.422874C2.232 -0.135017 1.32595 -0.135017 0.768044 0.422874C0.210131 0.980797 0.210131 1.88686 0.768044 2.44476L7.90931 9.58602L7.91377 9.58157Z' fill='%23222222'/%3E%3C/svg%3E");
}
select::-ms-expand {display: none;} /* for IE10, 11 */
select.empty, select:disabled {font-size: 1.125rem; color: var(--placeholder);}
select option {font-size: 0.8888888888889em; color: var(--primary);}
select option:disabled, 
select option[value=""]:disabled {font-size: 0.8888888888889em; color: var(--placeholder); display: none;}
select option:where(:hover, :focus, :active, :checked) {
    background: linear-gradient(var(--blue50), var(--blue50));
    background-color: var(--blue50);
    color: var(--primary);
}

:is(
    input[type="text"], 
    input[type="password"], 
    input[type="email"], 
    input[type="tel"]
):where(:hover, :focus) {border-color: var(--highlight);}

/* on↔off 스위치 */
/* input[type="checkbox"] {display: none;}
input[type="checkbox"] + label {width: 45px; height: 24px; border-radius: 999px; background-color: var(--gray); cursor: pointer; position: relative; transition: all 0.2s ease-in; display: block;}
input[type="checkbox"] + label::before {content: ''; width: 20px; height: 20px; border-radius: 50%; background-color: #fff; position: absolute; top: 2px; left: 2px; transition: all 0.2s ease-in;}
input[type="checkbox"]:checked + label {background-color: var(--highlight);}
input[type="checkbox"]:checked + label::before {left: calc(100% - 22px);} */
/* //on↔off 스위치 */

input[type="checkbox"] {display: none;}
input[type="checkbox"] + label {padding-left: 28px; cursor: pointer; color: var(--darkgray); font-size: 1.125rem; font-weight: 500; line-height: 140%; letter-spacing: var(--ls-text-ko); position: relative;}
input[type="checkbox"] + label::before {content: '\f058'; color: #8B8B8B; font-family: "Font Awesome 6 Free"; font-size: 1.25rem; font-weight: 400; line-height: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);}
input[type="checkbox"]:checked + label::before {color: var(--highlight); font-weight: 900;}

.input-radio {position: relative;}
input[type="radio"] {display: none;}
input[type="radio"]:not(.btn-profile) + label {display: inline-block; cursor: pointer; margin-left: 28px; color: var(--darkgray); font-size: 1.125rem; font-weight: 500; line-height: 140%; letter-spacing: var(--ls-text-ko);}
input[type="radio"]:not(.btn-profile) + label::before {position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: inline-block; content: ''; width: 20px; height: 20px; border: 2px solid var(--darkgray); border-radius: 50%;}
input[type="radio"]:not(.btn-profile) + label::after {position: absolute; top: 50%; left: 5px; transform: translateY(-50%) scale(0); display: inline-block; content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--highlight);}

input[type="radio"]:not(.btn-profile) + label::before {transition: border-color 0.2s cubic-bezier(0.2, 0, 0, 1);}
input[type="radio"]:not(.btn-profile) + label::after {transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);}
input[type="radio"]:not(.btn-profile):checked + label::before {border-color: var(--highlight);}
input[type="radio"]:not(.btn-profile):checked + label::after {transform: translateY(-50%) scale(1);}

::placeholder {font-size: 18px; color: var(--placeholder);}

progress[value] {display: block; width: 100%; height: 6px;}
progress[value]::-webkit-progress-bar {background-color: #A8A8A8; border-radius: 0;}
progress[value]::-webkit-progress-value {background-color: #EB2C57; border-radius: 0;}
progress[value]::-moz-progress-bar {background-color: #EB2C57; border-radius: 0;}
progress + label {width: 100%; padding: 0 6px; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center;}

.flex-item {-webkit-flex-shrink: 0; flex-shrink: 0;}

.scroll::-webkit-scrollbar {width: 15px; height: 15px; background-color: transparent;}
.scroll::-webkit-scrollbar-thumb {width: 15px; background-color: rgba(23, 106, 227, 0.5); border: 5px solid transparent; border-radius: 999px; background-clip: padding-box;} /* 실제 스크롤바 막대 */
.scroll::-webkit-scrollbar-track {width: 15px; border-radius: 999px; background-color: transparent;}


/* input range 커스텀 */
input[type="range"] {display: block;}
/* pin 시작 */
/* Chrome */
input[type="range"]::-webkit-slider-thumb {cursor: pointer; width: 14px; height: 14px; border-radius: 50%; background: #2FECEC; border: none; margin-top: -5px;}

/* Firefox */
input[type="range"]::-moz-range-thumb {cursor: pointer; width: 14px; height: 14px; border-radius: 50%; background: #2FECEC; border: none; margin-top: -5px;}

/* IE */
input[type="range"]::-ms-thumb {cursor: pointer; width: 14px; height: 14px; border-radius: 50%; background: #2FECEC; border: none; margin-top: -5px;}
/* //pin 끝 */

/* bar 시작 */
/* Chrome */
input[type="range"]::-webkit-slider-runnable-track {width: 111px; height: 4px; cursor: pointer; background: rgba(255, 255, 255, .4); border-radius: 999px;}
input[type="range"]:focus::-webkit-slider-runnable-track {background: rgba(255, 255, 255, .4); border-radius: 999px;}

/* Firefox */
input[type="range"]::-moz-range-track {width: 111px; height: 4px; cursor: pointer; background: rgba(255, 255, 255, .4); border-radius: 999px;}

/* IE */
input[type="range"]::-ms-track {width: 111px; height: 4px; cursor: pointer; background: transparent; border-color: transparent; color: transparent; border-radius: 999px;}
input[type="range"]::-ms-fill-lower {background: rgba(255, 255, 255, .4); border: none; border-radius: 999px;}
input[type="range"]:focus::-ms-fill-lower {background: rgba(255, 255, 255, .4); border-radius: 999px;}
input[type="range"]::-ms-fill-upper {background: rgba(255, 255, 255, .4); border: none; border-radius: 999px;}
input[type="range"]:focus::-ms-fill-upper {background: rgba(255, 255, 255, .4); border-radius: 999px;}
/* //bar 끝 */
/* //input range 커스텀 */


.swiper-prev, 
.swiper-next, 
.btn-prev-page, 
.btn-next-page {width: 54px; height: 72px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; background: #FFF; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;}
.swiper-prev, 
.btn-prev-page {border-radius: 0px 10px 10px 0px; left: 0;}
.swiper-next, 
.btn-next-page {border-radius: 10px 0px 0px 10px; right: 0;}
:where(
    .swiper-prev, 
    .swiper-next, 
    .btn-prev-page, 
    .btn-next-page
)::after {font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 60px; color: var(--highlight);}
:where(
    .swiper-prev, 
    .btn-prev-page
)::after {content: "\f053";}
:where(
    .swiper-next, 
    .btn-next-page
)::after {content: "\f054";}
.swiper-button-disabled:where(
    .swiper-prev, 
    .swiper-next, 
    .btn-prev-page, 
    .btn-next-page
), 
.disabled:where(
    .btn-prev-page, 
    .btn-next-page
) {opacity: 0.5; cursor: auto; pointer-events: none;}
/* .swiper-button-disabled:where(
    .swiper-prev, 
    .swiper-next, 
    .btn-prev-page, 
    .btn-next-page
)::after,  
.disabled:where(
    .btn-prev-page, 
    .btn-next-page
)::after {pointer-events: auto;} */


/* 말줄임 시작 */
.ellipsis {width: 100%; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
/* IE10+ */
@media (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .ellipsis {width: calc(100% - 1em); position: relative; overflow: hidden; line-height: 1.5; max-height: 3rem; margin-right: -1rem; padding-right: 1rem;}
    .ellipsis::before {content: '…'; position: absolute; right: 0; bottom: 0;}
    .ellipsis::after {content: ''; position: absolute; right: 0; width: 1rem; height: 1rem; margin-top: 0.2rem; background: inherit;}
    .ellipsis .tit {word-break: break-all;}
}
/* //말줄임 끝 */

.input-file:not(.ul-profile .input-file) {display: flex; justify-content: start; align-items: center;}
.input-file:not(.ul-profile .input-file) .file-name {border-radius: 4px 0 0 4px;}
.input-file:not(.ul-profile .input-file) input[type="file"] {position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0;}
.input-file:not(.ul-profile .input-file) input[type="file"] + label {border: 1px solid var(--dark); background: var(--dark); color: #fff; padding: 11px 16px; border-radius: 0 4px 4px 0; cursor: pointer;}


.modal-open, 
body:has(.backdrop.open) {overflow: hidden;}
.backdrop {
	-o-transition: background-color .1s linear;
	-moz-transition: background-color .1s linear;
	-webkit-transition: background-color .1s linear;
	transition: background-color .1s linear;
	background-color: transparent; position: fixed; inset: 0; z-index: 555; visibility: hidden; -webkit-user-select: none; user-select: none;
}
.backdrop.open {background-color: var(--dim); visibility: visible; -webkit-user-select: auto; user-select: auto;}


#loading {width: 100%; height: 100%; position: absolute; inset: 0; z-index: 555; display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
#loading::before {content: ''; position: absolute; inset: 0; background: var(--dim); z-index: -1; border-radius: 15px;}

#loading_ani {width: clamp(100px, 77vw, 300px); height: auto; aspect-ratio: 1/1; margin: -50px 0;}

#loading .box {max-width: fit-content; padding: 20px 30px; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; gap: 10px; border-radius: 10px; background: #fff; color: var(--primary);}

.loader {
    width : 60px; height: 60px; border: 5px solid var(--line04); border-bottom-color: var(--highlight); border-radius: 50%; display: inline-block;
    -o-animation: 1s linear infinite rotation; 
    -moz-animation: 1s linear infinite rotation; 
    -webkit-animation: 1s linear infinite rotation; 
    animation: 1s linear infinite rotation;
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


.en-title {font-family: "Open Sans", sans-serif; font-weight: var(--fw-title-en); line-height: 120%; letter-spacing: var(--ls-title-en); font-stretch: var(--fst-title-en);}
.en-title1 {font-size: var(--fs-title1);}
.en-title2 {font-size: var(--fs-title2);}
.en-title3 {font-size: var(--fs-title3);}
.en-title4 {font-size: var(--fs-title4);}

.en-text {font-family: "Noto Sans", sans-serif; font-weight: var(--fw-text-en); line-height: 140%; letter-spacing: var(--ls-text-en); font-stretch: var(--fst-text-en);}
.en-text1 {font-size: var(--fs-text1);}
.en-text2 {font-size: var(--fs-text2);}
.en-text3 {font-size: var(--fs-text3);}
.en-text4 {font-size: var(--fs-text4);}
.en-text5 {font-size: var(--fs-text5);}

.ko-title {font-family: "Danjunghae", sans-serif; font-weight: 400; line-height: 120%; letter-spacing: var(--ls-title-ko);}
.ko-title1 {font-size: var(--fs-title1);}
.ko-title2 {font-size: var(--fs-title2);}
.ko-title3 {font-size: var(--fs-title3);}
.ko-title4 {font-size: var(--fs-title4);}

.ko-text {font-family: "Maru Buri", serif; font-weight: 600; line-height: 140%; letter-spacing: var(--ls-text-ko);}
.ko-text1 {font-size: var(--fs-text1);}
.ko-text2 {font-size: var(--fs-text2);}
.ko-text3 {font-size: var(--fs-text3);}
.ko-text4 {font-size: var(--fs-text4);}
.ko-text5 {font-size: var(--fs-text5);}

/* 공통 버튼 (line / gray / blue) */
:is(.btn-line, .btn-gray, .btn-blue) {display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border: none; border-radius: 8px; font-family: "Maru Buri", serif; font-weight: 600; font-size: 1rem; line-height: 140%; letter-spacing: var(--ls-text-ko); white-space: nowrap; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease;}

.btn-line {background: #fff; border: 1px solid var(--border); color: var(--darkgray);}
.btn-line:hover {background: var(--blue50); border-color: var(--border);}
.btn-line:active {background: var(--highlight); border-color: var(--highlight); color: #fff;}

.btn-gray {background: var(--gray); color: #fff;}
.btn-gray:hover {background: #555;}
.btn-gray:active {background: var(--darkgray);}

.btn-blue {background: var(--highlight); color: #fff;}
.btn-blue:hover {background: var(--blue600);}
.btn-blue:active {background: var(--blue700);}
/* //공통 버튼 */

/* sweetalert2 */
.swal2-title {font-family: "Danjunghae", sans-serif; line-height: 1.3;}

/* 학습/테스트 확인 팝업 공통 (goToHome, closeTest) — Figma modal 구조 그대로 */
.confirm-popup.swal2-popup {padding: 0; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 3px 10px 0 rgba(4, 21, 45, 0.08);}
.confirm-popup .confirm-html {margin: 0; padding: 0; width: 100%;}

.confirm-modal {display: flex; flex-direction: column; align-items: center; padding: 32px 40px;}

.confirm-modal .close-button {display: flex; justify-content: flex-end; width: 100%;}
.confirm-modal .close-button .icon {display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; background: none; cursor: pointer;}

.confirm-modal .contents-scroll {width: 100%; max-height: 480px; overflow: auto;}
.confirm-modal .content {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 20px; width: 100%;}
.confirm-modal .content > .icon {width: 64px; height: 64px;}
.confirm-modal .title {margin: 0; font-family: "Danjunghae", sans-serif; font-size: 30px; line-height: 1.2; letter-spacing: -0.75px; color: #333; text-align: center;}
.confirm-modal .contents .text {margin: 0; color: #333; text-align: center;}

.confirm-modal .btn-group {display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding-top: 20px;}
/*범례_ 추가*/
.legend-list{
    display: flex;gap: 40px;border-radius: 12px;
border: 1px solid #DFDFDF;
background: #FFF;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);padding: 20px;width: fit-content;margin: 72px auto 80px;flex-wrap: wrap;}
.legend-list li{display: flex;align-items: center;gap: 8px;

}
.legend-list li i{position: relative;display: flex;justify-content: center;align-items: center;width: 40px;aspect-ratio: 1/1;}
.legend-list li i::before{content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); width: 15px;aspect-ratio: 1/1;display: block;border-radius: 50%;}
.legend-list li:nth-child(1) i::before {background: #A7ED4C;}
.legend-list li:nth-child(2) i::before {background: #72B916;}
.legend-list li:nth-child(3) i::before {background: #FF3333;}
.legend-list li:nth-child(4) i::before {background: #B50000;}
.legend-list li:nth-child(5) i::before {background: #4C167C;}
.legend-list li:nth-child(6) i::before {background: linear-gradient(135deg, #FBF6C9 13.01%, #FBD75F 28.75%, #E8B22A 52.36%, #E8B22C 61.81%, #E8B534 67.32%, #E8B943 72.04%, #E8C05A 76.76%, #E9C460 79.91%, #EDCF71 83.06%, #F4E28E 87.78%, #FBF3A8 90.93%);}
/*범례_ 추가*/


@media (max-width:850px){
    .confirm-modal {padding: 28px 24px;}
    .confirm-modal .title {font-size: 24px;}
    .legend-list{gap: 12px;padding: 8px;margin: 40px auto;display: grid;grid-template-columns: auto auto auto;justify-content: center;}
    .legend-list li{gap: 0;}
}

@media (max-width:480px){
    .confirm-modal {padding: 24px 16px;}
    .confirm-modal .title {font-size: 20px;}
    .confirm-modal .content {padding: 16px;}
    .confirm-modal .btn-group {flex-wrap: wrap;}
    .confirm-modal .btn-group button {flex: 1 1 auto;}
    .legend-list{grid-template-columns: auto auto;gap: 4px;}
}
/* //sweetalert2 */

.icon-excellent.large {width: 154px; height: 183px;}
.icon-good.large {width: 161px; height: 202px;}
.icon-needs-work.large {width: 192px; height: 225px;}

.icon-excellent.medium {width: 107px; height: 128px;}
.icon-good.medium {width: 112px; height: 141px;}
.icon-needs-work.medium {width: 134px; height: 157px;}

/* .icon-excellent.small {width: 86px; height: 102px;}
.icon-good.small {width: 90px; height: 113px;}
.icon-needs-work.small {width: 107px; height: 125px;} */

.icon-excellent.small {width: 5.375rem; height: 6.375rem;}
.icon-good.small {width: 5.625rem; height: 7.063rem;}
.icon-needs-work.small {width: 6.688rem; height: 7.813rem;}





@media print {
    .icon-excellent.small {transform: scale(0.8);}
    .icon-good.small {transform: scale(0.8);}
    .icon-needs-work.small {transform: scale(0.8);}
}

@media (max-width:1280px){
    input, select {height: 40px;}
    input, select, textarea {line-height: 40px;}
}

@media (max-width:850px){
    .swiper-prev, 
    .swiper-next, 
    .btn-prev-page, 
    .btn-next-page {width: 40.5px; height: 54px;}
    .swiper-prev, 
    .btn-prev-page {border-radius: 0px 7.5px 7.5px 0px;}
    .swiper-next, 
    .btn-next-page {border-radius: 7.5px 0px 0px 7.5px;}
    :where(
        .swiper-prev, 
        .swiper-next, 
        .btn-prev-page, 
        .btn-next-page
    )::after {font-size: 45px;}
}

@media (max-width:768px){
    :root {
        --inner-padding: 0px 32px;
        --inner-padding-l: 32px;
        --inner-padding-r: 32px;
    }
}

@media (max-width:480px){
    :root {
        --inner-padding: 0px 20px;
        --inner-padding-l: 20px;
        --inner-padding-r: 20px;
        
        --header-height: 70px;
        --header-height-minus: -70px;
    }
}



/* border, outline width */
@media (max-width:1728px){
    :root {
        --border-width10: 9px;
    }
}

@media (max-width:1536px){
    :root {
        --border-width10: 8px;
    }
}

@media (max-width:1344px){
    :root {
        --border-width10: 7px;
    }
}

@media (max-width:1152px){
    :root {
        --border-width10: 6px;
    }
}

@media (max-width:960px){
    :root {
        --border-width10: 5px;
    }
}

@media (max-width:768px){
    :root {
        --border-width10: 4px;
    }
}
/* //border, outline width */