@import url('form.css');
@import url('table.css');
@import url('view.css');
@import url('chat.css');
@import url('fullservice.css');

:root {
    --border-radius-s: .4rem;
    --border-radius-m: .8rem;
    --border-radius-l: 1.2rem;
}

textarea{resize: none;}
body{height: auto; font-family: var(--font-pr);}
em{font-style: normal}

body.no-scroll{overflow: hidden;}

/* Animation */
@keyframes ani__flip1 {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
}

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

@keyframes ani__flip2 {
    0% {transform: translate(0, 0);}
    100% {transform: translate(2.4rem, 0);}
}

/* 공통 active 효과 */
.sp__paging .paging__box a:not(.active):active::before,
[class*=sp__select--box]:active::before,
[class*=sp__dropdown--icon]:active::before,
[class*=sp__dropdown--btn]:active::before,
[class*=sp__btn--]:active::before{content: ""; background: rgba(0, 0, 0, .04); position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none;}

/* S:footer */
.gongsoop__container:not(:has(.sp__form--bottom)) .sp__footer{margin-top: 5rem;}
.gongsoop__container:has(.sp__container > .sp__form) .sp__footer .footer-area,
.gongsoop__container:has(.sp__container > .sp__view) .sp__footer .footer-area {display: none;}
.gongsoop__container:has(.event-contents) .sp__footer{margin-top: 0;}
.sp__footer{margin-top:auto; font-family: var(--font-no);}
.sp__footer > section{background: var(--white);border-top:.1rem solid var(--gray-10);padding:3rem 1.6rem 5rem;display:flex;flex-direction: column;gap:1.6rem 0;}
.sp__footer .fnb-nav{display: flex; gap:0 2rem;}
.sp__footer .fnb-nav a{font-size: 1.3rem;color: var(--gray-100);line-height:1.4;letter-spacing: -.03em;position:relative;}
.sp__footer .fnb-nav a:not(:first-child)::before{content:'';position:absolute;top:50%;left:-1rem;width: 0.1rem;height: 0.6rem;background-color:var(--gray-40);transform: translateY(-50%);}
.sp__footer .fnb-nav a b{color:var(--gray-100);}
.sp__footer .fnb-family .sel-box:not(._txt) {width: 14rem;height: 3rem;font-size: 1.1rem;color: var(--gray-60);border-color: var(--gray-20);background-size:3rem 3rem;background-position-x: right; padding: 0 4.7rem 0 .8rem; background: url('/gongsoop/img/icon/icon_arrow_down_s.svg') no-repeat center right .8rem; appearance: none;}
.sp__footer .fnb-company{color:var(--gray-60);font-size: 1.2rem;line-height:1.4;display:flex;flex-direction:column; gap: .5rem}
.sp__footer .fnb-company .company-name{font-size: 1.2rem;}
.sp__footer .fnb-company li{display:flex;align-items:center;line-height: 1.5rem;}
.sp__footer .fnb-company li:has(span){gap:0 .8rem;}
.sp__footer .fnb-company li:has(a){gap: .4rem}
.sp__footer .fnb-company li a{color:var(--gray-60);}
.sp__footer .fnb-notice{padding: 1.6rem 0;border-top: 0.1rem solid var(--gray-10);background: var(--white);}
.sp__footer .fnb-notice .notice_slider{height: 2.3rem;}
.sp__footer .fnb-notice .notice_slider li a{display: flex;gap: 1.6rem;justify-content: left;align-items: center;}
.sp__footer .fnb-notice strong{flex-shrink: 0;max-width: 50%;color: var(--black);font-size: 1.4rem;line-height: 150%;letter-spacing: -0.028rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.sp__footer .fnb-notice .notice_slider span{flex-grow: 1;color: #333D4B;font-size: 1.4rem;line-height: 150%;letter-spacing: -0.042rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.sp__footer .fnb-sns{display: flex;justify-content: center;align-items: center;gap: 0.5rem;}
.sp__footer .fnb-sns a{display: block;padding: 0.7rem;background: #F2F3F5;border-radius: 1.9rem;overflow: hidden;}
.sp__footer .fnb-sns img{display: block;width: 2.4rem;height: 2.4rem;}
.sp__footer .fnb-sns a:last-child{padding: 0.9rem;}
.sp__footer .fnb-sns a:last-child img{width: 2rem;height: 2rem;}
.sp__footer .fnb-link .btn-l {display: flex; align-items: center; justify-content: center; width: 100%;border: .1rem solid #EDEDF3; height: 4.8rem; border-radius: 1rem; font-size: 1.4rem; text-align: center;}
.sp__footer .fnb-link .btn-l .sp__ico--arrow_right_s {width: 1.7rem; height: 1.7rem;}

.footer-sticky{position:sticky;bottom:0;z-index: 10000;}
.footer-sticky .sticky-conts{position:relative;margin:0 auto;z-index:1;}
.footer-sticky .btn-wrap{position:absolute;bottom:2rem;right:1.6rem;display:flex;flex-direction:column;gap:.8rem;}
.footer-sticky .btn-wrap :is(button,a){width: 4rem;height: 4rem;display: flex;justify-content: center;align-items: center;border-radius: 2.2rem;border: 0.05rem solid var(--gray-30);background:rgba(255,255,255,.8);backdrop-filter: blur(.2rem);}
.footer-sticky .btn-wrap :is(button,a) .ico{width:2rem;overflow:hidden;text-indent:300%;white-space: nowrap;}
.footer-sticky .btn-wrap :is(button,a)._color{background-color:var(--black-dim-80);}
.footer-sticky .btn-wrap :is(button,a)._color .ico::before{background-color:var(--white);}
.footer-sticky .btn-wrap :is(button,a)._txt{font-size: 1.1rem;}
.footer-sticky .btn-wrap :is(button, a)._circle{border:.2rem solid var(--blue-70);}

.footer-toolbar{bottom:0;}
.footer-toolbar .toolbar-menu{display:grid;grid-template-columns:repeat(5, 1fr);border-top:.1rem solid var(--gray-20);background-color:var(--white);height: 6rem;align-items:center; }
.footer-toolbar .toolbar-menu div{display:flex;justify-content:center;}
.footer-toolbar .toolbar-menu :is(button,a){display:flex;align-items:center;justify-content: center;flex-direction:column;gap: 0.2rem;}
.footer-toolbar .toolbar-menu :is(button,a) .ico{display:block;width:2.4rem;}
.footer-toolbar .toolbar-menu :is(button,a) .ico::before{background-color:var(--gray-60);}
.footer-toolbar .toolbar-menu :is(button,a) p{font-size: 1.2rem;line-height: 140%;color:var(--gray-60);}
.footer-toolbar .toolbar-menu .active :is(button,a) .ico::before{background-color:var(--gray-100);}
.footer-toolbar .toolbar-menu .active :is(button,a) p{color:var(--gray-100);}
/* E:footer */

/* S:밑에서 올라오는 레이어 */
@keyframes ani-modal-bottom-hide {
    0% {bottom: 1.6rem;opacity:1;}
    100% {bottom: -400%;opacity:0;}
}
@keyframes ani-modal-bottom-show {
    0% {transform: translateY(100%);}
    100% {transform: translateY(0);}
}
@keyframes ani-modal-top-hide {
    0% {transform: translateY(0);}
    100% {transform: translateY(-100%);}
}
@keyframes ani-modal-top-show {
    0% {transform: translateY(-100%);}
    100% {transform: translateY(0);}
}

.modal-bottom-no-scroll{overflow:hidden;}
.modal-bottom-wrap{position:fixed;top:0;bottom:0;left:0;right:0;background-color:rgba(0, 0, 0, 0.4);;z-index:99999;overflow:hidden;align-items:flex-end;width:100%;height:100dvh;max-width:100%;max-height:100dvh;display:none;}
.modal-bottom-wrap.action{display:flex;}
.modal-bottom-wrap.action .modal-body{animation:ani-modal-bottom-show .5s both;}
.modal-bottom-wrap.__type_top{align-items: start; top: calc(5rem + .1rem);}
.modal-bottom-wrap.__type_top .modal-body{border-radius: 0rem 0rem .8rem .8rem;transform: translateY(-100%);}
.modal-bottom-wrap.__type_top .modal-body.show{animation:ani-modal-top-show .5s both;}
.modal-bottom-wrap.__type_top .modal-body.hide{animation: ani-modal-top-hide .5s both;}
.modal-body{background-color:var(--white);width:100%;border-radius:.8rem .8rem 0rem 0rem;padding:1.6rem;display:flex;flex-direction:column;position:relative;max-height:calc(100% - 8rem);min-height:min(auto, calc(100% - 8rem));}
.modal-head-area{display:flex;align-items:center;min-height:5rem;}
.modal-head-area h1.tit{font-size:1.8rem;font-weight:700;line-height: 150%;letter-spacing:-0.025em;flex-grow:1;max-width:calc(100% - 3.6rem);}
.modal-head-area :is(button, a){margin-left:auto;white-space:nowrap;overflow:hidden;text-indent:300%;width:2.4rem;}
.modal-conts-area{width:100%;min-height:min(29.8rem, calc(100% - 5rem));height:calc(100% - 5rem);max-height:calc(100% - 5rem);display:flex;flex-direction:column;flex-grow:1;}
.modal-conts-area .modal-scroll{flex-grow:1;width:100%;overflow:hidden;overflow-y:auto;min-height:min(29.8rem, calc(100% - 6rem));max-height:min(56.9rem, calc(100% - 6rem));}
.modal-btn-area{margin-top:auto;order:999;padding:1.2rem 0 0;display:flex;gap:.8rem;width:100%;height:6rem;position:relative;}
.modal-btn-area > *:is(button,a){flex-grow:1; width:calc(50% - .4rem);}
/* E:밑에서 올라오는 레이어 */

/* 필요한 icon */
.sp__bottom--modal .ico {position: relative;}
.sp__bottom--modal .ico::before {content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; display: block; background-color: var(--gray-60); -webkit-mask-size: 100%; mask-size: 100% auto; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; aspect-ratio: 1 / 1;}
.sp__bottom--modal .ico.ico_close::before {-webkit-mask-image: url('/gongsoop/img/icon/icon_close.svg');mask-image: url('/gongsoop/img/icon/icon_close.svg');}

/* input radio */
input[type=radio]{all: unset; appearance: none; background: var(--icon-disabled, #E0E3EB); flex-shrink: 0;}
input[type=radio]:checked{}

input[type=radio].sp__radio{all: unset; appearance: none; background: url('/gongsoop/img/icon/icon_radio_off.svg') no-repeat center center / 2.4rem 2.4rem; width: 2.4rem; height: 2.4rem;} 
input[type=radio].sp__radio:checked{background: url('/gongsoop/img/icon/icon_radio_on.svg') no-repeat center center / 2.4rem 2.4rem;}

/* 체크박스 모양 radio */
input[type=radio]{all: unset; appearance: none; background: var(--gray-50, #A4B1C1); width: 2.4rem; height: 2.4rem; mask-size: 100% auto; mask-position: center center; -webkit-mask-image: url('/un_static/img/common/spium/icon/icon_checkbox_off.svg'); mask-image: url('/un_static/img/common/spium/icon/icon_checkbox_off.svg'); flex-shrink: 0;}
input[type=radio]:checked{background: var(--sp-primary, #6101D9); -webkit-mask-image: url('/un_static/img/common/spium/icon/icon_checkbox_on.svg'); mask-image: url('/un_static/img/common/spium/icon/icon_checkbox_on.svg');}

/* input checkbox */
/* input[type=checkbox]{all: unset; appearance: none; background: var(--gray-50, #A4B1C1); width: 2.4rem; height: 2.4rem; mask-size: 100% auto; mask-position: center center; -webkit-mask-image: url('/gongsoop/img/icon/icon_checkbox_off.svg'); mask-image: url('/gongsoop/img/icon/icon_checkbox_off.svg'); flex-shrink: 0;} */
/* input[type=checkbox]:checked{-webkit-mask-image: url('/gongsoop/img/icon/icon_checkbox_on.svg'); mask-image: url('/gongsoop/img/icon/icon_checkbox_on.svg');} */
input[type=checkbox]{all: unset; display: inline-block; appearance: none; background: url('/gongsoop/img/icon/icon_checkbox_off.svg') no-repeat center center / 2.4rem 2.4rem; width: 2.4rem; height: 2.4rem;} 
input[type=checkbox]:checked{background: url('/gongsoop/img/icon/icon_checkbox_on.svg') no-repeat center center / 2.4rem 2.4rem;}

/* mo 공통 */
.sp__container{min-height: 50rem;}
.sp_service a:hover,
.sp_service a:focus {text-decoration: none;}
.sp_service .sp__contents:has(.sp__bottom--fixed){padding-bottom: 10rem !important;}
.modal-bottom-wrap .modal-body{max-height: 64rem;}

.px-2{padding-left:.2rem !important; padding-right:.2rem !important;}
.py-2{padding-top:.2rem !important; padding-bottom:.2rem !important;}
.px-3{padding-left:.3rem !important; padding-right:.3rem !important;}
.py-3{padding-top:.3rem !important; padding-bottom:.3rem !important;}
.px-4{padding-left:.4rem !important; padding-right:.4rem !important;}
.py-4{padding-top:.4rem !important; padding-bottom:.4rem !important;}
.px-5{padding-left:.5rem !important; padding-right:.5rem !important;}
.py-5{padding-top:.5rem !important; padding-bottom:.5rem !important;}
.px-6{padding-left:.6rem !important; padding-right:.6rem !important;}
.py-6{padding-top:.6rem !important; padding-bottom:.6rem !important;}
.px-8{padding-left:.8rem !important; padding-right:.8rem !important;}
.py-8{padding-top:.8rem !important; padding-bottom:.8rem !important;}
.px-10{padding-left:1rem !important; padding-right:1rem !important;}
.py-10{padding-top:1rem !important; padding-bottom:1rem !important;}
.px-12{padding-left:1.2rem !important; padding-right:1.2rem !important;}
.py-12{padding-top:1.2rem !important; padding-bottom:1.2rem !important;}
.px-14{padding-left:1.4rem !important; padding-right:1.4rem !important;}
.py-14{padding-top:1.4rem !important; padding-bottom:1.4rem !important;}
.px-16{padding-left:1.6rem !important; padding-right:1.6rem !important;}
.py-16{padding-top:1.6rem !important; padding-bottom:1.6rem !important;}
.px-18{padding-left:1.8rem !important; padding-right:1.8rem !important;}
.py-18{padding-top:1.8rem !important; padding-bottom:1.8rem !important;}
.px-20{padding-left:2rem !important; padding-right:2rem !important;}
.py-20{padding-top:2rem !important; padding-bottom:2rem !important;}
.px-24{padding-left:2.4rem !important; padding-right:2.4rem !important;}
.py-24{padding-top:2.4rem !important; padding-bottom:2.4rem !important;}
.px-28{padding-left:2.8rem !important; padding-right:2.8rem !important;}
.py-28{padding-top:2.8rem !important; padding-bottom:2.8rem !important;}
.px-30{padding-left:3rem !important; padding-right:3rem !important;}
.py-30{padding-top:3rem !important; padding-bottom:3rem !important;}
.px-40{padding-left:4rem !important; padding-right:4rem !important;}
.py-40{padding-top:4rem !important; padding-bottom:4rem !important;}

.gap-2{gap: .2rem !important;}
.gap-3{gap: .3rem !important;}
.gap-4{gap: .4rem !important;}
.gap-6{gap: .6rem !important;}
.gap-8{gap: .8rem !important;}
.gap-10{gap: 1rem !important;}
.gap-12{gap: 1.2rem !important;}
.gap-14{gap: 1.2rem !important;}
.gap-16{gap: 1.6rem !important;}
.gap-20{gap: 2rem !important;}
.gap-24{gap: 2.4rem !important;}
.gap-30{gap: 3rem !important;}
.gap-40{gap: 4rem !important;}
.gap-60{gap: 6rem !important;}

.size-4{width: .4rem !important; height: .4rem !important;}
.size-5{width: .5rem !important; height: .5rem !important;}
.size-6{width: .6rem !important; height: .6rem !important;}
.size-7{width: .7rem !important; height: .7rem !important;}
.size-8{width: .8rem !important; height: .8rem !important;}
.size-10{width: 1rem !important; height: 1rem !important;}
.size-12{width: 1.2rem !important; height: 1.2rem !important;}
.size-14{width: 1.4rem !important; height: 1.4rem !important;}
.size-16{width: 1.6rem !important; height: 1.6rem !important;}
.size-20{width: 2.0rem !important; height: 2.0rem !important;}
.size-24{width: 2.4rem !important; height: 2.4rem !important;}
.size-28{width: 2.8rem !important; height: 2.8rem !important;}
.size-28{width: 2.8rem !important; height: 2.8rem !important;}
.size-30{width: 3.0rem !important; height: 3.0rem !important;}
.size-32{width: 3.2rem !important; height: 3.2rem !important;}
.size-40{width: 4.0rem !important; height: 4.0rem !important;}
.size-50{width: 5rem !important; height: 5rem !important;}

i[class*=sp__ico--] {position: relative; display: inline-block; width: 2.4rem; height: 2.4rem;}
.sp__ico--spium_symbol{width: 1.7rem; height: 1.7rem;}
i.sp__ico--new{width: 1.6rem; height: 1.6rem;}
i.sp__ico--new::after{background-size:100%;}
.sp__ico--arrow_up_s::after,
.sp__ico--arrow_down_s::after,
.sp__ico--arrow_left_s::after,
.sp__ico--arrow_right_s::after{width: 1.2rem;}
i.sp__ico--dot{width: 1.2rem; height: 1.2rem;}
i.sp__ico--dot::after{width: .6rem; height: 1.2rem;}

/* 페이지 인트로 이미지 */
.sp__header--intro{overflow: hidden; height: 14.1rem; display: flex; justify-content: center; background: #000;}
.sp__header--intro img{height: 100%; max-width: unset;}

.sp__quick--btns{position:fixed; right: 1.6rem; left: auto; bottom: 2.4rem; display: flex; flex-direction: column; gap: .8rem; padding: 0; z-index: 20; background: none; opacity: 0;  transition: all 0.3s ease;}
.sp__quick--btns.active {opacity: 1; transition: all 0.3s ease;}
.sp__quick--btns a{width: 4rem; height: 4rem; display: flex; justify-content: center; align-items: center; border-radius: 100%; box-shadow: 0 .4rem .6rem 0 rgba(0, 0, 0, 0.08); border: .1rem solid #E0E3EB;}
.sp__quick--btns a.btn--write{background: rgba(0, 0, 0, 0.80);}
.sp__quick--btns a.btn--write i{width: 2rem; height: 2rem;}
.sp__quick--btns a.btn--write i::after{background-color: #fff;}
.sp__quick--btns a.btn--top{background: #fff;}
.sp__quick--btns a.btn--top i{width: 2.4rem; height: 2.4rem;}
.sp__quick--btns a.btn--top i::after{background-color: #5C6675;}

/* @ LAYOUT */
.sp_service hr{background: var(--gray-10); height: 1rem; border: 0; border-top: .1rem solid var(--gray-20);}
[class*=sp__layout]{display: flex;justify-content: space-between;gap: 2rem; flex-wrap: wrap; width: 100%;}
[class*=sp__layout][class*=--column]{flex-direction: column; justify-content: start;}
.sp__layout--column > div:not(.sp__inner){width:100%;}
.sp__layout--column--start{align-items: start;}
.sp__layout[class*=gap-] {justify-content: start; width: auto;}
.sp__layout > .sp__layout{width: auto;}

.sp__inner{margin: 0 auto; padding: 0 1.6rem; position: relative; width: 100%;}
.sp__inner.pd-0{padding: 0;}

[class*=sp__box]{background: #fff; border-radius: var(--border-radius-m, .8rem); overflow: hidden;}
[class*=sp__box][class*=--border] { border: .1rem solid var(--gray-30, #E0E3EB); }
[class*=sp__box][class*=--bg] {background: var(--bg-secondary);}
[class*=sp__box][class*=--shadow]{box-shadow: 0 .4rem 1.2rem 0 rgba(0, 0, 0, 0.08);}
[class*=sp__box][class*=--gradient] {position:relative; background: var(--Light, linear-gradient(147deg, #EAFDE7 44.12%, #BBEAFE 124.14%));}
[class*=sp__box][class*=--gradient][class*=--brand]{background: linear-gradient(103deg, #2EEA83 -9.82%, #00ECD9 79.23%, #036BFB 125.85%);}
[class*=sp__box][class*=--brand]{background: var(--brand-primary-5); border-color: var(--brand-primary-10);}

[class*=sp__box][class*=--empty]{display: flex; justify-content: center; align-items: center; height: 36rem; text-align: center;}
[class*=sp__box][class*=--empty] [class*=sp__layout][class*=--column]{width: auto; align-items: center;}
/* [class*=sp__box][class*=--empty] p{background: url('/un_static/img/common/spium/empty_label_m.png') no-repeat center top / 8rem auto; padding-top: 9.1rem;} */
/* // @ LAYOUT */

/* @ TEXT */
[class*=sp__typo--]{font-family: var(--font-pr); color: var(--text-primary);}
[class*=sp__typo][class*=--normal]{line-height: normal;}
[class*=sp__typo--display]{font-weight: 700 !important;}
[class*=sp__typo--display28]{font-size: 2.8rem !important; line-height: 4.2rem; letter-spacing: -0.024rem;}
[class*=sp__typo--display24]{font-size: 2.4rem !important; line-height: 4rem; letter-spacing: -0.024rem;}

[class*=sp__typo--heading]{font-weight: 700 !important;}
[class*=sp__typo--heading30]{font-size: 3rem !important; line-height: 150%; letter-spacing: -0.03rem;}
[class*=sp__typo--heading28]{font-size: 2.8rem !important; line-height: 150%; letter-spacing: 0;}
[class*=sp__typo--heading24]{font-size: 2.4rem !important; line-height: 150%; letter-spacing: -0.024rem;}
[class*=sp__typo--heading22]{font-size: 2.2rem !important; line-height: 150%; letter-spacing: 0;}
[class*=sp__typo--heading20]{font-size: 2rem !important; line-height: 150%; letter-spacing: 0;}
[class*=sp__typo--heading18]{font-size: 1.8rem !important; line-height: 150%; letter-spacing: 0;}
[class*=sp__typo--heading16]{font-size: 1.6rem !important; line-height: 145%; letter-spacing: 0;}
[class*=sp__typo--heading15]{font-size: 1.5rem !important; line-height: 145%; letter-spacing: -0.015rem;}
[class*=sp__typo--heading14]{font-size: 1.4rem !important; line-height: 145%; letter-spacing: -0.014rem;}
[class*=sp__typo--heading13]{font-size: 1.3rem !important; line-height: 1.82rem; letter-spacing: -0.013rem;}
[class*=sp__typo--heading12]{font-size: 1.2rem !important; line-height: 1.716rem; letter-spacing: -0.12rem;}
[class*=sp__typo--heading11]{font-size: 1.1rem !important; line-height: 1.573rem; letter-spacing: -0.11rem;}

[class*=sp__typo--title]{font-weight: 600 !important;}
[class*=sp__typo--title16]{font-size: 1.6rem !important; line-height: 150%; letter-spacing: -0.016rem;}
[class*=sp__typo--title15]{font-size: 1.5rem !important; line-height: 150%; letter-spacing: -0.015rem;}
[class*=sp__typo--title14]{font-size: 1.4rem !important; line-height: 140%; letter-spacing: -0.014rem;}
[class*=sp__typo--title13]{font-size: 1.3rem !important; line-height: 140%; letter-spacing: -0.013rem;}
[class*=sp__typo--title12]{font-size: 1.2rem !important; line-height: 1.71rem; letter-spacing: -0.012rem;}
[class*=sp__typo--title11]{font-size: 1.1rem !important; line-height: 1.7rem; letter-spacing: -0.011rem;}

[class*=sp__typo--subtitle]{font-weight: 500 !important;}
[class*=sp__typo--subtitle16]{font-size: 1.6rem !important; line-height: 150%; letter-spacing: -0.016rem;}
[class*=sp__typo--subtitle15]{font-size: 1.5rem !important; line-height: 150%; letter-spacing: -0.015rem;}
[class*=sp__typo--subtitle14]{font-size: 1.4rem !important; line-height: 145%; letter-spacing: -0.014rem;}
[class*=sp__typo--subtitle13]{font-size: 1.3rem !important; line-height: 145%; letter-spacing: -0.013rem;}
[class*=sp__typo--subtitle12]{font-size: 1.2rem !important; line-height: 1.71rem; letter-spacing: -0.012rem;}
[class*=sp__typo--subtitle11]{font-size: 1.1rem !important; line-height: 1.7rem; letter-spacing: -0.011rem;}

[class*=sp__typo--body]{font-weight: 400 !important;}
[class*=sp__typo--body17]{font-size: 1.7rem !important; line-height: 2.7rem; letter-spacing: -0.034rem;}
[class*=sp__typo--body16]{font-size: 1.6rem !important; line-height: 160%; letter-spacing: -0.016rem;}
[class*=sp__typo--body15]{font-size: 1.5rem !important; line-height: 160%; letter-spacing: -0.03rem;}
[class*=sp__typo--body14]{font-size: 1.4rem !important; line-height: 160%; letter-spacing: -0.014rem;}
[class*=sp__typo--body13]{font-size: 1.3rem !important; line-height: 160%; letter-spacing: -0.013rem;}
[class*=sp__typo--body12]{font-size: 1.2rem !important; line-height: 160%; letter-spacing: -0.012rem;}
[class*=sp__typo--body11]{font-size: 1.1rem !important; line-height: 1.57rem; letter-spacing: -0.011rem;}

[class*=sp__typo--caption]{font-weight: 700 !important;}
[class*=sp__typo--caption12]{font-size: 1.2rem !important; line-height: 143%; letter-spacing: -0.012rem;}
[class*=sp__typo--caption11]{font-size: 1.1rem !important; line-height: 143%; letter-spacing: -0.011rem;}

/* @ RADIUS */
.sp__radius--l{border-radius: 1.2rem !important;}
.sp__radius--m{border-radius: .8rem !important;}
.sp__radius--s{border-radius: .4rem !important;}
.sp__radius--0{border-radius: 0 !important;}
.sp__radius--full{border-radius: 10rem !important;}
/* //  @ RADIUS */

/* BUTTON */
/* 버튼 여러개 flex 정렬시 sp__btns로 묶음 */
.sp__btns{display: flex; align-items: center; flex-wrap: wrap; gap: 0 .8rem;}
.sp__btns > [class*=sp__btn--]{flex: 1; min-width: 0; width: auto !important;}

/* button type 필수 */
[class*=sp__btn--]{display: flex; justify-content: center; align-items: center; width: 100%; border-radius: var(--border-radius-m); gap: 0 .2rem; position: relative; overflow: hidden;}
[class*=sp__btn--]:hover{text-decoration: none;}
[class*=sp__btn--][class*=--full]{width: 100% !important;}
[class*=sp__btn--][class*=--auto]{width: auto !important;}

/* button style */
[class*=sp__btn--][class*=--basic] {border: .1rem solid var(--gray-30, #E0E3EB); color: var(--text-primary, #121212)}
[class*=sp__btn--][class*=--accent]{background: var(--gray-100, #121212); color: var(--white, #fff);}
[class*=sp__btn--][class*=--brand]{background: var(--brand-primary-10, #D5F6D6); color: var(--brand-primary, #0EBA5C);}
[class*=sp__btn--][class*=--green]{background: var(--text-brand, #0EBA5C); color: #fff;}
[class*=sp__btn--][class*=--primary]{background: var(--brand-primary-5, #EAFAEB); color: var(--brand-primary, #0EBA5C);}
[class*=sp__btn--][class*=--gray]{background: var(--bg-secondary, #F6F6F9); color: var(--text-primary, #121212)}

/* button size */
[class*=sp__btn--][class*=--small]{width: 4.3rem; height: 3rem; font-size: 1.3rem; font-weight: 600; line-height: 1.82rem; letter-spacing: -0.013rem;}
[class*=sp__btn--][class*=--medium]{width: 5.4rem; height: 3.6rem; font-size: 1.3rem; font-weight: 600; line-height: 1.82rem; letter-spacing: -0.013rem;}
[class*=sp__btn--][class*=--large]{width: 16rem; height: 4.4rem; font-size: 1.5rem; font-weight: 600; line-height: 2.1rem; letter-spacing: -0.015rem;}

/* radius large */
[class*=sp__btn--][class*=--radius]{border-radius: 100rem;}
[class*=sp__btn--][class*=--primary--radius]{border: .1rem solid var(--brand-primary, #0EBA5C);}

/* button disabled */
[class*=sp__btn--][class*=--accent].disabled{background: var(--bg-inactive) !important; color: #fff !important;}

/* TAB  */
[class*=sp__tab--]{display: inline-flex; width: 100%;}
[class*=sp__tab--] li{cursor: pointer; user-select: none;}
[class*=sp__tab--]:not(:is([class*=--round], [class*=--text], [class*=--line], [class*=--thumb])) > li{flex: 1;}
[class*=sp__tab--button] li{background: #fff; font-size: 1.3rem; color: var(--text-primary, #121212); border: .1rem solid var(--gray-30, #E0E3EB); border-left: 0; display:flex; justify-content: center; align-items: center;}
[class*=sp__tab--button] li:first-child{border-radius: var(--border-radius-m, .8rem) 0 0 var(--border-radius-m, .8rem); border-left: .1rem solid var(--gray-30, #E0E3EB);}
[class*=sp__tab--button] li:last-child{border-radius: 0 var(--border-radius-m, .8rem) var(--border-radius-m, .8rem) 0;}
[class*=sp__tab--button] li.active{background: var(--sp-background, #F6F0FF); color: var(--sp-primary, #6101D9); border: .1rem solid var(--sp-primary, #6101D9);}
[class*=sp__tab--button] li:has(+ .active){border-right: 0;}
[class*=sp__tab--button] li.active + li{border-left: 0;}
[class*=sp__tab--rounded]{width: auto; gap: .8rem;}
[class*=sp__tab--rounded] li{width: auto;}
[class*=sp__tab--rounded] ul > li > span, 
[class*=sp__tab--rounded] li{display: inline-block; background: var(--bg-secondary); color: var(--text-primary); width: auto; height: 3.2rem; line-height: 3.2rem; border-radius: 3rem; font-size: 1.4rem; font-weight: 500; padding: 0 1.2rem;}
[class*=sp__tab--rounded] ul > li.active > span,
[class*=sp__tab--rounded] li.active{background: var(--text-primary); color: #fff; font-weight: 700; border-color: var(--gray-100)}
[class*=sp__tab--rounded][class*=--white] > li > span,
[class*=sp__tab--rounded][class*=--white] > li{color:var(--white, #fff); border-color: var(--white, #fff); opacity: .7; background:none; font-weight: 400;}
[class*=sp__tab--rounded][class*=--white] > li.active > span,
[class*=sp__tab--rounded][class*=--white] > li.active{background: var(--white, #fff); color: var(--sp-primary, #6101D9); opacity: 1; font-weight: 700;}
[class*=sp__tab--line]{display: flex; gap: 1.6rem; position: relative;}
[class*=sp__tab--line]::after{content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); background: var(--gray-30); width: 100vw; height: .1rem; pointer-events: none; z-index: 0;}
[class*=sp__tab--line] > li{flex: none; display: flex; align-items: center; gap: .4rem; font-size: 1.6rem; font-weight: 600; color: var(--gray-50); padding-bottom: 1rem; position: relative; line-height: 2.4rem;}
[class*=sp__tab--line] > li i{width: 1.8rem; height: 1.8rem;}
[class*=sp__tab--line] > li i::after{background: var(--gray-50);}
[class*=sp__tab--line] > li.active{color: var(--text-primary);}
[class*=sp__tab--line] > li.active::after{content: ""; display: inline-block; position: absolute; bottom: 0; left: 0; background: var(--text-primary); width: 100%; height: .3rem; z-index: 1;}
[class*=sp__tab--line] > li.active i::after{background: var(--text-primary);}
[class*=sp__tab--thumb]{width: auto; gap: .8rem;}
[class*=sp__tab--thumb] li{background: #fff; color: var(--text-primary, #121212); border-radius: 10rem; font-size: 1.4rem; font-weight: 400; letter-spacing: -0.1.4rem; border: .1rem solid var(--gray-30, #E0E3EB); display: flex; flex-wrap: wrap; align-items: center; gap: 0 .8rem; padding: .8rem 1.2rem .8rem .8rem;; flex-shrink: 0; width: auto;}
[class*=sp__tab--thumb] li .tab--thumb{display:block; width: 3rem; height: 3rem; border-radius: 100%; overflow: hidden; background: var(--sp-teritary); flex-shrink: 0;}
[class*=sp__tab--thumb] li .tab--thumb img{width: 100%; height: 100%; object-fit: cover; object-position: center;}
[class*=sp__tab--thumb] li.active{color: var(--sp-primary); border-color: var(--sp-primary); background: var(--sp-background); font-weight: 600;}
[class*=sp__tab].swiper{gap:0;}

[class*=sp__tab][class*=--small]{height: 4rem;}
[class*=sp__tab][class*=--medium]{height: 4.4rem;}
[class*=sp__tab][class*=--medium] li{font-size: 1.5rem;}
[class*=sp__tab][class*=--large]{height: 5rem;}
[class*=sp__tab][class*=--large] li{font-size: 1.6rem}
[class*=sp__tab][class*=--large] li.active{font-weight: 600;}

/* 탭 슬라이더 */
.sp__tab--slider{display: flex; flex-direction: column; overflow: hidden;}
.sp__tab--slider > div{width: 100%;}
.sp__tab--slider .slider__nav:not(.swiper){display: flex;}
.sp__tab--slider .slider__nav:not(.swiper) > li{flex: 1;}
.sp__tab--slider .slider__nav:not(.swiper) > li:first-child{color: #fff;}
.sp__tab--slider .slider__nav{background: var(--bg-secondary); border-radius: 5rem; height: 4rem; padding: .2rem; position: relative;}
.sp__tab--slider .slider__nav li{display: flex; justify-content: center; align-items: center; z-index: 1; position: relative; transition: color .3s;}
.sp__tab--slider .slider__nav li span{color: var(--text-brand);}
.sp__tab--slider .slider__nav li.active{color: #fff;}
.sp__tab--slider .slider__nav li.active span{color: #fff; transition: color .4s;}
.sp__tab--slider .slider__nav::after{content: ""; background: var(--bg-inverse); position: absolute; top: .2rem; left: .2rem; width: calc(50% - .2rem); height: 3.6rem; border-radius: 5rem; z-index: 0; transition: left .3s;}
.sp__tab--slider .slider__nav:has(li:last-child.active)::after{left: 50%;}
.sp__tab--slider .slider__tab:not(.swiper){display: flex;}
.sp__tab--slider .slider__tab:not(.swiper) > li{width: 100%; flex-shrink: 0;}
.sp__tab--slider .swiper-pagination{font-size: 0; line-height: 0; position: static; margin: 0; margin-top: .8rem;}
.sp__tab--slider .swiper-pagination > span{background: var(--icon-secondary); width: .6rem; height: .6rem; opacity: .2; border-radius: 5rem; transition: .3s}
.sp__tab--slider .swiper-pagination > span[class*=active]{opacity: 1; width: 1.6rem;}

/* 드롭다운 */
[class*='sp__dropdown--menu']{display: block !important; position: absolute; list-style: none; background: #FFFFFF; min-width: 10rem; border: .1rem solid var(--stroke-divider); box-shadow: 0 .4rem .6rem 0 rgba(0, 0, 0, 0.08); border-radius: var(--border-radius-m); margin: 0; padding: .4rem 0; opacity: 0 !important; transition: 0s; pointer-events: none; z-index: 100;top: -99rem; box-sizing: border-box; font-family: var(--font-pr);}
[class*='sp__dropdown--menu'] > li{height: auto;}
[class*='sp__dropdown--menu'] > li > a{display: block; color: #121212; font-size: 1.3rem; font-weight: 500; width: 100%; height: 3rem; line-height: 3rem; text-align: left; box-sizing: border-box; padding: 0 1rem;}
[class*='sp__dropdown--menu'] > li > a:active{background: var(--sp-bg-hover); text-decoration: none;}
[class*='sp__dropdown--menu'].active{opacity: 1 !important; pointer-events: all;}
[class*='sp__dropdown--menu'][class*=--large]{min-width: 15.3rem; padding: .8rem 0;}
[class*='sp__dropdown--menu'][class*=--large] > li > a{font-size: 1.6rem; font-weight: 700; padding: 0 1.6rem; height: 4.4rem; line-height: 4.4rem;}

/* 게시판 드롭다운 버튼 */
[class*=sp__dropdown--btn]{display: flex; align-items: center; gap: .4rem; padding: 0 .6rem; height: 2.4rem; border-radius: var(--border-radius-m); overflow: hidden; position: relative;}
[class*=sp__dropdown--btn] > i{width: 1.2rem; height: 2.4rem;}
[class*=sp__dropdown--icon]{width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: var(--border-radius-s); position: relative; overflow: hidden;}

[class*=sp__select--box]{display: block; border:.1rem solid var(--gray-30); border-radius: var(--border-radius-m, .8rem); overflow: hidden; position:relative; text-decoration: none !important; width: 100%;}
[class*=sp__select--box]:after{content:''; display:inline-block; width: 1.2rem; height: 2.4rem; -webkit-mask-image: url('/gongsoop/img/icon/icon_arrow_down_s.svg'); mask-image: url('/gongsoop/img/icon/icon_arrow_down_s.svg'); position: absolute; top: 50%; margin-top: -1.2rem; right: 1.6rem; background-color: var(--gray-70); pointer-events: none; mask-repeat: no-repeat; mask-size: 100%;}
[class*=sp__select--box] select:invalid{color: var(--gray-50);}
[class*=sp__select--box] :is(select, .select){width:100%; border:none; height: 4.4rem; font-size: 1.4rem; font-weight: 400; line-height: 1.9rem; letter-spacing: -0.034rem; padding:0 1.2rem;}
[class*=sp__select--box] :is(select, .select){color: var(--text-primary);}
[class*=sp__select--box] :is(select, .select) option[disabled]{display: none}
[class*=sp__select--box] .select{display: flex; justify-content: space-between; align-items: center; gap: .8rem; line-height: 4.4rem; text-decoration: none; color: var(--gray-50);}
[class*=sp__select--box] .select span{color: var(--sp-primary);}
[class*=sp__select--box].selected .select{color: var(--text-primary);}
[class*=sp__select--box][class*=--small]{border-radius: var(--border-radius-m, .8rem);}
[class*=sp__select--box][class*=--small]::after{right: .9rem;}
[class*=sp__select--box][class*=--small] :is(select, .select){padding: 0 .9rem; padding-right: 2.7rem; height: 3.2rem; line-height: 3.2rem;}
[class*=sp__select--box][class*=--large] :is(select, .select){padding: 0 1.6rem; padding-right: 3.6rem; height: 4.8rem; line-height: 4.8rem;}
[class*=sp__select--box][class*=--large].selected :is(select, .select){font-weight: 600;}
[class*=sp__select--box][class*=--large] .select{flex-direction: column; align-items: start; gap: .6rem; height: auto; line-height: normal; padding: 1.6rem;}
[class*=sp__select--box][class*=--large] .select > div{font-size: 1.6rem; font-weight: 600; line-height: 2.4rem;}
[class*=sp__select--box][class*=--large] .select > div > span{color: var(--sp-primary, #6101D9);}
[class*=sp__select--box][class*=--large] .select > div > p{color: var(--text-primary, #121212);}
[class*=sp__select--box][class*=--large] .select > div{display: flex; gap: .8rem; align-items: center;}
[class*=sp__select--box][class*=--large] .select > span{font-size: 1.3rem; color: var(--text-secondary, #5C6675); font-weight: 400;}

[class*=sp__select--box][class*=--rounded]{display: flex; align-items: center; gap: .4rem; width: auto; height: 3.4rem; padding: 0 1rem; border-radius: 5rem;}
[class*=sp__select--box][class*=--rounded]::after{background: var(--icon-primary); position: static; margin: 0; flex-shrink: 0;}
[class*=sp__select--box][class*=--rounded] .select{padding: 0; gap: .4rem; flex-shrink: 0; width: auto; height: 100%;}

/* chips input */
[class*=sp__chips]{display: flex; flex-wrap: wrap; gap: .6rem;}
[class*=sp__chips] label{display: flex; width: auto; height: 3.2rem; justify-content: center; align-items: center; border-radius: 3rem; cursor: pointer; padding: 0 1.2rem; background: var(--bg-secondary); border: .1rem solid var(--bg-secondary); color: var(--text-primary); font-size: 1.4rem; font-weight: 400; line-height: 1.9rem; letter-spacing: -0.1.4rem;}
[class*=sp__chips] input:is([type=checkbox], [type=radio]){appearance: none; -webkit-appearance: none; display:none;}
[class*=sp__chips] label:has(input:checked),
[class*=sp__chips] label.active{border-color: var(--text-brand); background: var(--brand-primary-5); color: var(--text-brand); font-weight: 600; border-color: var(--brand-primary);}
.sp__chips--outline label{border: .1rem solid var(--gray-30, #E0E3EB);}
.sp__chips--gray label:has(input:checked) {background: var(--gray-100); color: var(--white); border-color: var(--gray-100);}
[class*=sp__chips][class*=--small] label{height: 2.8rem; padding: 0 1rem;}

/* paging */
.sp__paging .paging__wrap{text-align: center; margin: 0; padding: 0}
.sp__paging .paging__box{display: flex; justify-content: center; align-items: center; gap: .8rem;}
.sp__paging .paging__box :is(a, span){display: flex; justify-content: center; align-items: center; color: var(--text-secondary, #5C6675); width: 3rem; height: 3rem; font-size: 1.5rem; border-radius: var(--border-radius-m, .8rem); position: relative; overflow: hidden; font-weight: 500;}
.sp__paging .paging__box a:has([class*=sp__ico--]){background: var(--bg-alternative);}
.sp__paging .paging__box a:has([class*=sp__ico--]) i::after{width: 1.2rem; height: 2.4rem;}
.sp__paging .paging__box a.active:not(:has([class*=sp__ico--])){background: var(--bg-tertiary); color: var(--text-primary); font-weight: 600;}
.sp__paging .paging__box a.active:has([class*=sp__ico--]),
.sp__paging .paging__box a [class*=sp__ico--]{display: block; width: 100%; height: 100%;}
.sp__paging .paging__box a [class*=sp__ico--]::after{background-color: var(--icon-primary);}

/* carousel */
[class*=sp__carousel][class*=swiper-button] {position: absolute; top: 50%; transform: translateY(-50%); margin-top: 0;}
[class*=sp__carousel] {display:inline-block; width: 4.4rem; height: 4.4rem; background:var(--white, #fff); border: .1rem solid var(--gray-30, #E0E3EB); border-radius: 100%; box-shadow: 0 .4rem .6rem 0 rgba(0, 0, 0, 0.08); cursor:pointer; user-select: none;}
[class*=sp__carousel]:after {width: 2.6rem; height: 2.6rem;}
[class*=sp__carousel][class*=-next]:after {transform: rotate(180deg);}

.sp__carousel--l[class*=-prev]{left: -2rem;}
.sp__carousel--l[class*=-next]{right: -2rem;}

.sp__img--full img {max-width:100%; margin: auto; width:100%; height: 100%; object-fit: cover; object-position: center;}

.sp__bg--brand {background:var(--text-brand) !important}
.sp__bg--secondary {background:var(--gray-10) !important}
.sp__text--gradient {background: var(--sp-special); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}

/* label */
[class*=sp__label]{display: inline-flex; align-items: center; flex-shrink: 0; gap: .1rem; font-size: 1.2rem; font-weight: 700; height: 1.8rem; padding: 0 .5rem; border-radius: var(--border-radius-s, .4rem); font-family: var(--font-pr); letter-spacing: -0.012rem;}
[class*=sp__label] i{width: 1.6rem; height: 1.6rem;}
[class*=sp__label]{background: var(--icon-primary); color: #fff;}
[class*=sp__label] i::after{background: #fff;}
[class*=sp__label][class*=--primary]{background: var(--brand-primary-10); color: var(--text-brand);}
[class*=sp__label][class*=--primary] i::after{background: var(--text-brand);}
[class*=sp__label][class*=--primary2]{background: var(--brand-primary-5);}
[class*=sp__label][class*=--brand]{background: var(--brand-primary); color: #fff;}
[class*=sp__label][class*=--brand] i::after{background: #fff;}
[class*=sp__label][class*=--brand2]{background: var(--brand-primary-10); color: var(--brand-primary);}
[class*=sp__label][class*=--brand2] i::after{background: var(--brand-primary);}
[class*=sp__label][class*=--blue]{background: var(--brand-secondary-10); color: var(--brand-secondary);}
[class*=sp__label][class*=--tertiary]{background: var(--bg-tertiary); color: var(--text-secondary);}
[class*=sp__label][class*=--inverse]{background: var(--bg-inverse); color: #fff;}
[class*=sp__label][class*=--bg]{background: var(--text-brand); color: #fff;}
[class*=sp__label][class*=--bg] i::after{background: #fff;}
[class*=sp__label][class*=--full]{width: 100%; justify-content: center; text-align: center;}
[class*=sp__label][class*=--large]{height: 2.2rem !important; line-height: 2.2rem !important; padding: 0 .4rem;}
[class*=sp__label][class*=--text]{padding: 0 !important; background: transparent !important;}

/* 토글아이콘 */
.sp__toggle--switch{display: inline-flex; height: 1.9rem; align-items: center; gap: 0 .5rem; user-select: none; cursor: pointer;}
.sp__toggle--switch em{font-size: 1.4rem; color: var(--text-secondary); font-style: normal;}
.sp__toggle--switch input[type='checkbox']{display:none;position:absolute;top:0;left:0;}
.sp__toggle--switch .ico-switch{background: var(--gray-40); position: relative; width: 3rem; height: 1.9rem; border-radius: 5rem; transition: .15s;}
.sp__toggle--switch .ico-switch > .ico-switch-move{background: #fff; position: absolute; left: .4rem; top: .4rem; width: 1.1rem; height: 1.1rem; border-radius: 5rem; transition: .15s;}
.sp__toggle--switch.active .ico-switch,
.sp__toggle--switch input[type='checkbox']:checked + .ico-switch{background: var(--brand-primary)}
.sp__toggle--switch.active .ico-switch > .ico-switch-move,
.sp__toggle--switch input[type='checkbox']:checked + .ico-switch .ico-switch-move{left: 1.4rem;}
.sp__toggle--switch.toggle__large .ico-switch{width: 3rem; height: 1.8rem;}
.sp__toggle--switch.toggle__large .ico-switch > .ico-switch-move{width: 1rem; height: 1rem; top: .4rem; left: .4rem;}
.sp__toggle--switch.toggle__large.active .ico-switch > .ico-switch-move, .sp__toggle--switch.toggle__large input[type='checkbox']:checked + .ico-switch .ico-switch-move{left: 1.6rem;}

/* Input(Search) */
.sp__search {width: 100%; display: inline-flex; align-items: center; height: 3.6rem; padding: 0 .8rem 0 1.2rem; border-radius: var(--border-radius-m); cursor: pointer;}
.sp__search .sp__input--search{flex: 1; height: 3.6rem; line-height: normal; border: none; outline: none; transition: all .5s;}
.sp__search .sp__input--search::placeholder{color: var(--text-secondary)}
.sp__search .sp__input--search::-webkit-search-cancel-button{appearance: none; width: 1.6rem; height: 1.6rem; background: transparent url('/gongsoop/img/icon/ico_del_fill2.png') no-repeat center top; background-size: contain; border: none; cursor: pointer; margin-left: .8rem;}
.sp__search button{font-size: 0; min-width: 3rem; min-height: 3rem;}
.sp__search button > i{width: 3rem; height: 3rem;}
.sp__search .search__select{margin-right: 1.6rem; position: relative; overflow: unset;}
.sp__search .search__select > span{width: 3.4rem;}
.sp__search .search__select::after{content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: -.6rem; background: var(--stroke-border); width: .1rem; height: 2rem;}

.sp__input--border{display: flex; align-items: center; border: .1rem solid var(--stroke-border); border-radius: .8rem; height: 3.6rem;}
.sp__input--border > input{width: 100% !important;}

.sp__form input:is([type=text]) {border: none; height: auto; width: auto; min-width: auto; background: var(--white); padding: 0; border-radius: 0; min-height: auto;}
.sp__form :is(input:is([type=text]), textarea)::placeholder {color: var(--gray-50); white-space: pre-line;}
.sp__form input.sp__input--underline{border-bottom: .1rem solid var(--gray-20) !important; border-radius: 0 !important; padding: 1.2rem 0 !important; width: 100%; color: var(--text-primary);}
.sp__form input.sp__input--text{border: .1rem solid var(--gray-30) !important; width: auto; height: 4.4rem; line-height: normal; padding: 0 1.2rem; border-radius: var(--border-radius-m, .8rem);}
.sp__form input.sp__input--text:read-only{background: var(--gray-10, #F6F6F9); border: 0 !important;}
.sp__form [class*=sp__input]:is([class*=--underline], [class*=--text])::placeholder{font-size: inherit !important; line-height: normal !important; color: var(--gray-50);}

[class*=sp__input]:not([class*=--search], [class*=box]){border: .1rem solid var(--stroke-border); border-radius: var(--border-radius-m); overflow: hidden;}
[class*=sp__input]:not([class*=--search]) :is(textarea){border: none; outline: none; width:100%; color: var(--text-primary)}
[class*=sp__input]:not([class*=--search]):has(textarea:focus){border-color: var(--sp-primary) !important}
[class*=sp__input]:not([class*=--search]):has(textarea:focus) i:after{background-color: var(--sp-primary) !important}
[class*=sp__input]:not([class*=--search]):has(.input__btn){display: flex; flex-direction: column;}
[class*=sp__input]:not([class*=--search]) .input__btn{display: flex; justify-content: end; margin-top: auto;}
[class*=sp__input]:not([class*=--search]) .input__btn a{display: flex;}
[class*=sp__input]:not([class*=--search]) .input__btn i::after{background-color: var(--gray-30)}

/* list */
.sp__list--disc > li{display: flex; align-items: start;}
.sp__list--disc > li:before{content: ''; display: block; background: var(--gray-100); border-radius: 100%; margin: .9rem; padding: .2rem;}

/* 파일 첨부 */
.sp__file{margin-top: 2rem;}
.sp__file .attach-btn button{height: auto !important; border: 0; width: 100%;}
.sp__file .attach-btn button i{width: 1.6rem; height: 1.6rem;}
.sp__file .attach-btn button i.sp__ico--plus_circle:after{background-color: var(--text-secondary);}
.sp__file .file__add{border: .1rem dashed var(--stroke-border) !important; border-radius: var(--border-radius-m);}
.sp__file .file__list ul{display: flex; flex-wrap: wrap; gap: .8rem;}
.sp__file .file__list ul > li{display: flex; justify-content: center; align-items: center; gap: 0 .2rem; color: var(--text-secondary); font-size: 1.3rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.26rem; width: 100%; border-radius: var(--border-radius-m); padding: 1.2rem; background: var(--gray-10);}
.sp__file .file__list i.sp__ico--clip{width: 1.6rem; height: 1.6rem;}
.sp__file .file__list i.sp__ico--clip::after{background-color: var(--gray-70);}
.sp__file .file__list .file--name{flex: 1; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;word-break: break-word; font-size: 1.4rem; line-height: 1.96rem; letter-spacing: -0.014rem;}
.sp__file .file__list .file--del{width: 1.8rem; height: 1.8rem; font-size: 0; color: transparent; cursor: pointer;}
.sp__file .file__list .file--del i{width: 1.8rem; height: 1.8rem;}
.sp__file .file__list .file--del i:after{background-color: var(--gray-60)}
.sp__file .file--detail{color: var(--gray-50); font-size: 1.2rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.012rem;}

.sp__timepicker{display: flex; justify-content: center; height: 17.5rem; position: relative; user-select: none; font-family: var(--font-pr);}
/* .sp__timepicker::after{content: ""; display: block; background: rgba(0, 0, 0, .04); width: 100%; height: 3.2rem; position: absolute; top: 50%; transform: translateY(-50%); left: 0; border-radius: 8px; z-index: 2; pointer-events: none;} */
.sp__timepicker .timepicker__wheel{width: 70px; height: 100%; margin: 0; position: relative;}
.sp__timepicker .timepicker__wheel .timepicker__slider{width: 100%; height: 100%; will-change: transform;}
.sp__timepicker .timepicker__wheel .timepicker__slider li{display: flex; justify-content: center; align-items: center; text-align: center; font-size: 2.2rem; color: var(--text-primary); transition: color .5s; opacity: 0.35;}
.sp__timepicker .timepicker__wheel .timepicker__slider .swiper-slide-active{opacity: 1;}

/* Filter */
.sp__modal {padding-bottom: 1.6rem; z-index: 9999;}
.sp__modal--filter{overflow: hidden;}
.sp__modal--filter .swiper{overflow: unset;}
.sp__modal--filter .filter__nav:not(.swiper){display: flex; gap: .7rem;}
.sp__modal--filter .filter__nav:not(.swiper) > *{flex-shrink: 0;}
.sp__modal--filter .filter__nav--group {display: flex;}
.sp__modal--filter .filter__nav button{width: auto; height: 3.2rem; line-height: 3.2rem; display: flex; align-items: center; gap: 0 .5rem; padding: 0 .9rem; border-radius: var(--border-radius-m); border: 0.1rem solid #E0E3EB;}
.sp__modal--filter .filter__nav button i.sp__ico--arrow_down_s {width: 1.2rem;}
.sp__modal--filter .filter__nav button i.sp__ico--arrow_down_s::after {width: 100%; background: var(--gray-70);}
.sp__modal--filter .filter__nav button i.sp__ico--filter::after {width: 1.6rem;}
.sp__modal--filter .filter__nav button i.sp__ico--filter::after::after {width: 100%;}
.sp__modal--filter .filter__nav button span.choice{color: var(--sp-primary);}
.sp__modal .modal-scroll {padding: 2rem 0;}
.sp__modal .modal-btn-area{font-size: 0; line-height: 0; height: auto;}
.sp__modal .modal-btn-area button{background: var(--bg-inverse) !important; color: #fff; border-radius: var(--border-radius-m); font-size: 1.5rem; font-weight: 600; line-height: 2.4rem; letter-spacing: 0.016rem; height: 4.4rem;}
.sp__modal .label__group + .label__group {margin-top: 2.4rem;}
.sp__modal .label__check.chip__txt {height: 3rem; display: inline-flex; align-items: center; border-radius: 3rem; border: .1rem solid var(--gray-10); background-color: var(--gray-10); font-size: 1.3rem;}
.sp__modal .label__check.chip__txt input {display: none;}
.sp__modal .label__check.chip__txt input:checked + div {background: var(--sp-background); color: var(--sp-primary); border-color: var(--sp-primary);}
.sp__modal .label__check.chip__txt div {height: 3rem; padding: .8rem 1.2rem; display: inline-flex; align-items: center; border-radius: 3rem; border: .1rem solid var(--gray-10); background-color: var(--gray-10); font-size: 1.3rem; color: var(--text-secondary)}
.sp__modal .label__list {display: flex; flex-wrap: wrap; gap: .8rem;}
.sp__modal .label__check.bar__txt{position:relative;min-height:4.4rem;padding:0.8rem 0rem;display:flex;align-items:center;}
.sp__modal .label__check.bar__txt input:is([type=checkbox],[type=radio]){position:absolute;top:0;left:0;display:none;}
.sp__modal .label__check.bar__txt div{padding-right:3rem;font-size: 1.6rem;line-height: 2.5rem;flex:1;position: relative;}
.sp__modal .label__check.bar__txt div > [class*=sp__ico]{width:2.4rem; height: 2.4rem; position:absolute;top:50%;right:0;transform:translateY(-50%);}
.sp__modal .label__check.bar__txt div > [class*=sp__ico][class*=--check]{display:none;}
.sp__modal .label__check.bar__txt div > [class*=sp__ico]::after{background: #121212;}
.sp__modal .label__check.bar__txt div > [class*=sp__ico][class*=--check]::after{background: var(--sp-primary);}
.sp__modal .label__check.bar__txt input div{color:var(--text-primary);}
.sp__modal .label__check.bar__txt input:is([type=checkbox],[type=radio]):checked + div{color:var(--brand-primary); font-weight: 600; font-weight: 600;}
.sp__modal .label__check.bar__txt input:is([type=checkbox],[type=radio]):checked + div > [class*=sp__ico]::after{background: var(--brand-primary);}
.sp__modal .label__check.bar__txt input:is([type=checkbox],[type=radio]):checked + div > .sp__ico--check{display:block;}
.sp__modal .label__check div.select{}
.sp__modal .label__check div.select > div{display: flex; gap: .6rem;}
.sp__modal .label__check div.select > div > p{font-weight: 400;}
.sp__modal .label__check div.select > div > span{font-weight: 700;}
.sp__modal .label__check div.select > span{display: none;}

.sp__modal a.label__check:hover > div{color:var(--sp-primary); font-weight: 600; font-weight: 600;}
.sp__modal a.label__check:hover > div > [class*=sp__ico]::after{background: var(--sp-primary);}

.sp__modal .cn-modal-close::before {background: var(--gray-70);}

/* FOLD */
[class*=sp__fold]{display: flex; flex-direction: column; gap: .8rem; background: var(--gray-10); border-radius: .8rem; padding: 1.6rem;}
[class*=sp__fold] .fold__handle{display: flex; justify-content: space-between; align-items: center;}
[class*=sp__fold] .fold__handle::after{position: static; margin: 0; width: 2.4rem; height: 2.4rem;}
[class*=sp__fold] .fold__handle input{display: none;}
[class*=sp__fold] .fold__handle:has(input[type='checkbox']:checked)::after{transform: rotate(90deg);}
[class*=sp__fold] .fold__handle:has(input[type='checkbox']:checked) + .fold__content{display: block;}
[class*=sp__fold] .fold__content{display: none;}
[class*=sp__fold][class*=--bg]{background: var(--sp-background);}

/* Tooltip */
[class*=sp__tooltip]{display: inline-block; position: relative; --tooltip-offset: .8rem; width: auto !important;}
[class*=sp__tooltip][class*=--icon]{display: inline-block; font-size: 0; line-height: 0;}
[class*=sp__tooltip]:not([class*=--toggle]):hover .tooltip__label,
[class*=sp__tooltip]:not([class*=--toggle]):focus .tooltip__label,
[class*=sp__tooltip].active .tooltip__label{display: inline-block;}
[class*=sp__tooltip] .tooltip__label{position: absolute; background: rgba(0, 0, 0, .8); color: #fff; padding: .4rem .8rem; font-size: 1.2rem; line-height: 1.8rem; white-space: nowrap; border-radius: .8rem; display: none; z-index: 10;}
[class*=sp__tooltip] .tooltip__label::after{content: ""; position: absolute; border: .5rem solid #000; opacity: .8; border-top-width: .6rem; border-bottom-width: 0; border-left-color: transparent; border-right-color: transparent;}
[class*=sp__tooltip] .tooltip__label [class*=close]{width: 1.3rem; height: 1.3rem; position: absolute; top: .6rem; right: .5rem;}
[class*=sp__tooltip] .tooltip__label [class*=close]::after{background: var(--gray-50, #A4B1C1);}
[class*=sp__tooltip]:not(:is([class*=--right], [class*=--left], [class*=--bottom])) .tooltip__label{bottom: calc(100% + var(--tooltip-offset)); left: 50%; transform: translateX(-50%);}
[class*=sp__tooltip]:not(:is([class*=--right], [class*=--left], [class*=--bottom])) .tooltip__label::after{top: 100%; left: 50%; transform: translateX(-50%);}
[class*=sp__tooltip][class*=--bottom] .tooltip__label{top: calc(100% + var(--tooltip-offset)); left: 50%; transform: translateX(-50%);}
[class*=sp__tooltip][class*=--bottom] .tooltip__label::after{top: -.6rem; left: 50%; transform: translateX(-50%) rotate(180deg);}
[class*=sp__tooltip][class*=--right] .tooltip__label{left: calc(100% + var(--tooltip-offset)); top: 50%; transform: translateY(-50%); z-index: 10;}
[class*=sp__tooltip][class*=--right] .tooltip__label::after{left: -.8rem; top: 50%; transform: translateY(-50%) rotate(90deg);}
[class*=sp__tooltip][class*=--left] .tooltip__label{right: calc(100% + var(--tooltip-offset)); top: 50%; transform: translateY(-50%); z-index: 10;}
[class*=sp__tooltip][class*=--left] .tooltip__label::after{right: -.8rem; top: 50%; transform: translateY(-50%) rotate(-90deg);}

/* Level */
[class*=sp__level--wrap]{display: flex; align-items: center; gap: .2rem;}
[class*=sp__level--wrap] > span{flex-shrink: 0;}
[class*=sp__level--wrap]::after{display: none;}
[class*=sp__level]:not([class*=--wrap]){display: flex; justify-content: center; align-items: center; width: 1.2rem; height: 1.2rem; border-radius: 5rem; overflow: hidden; position: relative; overflow: hidden;}
[class*=sp__level][class*=--btn]{cursor: pointer;}
[class*=sp__level][class*=--btn]:hover > span{text-decoration: underline;}
[class*=sp__level][class*=--btn]:hover > span{text-decoration: underline;}
[class*=sp__level][class*=--premium]{background: var(--etc-premium);}
[class*=sp__level][class*=--premium]::after{background: #fff; -webkit-mask-image: url('/gongsoop/img/icon/icon_premium.svg'); mask-image: url('/gongsoop/img/icon/icon_premium.svg'); width: .9rem; height: auto; flex-shrink: 0;}
[class*=sp__level][class*=--admin]::after{background: var(--brand-primary);}
[class*=sp__level][class*=--img]{font-size: 0; line-height: 0; flex-shrink: 0;}
[class*=sp__level][class*=--img]::after{display: none;}
[class*=sp__level][class*=--img] > img{width: 1.2rem; height: 1.2rem;}

/* Navigator */
.sp__navigator{display: flex; align-items: center; gap: .4rem;}
.sp__navigator::after{background: var(--icon-primary); width: 1.2rem; height: 2.4rem;}

/* 페이지 헤더 */
.heading__dropdown{display: flex; align-items: center; gap: .6rem; padding-top: 2rem;}
.heading__dropdown::after{width: 1.2rem; height: 2.4rem;}
.sp__heading{display: flex; flex-direction: column; gap: 1.6rem; padding-bottom: 3rem;}
.sp__heading .heading__status .status__info{display: flex; align-items: center; gap: 2.4rem;}
.sp__heading .heading__status .status__info > div{flex: 1; position: relative;}
.sp__heading .heading__status .status__info > div + div::after{content: ""; background: #fff; position: absolute; top: 50%; left: -1.2rem; width: .1rem; height: .8rem; margin-top: -.4rem;}
.sp__heading .heading__status .status__progress{display: flex; align-items: center; gap: 1.2rem;}
.sp__heading .heading__status .status__progress span{flex-shrink: 0;}
.sp__heading .heading__status .status__progress .progress__wrap{display: flex; align-items: center; gap: .9rem; flex: 1;}
.sp__heading .heading__status .status__progress .progress__wrap .progress{flex: 1; background: var(--bg-inactive); width: 100%; height: .3rem; border-radius: .5rem; position: relative; overflow: hidden;}
.sp__heading .heading__status .status__progress .progress__wrap .progress > span{position: absolute; left: 0; top: 0; background: var(--bg-inverse); height: .3rem; border-radius: .5rem;}
.sp__heading .heading__rank > li{display: flex; justify-content: space-between; align-items: center;}
.sp__heading .heading__rank > li > div{display: flex; align-items: center; height: 4rem; overflow: hidden;}
.sp__heading .heading__rank > li > .rank_left > span.number{width: 2.4rem; flex-shrink: 0; text-align: center;}
.sp__heading .heading__rank > li > .rank_left > span.text{width: 4.4rem; flex-shrink: 0; text-align: center; color: var(--text-secondary);}
.sp__heading .heading__rank > li > .rank_left > span:last-child{flex: 1; padding: 0 1.4rem;}
.sp__heading .heading__rank > li > .rank_right{flex-shrink: 0; display: flex; align-items: center; gap: .2rem; padding: 0 .4rem;}
.sp__heading .heading__rank > li > .rank_right i{width: 1.6rem; height: 1.6rem;}
.sp__heading .heading__rank > li > .rank_right i::after{background: var(--text-brand);}
.sp__heading .heading__rank > li.rank__empty{display: flex; justify-content: center; align-items: center; height: 100%; font-size: 1.3rem; color: var(--text-secondary);}
.sp__heading .heading__rank:has(.rank__empty){display: flex; justify-content: center; align-items: center;}
.sp__heading .board_qna .heading__rank{min-height: 20rem;}
.sp__heading .board_review .heading__rank{min-height: 12rem;}
.header__dropdown--menu{min-width: 15.3rem; width: auto !important;}

.cn-modal.cn-dim_popup {z-index: 145; background: rgba(0, 0, 0, .45) !important;}
.cn-modal.cn-dim_popup .cn-modal-main {width: 34.3rem; border-radius: var(--border-radius-l);}
.cn-modal.cn-dim_popup .cn-modal-main .cn-modal-head {font-size: 1.6rem; width: 100%; height: 5rem; line-height: 5rem; padding: 0;}
.cn-modal.cn-dim_popup .cn-modal-main .cn-modal-head strong {font-size: 1.6rem; width: 100%;}
.cn-modal.cn-dim_popup .cn-modal-main .cn-modal-head .cn-modal-close {width: 5rem; height: 5rem; line-height: 5rem; top: 0;}
.cn-modal.cn-dim_popup .cn-modal-main .modal_contents {padding: 1.6rem 2.4rem;}

/* 라이브 채팅 슬라이드 */
.sp__chat .live__list {width: 100%;}
.sp__chat .live__list .live__title > .sp__layout {flex-wrap: nowrap;}
.sp__chat .live__list .live__title > .sp__layout span.sp__typo--caption11{background: var(--brand-secondary-10); border-radius: var(--border-radius-s); color: var(--brand-secondary); display: flex; align-items: center; justify-content: center; width: 4rem; height: 1.8rem; line-height: normal;}
.sp__chat .live__list .live__title {height: 1.8rem;}
.sp__chat .live__list .live__title .sp__label--brand2{height: 1.8rem; padding: 0 .5rem;}
.sp__chat .live__list .live__title .sp__ico--sound_wave{width: 1.5rem; height: 1.5rem;}

.sp__chat .live__list .live__info {height: 1.7rem;}
.sp__chat .live__list .live__info .sp__ico--users {width: 1.4rem; height: 1.4rem;}
.sp__chat .live__list .live__info .sp__ico--dot {width: .6rem; height: 1.2rem;}
.sp__chat .live__list .live__info .sp__ico--users::after,
.sp__chat .live__list .live__info .sp__ico--dot::after{background: var(--icon-primary);}

.sp__chat .live__list .live__area {border-top: .1rem solid var(--gray-20); gap: 0; flex-wrap: nowrap;}
.sp__chat .live__list .live__area .list_img{flex: 1; background: url('https://un-static-qa.conects.com/gongsoop/img/main/m/250320/live_list_bg.jpg') no-repeat left top / auto 100%;}
.sp__chat .live__list .live__area .list_img img{width: 19.4rem; height: 2.8rem;}
.sp__chat .live__list .live_contents {display: flex; align-items: center; justify-content: center; height: 9.6rem; border-top: .1rem solid var(--gray-20);}
.sp__chat .live__list .live__slide {width: 10rem; height: 9.6rem; padding: 1.2rem 0 1.6rem;}
.sp__chat .live__list .live__slide .live__slider {width: 100%; height: 6.8rem !important;}
.sp__chat .live__list .live__slide .live__slider li > div {width: 100%; flex-wrap: nowrap;}

.sp__chat .live__list .live__btn{display: flex; align-items: center; justify-content: center; width: 100%; height: 3.8rem; background: var(--bg-inverse);}
.sp__chat .live__list .live__btn > a{display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}

.sp__chat .live__list .swiper-pagination{font-size: 0; line-height: 0; position: static; margin: 0; margin-top: 2rem;}
.sp__chat .live__list .swiper-pagination > span{background: var(--gray-100); width: .6rem; height: .6rem; opacity: .2; border-radius: 5rem; transition: .3s}
.sp__chat .live__list .swiper-pagination > span[class*=active]{opacity: 1; width: 1.6rem;}

/* 라이브 채팅 없을 때 */
.sp__chat .live__list--none > .sp__box--shadow {position: relative; z-index: 1;}
.sp__chat .live__list--none .live__slide {height: 9.6rem; border-top: .1rem solid var(--gray-20); padding: 1.2rem 0 1.6rem;}
.sp__chat .live__list--none .live__title .list__none--tag{flex-shrink: 0; display: flex; justify-content: center; align-items: center; padding: 0 .5rem; height: 1.8rem; border-radius: var(--border-radius-s);}
.sp__chat .live__list--none .live__btn{display: flex; align-items: center; justify-content: center; width: 100%; height: 3.8rem; background: var(--bg-inactive);}
.sp__chat .live__list--none .live__btn > a{display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}

/* 모달 */
.sp__modal .cn-modal-main .cn-modal-head strong {font-weight: 700 !important;}
.sp__modal.sp__modal--lounge .lounge__btn > a{flex: 1; width: auto;}

/* 클린캠페인 게시판 */
.report__status .status__tit i{width: 1.8rem; height: 1.8rem;}
.report__status .status__tit i::after{background: var(--brand-primary);}
.report__status .report__wrap{display: flex; align-items: center; overflow: hidden; height: 4.2rem;}
.report__status .report__wrap strong{flex-shrink: 0; height: 4.2rem; line-height: 4.2rem; padding: 0 1.2rem; position: relative;}
.report__status .report__wrap .slider__wrap{flex: 1; overflow: hidden; position: relative; padding: 0 1.2rem; font-size: 0; line-height: 0;}
.report__status .report__wrap .slider__wrap::before{content: ""; display: inline-block; background: var(--gray-40); width: .1rem; height: 1rem; position: absolute; left: 0; top: 50%; margin-top: -.5rem;}
.report__status .report__wrap .slider__wrap .report__slider{width: 100%; height: 4.2rem; line-height: 4.2rem;}
.report__status .report__wrap .slider__wrap .report__slider li a{display: inline-block; height: 4.2rem; line-height: 4.2rem;}

.post__report{border-top: 1px solid var(--stroke-divider);}

.report__result{border-top: .1rem solid var(--stroke-divider);}
.report__result .result__top{padding-bottom: 1.6rem; border-bottom: .1rem solid var(--stroke-divider);}
.report__result .result__vote .vote__info{text-align: center;}
.report__result .result__vote .vote__btns{display: flex; gap: .8rem;}
.report__result .result__vote .vote__btns > a{flex: 1; gap: .4rem;}
.report__result .result__vote .vote__btns > :is(a:active, a.active){border-color: var(--brand-primary);}
.report__result .result__vote .vote__btns > a:hover::before{display: none;}
.report__result .result__vote .vote__btns > a > i{margin-top: -.1rem; width: 1.6rem; height: 1.6rem;}
.report__result .result__vote .vote__btns > a > i::after{background: var(--text-negative)}
.report__result .result__vote .vote__btns > a:first-child > i::after{background: var(--brand-primary)}
.report__result .result__vote .vote__end{background: rgba(255, 255, 255, 0.60); padding: 1.4rem 0; border-radius: 10rem; text-align: center;}
.report__result .result__vote .vote__progress{display: flex; justify-content: space-between; align-items: center; background: var(--stroke-border); border-radius: 100px; height: 4.4rem; position: relative; overflow: hidden;}
.report__result .result__vote .vote__progress > span{width: 50%; height: 100%; display: flex ; justify-content: flex-end; align-items: center; z-index: 1; color: #fff; text-align: right; line-height: normal; white-space: nowrap;}
.report__result .result__vote .vote__progress > span > span{position: relative; right: 1.6rem;}
.report__result .result__vote .vote__progress > span:first-child{text-align: left; justify-content: flex-start;}
.report__result .result__vote .vote__progress > span:first-child > span{right: auto; left: 1.6rem;}
.report__result .result__vote .vote__progress > span.sp__bg--g30{z-index: 2;}

/* 글쓰기 모달 */
.sp__modal.write__modal .cn-modal-main{border-radius: 1.2rem; overflow: hidden; width: 34.3rem;}
.sp__modal.write__modal .cn-modal-main .write__head{display: flex; justify-content: center; align-items: center; height: 5rem; position: relative;}
.sp__modal.write__modal .cn-modal-main .write__head .write__close{position: absolute; top: 0; right: 0; width: 5rem; height: 5rem; font-size: 0;}
.sp__modal.write__modal .cn-modal-main .write__head .write__close::after{width: 2.4rem; height: 2.4rem;}
.sp__modal.write__modal .cn-modal-main .write__select{display: flex; flex-direction: column; padding: 0 2.4rem 2rem; width: 100%; gap: .8rem;}
.sp__modal.write__modal .cn-modal-main .write__select .sp__select--box{width: 100%; height: 3.6rem; font-size: 1.3rem;}
.sp__modal.write__modal .cn-modal-main .write__select .sp__select--box select{appearance: none; width: 100%; height: 3.6rem;}
.sp__modal.write__modal .cn-modal-main .write__select a{width: 100%; height: 3.6rem;}

/* 캘린더 */
[class*=sp__dot]{background: var(--calendar-gray); display: inline-block; width: .8rem; height: .8rem; border-radius: 10rem;}
[class*=sp__dot--][class*=--small]{width: .3rem; height: .3rem;}
[class*=sp__dot--][class*='--green']{background: var(--calendar-green);}
[class*=sp__dot--][class*='--blue']{background: var(--calendar-blue);}
[class*=sp__dot--][class*='--purple']{background: var(--calendar-purple);}
[class*=sp__dot--][class*='--gray']{background: var(--calendar-gray);}
[class*=sp__dot--][class*='--square']{width: .3rem; height: auto; border-radius: 0;}
[class*=sp__calendar] .calendar__label{display: flex; align-items: center;}
[class*=sp__calendar] .calendar__label > span{display: inline-flex; justify-content: center; align-items: center; font-size: 1.2rem; gap: .4rem; padding: 0 .6rem; letter-spacing: -0.024rem; white-space: nowrap;}
[class*=sp__calendar] .calendar__layout :is(.calendar__head, .calendar__body){display: grid; grid-template-columns: repeat(7, 1fr);}
[class*=sp__calendar] .calendar__layout :is(.calendar__head, .calendar__body) > div{display: flex; justify-content: center; align-items: center; text-align: center;}
.sp__calendar{display: flex; flex-direction: column; gap: .8rem;}
.sp__calendar .calendar__layout{border: 1px solid var(--stroke-border); border-radius: 1.2rem; overflow: hidden;}
.sp__calendar .calendar__layout .calendar__head{background: var(--stroke-divider); gap: 1px; height: 42px; gap: 1px;}
.sp__calendar .calendar__layout .calendar__head > div{background: #121212; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -0.28px; height: 42px;}
.sp__calendar .calendar__layout .calendar__body{display: flex; flex-direction: column; gap: 1px; background: var(--stroke-divider);}
.sp__calendar .calendar__layout .calendar__body > .calendar__col{display: flex; gap: 1px; position: relative;}
.sp__calendar .calendar__layout .calendar__body > .calendar__col > .day{display: flex; justify-content: flex-start; align-items: flex-start; background: #fff; flex: 1; height: 174px; padding: 10px; user-select: none;}
.sp__calendar .calendar__layout .calendar__body > .calendar__col > :is(.day.prev, .day.next){color: var(--text-inactive);}
.sp__calendar .calendar__layout .calendar__body > .calendar__col > .day .date{font-size: 14px; font-weight: 500; line-height: 19.6px; letter-spacing: -0.14px;}
.sp__calendar .calendar__layout .calendar__body > .calendar__col > .day.today{background: var(--bg-alternative, #FAFAFC);}
.sp__calendar .calendar__layout .calendar__body > .calendar__col .calendar__events{display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 20px; position: absolute; top: 0; left: 0; width: 100%; padding: 40px 10px 10px 10px; grid-auto-flow: dense; overflow: hidden; pointer-events: none;}
.sp__calendar .calendar__layout .calendar__body > .calendar__col .calendar__events .calendar__event{display: flex; align-items: center; gap: 6px; overflow: hidden; height: 23px; border-radius: 4px; padding: 0 6px; order: 7;}
.sp__calendar .calendar__layout .calendar__body > .calendar__col .calendar__events .calendar__event [class*="sp__dot"]{flex-shrink: 0;}
.sp__calendar .calendar__layout .calendar__body > .calendar__col .calendar__events .calendar__event span{flex: 1; font-size: 12px; letter-spacing: -0.12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;}
.sp__calendar .calendar__layout .calendar__body > .calendar__col .calendar__events .calendar__event.prev__week{width: calc(100% + 11px); margin-left: -11px; border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 16px;}
.sp__calendar .calendar__layout .calendar__body > .calendar__col .calendar__events .calendar__event.next__week{width: calc(100% + 11px); border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 16px;}
.sp__calendar .calendar__layout .calendar__body > .calendar__col .calendar__events .calendar__event.prev__week.next__week{width: calc(100% + 21px); border-radius: 0;}
.sp__calendar--mini{display: flex; flex-direction: column; gap: .8rem; overflow: hidden;}
.sp__calendar--mini .calendar__control{justify-content: center; align-items: center;}
.sp__calendar--mini .calendar__control strong{font-size: 1.6rem;}
.sp__calendar--mini .calendar__wrap{display: flex; flex-direction: column; gap: 1.2rem; background: #FAFAFC; border-radius: 1.2rem; padding: 1.2rem 0;}
.sp__calendar--mini .calendar__layout .calendar__head > div{position: relative; color: var(--text-secondary); font-size: 1.3rem; font-weight: 500; letter-spacing: -0.013rem; height: 4rem;}
.sp__calendar--mini .calendar__layout .calendar__body > .day{display: flex; justify-content: center; align-items: center; color: #121212; font-size: 1.3rem; letter-spacing: -0.013rem; height: 3.4rem; position: relative}
.sp__calendar--mini .calendar__layout .calendar__body > .day.selected::before{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: .8rem; background: var(--bg-tertiary); width: 3.6rem; height: 3.4rem; pointer-events: none;}
.sp__calendar--mini .calendar__layout .calendar__body > .day.selected span{position: relative;}
.sp__calendar--mini .calendar__layout .calendar__body > :is(.prev, .next){color: var(--text-inactive);}
.sp__calendar--mini .calendar__events{display: flex; justify-content: center; align-items: center; gap: .2rem; position: absolute; top: 2.65rem; left: 0; width: 100%;}

.calendar__control{display: flex; justify-content: space-between; align-items: flex-end;}
.calendar__control strong{display: inline-flex; align-items: center; gap: .4rem; color: #121212; font-size: 1.6rem; font-weight: 700;}
.calendar__control strong > label{display: inline-block; width: 2rem; height: 2rem; position: relative;}
.calendar__control strong > label::after{background: var(--icon-primary);}
.calendar__control strong > label > input{position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;}
.calendar__control .control{display: flex; justify-content: center; align-items: center; gap: 1.2rem;}
.calendar__control .control__btn{display: inline-flex; justify-content: center; align-items: center; background: #fff; width: 2.4rem; height: 2.4rem; border: .1rem solid var(--stroke-border); border-radius: .6rem;}
.calendar__control .control__btn::after{background: var(--icon-primary); width: 1.65rem; height: 1.65rem;}
.calendar__control .control__prev{display: flex; justify-content: center; align-items: center; gap: 1.2rem;}
.calendar__control .control__next{display: flex; justify-content: center; align-items: center; gap: 1.2rem;}

.sp__modal--calendar .cn-modal-main{width: 465px; border-radius: 9px; overflow: hidden;}
.sp__modal--calendar .event__list{padding: 20px; overflow: auto; height: 400px;}
.sp__modal--calendar .event__list li{display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--stroke-divider);}
.sp__modal--calendar .event__list li:last-child{border-bottom: 0;}
.sp__modal--calendar .event__list li > i{flex-shrink: 0;}
.sp__modal--calendar .event__list li .event__info{flex: 1; display: flex; flex-direction: column; gap: 8px;}

.event__list li{display: flex; gap: 1.2rem; padding: 1.2rem 0; border-bottom: .1rem solid var(--stroke-divider);}
.event__list li:last-child{border-bottom: 0;}
.event__list li > i{flex-shrink: 0;}
.event__list li .event__info{flex: 1; display: flex; flex-direction: column; gap: .8rem;}

/* 뱃지 */
.sp__badge{position: relative;}
.sp__badge::before{content: ""; position: absolute; top: -.1rem; right: -.1rem; background: var(--brand-primary); width: 5px; height: 5px; border-radius: 5rem;}

/* 갤러리형 리스트 */
.sp__gallery{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem .9rem;}
.sp__gallery .gallery__item{display: flex; flex-direction: column; gap: 1.2rem;}
.sp__gallery .gallery__item .item__thumb{position: relative; background: var(--brand-secondary-10); width: 100%; height: 10rem; aspect-ratio: 174.8 / 100; border-radius: .8rem; overflow: hidden;}
.sp__gallery .gallery__item .item__thumb .thumb__txt{position: absolute; top: 0; left: 0; width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: var(--brand-secondary); font-size: 1.5rem; font-weight: 500; line-height: 2.1rem; padding: 1.6rem 1.6rem 0 1.6rem; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.015rem;}
.sp__gallery .gallery__item .item__thumb img{width: 100%; height: 100%; object-fit: cover; object-position: center;}
.sp__gallery .gallery__item .item__info{display: flex; flex-direction: column; gap: 6px;}
.sp__gallery .gallery__item .item__info strong{width: 100%;}
.sp__gallery .gallery__item .item__info .info__data{display: flex; align-items: center; gap: .4rem;}
.sp__gallery .gallery__item .item__info .info__data :is(.sp__level--img, span){flex-shrink: 0;}

/* 인기 게시판 */
.popular__table{border-top: .1rem solid var(--stroke-accent)}
.popular__table .popular__item{display: flex; align-items: center; gap: .8rem; padding: 1.2rem 0; overflow: hidden;}
.popular__table .popular__item .item__number{width: 2.4rem; flex-shrink: 0; color: #121212; font-size: 1.4rem; font-weight: 700;}
.popular__table .popular__item:nth-child(-n+3) .item__number{color: var(--text-brand);}
.popular__table .popular__item .item__info{flex: 1; display: flex; flex-direction: column; gap: .8rem; overflow: hidden;}
.popular__table .popular__item .item__info .info__data{display: flex; align-items: center; gap: .2rem;}
.popular__table .popular__item .item__info .info__data .data__user{display: flex; align-items: center; gap: .2rem;}
.popular__table .popular__item .item__info .info__data .data__user [class*=sp__level][class*=--img] > img{width: 1.2rem; height: 1.2rem;}
.popular__table .popular__item .item__info .info__data .data__extra{display: flex; align-items: center; gap: .2rem;}
.popular__table .popular__item .item__info .info__data .data__extra i::after{background: var(--icon-primary);}

/* 딤배너 */
.gongsoop__popup{display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .7); z-index: 101; overflow: auto; padding: 5rem 0; text-align: center;}
.gongsoop__popup::after{content: ""; display: inline-block; height: 100%; vertical-align: middle;}
.gongsoop__popup .dim__wrap{display: inline-block; width: 33.5rem; border-radius: 1.2rem; overflow: hidden; vertical-align: middle;}
.gongsoop__popup .dim__wrap a{display: block;}
.gongsoop__popup .dim__wrap a img{width: 100%;}
.gongsoop__popup .dim__wrap .dim__btns{display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #fff; padding: 0 1.6rem; height: 5.8rem;}
.gongsoop__popup .dim__wrap .dim__btns > div{display: flex; align-items: center; gap: .2rem;}
.gongsoop__popup .dim__wrap .dim__btns > div > a{display: flex; align-items: center; gap: .2rem;}
.gongsoop__popup .dim__wrap .dim__btns > div > a::after{position: static; width: 2.4rem; height: 2.4rem;}
.gongsoop__popup .dim__wrap .dim__btns > i{width: 2.4rem; height: 2.4rem;}
.gongsoop__popup .dim__wrap .dim__btns > i::after{background: var(--icon-primary);}
.gongsoop__popup.active{display: block;}

.gongsoop__popup2{display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .7); z-index: 101; overflow: auto; padding: 5rem 0; text-align: center;}
.gongsoop__popup2::after{content: ""; display: inline-block; height: 100%; vertical-align: middle;}
.gongsoop__popup2 .dim__wrap{display: inline-flex; flex-direction: column; gap: 2rem; background: #fff; width: 34.3rem; border-radius: 1.2rem; vertical-align: middle; padding: 2rem 2.4rem; position: relative;}
.gongsoop__popup2 .dim__wrap .dim__btns{display: flex; align-items: center; gap: .8rem;}
.gongsoop__popup2 .dim__wrap .dim__btns a{flex: 1;}
.gongsoop__popup2 .dim__wrap .dim__btns .dim__btn--hide{display: none !important;}
.gongsoop__popup2 .dim__wrap .dim__outer{display: flex; justify-content: center; position: absolute; top: 100%; left: 0; width: 100%; padding-top: 1.2rem;}
.gongsoop__popup2 .dim__wrap .dim__outer a{text-decoration: underline;}
.gongsoop__popup2 .dim__wrap .popup__content .guide__slider:not(.swiper){display: flex;}
.gongsoop__popup2 .dim__wrap .popup__content .guide__slider:not(.swiper) li{width: 100%;}
.gongsoop__popup2 .dim__wrap .popup__content .guide__slider .guide__pager{display: inline-flex; justify-content: center; align-items: center; position: absolute; top: 1.2rem; right: 1.2rem; bottom: auto; left: auto; background: var(--bg-backdrop); color: var(--text-inactive); font-size: 1.2rem; min-width: 3.5rem; width: auto; height: 2.1rem; padding: 0 .8rem; border-radius: 5rem; letter-spacing: 0; padding-top: .1rem;}
.gongsoop__popup2 .dim__wrap .popup__content .guide__slider .guide__pager .swiper-pagination-current{color: #fff;}
.gongsoop__popup2.active{display: block;}

/* Confirm modal */
.confirm__modal .cn-modal-main{width: 34.3rem; border-radius: 1.2rem;}
.confirm__modal .cn-modal-main .modal_contents{padding: 2rem;}

/* user rank list */
.sp__rank--user li a{display: flex; align-items: center; padding: 0 .4rem; overflow: hidden; height: 5.2rem;}
.sp__rank--user li + li{border-top: .1rem solid var(--stroke-divider);}
.sp__rank--user li a .number{flex-shrink: 0; font-size: 1.6rem; font-weight: 700; width: 3.6rem; text-align: center;}
.sp__rank--user li a .user{flex: 1; gap: .4rem;}

/* 투표 */
.sp__vote--box{position: relative;}
.sp__vote--box .vote__menu{position: absolute; top: 1.6rem; right: 1.6rem; width: 2.4rem !important; height: 2.4rem !important;}
.sp__vote--box .vote__menu a{display: block; width: 100%; height: 100%;}
.sp__vote--box .vote__menu a::after{background: var(--icon-primary)}
.sp__vote--box .sp__ico--dot{width: .6rem; height: 1.2rem;}
.sp__vote--box .sp__ico--dot::after{background: var(--icon-primary);}
.sp__vote--box .vote__content > label{display: flex; align-items: center; gap: .8rem; background: var(--bg-secondary); border-radius: var(--border-radius-m); height: 3.6rem; padding: 0 1.2rem;}
.sp__vote--box .vote__content > label > input{display: none;}
.sp__vote--box .vote__content > label > i{width: 2rem; height: 2rem;}
.sp__vote--box .vote__content > label > i::after{background: var(--icon-primary);}
.sp__vote--box .vote__btn{display: flex; gap: .4rem;}
.sp__vote--box .vote__btn > a{flex: 1;}
.sp__vote--box .vote__btn [class*=sp__btn--accent]{color: #fff !important;}
.sp__vote--box .vote__btn [class*=sp__btn--basic]{color: #121212 !important; line-height: normal;}
.sp__vote--box .vote__result .result__item{display: flex; flex-direction: column; gap: .8rem; padding: .4rem 0;}
.sp__vote--box .vote__result .result__item .result__tit{font-size: 1.3rem; font-weight: 600;}
.sp__vote--box .vote__result .result__item .result__per{display: flex; align-items: center; gap: .4rem;}
.sp__vote--box .vote__result .result__item .result__per > div{font-size: 1.3rem; color: var(--text-secondary); }
.sp__vote--box .vote__result .result__item .result__per > span{display: inline-flex; align-items: center; background: var(--bg-secondary); color: var(--text-secondary); font-weight: 700; font-size: 1.1rem; height: 2.2rem; border-radius: 5rem; padding: 0 .6rem; text-align: center;}
.sp__vote--box .vote__result .result__item .result__graph{display: flex; background: var(--bg-tertiary); height: .6rem; border-radius: 5rem; overflow: hidden;}
.sp__vote--box .vote__result .result__item .result__graph > span{background: var(--icon-primary); border-radius: 5rem;}
.sp__vote--box .vote__result .result__item.active .result__per > div{color: var(--brand-primary);}
.sp__vote--box .vote__result .result__item.active .result__per > span{background: var(--brand-primary-5); color: var(--brand-primary);}
.sp__vote--box .vote__result .result__item.active .result__graph > span{background: var(--brand-primary);}

.sp__vote--box:not(.vote__form) .vote__content > label:has(input:checked){background: var(--brand-primary-5);}
.sp__vote--box:not(.vote__form) .vote__content > label:has(input:checked) > i::after{background: var(--brand-primary);}
.sp__vote--box.vote__form{overflow: visible; border-radius: var(--border-radius-m);}
.sp__vote--box.vote__form .vote__content > label{cursor: auto;}

/* 로딩 */
[class*=sp__loader]{display: inline-block; position: absolute; top: 10rem; left: 50%; transform: translate(-50%, -50%); width: 7.8rem; height: 8rem; z-index: 100;}
[class*=sp__loader] div{position: absolute; top: 3.3rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--brand-primary); animation-timing-function: cubic-bezier(0, 1, 1, 0);}
[class*=sp__loader] div:nth-child(1){left: .8rem; animation: ani__flip1 0.6s infinite;}
[class*=sp__loader] div:nth-child(2){left: .8rem; animation: ani__flip2 0.6s infinite;}
[class*=sp__loader] div:nth-child(3){left: 3.2rem; animation: ani__flip2 0.6s infinite;}
[class*=sp__loader] div:nth-child(4){left: 5.6rem; animation: ani__flip3 0.6s infinite;}

/* confirm */
.cn-confirm-modal .cn-extra-button{position: absolute; top: calc(100% + 1.2rem); width: 100%;}
.sp__confirm--alert{display: flex; justify-content: center; align-items: center; background: var(--brand-primary); width: 5rem !important; height: 5rem !important; border-radius: 1.2rem;}
.sp__confirm--alert i{width: 3rem; height: 3rem;}
.sp__confirm--alert i::after{background: #fff;}

/* alarm */
.sp__alarm--notification{padding: 2rem 0 1.6rem;}