/* 버튼 */
[class*=mock__btn--]{display: flex; justify-content: center; align-items: center; gap: 3px; color: #121212; font-size: 15px; font-weight: 500; text-decoration: none !important; padding: 13px 12px; border-radius: 8px; text-align: center; font-family: 'Pretendard', sans-serif; user-select: none;}
[class*=mock__btn--] > span{display: inline-block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
[class*=mock__btn--] > i{display: inline-block; width: 10px; height: 20px;}
[class*=mock__btn--] > i::after{background: #7B8A9D;}
[class*=mock__btn--][class*=--basic]{background: #121212; color: #fff; font-weight: 700;}
[class*=mock__btn--][class*=--basic].disabled{background: #C2CAD6; cursor: default;}
[class*=mock__btn--][class*=--outline]{background: #fff; border: 1px solid #EDEDF3;}
[class*=mock__btn--][class*=--outline].active{border-color: #025AF6; color: #025AF6;}
[class*=mock__btn--][class*=--outline].disbled{background: #FAFAFC; color: #C2CAD6; border-color: #EDEDF3; cursor: default;}
[class*=mock__btn--][class*=--outline].disbled i::after{background: #E0E3EB;}

[class*=mock__input]{border: 1px solid #EDEDF3; border-radius: 4px; padding: 8px 12px; height: 36px;}

:is(.mock__modal, .mock__wrap) input[type=checkbox]{width: 20px; height: 20px; background: url('/un_static/img/mock/checkbox_off.png') no-repeat; background-size: 100%;cursor: pointer;}
:is(.mock__modal, .mock__wrap) input[type=checkbox]:checked{background-image: url('/un_static/img/mock/checkbox_on.png');background-size: 100%;}
:is(.mock__modal, .mock__wrap) input[type=checkbox]:disabled{background-image: url('/un_static/img/mock/checkbox_disabled.png');background-size: 100%;cursor: default;}

:is(.mock__modal, .mock__wrap) input[type=radio] {width: 24px; height: 24px; background: url('/un_static/img/mock/ico_radio_off.png') no-repeat; background-size: 100%; cursor: pointer;}
:is(.mock__modal, .mock__wrap) input[type=radio]:checked {background-image: url('/un_static/img/mock/ico_radio_on.png'); background-size: 100%;}

/* 레이아웃 */
.px-4{padding-left: 4px !important; padding-right: 4px !important;}
.py-4{padding-top: 4px !important; padding-bottom: 4px !important;}
.px-5{padding-left: 5px !important; padding-right: 5px !important;}
.py-5{padding-top: 5px !important; padding-bottom: 5px !important;}
.px-6{padding-left: 6px !important; padding-right: 6px !important;}
.py-6{padding-top: 6px !important; padding-bottom: 6px !important;}
.px-7{padding-left: 7px !important; padding-right: 7px !important;}
.py-7{padding-top: 7px !important; padding-bottom: 7px !important;}
.px-8{padding-left: 8px !important; padding-right: 8px !important;}
.py-8{padding-top: 8px !important; padding-bottom: 8px !important;}
.px-10{padding-left: 10px !important; padding-right: 10px !important;}
.py-10{padding-top: 10px !important; padding-bottom: 10px !important;}
.px-12{padding-left: 12px !important; padding-right: 12px !important;}
.py-12{padding-top: 12px !important; padding-bottom: 12px !important;}
.px-14{padding-left: 14px !important; padding-right: 14px !important;}
.py-14{padding-top: 14px !important; padding-bottom: 14px !important;}
.px-16{padding-left: 16px !important; padding-right: 16px !important;}
.py-16{padding-top: 16px !important; padding-bottom: 16px !important;}
.px-20{padding-left: 20px !important; padding-right: 20px !important;}
.py-20{padding-top: 20px !important; padding-bottom: 20px !important;}
.px-24{padding-left: 24px !important; padding-right: 24px !important;}
.py-24{padding-top: 24px !important; padding-bottom: 24px !important;}
.px-28{padding-left: 28px !important; padding-right: 28px !important;}
.py-28{padding-top: 28px !important; padding-bottom: 28px !important;}
.px-30{padding-left: 30px !important; padding-right: 30px !important;}
.py-30{padding-top: 30px !important; padding-bottom: 30px !important;}
.px-32{padding-left: 32px !important; padding-right: 32px !important;}
.py-32{padding-top: 32px !important; padding-bottom: 32px !important;}
.px-40{padding-left: 40px !important; padding-right: 40px !important;}
.py-40{padding-top: 40px !important; padding-bottom: 40px !important;}

.gap-2{gap: 2px !important;}
.gap-3{gap: 3px !important;}
.gap-4{gap: 4px !important;}
.gap-6{gap: 6px !important;}
.gap-7{gap: 7px !important;}
.gap-8{gap: 8px !important;}
.gap-10{gap: 10px !important;}
.gap-12{gap: 12px !important;}
.gap-14{gap: 14px !important;}
.gap-16{gap: 16px !important;}
.gap-20{gap: 20px !important;}
.gap-24{gap: 24px !important;}
.gap-30{gap: 30px !important;}
.gap-36{gap: 36px !important;}
.gap-40{gap: 40px !important;}
.gap-48{gap: 48px !important;}
.gap-50{gap: 50px !important;}
.gap-60{gap: 60px !important;}
.gap-80{gap: 80px !important;}

.radius-4{border-radius: 4px !important;}
.radius-8{border-radius: 8px !important;}
.radius-12{border-radius: 12px !important;}

[class*=mock__layout]{display: flex; gap: 20px; width: 100%;}
[class*=mock__layout] .shrink-0{flex-shrink: 0;}
[class*=mock__layout] .flex-1{flex: 1;}
[class*=mock__layout][class*=--column]{flex-direction: column;}

[class*=mock__box]{border-radius: 12px; overflow: hidden;}
[class*=mock__box][class*=--border] { border: 1px solid #EDEDF3}
[class*=mock__box][class*=--bg] {background: #F6F6F9;}
[class*=mock__box][class*=--shadow]{box-shadow: 0px 6px 12px 0px rgba(97, 1, 217, 0.12);}

[class*=mock__box][class*=--empty]{display: flex; justify-content: center; align-items: center; height: 360px; text-align: center;}
[class*=mock__box][class*=--empty] [class*=prem__layout][class*=--column]{width: auto; align-items: center;}
[class*=mock__box][class*=--empty] p{background: url('/un_static/img/common/premium/empty_label.png') no-repeat center top / 80px auto; padding-top: 91px;}

.mock__status{display: flex; flex-direction: column; gap: 12px; background: #F6F6F9; padding: 16px; border-radius: 12px; font-family: 'Pretendard', sans-serif;}
.mock__status > li{display: flex; gap: 8px; font-size: 15px; line-height: 21px;}
.mock__status > li > span{min-width: 30px; flex-shrink: 0; font-weight: 700; color: #7E8B9A;}
.mock__status > li > p{flex: 1; font-weight: 500;}
.mock__status.lg{padding: 20px;}
.mock__status.lg > li{font-size: 15px;}
.mock__status.lg > li > span{font-weight: 700;}

/* 모의고사 결과 모달 */
table.mock__table{width: 100%; table-layout: fixed; text-align: center; border: 1px solid #EDEDF3; border-radius: 8px; overflow: hidden; border-collapse: separate;}
table.mock__table thead th{background: #F6F6F9;}
table.mock__table thead tr + tr > th{font-size: 14px;}
table.mock__table thead tr:first-child > *{border-top: 0;}
table.mock__table tbody th{background: #F6F6F9;}
table.mock__table tbody td input.number{width: 40px; height: 32px; text-align: center; padding: 0;}
table.mock__table tbody:has(.txt) :is(th, td){height: auto; padding: 12px 8px; min-height: 44px;}
table.mock__table :is(th, td){font-size: 14px; color: #121212; border-left: 1px solid #EDEDF3; border-top: 1px solid #EDEDF3; height: 44px; font-family: 'Pretendard', sans-serif; line-height: 21px;}
table.mock__table:not(:has(thead)) tbody tr:first-child :is(th, td){border-top: 0;}
table.mock__table :is(thead, tbody) tr > *:first-child{border-left: 0;}
table.mock__table tr:has(th[rowspan]) + tr *:first-child{border-left: 1px solid #EDEDF3;}
table.mock__table tr td span.txt{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-word;}
table.mock__table tr td a{color: #025AF6; text-decoration: underline; text-underline-position: under;}
       
  /* TAB  */
[class*=mock__buttons]{display: inline-flex; width: 100%;}
[class*=mock__buttons] li{cursor: pointer; user-select: none;}
[class*=mock__buttons]:not(:is([class*=--round], [class*=--text], [class*=--line], [class*=--thumb])) > li{flex: 1;}
[class*=mock__buttons--basic] > li{background: #fff; color: var(--text-primary, #121212); border: 1px solid var(--gray-30, #E0E3EB); border-left: 0; display:flex; justify-content: center; align-items: center;}
[class*=mock__buttons--basic] > li:first-child{border-radius: 8px 0 0 8px; border-left: 1px solid var(--gray-30, #E0E3EB);}
[class*=mock__buttons--basic] > li:last-child{border-radius: 0 8px 8px 0;}
[class*=mock__buttons--basic] > li.active{background: var(--prem-background, #F6F0FF); color: var(--prem-primary, #6101D9); border: 1px solid var(--prem-primary, #6101D9);}
[class*=mock__buttons--basic] > li:has(+ .active){border-right: 0;}
[class*=mock__buttons--basic] > li.active + li{border-left: 0;}
[class*=mock__buttons--rounded] {width: auto; gap: 8px;}
[class*=mock__buttons--rounded] li{background: #fff; color: #121212; height: 34px; line-height: 32px; border-radius: 30px; font-size: 14px; font-weight: 500; border: 1px solid var(--gray-30, #E0E3EB); padding: 0 12px;}
[class*=mock__buttons--rounded] li.active{background:  var(--gray-100); color: #fff; font-weight: 700; border-color: var(--gray-100)}
[class*=mock__buttons--rounded][class*=--white] > li {color:var(--white, #fff); border-color: var(--white, #fff); opacity: .7; background:none; font-weight: 400;}
[class*=mock__buttons--rounded][class*=--white] > li.active {background: var(--white, #fff); color: var(--prem-primary, #6101D9); opacity: 1; font-weight: 700;}
[class*=mock__buttons--rounded][class*=--large]{height: auto !important;}
[class*=mock__buttons--rounded][class*=--large] li{height: 36px; line-height: 36px; font-size: 16px; font-weight: 600;}
[class*=mock__buttons--line]{display: flex; gap: 30px; border-bottom: 1px solid var(--gray-30);}
[class*=mock__buttons--line] > li{flex: none; display: flex; align-items: center; gap: 5px; font-size: 20px; font-weight: 600; color: var(--gray-50); padding-bottom: 16px; position: relative; line-height: 28px;}
[class*=mock__buttons--line] > li i{width: 24px; height: 24px;}
[class*=mock__buttons--line] > li i::after{background: var(--gray-50);}
[class*=mock__buttons--line] > li.active{color: var(--text-primary);}
[class*=mock__buttons--line] > li.active::after{content: ""; display: inline-block; position: absolute; bottom: -1px; left: 0; background: var(--text-primary); width: 100%; height: 3px;}
[class*=mock__buttons--line] > li.active i::after{background: var(--text-primary);}
[class*=mock__buttons--thumb]{width: auto; gap: 8px;}
[class*=mock__buttons--thumb] li{background: #fff; color: var(--text-primary, #121212); border-radius: 30px; font-size: 14px; font-weight: 400; border: 1px solid var(--gray-30, #E0E3EB); display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; padding: 8px 12px 8px 8px;; flex-shrink: 0;}
[class*=mock__buttons--thumb] li .tab--thumb{display:block; width: 30px; height: 30px; border-radius: 100%; overflow: hidden; background: var(--prem-teritary); flex-shrink: 0;}
[class*=mock__buttons--thumb] li .tab--thumb img{width: 100%; height: 100%; object-fit: cover; object-position: center;}
[class*=mock__buttons--thumb] li.active{color: var(--prem-primary); border-color: var(--prem-primary); background: var(--prem-background); font-weight: 600;}

[class*=mock__buttons][class*=--small] {height:40px; font-size: 14px; font-weight: 400; line-height: 19px; letter-spacing: -0.14px;}
[class*=mock__buttons][class*=--medium] {height:44px; font-size: 15px; font-weight: 400; line-height: 23px; letter-spacing: -0.3px;}
[class*=mock__buttons][class*=--large] {height:50px; font-size: 16px; font-weight: 400; line-height: 25px; letter-spacing: -0.48px;}
[class*=mock__buttons--button][class*=--large] > li.active {font-weight: 600;}

/* chips input */
[class*=mock__chips]{display: flex; flex-wrap: wrap; gap: 6px; font-family: 'Pretendard', sans-serif;}
[class*=mock__chips] label{display: flex; width: auto; height: 30px; justify-content: center; align-items: center; background: #FAFAFC; color: #121212; font-size: 14px; border-radius: 30px; cursor: pointer; padding: 0 12px; color: #121212; border: 1px solid #FAFAFC; overflow: hidden;}
[class*=mock__chips] label span{white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
[class*=mock__chips] label input:is([type=checkbox], [type=radio]){appearance: none; -webkit-appearance: none; display: none;}
[class*=mock__chips] label:has(input:checked),
[class*=mock__chips] label.active{border-color: #025AF6; background: #E7EFFD; color: #025AF6;}
.sp__chips--gray label:has(input:checked){background: var(--gray-100); color: var(--white); border-color: var(--gray-100);}


.mock__empty{display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; background: #FAFAFC; border-radius: 12px; font-family: 'Pretendard', sans-serif; min-height: 300px; text-align: center;}
.mock__empty p{color: #5C6675; font-size: 15px; font-weight: 500; line-height: 23px;}
.mock__empty span{color: #C2CAD6; font-size: 14px; font-weight: 500;}

/* 탭 */
.mock__wrap .mock__nav{display: flex; gap: 16px; font-family: 'Pretendard', sans-serif; border-bottom: 1px solid #EDEDF3; margin-bottom: 20px;}
.mock__wrap .mock__nav > li{flex: 1; padding: 17px 0; color: #5C6675; font-size: 16px; font-weight: 500; text-align: center; user-select: none; cursor: pointer; position: relative; letter-spacing: -0.32px;}
.mock__wrap .mock__nav > li.active{color: #121212; font-weight: 700;}
.mock__wrap .mock__nav > li.active::after{content: ""; position: absolute; bottom: -1px; left: 0; background: #121212; width: 100%; height: 2px;}
.mock__wrap .mock__tab > li{display: none;}
.mock__wrap .mock__tab > li.active{display: flex;}

/* 유저 */
.mock__wrap .mock__user{width: 350px; border: 1px solid #EDEDF3; border-radius: 12px; font-family: 'Pretendard', sans-serif; overflow: hidden; align-self: flex-start;}
.mock__wrap .mock__user .user__head{padding: 24px 20px;}
.mock__wrap .mock__user .user__head > strong{display: block; color: #121212; font-size: 18px; font-weight: 700; line-height: 27px; margin-bottom: 10px;}
.mock__wrap .mock__user .user__head > ul{display: flex; flex-direction: column; gap: 8px;}
.mock__wrap .mock__user .user__head > ul > li{display: flex; align-items: center; gap: 8px; font-size: 14px;}
.mock__wrap .mock__user .user__head > ul > li > span{min-width: 30px; color: #5C6675; font-weight: 500; flex-shrink: 0;}
.mock__wrap .mock__user .user__head > ul > li > div{display: flex; align-items: center; gap: 6px;}
.mock__wrap .mock__user .user__head > ul > li > div a{color: #025AF6; text-decoration: underline; text-underline-position: under;}
.mock__wrap .mock__user .user__body{background: #FAFAFC; border-top: 1px solid #EDEDF3; padding: 24px 20px;}
.mock__wrap .mock__user .user__body .body__list{display: flex; flex-direction: column; gap: 20px; font-family: 'Pretendard', sans-serif;}
.mock__wrap .mock__user .user__body .body__list > div{display: flex; flex-direction: column; gap: 12px;}
.mock__wrap .mock__user .user__body .body__list > div > strong{display: block; color: #5C6675; font-size: 14px; font-weight: 700;}
.mock__wrap .mock__user .user__body .body__btns{display: flex; flex-direction: column; gap: 8px;}

/* 모의고사 */
.mock__list h4{margin-bottom: 16px; color: #121212; font-size: 16px; font-weight: 700; line-height: 24px;}
.mock__list .list__layout{display: flex; flex-direction: column; gap: 20px;}
.mock__list .list__layout .mock__items{display: flex; flex-direction: column; gap: 12px;}
.mock__list .list__layout .mock__items > div{display: flex; justify-content: space-between; align-items: center; padding: 0 24px; border: 1px solid #EDEDF3; border-radius: 12px;}
.mock__list .list__layout .mock__items > div .item__info{display: flex; flex-direction: column; gap: 4px; padding: 24px 0; flex-shrink: 0;}
.mock__list .list__layout .mock__items > div .item__info strong{display: block; font-size: 16px; font-weight: 700;}
.mock__list .list__layout .mock__items > div .item__info span{display: flex; align-items: center; gap: 4px; color: #5C6675; font-size: 13px;}
.mock__list .list__layout .mock__items > div .item__btns{display: flex; gap: 8px;}
.mock__list .list__layout .mock__items > div .item__btns a{width: 114px; padding-top: 0; padding-bottom: 0; height: 40px;}

/* 성적 */
.mock__grade h4{font-size: 16px; font-weight: 700; line-height: 22px;}
.mock__grade .grade__filter{display: flex; justify-content: space-between; align-items: center; padding: 15px 20px;}
.mock__grade .grade__filter p{font-size: 13px; font-weight: 500; line-height: 18px; flex-shrink: 0;}
.mock__grade .grade__filter .filter__list{display: flex; gap: 12px;}
.mock__grade .grade__filter .filter__list > label{min-width: 105px; display: flex; justify-content: center; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; text-align: center; padding: 0 5px;}
.mock__grade .grade__filter .filter__list > label:has(input[type=checkbox]:disabled){cursor: default;}
.mock__grade .grade__filter .filter__list > label span{height: 20px;}
.mock__grade .graph__wrap{overflow: auto;}
.mock__grade .graph__wrap .graph{height: 330px; overflow: auto;}
.mock__grade .graph__wrap .grade__radar{width: 288px; height: 261px; margin: 0 auto;}

/* 문항 검색 */
.mock__search{width: 100%;}
.mock__search .mock__tit{display: flex; align-items: center; gap: 8px; font-family: 'Pretendard', sans-serif;}
.mock__search .mock__tit h4{font-size: 18px; font-weight: 700;}
.mock__search .mock__tit p{color: #5C6675; font-size: 14px;}
.mock__search .mock__tit span{background: #E7EFFD; color: #025AF6; font-size: 12px; font-weight: 700; padding: 0 7px; height: 24px; line-height: 24px; border-radius: 4px;}
.mock__search .mock__rank{background: #F6F6F9; padding: 8px 30px; border-radius: 12px; width: 100%; font-family: 'Pretendard', sans-serif;}
.mock__search .mock__rank > li{display: flex; justify-content: space-between; align-items: center; height: 63px;}
.mock__search .mock__rank > li > div{display: flex; align-items: center; gap: 16px;}
.mock__search .mock__rank > li > div > p{font-size: 16px; font-weight: 700; min-width: 12px; flex-shrink: 0;}
.mock__search .mock__rank > li > div > strong{font-size: 15px; font-weight: 500;}
.mock__search .mock__rank > li > span{color: #025AF6; font-size: 14px; font-weight: 700;}
.mock__search .mock__rank > li + li{border-top: 1px solid #EDEDF3;}
.mock__search .mock__card{display: flex; flex-wrap: wrap; gap: 12px; font-family: 'Pretendard', sans-serif;}
.mock__search .mock__card > div{display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 20px; border: 1px solid #EDEDF3; border-radius: 12px; width: 539px;}
.mock__search .mock__card > div > strong{font-size: 16px; font-weight: 700; line-height: 22px;}
.mock__search .mock__card > div > p{font-size: 14px; line-height: 21px;}
.mock__search .search__answer{width: 285px; margin: 0 auto; height: 48px; font-size: 16px;}
.mock__search .search__form{font-family: 'Pretendard', sans-serif;}
.mock__search .search__form .form__select{display: flex; gap: 12px;}
.mock__search .search__form .form__select > div{flex: 1;}
.mock__search .search__form .form__txt{display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; line-height: 21px;}
.mock__search .search__form .form__txt > p{color: #025AF6;}

/* 드롭다운 버튼 */
[class*=mock__select--box]{display: block; border: 1px solid #EDEDF3; border-radius: 4px; overflow: hidden; position:relative; text-decoration: none !important; font-family: 'Pretendard', sans-serif;}
[class*=mock__select--box]:after{content:''; display:inline-block; width:12px; height:24px; -webkit-mask-image: url('/un_static/img/common/premium/icon/icon_arrow_down_s.svg'); mask-image: url('/un_static/img/common/premium/icon/icon_arrow_down_s.svg'); position: absolute; top: 50%; margin-top: -12px; right: 16px; background-color: #7B8A9D; pointer-events: none;}
[class*=mock__select--box]:has(select:focus),
[class*=mock__select--box] select:invalid{color: #5C6675;}
[class*=mock__select--box] :is(select, .select){width:100%; border:none; height: 36px; font-size: 13px; font-weight: 400; line-height: 27px; letter-spacing: -0.34px; padding: 0 12px;}
[class*=mock__select--box] :is(select, .select){color: #121212;}
[class*=mock__select--box] :is(select, .select) option[disabled]{display: none}
[class*=mock__select--box] .select{display: flex; justify-content: space-between; align-items: center; gap: 8px; line-height: 36px; text-decoration: none; color: #5C6675;}
[class*=mock__select--box] .select span{color: #121212;;}
[class*=mock__select--box].selected .select{color: #121212;}
[class*=mock__select--box][class*=--large] :is(select, .select){padding: 0 16px; padding-right: 36px; height: 48px; line-height: 48px;}
[class*=mock__select--box][class*=--large].selected :is(select, .select){font-weight: 600;}
  
[class*=mock__select--box][class*=--rounded]{display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 8px;}
[class*=mock__select--box][class*=--rounded]::after{background: #5C6675; position: static; margin: 0; flex-shrink: 0;}
[class*=mock__select--box][class*=--rounded] .select{padding: 0; gap: 6px;}
[class*=mock__select--box][class*=--rounded] .select p{color: #5C6675; font-size: 14px; font-weight: 600;}
[class*=mock__select--box][class*=--rounded] .select span{font-size: 14px; font-weight: 600;}
[class*=mock__select--box][class*=--rounded].active::after{transform: rotate(180deg);}

/* 드롭다운 */
.mock__dropdown--btn{position: relative;}
.mock__dropdown--wrap{--dropdown-offset: 4px; display: none; background: #fff; position: absolute; top: calc(100% + var(--dropdown-offset, 4px)); left: 0; width: 100%; border: 1px solid #EDEDF3; border-radius: 8px; z-index: 10; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.08); max-height: 300px; overflow: hidden;}
.mock__dropdown--wrap .mock__dropdown--list{max-height: 300px; overflow: auto; padding: 4px 0;}
.mock__dropdown--wrap .mock__dropdown--list::-webkit-scrollbar-track{border-radius: 8px; overflow: hidden;}
.mock__dropdown--wrap .mock__dropdown--list > li{padding: 0 10px; font-size: 14px; height: 34px; line-height: 34px; text-align: left;}
.mock__dropdown--wrap .mock__dropdown--list > li:hover{background: #F6F6F9;}
.mock__dropdown--wrap .mock__dropdown--list > li > a{display: inline-block; width: 100%; height: 100%; text-decoration: none !important;}
.mock__dropdown--wrap.active{display: block;}

/* 유의사항 */
.mock__wrap .mock__notice{display: flex; background: #FAFAFC; border-radius: 12px; padding: 20px; border: 1px solid #EDEDF3;}
.mock__wrap .mock__notice .notice__list > li{position: relative; padding-left: 10px; font-size: 13px; color: #121212; line-height: 20px;}
.mock__wrap .mock__notice .notice__list > li::before {display: block; content: '\2022'; position: absolute; left: 0; top: -1px;}

/* 모달 공통 */
.mock__modal .cn-modal-main{border-radius: 12px; width: 600px;}
.mock__modal .cn-modal-main .btn_modal_close i::after{background: #7B8A9D;}
.mock__modal .cn-modal-main .cn-modal-head strong{width: 100%; margin: 0; font-size: 16px; font-weight: 700;}
.mock__modal .cn-modal-main .cn-modal-body{padding: 0 24px 30px;}

 /* 응시하기 모달 */
.mock__modal--exam .cn-modal-main{width: 1183px;}
.mock__modal--exam .cn-modal-main .cn-modal-head{text-align: left; padding: 20px 24px; height: auto; line-height: 27px;}
.mock__modal--exam .cn-modal-main .cn-modal-head strong{font-size: 18px; font-weight: 700;}
.mock__modal--exam .cn-modal-main .cn-modal-head strong span{color: #025AF6;}
.mock__modal--exam .modal__exam{display: flex; justify-content: space-between;}
.mock__modal--exam .modal__exam .modal__viewer{width: 764px; height: 976px; border-radius: 12px; overflow: hidden;}
.mock__modal--exam .modal__exam .modal__viewer iframe{width: 100%; height: 100%;}
.mock__modal--exam .modal__exam .modal__side{display: flex; flex-direction: column; gap: 20px; width: 348px; font-family: 'Pretendard', sans-serif;}
.mock__modal--exam .modal__exam .modal__side .side__status{display: flex; align-items: center; padding: 13px 0; font-size: 13px;}
.mock__modal--exam .modal__exam .modal__side .side__status > div{flex: 1; display: flex; justify-content: center; align-items: center; gap: 6px;}
.mock__modal--exam .modal__exam .modal__side .side__status > div + div{border-left: 1px solid #EDEDF3;}
.mock__modal--exam .modal__exam .modal__side .side__status > div p{color: #5C6675; font-weight: 700;}
.mock__modal--exam .modal__exam .modal__side .side__status > div span{color: #121212; font-weight: 500;}
.mock__modal--exam .modal__exam .modal__side .side__status > div strong{color: #E81A17; font-weight: 700;}
.mock__modal--exam .modal__exam .modal__side .side__form{display: flex; align-items: center; gap: 12px;}
.mock__modal--exam .modal__exam .modal__side .side__form > span{flex-shrink: 0; font-size: 14px; font-weight: 700;}
.mock__modal--exam .modal__exam .modal__side .side__form > input{flex: 1; height: 36px; padding: 8px;}
.mock__modal--exam .modal__exam .modal__side .side__btns{display: flex; justify-content: space-between; align-items: center; gap: 10px;}
.mock__modal--exam .modal__exam .modal__side .side__btns a{width: 100%;}
.mock__modal--exam .modal__exam .exam__table{border: 1px solid var(--gray-30); border-radius: 8px; overflow: hidden;}
.mock__modal--exam .modal__exam table{width: 100%; table-layout: fixed; user-select: none;}
.mock__modal--exam .modal__exam table :is(th, td){border: 1px solid var(--gray-30); text-align: center; height: 44px;}
.mock__modal--exam .modal__exam table :is(th, td):first-child{border-left: 0;}
.mock__modal--exam .modal__exam table :is(th, td):last-child{border-right: 0;}
.mock__modal--exam .modal__exam table thead tr:first-child :is(th, td){border-top: 0;}
.mock__modal--exam .modal__exam table tbody tr:last-child :is(th, td){border-bottom: 0;}
.mock__modal--exam .modal__exam table th{font-size: 13px; font-weight: 700; color: #121212;}
.mock__modal--exam .modal__exam table td{user-select: all;}
.mock__modal--exam .modal__exam table td > label{display: inline-flex; justify-content: center; align-items: center; width: 100%; height: 100%;}

/* 직렬정보 모달 */
.mock__modal--register .mock__register .mock__form .mock__col{display: flex; flex-direction: column; gap: 12px;}
.mock__modal--register .mock__register .mock__form .mock__col > div{flex: 1;}
.mock__modal--register .mock__register .mock__form .mock__row{display: flex; gap: 20px;}
.mock__modal--register .mock__register .mock__form > div > strong{font-size: 14px; font-weight: 700; line-height: 21px;}
.mock__modal--register .mock__register .mock__form .prem__layout{flex-wrap: nowrap;}
.mock__modal--register .mock__register .input__label{display: flex; align-items: center; gap: 4px; user-select: none;}
.mock__modal--register .mock__register .input__label > span{height: 20px; line-height: 20px; font-size: 13px;}
.mock__modal--register .mock__register .modal__scroll{height: 72px; overflow: auto; font-size: 12px; font-weight: 400; color: #5C6675; line-height: 18px; border: 1px solid #E0E3EB; border-radius: 8px;}
.mock__modal--register .mock__register .modal__scroll strong{font-weight: 700;}
.mock__modal--register .mock__register .mock__btn a{width: 180px; margin: 0 auto;}

/* 총평 모달 */
.mock__modal--review .mock__review{font-size: 14px; font-family: 'Pretendard', sans-serif; line-height: 21px;}

/* 빠른채점 모달 */
:is(.mock__wrap, .mock__modal) .mock__note{color: #7E8B9A; font-size: 12px;}
.mock__modal--quick .cn-modal-main .cn-modal-body{padding-top: 20px; font-family: 'Pretendard', sans-serif;}
.mock__modal--quick .mock__quick table.mock__table thead th:first-child{font-weight: 400;}
.mock__modal--quick .mock__quick .mock__time{display: flex; justify-content: space-between; align-items: center; font-family: 'Pretendard', sans-serif;}
.mock__modal--quick .mock__quick .mock__time > div{display: flex; align-items: center; gap: 8px; flex-shrink: 0;}
.mock__modal--quick .mock__quick .mock__time > div p{font-size: 14px; font-weight: 700;}
.mock__modal--quick .mock__quick .mock__time > div span{color: #7E8B9A; font-size: 12px;}
.mock__modal--quick .mock__quick .mock__time > input{width: 133px; padding: 0 8px;}
.mock__modal--quick .mock__quick [class*=mock__btn]{width: 180px; margin: 0 auto;}

/* 결과보기 모달 */
.mock__modal--result .cn-modal-main{width: 1200px;}
.mock__modal--result .mock__result .result__wrap{display: flex; flex-direction: column; gap: 20px; padding: 24px; font-family: 'Pretendard', sans-serif; width: 100%;}
.mock__modal--result .mock__result .result__wrap h4{font-size: 18px; font-weight: 700; line-height: 27px;}
.mock__modal--result .mock__result .result__wrap .result__status{display: flex; gap: 20px;}
.mock__modal--result .mock__result .result__wrap .result__status strong{font-size: 16px; line-height: 22px;}
.mock__modal--result .mock__result .result__wrap .result__status .status__info{width: 278px; flex-shrink: 0;}
.mock__modal--result .mock__result .result__wrap .result__status .status__info .info__top p{font-size: 14px; line-height: 21px;}
.mock__modal--result .mock__result .result__wrap .result__status .status__info .info__top p span{color: #025AF6; font-weight: 500;}
.mock__modal--result .mock__result .result__wrap .result__status .status__info .info__btm .btm__wrap{display: flex; align-items: center; background: #F6F6F9; border-radius: 8px; padding: 12px 0;}
.mock__modal--result .mock__result .result__wrap .result__status .status__info .info__btm .btm__wrap > div{flex: 1; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 4px;}
.mock__modal--result .mock__result .result__wrap .result__status .status__info .info__btm .btm__wrap > div + div{border-left: 1px solid #EDEDF3;}
.mock__modal--result .mock__result .result__wrap .result__status .status__info .info__btm .btm__wrap > div p{color: #5C6675; font-size: 14px; font-weight: 700; line-height: 21px;}
.mock__modal--result .mock__result .result__wrap .result__status .status__info .info__btm .btm__wrap > div span{font-size: 15px; font-weight: 500; line-height: 23px;}
.mock__modal--result .mock__result .result__wrap .result__status .status__info .info__btm .btm__note{color: #5C6675; font-size: 12px;}
.mock__modal--result .mock__result .result__wrap .result__status .status__grade{flex: 1; display: flex; flex-direction: column; padding: 20px;}
.mock__modal--result .mock__result .result__wrap .result__status .status__grade .grade__level{display: flex; justify-content: space-between; align-items: center;}
.mock__modal--result .mock__result .result__wrap .result__status .status__grade .grade__level .level__graph{width: 371px;}
.mock__modal--result .mock__result .result__wrap .result__status .status__grade .grade__level .level__graph img{width: 100%;}
.mock__modal--result .mock__result .result__wrap .result__status .status__grade .grade__level .level__list{width: 356px;}
.mock__modal--result .mock__result .result__wrap .result__status .status__grade .grade__level .level__list > li{display: flex; align-items: center; gap: 16px; height: 61px; border-radius: 8px; padding: 0 16px; font-size: 14px; font-weight: 500; opacity: .5; color: #333; position: relative;}
.mock__modal--result .mock__result .result__wrap .result__status .status__grade .grade__level .level__list > li > img{width: 34px; height: 30px;}
.mock__modal--result .mock__result .result__wrap .result__status .status__grade .grade__level .level__list:not(:has(li.active)) img{filter: grayscale(1);}
.mock__modal--result .mock__result .result__wrap .result__status .status__grade .grade__level .level__list > li span{font-weight: 700; color: #121212; margin-right: 8px;}
.mock__modal--result .mock__result .result__wrap .result__status .status__grade .grade__level .level__list > li.active{background: #E7EFFD; opacity: 1;}
.mock__modal--result .mock__result .result__wrap .result__status .status__grade .grade__level .level__list > li.active::before{content: ""; display: inline-block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; border: 2px solid #025AF6; border-radius: 8px; box-sizing: border-box; pointer-events: none;}
.mock__modal--result .mock__result .result__wrap .result__status .status__grade .grade__level .level__list > li.active::after{content: "내 위치"; display: inline-block; position: absolute; right: 16px; top: 50%; margin-top: -10.5px; background: #025AF6; height: 21px; line-height: 22px; padding: 0 5px; font-size: 12px; font-weight: 700; color: #fff; letter-spacing: -0.12px; border-radius: 3px; margin-left: -10px;}
.mock__modal--result .mock__result .result__data{display: flex; gap: 16px;}
.mock__modal--result .mock__result .result__data > div{flex: 1; display: flex; flex-direction: column; gap: 16px;}
.mock__modal--result .mock__result .result__data > div > strong{font-size: 18px; font-weight: 700; line-height: 27px;}
.mock__modal--result .mock__result .result__data .result__chart{width: 353px; height: 319px; margin: 0 auto;}

/* 경쟁자 정보 확인 모달 */
.mock__modal--versus .mock__versus p{font-size: 15px; font-weight: 500; font-family: 'Pretendard', sans-serif; padding-top: 20px;}

/* 오답문항 모달 */
.mock__answer{padding-top: 20px;}
.mock__answer .answer__select{display: flex; gap: 12px;}
.mock__answer .answer__select > div{flex: 1;}
.mock__answer .answer_tit{display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; font-family: 'Pretendard', sans-serif;}
.mock__answer .answer_tit span{color: #025AF6;}

/* 검색 필터 모달 */
.mock__filter{padding-top: 20px;}
.mock__filter h4{font-size: 14px; font-weight: 700; line-height: 21px;}
.mock__filter .filter__btns{display: flex; gap: 10px;}
.mock__filter .filter__btns a{flex: 1; height: 48px; font-size: 16px;}
.mock__filter .filter__btns a:first-child{width: 120px; flex-shrink: 0; flex: none;}