header {position:sticky !important; top: 0; width:100%}

/* 공숲 헤더 */
.sp__header{background: var(--bg-inverse); color: var(--white); height: 5rem; --lnb-width: 29.8rem; --lnb-transition: .3s;}
.sp__header .header__title{display: flex; gap: .5rem; height: 5rem; padding: 0 .4rem;}
.sp__header .header__title button{display: flex; align-items: center; gap: 0.5rem; height: 5rem;}
.sp__header .header__title button h2{color: var(--white);}
.sp__header .header__title button i[class*=sp__ico--arrow]{width: 1.7rem; height: 1.7rem; border: .1rem solid var(--brand-primary); border-radius: var(--border-radius-s);}
.sp__header .header__title button i[class*=sp__ico--arrow]::after{width:100%; background: var(--brand-primary); mask-size: 1.1rem;}
.sp__header .header__title.open button i[class*=sp__ico--arrow]::after{transform: rotate(180deg);}
.sp__header .header__btns{display: flex; align-items: center; gap: 1.2rem;}
.sp__header .header__btns > a{width: 2.4rem; height: 2.4rem;}
.sp__header .header__btns > a::after{background: var(--white);}

/* 검색창 */
.sp__header .header__search{position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: none;}
.sp__header .header__search.active{display: block;}
.sp__header .header__search .search__bar{ display: flex; align-items: center; padding-right: 2rem; background: var(--bg-inverse);}
.sp__header .header__search .search__bar .search__close{width: 5rem; height: 5rem;}
.sp__header .header__search .search__bar .search__close i.sp__ico--arrow_left{min-width: 5rem; min-height: 5rem;}
.sp__header .header__search .search__bar .search__close i.sp__ico--arrow_left::after{width: 2.4rem; background-color: var(--white)}
.sp__header .header__search .search__body{height: calc(100dvh - 5rem); background: var(--white)}
.sp__header .header__search .search__body .search__history .history__list > li{display: flex; align-items: center;}
.sp__header .header__search .search__body .search__history .history__list > li i.sp__ico--clock{width: 2rem; height: 2rem; background: var(--bg-secondary); border-radius: 100%;}
.sp__header .header__search .search__body .search__history .history__list > li i.sp__ico--clock::after{width: 1.2rem; height: 1.2rem;}
.sp__header .header__search .search__body .search__history .history__list > li .history__keyword{margin-left: 1rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.sp__header .header__search .search__body .search__history .history__list > li .history__date{margin-left: auto; margin-right: .8rem;}
.sp__header .header__search .search__body .search__history .history__list > li a.history__del {width: 1.8rem; height: 1.8rem;}
.sp__header .header__search .search__body .search__history .history__list > li a.history__del i{width: 100%; height: 100%;}

.sp__header .header__side{position: fixed; top: 0; right: 0; width: 100%; height: 100dvh; z-index: 100000; pointer-events: none; transition: background var(--lnb-transition);}
.sp__header .header__side.active{background: var(--bg-backdrop); pointer-events: all;}
.sp__header .header__side.active .side__lnb{right: 0;}
.sp__header .header__side .side__space{position: absolute; top: 0; left: 0; width: calc(100% - var(--lnb-width)); height: 100%;}
.sp__header .header__side .side__lnb{display: flex; flex-direction: column; background: #fff; color: var(--text-primary); width: var(--lnb-width); height: 100%; position: absolute; top: 0; right: calc(var(--lnb-width) * -1); transition: right var(--lnb-transition); overflow: hidden;}
.sp__header .header__side .side__lnb .lnb__head{flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; height: 5rem; padding: 0 1.3rem;}
.sp__header .header__side .side__lnb .lnb__head > div{display: flex; gap: 1.2rem;}
.sp__header .header__side .side__lnb .lnb__head a::after{background: var(--icon-secondary);}
.sp__header .header__side .side__lnb .lnb__body{overflow: auto; flex: 1;}

.sp__lnb{font-family: var(--font-pr);}
.sp__lnb .lnb__user{padding: 1.6rem;}
.sp__lnb .lnb__user .user__info{display: flex; align-items: center; gap: .4rem;}
.sp__lnb .lnb__user .user__info::after{width: 1.2rem; height: 2.4rem;}
.sp__lnb .lnb__user .user__info [class*=sp__level]{width: 1.6rem; height: 1.6rem;}
.sp__lnb .lnb__user .user__btns > a:not([class*=sp__btn]){color: var(--text-secondary); font-size: 1.2rem; text-decoration: underline; text-underline-position: under;}
.sp__lnb .lnb__user .user__btns > a[class*=sp__btn]{width: 5.4rem;}
.sp__lnb .lnb__user .user__status > div{flex: 1; text-align: center;}
.sp__lnb .lnb__user .side__onboarding{position: relative;}
.sp__lnb .lnb__user .side__onboarding .side__onboarding--btn{width: 1.6rem; height: 1.6rem; position: absolute; right: 0.8rem; top: 0.8rem;}
.sp__lnb .lnb__user .side__onboarding img{max-width: 100%;}
.sp__lnb .lnb__user .side__btn > div{flex: 1;}
.sp__lnb .lnb__user .side__alarm i{width: 1.6rem; height: 1.6rem;}
.sp__lnb .lnb__user .side__alarm i::after{background-color: var(--icon-secondary);}
.sp__lnb .lnb__user .side__alarm .alarm__count{margin-top: .1rem;}
.sp__lnb .lnb__menu li [class*=sp__label]{vertical-align: .1rem; margin-left: .4rem; line-height: 100%;}
.sp__lnb .lnb__menu li > a[class*=sp__ico--new]::after{vertical-align: -0.3rem; flex-shrink: 0; width: 1.6rem; height: 1.6rem; margin-left: .2rem;}
.sp__lnb .lnb__menu li > a{font-size: 1.5rem; font-weight: 500; line-height: 2.1rem; width: 100%;}
.sp__lnb .lnb__menu li.active > a{color: var(--text-brand); font-weight: 700;}
.sp__lnb .lnb__menu > ul + ul{border-top: 1px solid var(--stroke-divider, #EDEDF3);}
.sp__lnb .lnb__menu > ul > li{display: flex; gap: .4rem; padding: 1.4rem 1.6rem;}
.sp__lnb .lnb__menu > ul > li i{width: 1.6rem; height: 1.6rem; flex-shrink: 0; margin-top: .2rem;}
.sp__lnb .lnb__menu > ul > li i::after{background: var(--surface-inactive);}
.sp__lnb .lnb__menu > ul > li.active i::after{background: var(--text-brand);}
.sp__lnb .lnb__menu > ul > li:has(ul){flex-direction: column; padding: .8rem 1.6rem; gap: 0;}
.sp__lnb .lnb__menu > ul > li > strong{display: flex; align-items: center; color: var(--text-secondary); font-size: 1.4rem; font-weight: 600; height: 3.4rem;}
.sp__lnb .lnb__menu > ul > li > ul > li{display: flex; gap: .4rem; padding: .9rem 0;}

.sp__header--menu.modal-bottom-wrap.__type_top{top: 5rem;}
.sp__header--menu .modal-body{background: var(--gray-100); padding-left: 0; padding-right: 0; border-radius: 0 0 1.6rem 1.6rem !important;}
.sp__header--menu ul.sp__header--menu li a{padding: 1rem 0; display: block; text-align: center; position: relative;}
.sp__header--menu ul.sp__header--menu li a:active::before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.04);}

/* sub header */
.sp__header--sub{height: 5rem; position: relative; background: var(--white); border-bottom: .1rem solid var(--stroke-divider)}
.sp__header--sub .sub__title{width: 100%; display: flex; justify-content: center;}
.sp__header--sub :is(.sub__left, .sub__right){display: flex; position: absolute; top: 0; bottom: 0;}
.sp__header--sub .sub__left{left: 0;}
.sp__header--sub .sub__right{right: 0;}
.sp__header--sub :is(.sub__left, .sub__right) a {width: 5rem; height: 5rem; display: flex; justify-content: center; align-items: center;}
.sp__header--sub :is(.sub__left, .sub__right) a i::after{background-color:  var(--icon-secondary);}
.sp__header--sub a.btn--text{justify-content: start; padding-left: .4rem;}
.sp__header--sub a.btn--text.active{color: var(--text-brand) !important}

/* bottom quick button */
.sp__quick{position: fixed; bottom: 1.6rem; right: 1.6rem;}
.sp__quick ul {display: flex; flex-direction: column; gap: .8rem;}
.sp__quick ul li.quick__top{display: none; transition: all .5s ease-in-out;}
.sp__quick ul li.quick__top.active{display: block; transition: all .5s ease-in-out;}
.sp__quick ul li a{display: flex; justify-content: center; align-items: center; width: 4.2rem; height: 4.2rem; border-radius: 100%; background: var(--white); box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.08); border: .1rem solid var(--stroke-border)}
.sp__quick ul li a i{width: 2.6rem; height: 2.6rem}
.sp__quick ul li.quick__btn--brand a{background: var(--brand-primary); border-color: var(--brand-primary-10);}
.sp__quick ul li.quick__btn--brand a i{width: 2.6rem; height: 2.6rem;}
.sp__quick ul li.quick__btn--brand a i::after{background-color: var(--white);}
.sp__quick ul li.quick__btn--brand.quick__chat a{align-items: unset; padding-top: .65rem;}

/* header z-index */
.sp__header{z-index: 150;}
.sp__header--sub{z-index: 140;}
.sp__quick {z-index: 130;}