/* 애니메이션 */
@keyframes graph-value {
    0% {width: 0;}
    100% {width: var(--graph-value);}
}

@keyframes shine {
    0% {left: -150%;}
    100% {left: 150%;}
}

a:hover{text-decoration: none;}
img{display: inline-block;}
[class*=sp__box]{overflow: visible;}
[class*=sp__ico--]::after{background-color: currentColor !important;}
.sp__box--bg--subtle{background-color: var(--sp-bg-neutral-subtle) !important;}
.sp__header{background: #fff; position: relative; z-index: 100;}
.sp__header--sub{z-index: 100;}
input[type=checkbox]{background-size: auto 100% !important;}
input[type=text]::placeholder,
textarea::placeholder{color: var(--text-inactive) !important;}
select{appearance: none;}
.cn-modal-wrap:not(.cn-modal){display: none !important;}
[class*=sp__btn--]{text-decoration: none !important;}
[class*=sp__btn--].disabled{background: var(--sp-bg-neutral-mute) !important; color: #fff !important; pointer-events: none; border-color: var(--sp-bg-neutral-mute) !important;}
body{min-width: 1500px; color: #121212;}
[class*=sp__btn--][class*=--xlarge]{height: 52px; font-size: 16px; font-weight: 600; border-radius: 12px;}
[class*=sp__typo--body12]{line-height: 160%}
[class*=sp__layout]:has(.shrink-0){flex-wrap: wrap;}

/* gnb */
.fs__container:has(.gnb__menu.active)::before{content: ""; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.40); width: 100vw; height: 100vw; z-index: 99;}
.fs__gnb{display: flex; align-items: center; height: 64px; background: #FFF; box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.04); backdrop-filter: blur(6px); position: relative; z-index: 100;}
.fs__gnb .gnb__layout{display: flex; justify-content: space-between; align-items: center;}
.fs__gnb .gnb__btn{flex-shrink: 0; display: flex; align-items: center; gap: .4rem;}
.fs__gnb .gnb__btn.active .gnb__arrow{transform: rotate(180deg);}
.fs__gnb .gnb__nav{display: flex;}
.fs__gnb .gnb__nav a{display: flex; justify-content: center; align-items: center; width: 100px; height: 44px; border-radius: 12px; color: var(--sp-text-subtle); font-size: 16px; font-weight: 600;}
.fs__gnb .gnb__nav li.active a{background: rgba(0, 0, 0, 0.04); color: #121212;}
.fs__gnb .gnb__menu{display: none; position: absolute; top: 100%; left: 0; width: 100%; background: #FFF; z-index: 1000; padding: 30px 0 40px; text-align: left;}
.fs__gnb .gnb__menu.active{display: block;}
.fs__gnb .gnb__menu > div{display: flex; align-items: flex-start; align-items: stretch; width: 1140px; margin: 0 auto;}
.fs__gnb .gnb__menu .column{flex: 1; display: flex; flex-direction: column; gap: 12px; padding-right: 20px;}
.fs__gnb .gnb__menu .column + .column{border-left: 1px solid#EDEDF3; padding: 0 20px;}
.fs__gnb .gnb__menu .column h3{color: #121212; font-size: 16px; font-weight: 700; line-height: 22px; letter-spacing: -0.32px;}
.fs__gnb .gnb__menu .column ul{display: flex; flex-direction: column; gap: 8px;}
.fs__gnb .gnb__menu .column ul + h3{margin-top: 30px;}
.fs__gnb .gnb__menu .column li{color: #121212; font-size: 13px; font-weight: 400; line-height: 20px; letter-spacing: -0.39px;}
.fs__gnb .gnb__menu .column li:hover a{text-decoration: none;}

.fs__gnb + .fs__gnb--sticky{display: block; margin-top: -80px; margin-bottom: 20px;}
.fs__gnb--sticky{position: sticky; top: 24px; left: 0; z-index: 99; display: none;}
.fs__gnb--sticky .sticky__nav{display: flex; width: 992px; height: 60px; margin: 0 auto; border-radius: var(--Radius_XLarge, 16px); border: 1px solid #FFF;  background: rgba(255, 255, 255, 0.70);  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12); backdrop-filter: blur(6px);}
.fs__gnb--sticky .sticky__nav li{flex: 1;}
.fs__gnb--sticky .sticky__nav li a{display: flex; justify-content: center; align-items: center; color: var(--sp-text-subtle); font-size: 16px; font-weight: 600; height: 60px;}
.fs__gnb--sticky .sticky__nav li.active a{color: #121212;}

/* 유틸 */
.size-18{width: 18px !important; height: 18px !important;}
.size-55{width: 55px !important; height: 55px !important;}
.w-full{width: 100% !important;}
.w-16{width: 1.6rem;}
.h-auto{height: auto !important;}
.h-full{height: 100% !important;}
.h-dvh{min-height: 100dvh !important;}
.py-2{padding-top: 2px !important; padding-bottom: 2px !important;}
.py-3{padding-top: 3px !important; padding-bottom: 3px !important;}
.py-11{padding-top: 11px !important; padding-bottom: 11px !important;}
.py-36{padding-top: 36px !important; padding-bottom: 36px !important;}
.py-40{padding-top: 40px !important; padding-bottom: 40px !important;}
.py-50{padding-top: 50px !important; padding-bottom: 50px !important;}
.py-80{padding-top: 80px !important; padding-bottom: 80px !important;}
.pt-0{padding-top: 0 !important}
.pr-0{padding-right: 0 !important}
.pb-0{padding-bottom: 0 !important}
.pl-0{padding-left: 0 !important}
.gap-3{gap: 3px !important;}
.gap-28{gap: 28px !important}
.break-keep{word-break: keep-all !important;}
.max-w-half{max-width: 50%;}
.cursor-default{cursor: default !important;}
.overflow-auto{overflow: auto !important;}
.relative{position: relative;}
.flex-nowrap{flex-wrap: nowrap !important;}
.sp__stroke--default{border-color: var(--sp-stroke-default) !important;}
.sp__stroke--subtle{border-color: var(--sp-stroke-subtle) !important;}
.sp__bg--brand_secondary{background: var(--sp-brand-secondary-default)}
.sp__bg--brand_subtle{background: var(--brand-primary-5)}
.sp__bg--brand_weak{background: var(--sp-brand-primary-weak)}
.sp__color--currect{color: #2773F7;}
hr[class*=sp__divider]{border: 0; border-top: 1px solid var(--sp-stroke-default); margin: 0; padding: 0;}
hr[class*=sp__divider--][class*=divider--subtle]{border-top: 1px solid var(--sp-stroke-subtle);}
[class*=sp__box][class*=--brand]{background: var(--brand-primary-5); border-color: var(--brand-primary-10);}
[class*=sp__box][class*=--border]{border: 1px solid var(--sp-stroke-default);}
[class*=sp__box][class*=--bg][class*=--tint]{background: var(--sp-bg-neutral-tint);}
[class*=sp__btn--][class*=--auto]{display: inline-flex; line-height: normal;}
[class*=sp__tab--rounded] li{width: auto;}

/* 리뉴얼 */
[class*=fs__grid] > .fs__grid--list{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px 12px;}
[class*=fs__grid] .fs__grid--more{display: flex; justify-content: center; align-items: center; gap: 2px; color: #121212; font-size: 16px; font-weight: 600; height: 52px; text-align: center; border: 1px solid var(--stroke-border); border-top: 0; border-radius: 0 0 12px 12px;}
[class*=fs__grid] .fs__grid--item{display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--sp-stroke-default); border-radius: 12px; padding: 12px 16px}
[class*=fs__grid][class*=--fold]:not(:has(.fs__grid--more)) > .fs__grid--list{border-radius: 12px !important;}
[class*=fs__grid][class*=--fold]:not(.active) > .fs__grid--list{border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
[class*=fs__grid][class*=--fold]:not(.active):not(.highlight) > .fs__grid--list > div:nth-child(n+4){display: none;}
[class*=fs__grid][class*=--fold].active .fs__grid--more{display: none;}
[class*=fs__grid][class*=--fold].highlight .fs__grid--item:not(.highlight){display: none;}

.fs__table{width: 100%; text-align: left; table-layout: fixed;}
.fs__table thead tr th{background: #F6F6F9; padding: 12px 0; color: var(--sp-text-subtle); font-size: 14px; font-weight: 500; letter-spacing: -0.14px;}
.fs__table tbody tr th{font-weight: 600;}
.fs__table tbody tr :is(th, td){padding: 12px 0; color: #121212; font-size: 14px; letter-spacing: -0.14px;}
.fs__table :is(thead, tbody) tr :is(th, td):first-child{border-radius: 8px 0 0 8px; padding-left: 16px; width: 80px;}
.fs__table :is(thead, tbody) tr :is(th, td):last-child{border-radius: 0 8px 8px 0; padding-right: 16px; width: 126px;}
.fs__table :is(thead, tbody) tr :is(th, td):nth-child(n+3){text-align: right;}
.fs__table .table__banner{padding: 0 0 0 80px !important;}

.fs__table2{width: 100%; border: 1px solid var(--sp-stroke-default); border-radius: 12px; overflow: hidden;}
.fs__table2 table{width: 100%; table-layout: fixed;}
.fs__table2 table tbody > tr > td:not(:has(ul)){text-align: center;}
.fs__table2 table tbody > tr > td:has(img){font-size: 0; line-height: 0;}
.fs__table2 table tbody > tr > td > ul{margin-left: 16px;}
.fs__table2 table tbody > tr > td > ul{padding-bottom: 0 !important;}
.fs__table2 table tbody > tr > td > .sp__layout.items-center{display: inline-flex;}
.fs__table2 table tr + tr > *{border-top: 1px solid var(--sp-stroke-subtle);}
.fs__table2:not(.mark) table tr > *:first-child{border-left: 0; width: 100px; min-width: 100px;}
.fs__table2 table tr > *[rowspan]{border-right: 1px solid var(--sp-stroke-subtle);}
.fs__table2 table tr > *[rowspan] + *{border-left: 0;}
.fs__table2 table tr > :is(td, th){background: #fff; font-size: 13px; font-weight: 500; padding: 14.5px 8px; line-height: 145%; border-left: 1px solid var(--sp-stroke-subtle);}
.fs__table2 table tr > th{background: var(--sp-bg-neutral-tint); text-align: center; font-weight: 600; font-size: 14px;}
.fs__table2 table tr > td.checked{background: var(--brand-primary-5); text-align: center; font-size: 0; line-height: 0;}
.fs__table2 table tr > td.checked i{width: 24px; height: 24px;}
.fs__table2 table tr > td.checked i::after{background: var(--brand-primary);}
.fs__table2--auto table tr > *:first-child{width: auto !important; min-width: auto;}

.fs__table2.mark table th{background: var(--sp-brand-primary-subtle)}
.fs__table2.mark table tr :is(th, td){height: 40px; padding: 0;}
.fs__table2.mark table tr td input{width: 100%; height: 100%; text-align: center; font-size: 13px; font-weight: 500;}

.fs__list{display: flex; flex-direction: column;}
.fs__list > a{display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 12px 8px;}
.fs__list > a > strong{flex: 1; color: #121212; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.fs__list > a > em{flex-shrink: 0; color: #5C6675;}
.fs__list > a > .sp__level--wrap{width: 119px;}
.fs__list > a > .sp__level--wrap > span{flex: 0 auto;}
.fs__list > a > .sp__level--wrap > .sp__level--img{flex-shrink: 0;}
.fs__list > a:nth-child(odd){background: #FAFAFC; border-radius: 8px;}

[class*=fs__nav--][class*=--full]{width: 100%;}
[class*=fs__nav--][class*=--full] :is(a, li){flex: 1;}
[class*=fs__nav]{display: flex; align-items: center; background: var(--bg-tertiary); padding: 4px !important; border-radius: 12px; height: 40px; box-sizing: border-box;}
[class*=fs__nav] > :is(a, li){display: flex; justify-content: center; align-items: center; height: 100%; color: var(--text-secondary); font-weight: 500; font-size: 14px; padding: 0 12px; border-radius: 8px;}
[class*=fs__nav] > :is(.on, .active){background: #fff; color: #121212; font-weight: 600;}

/* input */
[class*=sp__select--box]{height: 44px;}
[class*=sp__select--box].selected select{color: #121212;}
[class*=sp__select--box] .select{color: var(--sp-text-subtle)}
[class*=sp__select--box] :is(select, .select){height: 44px;}
[class*=sp__select--box--][class*=--small]{height: 36px;}
[class*=sp__select--box--][class*=--small] :is(select, .select){height: 36px;}
.sp__input--text{height: 44px;}
.sp__input--text--small{height: 36px;}
.fs__dropdown{display: flex; flex-direction: column; gap: 1.6rem; background: var(--sp-bg-neutral-tint); padding: 1.2rem; border-radius: var(--border-radius-m);}
.fs__dropdown > :is(label, a){font-size: 1.5rem; font-weight: 500; color: var(--sp-text-subtle); line-height: 2.25rem;}
.fs__dropdown > label:has(input:checked){color: var(--text-brand);}

/* 탭 */
.progress__nav{background: var(--sp-bg-neutral-subtle); width: 100%; height: 4px; pointer-events: none; font-size: 0; position: relative;}
.progress__nav::after{content: ""; position: absolute; background: var(--brand-primary); width: 33.3333%; height: 100%; transition: width .3s;}
.progress__nav:has(li:nth-child(2).active)::after{width: 66.6666%;}
.progress__nav:has(li:nth-child(3).active)::after{width: 100%;}
.progress__nav > li{flex: 1; height: 100%;}
.progress__nav--2step::after{width: 50%;}
.progress__nav--2step:has(li:nth-child(2).active)::after{width: 100%;}
.progress__nav--2step:has(li:nth-child(3).active)::after{width: 100%;}

[class*=fs__nav--][class*=--full]{width: 100%;}
[class*=fs__nav--][class*=--full] a{flex: 1;}

.fs__main--list .list__item{display: flex; flex-direction: column; border-radius: var(--border-radius-m);}
.fs__main--list .list__item.highlight{background: var(--sp-brand-primary-subtle);}
.fs__main--list .list__item > div{display: flex; align-items: center; gap: 24px; padding: 8px 6px;}
.fs__main--list .list__item .item__number{width: 16px; color: var(--sp-brand-primary-default); text-align: center; white-space: nowrap;}
.fs__main--list .list__item .item__content{flex: 1; display: flex; justify-content: space-between; align-items: center;}
.fs__main--list .list__item .item__content > div{display: flex; flex-direction: column;}
.fs__main--list .list__item .item__content > .item__info{gap: 4px;}

.fs__header--sub{position: sticky; top: 0; left: 0; background: #fff; border-bottom: .1rem solid var(--sp-stroke-default); z-index: 100; height: 5rem; padding: 0 1.6rem; overflow: hidden;}
.fs__header--sub .sub__nav:not(.swiper){display: flex; gap: .8rem;}
.fs__header--sub .sub__nav{overflow: unset;}
.fs__header--sub .sub__nav li{width: auto;}
.fs__header--sub .sub__nav li > a{display: flex; justify-content: center; align-items: center; color: var(--text-secondary); font-size: 1.5rem; font-weight: 600; padding: 0 .8rem; height: 5rem; white-space: nowrap;}
.fs__header--sub .sub__nav li.active > a{color: var(--text-primary); }

/* chips input */
[class*=fs__chips]{display: flex; flex-wrap: wrap; gap: 12px;}
[class*=fs__chips] label{flex: 1; display: flex; height: 44px; justify-content: center; align-items: center; background: #fff; color: var(--text-primary); font-size: 15px; font-weight: 500; cursor: pointer; padding: 0 12px; border: 1px solid var(--sp-stroke-default); border-radius: var(--border-radius-m);}
[class*=fs__chips] label input:is([type=checkbox], [type=radio]){appearance: none; -webkit-appearance: none; display: none;}
[class*=fs__chips] label:has(input:checked),
[class*=fs__chips] label.active{border-color: var(--text-brand); background: var(--brand-primary-5); color: var(--text-brand);}
[class*=fs__chips--][class*=--column]{flex-direction: column; gap: 8px;}
[class*=fs__chips--][class*=--column] label{justify-content: flex-start; align-items: center; padding: 0 12px; flex: none; gap: 8px;}
[class*=fs__chips--][class*=--column] label input[type=checkbox]{display: inline-block; all: unset; display: inline-block; appearance: none; background: url('https://un-static-qa.conects.com/gongsoop/img/icon/icon_checkbox_off.svg') no-repeat center center / 20px 20px; width: 20px; height: 20px;}
[class*=fs__chips--][class*=--column] label input[type=checkbox]:checked{background: url('https://un-static-qa.conects.com/gongsoop/img/icon/icon_checkbox_on.svg') no-repeat center center / 20px 20px;}

/* 모달 */
.fs__modal{display: flex !important; justify-content: center; align-items: flex-end; padding: 12px;}
.fs__modal .fs__modal--close{display: flex; justify-content: center; align-items: center; position: absolute; top: calc(100% + 20px); left: 50%; transform: translateX(-50%); width: 84px; height: 84px; background: #fff; border-radius: 50px; font-size: 0;}
.fs__modal .fs__modal--close::after{width: 40px; height: 40px;}
.fs__modal .cn-modal-main{width: 400px; border-radius: 12px; margin: 0; max-height: 100%;}
.fs__modal .fs__modal--content{display: flex; flex-direction: column; max-height: 80%;}
.fs__modal .fs__modal--content .step{height: 100%; display: flex; flex-direction: column; overflow: hidden;}
.fs__modal .fs__modal--head{flex-shrink: 0; display: flex; padding: 16px 16px 12px; gap: 8px;}
.fs__modal .fs__modal--head strong{flex: 1;}
.fs__modal .fs__modal--head a{flex-shrink: 0; background: var(--sp-bg-neutral-weak); color: var(--sp-icon-default); border-radius: 50px; width: 32px; height: 32px;}
.fs__modal .fs__modal--head a::after{width: 24px; height: 24px;}
.fs__modal .fs__modal--head .progress__nav{position: absolute; top: 100%; left: 0; width: 100%;}
.fs__modal .fs__modal--body{flex: 1; padding: 16px; padding-top: 0; overflow-x: hidden; overflow-y: auto;}
.fs__modal .fs__modal--footer{flex-shrink: 0; padding: 0 16px 20px;}

.fs__modal.fs__modal--center{align-items: center;}
.fs__modal.fs__modal--center .fs__modal--body{padding: 0 16px 16px 16px;}
.fs__modal.fs__modal--center .fs__modal--footer{align-items: center; padding: 0 16px 20px;}
.fs__modal.fs__modal--center.fs__modal--page .fs__modal--body{padding: 0;}
.fs__modal :is(input, textarea){border: 0;}

.fs__modal--live .cn-modal-main{background: #121212; width: 848px; margin-bottom: 124px;}
.fs__modal--live .live__video{background: var(--sp-bg-neutral-subtle); border-radius: 4px; overflow: hidden;}
.fs__modal--live .live__video iframe{background: #121212; width: 100%;}
.fs__modal--live .live__timetable{overflow: hidden; position: relative;}
.fs__modal--live .live__timetable .timetable__item{border-radius: 12px; padding: 1px; background: #21242c; height: auto;}
.fs__modal--live .live__timetable .timetable__item > div{display: flex; flex-direction: column; gap: 6px; padding: 1px; background: #21242c; padding: 12px 16px; border-radius: 12px; height: 100%;}
.fs__modal--live .live__timetable .timetable__item span{color: var(--sp-text-mute); font-size: 13px; line-height: 20.3px; letter-spacing: -0.14px;}
.fs__modal--live .live__timetable .timetable__item p{color: #fff; font-size: 14px; line-height: 20.3px; letter-spacing: -0.14px;}
.fs__modal--live .live__timetable .timetable__item.today{background: linear-gradient(100.7deg, #0EBA5C 0.08%, #00B9FC 99.98%)}
.fs__modal--live .live__timetable .timetable__item.today span{color: var(--text-brand)}
.fs__modal--live .live__timetable .timetable__item.end span{color: var(--sp-text-subtle)}

.fs__modal.fs__modal--page .cn-modal-main{width: 540px; overflow: hidden;}
.fs__modal.fs__modal--page .fs__modal--head{display: flex; justify-content: center; align-items: center; padding: 0; height: 50px; line-height: 50px; text-align: center; position: relative;}
.fs__modal.fs__modal--page .fs__modal--head .head__tit [class*=sp__ico--]::after{width: 100%; height: 100%;}
.fs__modal.fs__modal--page .fs__modal--head .head__close{display: flex; justify-content: center; align-items: center; position: absolute; top: 0; right: 0; width: 50px; height: 50px; background: #fff; border-radius: 0;}
.fs__modal.fs__modal--page .fs__modal--head .head__close i{width: 24px; height: 24px;}
.fs__modal.fs__modal--page .fs__modal--footer{display: flex; flex-direction: column; gap: 8px; padding: 12px 24px 20px;}
.fs__modal.fs__modal--page .fs__modal--footer .sp__layout{width: 100%;}

/* 리스트 */
.fs__list--dot > li{position: relative; padding-left: 20px; word-break: keep-all;}
.fs__list--dot > li::before{display: block; content: '\2022'; position: absolute; left: 8px; top: 0;}

/* dropdown */
.fs__dropdown--wrap{position: relative;}
.fs__dropdown--box{display: none; background: #fff; padding: 8px 16px; border-radius: 12px; position: absolute; top: calc(100% + 4px); left: 0; z-index: 9; min-width: 200px; border: 1px solid var(--sp-stroke-default); box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.12);}
.fs__dropdown--wrap.active .fs__dropdown--box{display: block;}

/* 공숲 게시판 */
.fs__gongsoop{display: flex; height: 950px;}
.fs__gongsoop .gongsoop__list{flex: 1; overflow: auto; padding: 0 24px 24px 24px;}
.fs__gongsoop .gongsoop__list .list__item{display: flex; flex-direction: column; gap: 6px; padding: 16px 0;}
.fs__gongsoop .gongsoop__list .list__item + .list__item{border-top: 1px solid var(--sp-stroke-subtle);}
.fs__gongsoop .fs__gongsoop--nav{flex-shrink: 0; display: flex; align-items: center; gap: 20px; padding: 24px 24px 0 24px;}
.fs__gongsoop .fs__gongsoop--nav li{font-size: 24px; font-weight: 700; line-height: 34.8px; color: var(--sp-text-mute); position: relative;}
.fs__gongsoop .fs__gongsoop--nav li.active{color: #121212;}
.fs__gongsoop .fs__gongsoop--nav li.new::after{content: ""; position: absolute; top: 0; left: calc(100% + 2px); background: var(--text-brand); width: 7px; height: 7px; border-radius: 50px;}
.fs__gongsoop .fs__gongsoop--tab{flex: 1; overflow: hidden;}
.fs__gongsoop .fs__gongsoop--tab > li{height: 100%;}
.fs__gongsoop .fs__gongsoop--tab > li > .sp__layout--column{height: 100%;}
.fs__gongsoop .fs__gongsoop--form{display: flex; align-items: flex-end; gap: 4px;}
.fs__gongsoop .fs__gongsoop--form .form__input{flex: 1; display: flex; flex-direction: column; gap: 4px;}
.fs__gongsoop .fs__gongsoop--form .form__input :is(input, textarea){border: 0;}
.fs__gongsoop .fs__gongsoop--form .form__btn{flex-shrink: 0;}
.fs__gongsoop .fs__gongsoop--side{flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; width: 324px; border-right: 1px solid rgba(0, 0, 0, 0.04);}
.fs__gongsoop .fs__gongsoop--side .side__head{flex-shrink: 0; padding: 24px 24px 8px 24px}
.fs__gongsoop .fs__gongsoop--side .side__btn{display: inline-flex; align-items: center; background: var(--sp-bg-neutral-subtle); color: var(--sp-text-subtle); font-size: 14px; font-weight: 600; padding: 0 6px; height: 28px; border-radius: 4px; position: relative;}
.fs__gongsoop .fs__gongsoop--side .side__btn i{width: 12px; height: 24px; color: var(--sp-icon-default);}
.fs__gongsoop .fs__gongsoop--side .side__btn:hover::after{content: ""; background: rgba(0, 0, 0, .04); position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none;}
.fs__gongsoop .fs__gongsoop--content{flex: 1; display: flex; flex-direction: column; gap: 20px; overflow: hidden;}

.fs__gongsoop .gongsoop__form{flex-shrink: 0; padding: 0 24px;}
.fs__gongsoop .gongsoop__form [class*=sp__select--box]{height: 36px;}
.fs__gongsoop .gongsoop__form [class*=sp__select--box] :is(select, .select){height: 100%;}
.fs__gongsoop .gongsoop__banner{padding: 0 24px;}
.fs__gongsoop .gongsoop__banner a{display: block; border-radius: 12px; overflow: hidden;}
.fs__gongsoop .gongsoop__board{flex: 1; overflow: hidden; display: flex; flex-direction: column;}
.fs__gongsoop .gongsoop__board .board__head{flex-shrink: 0; padding: 0 24px;}
.fs__gongsoop .gongsoop__board .board__head .board__reload{display: flex; align-items: center; gap: 2px; height: 30px; padding: 0 4px; border-radius: 4px;}
.fs__gongsoop .gongsoop__board .board__head .board__reload:active{background: rgba(0, 0, 0, .04)}
.fs__gongsoop .gongsoop__board .board__body .board__item{border-bottom: .1rem solid var(--sp-stroke-subtle);}
.fs__gongsoop .gongsoop__board .board__body{flex: 1; overflow: auto; padding: 0 24px 24px 24px;}
.fs__gongsoop .gongsoop__board .board__body .board__more{margin-top: 20px;}

.sp__status--graph{background: #C2CAD6; width: 1052px; height: 24px; position: relative; }
.sp__status--graph > .status__bar{animation: graph-value 1.4s .5s cubic-bezier(0.22, 1, 0.36, 1) forwards; background: linear-gradient(90deg, #00DAFC 0%, #00B9FC 16%, #06BAB3 32%, #0BBA79 50%, #0EBA5D 68%, #00863D 84%, #00210F 100%) no-repeat left top / 1052px auto; width: 0; height: 100%; position: relative; overflow: hidden;}
.sp__status--graph > .status__bar::after{animation: shine 4s 2s linear infinite; content: ""; position: absolute; top: 0; left: -150%; width: 150%; height: 100%; background: linear-gradient(80deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.25) 55%, rgba(255,255,255,0) 70%);}

.fs__intro{min-height: calc(100dvh - 71px); text-align: center;}
.fs__intro::after{content: ""; display: inline-block; height: 100%; vertical-align: middle;}
.fs__intro .intro__inner{display: inline-block; width: 430px; margin: 0 auto; vertical-align: middle;}
.fs__intro .fs__intro--img > div img:not(.intro__ani){width: 274px; height: 314px;}
.fs__intro .fs__intro--img > div{display: inline-block; border-radius: 24px; overflow: hidden; font-size: 0; width: 274px; height: 314px; position: relative;}
.fs__intro .fs__intro--img > div .intro__ani{position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 274px; height: 314px}

.fs__page--header{display: flex; justify-content: center; align-items: center; background: #CCEFFF; height: 224px;}
.fs__title{position: relative;}
.fs__title .fs__title--shadow{position: absolute; top: -50px; left: 50%; transform: translateX(-50%); z-index: -1;}
.fs__title > *{position: relative; z-index: 1;}

.prediction__level li{display: flex; align-items: center; height: 73px; padding: 0 16px; border-radius: 12px;} 
.prediction__level li > div{display: flex; align-items: center; gap: 12px;}
.prediction__level li > div > .level__thumb{flex-shrink: 0;}
.prediction__level li > div > .level__thumb{flex-shrink: 0;}
.prediction__level li.active{background: var(--sp-brand-primary-subtle); border: 1px solid var(--text-brand);}

.fs__chart{display: flex; flex-direction: column; gap: 12px;}
.fs__chart .chart__item{display: flex; flex-direction: column; gap: 4px;}
.fs__chart .chart__item .chart__tit{display: flex; align-items: center; gap: 8px; color: var(--sp-text-subtle); font-size: 15px; font-weight: 500; line-height: 150%; letter-spacing: -0.15px;}
.fs__chart .chart__item .chart__tit p{color: #121212;}
.fs__chart .chart__item .chart__bar{display: flex; justify-content: center; align-items: center; background: #E2E5EF; width: var(--chart-per, 100%); height: 32px; font-size: 14px; font-weight: 600; letter-spacing: -0.14px; color: #000; border-radius: 8px;}
.fs__chart .chart__item .chart__tit p{color: var(--text-brand);}
.fs__chart .chart__item.active .chart__bar{background: var(--text-brand); color: #fff;}

.fs__analysis .sp__typo--heading18 .analysis__counter2{vertical-align: 1px;}

/* 1. 파이어폭스 전용 (표준 속성) */
.fs__gongsoop :is(textarea, .gongsoop__list, .gongsoop__board .board__body) {
  scrollbar-width: thin; /* 막대 두께: auto, thin, none */
  scrollbar-color: #c1c1c1 transparent; /* 막대색상, 배경색상(투명) */
}

/* 2. 크롬, 사파리, 최신 엣지 (WebKit 속성) */

/* 스크롤바 전체 너비 설정 */
.fs__gongsoop :is(textarea, .gongsoop__list, .gongsoop__board .board__body)::-webkit-scrollbar {
  width: 10px;  /* 세로 스크롤바 너비 */
  height: 10px; /* 가로 스크롤바 높이 */
}

/* 스크롤바 배경(트랙) - 투명하게 설정 */
.fs__gongsoop :is(textarea, .gongsoop__list, .gongsoop__board .board__body)::-webkit-scrollbar-track {
  background: transparent;
}

/* 스크롤바 막대(핸들) */
.fs__gongsoop :is(textarea, .gongsoop__list, .gongsoop__board .board__body)::-webkit-scrollbar-thumb {
  background-color: #c1c1c1; /* 막대 색상 */
  border-radius: 10px;    /* 막대 굴곡 */
  border: none;           /* 보더 제거 */
}

/* 마우스를 올렸을 때 막대 색상 변경 */
.fs__gongsoop :is(textarea, .gongsoop__list, .gongsoop__board .board__body)::-webkit-scrollbar-thumb:hover {
  background-color: #c1c1c1;
}

/* 퀵메뉴 */
.fs__quick{position: fixed; bottom: 20px; left: 0; width: 100%; padding: 0 20px; z-index: 98; pointer-events: none;}
.fs__quick > div{width: 100%; max-width: 1570px; margin: 0 auto; text-align: right;}
.fs__quick .quick__box{position: relative; display: inline-block; background: #fff; width: 200px; pointer-events: all; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 20px; overflow: hidden;}
.fs__quick .quick__box .quick__trigger{display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 0 16px;}
.fs__quick .quick__box .quick__trigger span{color: inherit !important;}
.fs__quick .quick__box .quick__trigger i{color: var(--sp-icon-default); width: 24px; height: 24px;}
.fs__quick .quick__box .quick__menu{display: none; width: 168px; margin: 0 auto; border-top: 1px solid var(--sp-stroke-subtle);}
.fs__quick .quick__box.active .quick__menu{display: block;}
.fs__quick .quick__box.active .quick__menu li a{display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 14px 0;}
.fs__quick .quick__box.active .quick__menu li a span{position: relative;}
.fs__quick .quick__box.active .quick__menu li a.new span::after{content: ""; position: absolute; top: -1px; left: calc(100% + 1px); background: #FF4542; width: 4px; height: 4px; border-radius: 40px;}

.fs__quick .quick__box:not(.active){border-radius: 30px;}
.fs__quick .quick__box:not(.active) .quick__trigger{background: var(--sp-icon-default); color: #fff;}
.fs__quick .quick__box:not(.active) .quick__trigger i{color: inherit; transform: rotate(180deg);}

/* 게시판 */
.fs__notice .notice__item .item__head i{vertical-align: -2px;}
.fs__notice .notice__item:last-child .item__body{margin-bottom: 16px;}
.fs__notice .notice__item:not(.active) + .notice__item{border-top: 1px solid var(--sp-stroke-subtle)}
.fs__notice .notice__item:not(.active) .item__body{display: none;}

/* 합격예측 PC: 등급 탭 라벨 한 줄, 4탭(확실/유력/가능/도전) 항상 동일 레이아웃 */
.fs__prediction .fs__prediction-grade-nav {
    flex-wrap: nowrap;
}
.fs__prediction .fs__prediction-grade-nav > li {
    white-space: nowrap;
    flex: 1 1 0;
    min-width: 0;
}

/* 합격예측 PC: 좌·우 열 높이 맞춤 → 우측 리스트가 남는 세로 공간까지 확장 */
.fs__prediction .sp__layout.gap-20.sp__box--border {
    align-items: stretch;
}
.fs__prediction .sp__layout.gap-20.sp__box--border > .flex-1 {
    min-height: 0;
}
.fs__prediction .fs__prediction-rank-col {
    min-height: 0;
}
.fs__prediction .fs__prediction-rank-col > .fs__nav--full {
    flex-shrink: 0;
}
.fs__prediction .fs__prediction-rank-col > ul.cn-tab {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}
.fs__prediction .fs__prediction-rank-col .cn-tab > li {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.fs__prediction .fs__prediction-rank-col #rank-list-pc {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.fs__prediction .fs__prediction-rank-col .fs__prediction-rank-scroll {
    flex: 1 1 auto;
    min-height: 280px;
    max-height: none;
    overflow-y: auto;
}
.fs__prediction .fs__main--list .list__item .item__number {
    min-width: 24px;
    flex-shrink: 0;
}

/* 강의 */
.fs__lecture--list{border: 1px solid var(--sp-stroke-default); border-radius: 1.2rem; padding: 4px 20px;}
.fs__lecture--list .lecture__item{display: flex; align-items: center; gap: 16px; padding: 20px 0;}
.fs__lecture--list .lecture__item + .lecture__item{border-top: 1px solid var(--sp-stroke-subtle)}
.fs__lecture--list .lecture__item .item__thumb{flex-shrink: 0; width: 64px; height: 64px; border-radius: 12px; overflow: hidden;}
.fs__lecture--list .lecture__item .item__thumb img{width: 100%;}
.fs__lecture--list .lecture__item .item__info{flex: 1; display: flex; flex-direction: column; gap: 6px; overflow: hidden;}
.fs__lecture--list .lecture__item .item__btns{flex-shrink: 0; display: flex; align-items: center; gap: 8px;}
/* 합격예측 PC: 등급 탭 라벨 한 줄, 4탭(확실/유력/가능/도전) 항상 동일 레이아웃 */
.fs__prediction .fs__prediction-grade-nav {
    flex-wrap: nowrap;
}
.fs__prediction .fs__prediction-grade-nav > li {
    white-space: nowrap;
    flex: 1 1 0;
    min-width: 0;
}

/* 합격예측 PC: 좌·우 열 높이 맞춤 → 우측 리스트가 남는 세로 공간까지 확장 */
.fs__prediction .sp__layout.gap-20.sp__box--border {
    align-items: stretch;
}
.fs__prediction .sp__layout.gap-20.sp__box--border > .flex-1 {
    min-height: 0;
}
.fs__prediction .fs__prediction-rank-col {
    min-height: 0;
}
.fs__prediction .fs__prediction-rank-col > .fs__nav--full {
    flex-shrink: 0;
}
.fs__prediction .fs__prediction-rank-col > ul.cn-tab {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}
.fs__prediction .fs__prediction-rank-col .cn-tab > li {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.fs__prediction .fs__prediction-rank-col #rank-list-pc {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.fs__prediction .fs__prediction-rank-col .fs__prediction-rank-scroll {
    flex: 1 1 auto;
    min-height: 280px;
    max-height: none;
    overflow-y: auto;
}
.fs__prediction .fs__main--list .list__item .item__number {
    min-width: 24px;
    flex-shrink: 0;
}

/* 지역비교 PC: 분석 중 로딩 (모바일 .fs__loading과 분리 — 가운데 정렬·테두리 패널) */
.fs__comparison .fs__loading--comparison-pc {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 24px 48px;
    box-sizing: border-box;
}
.fs__comparison .fs__loading--comparison-pc__inner {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    background: #fff;
}

/* 퀵배너 */
.fs__analysis,.fs__prediction{position: relative}
.fs__custom--quick{position: absolute; top: 125px; left: 50%; margin-left: 590px; z-index: 10; pointer-events: none; height: 100%; width: 120px;}
.fs__custom--quick ul{display: flex; flex-direction: column; gap: 12px; position: sticky; top: 20px; left: 0; pointer-events: all;}
.fs__custom--quick ul > li a{display: block; border-radius: 8px; overflow: hidden;}
.fs__custom--quick ul > li a img{width: 100%; border-radius: 8px;}