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

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

/* 레이아웃 */
.sp__main .main__content{flex: 1; overflow: hidden;}
.sp__main .main__side{flex-shrink: 0; width: 286px;}
.sp__main .main__tit i[class*=sp__ico]{width: 16px; height: 16px;}
.sp__main .main__tit i[class*=sp__ico]::after{background: var(--icon-primary);}
.sp__main .main__tit .sp__dropdown--btn i{width: 12px; height: 24px;}

/* 메인 딤배너 */
.gongsoop__dim{position:absolute !important;top:0;left:0;z-index:1100;width: 100%; text-align: center;height: 100%;}
.gongsoop__dim *{outline: none;}
.gongsoop__dim .dim__content{width:auto;z-index:1; display: inline-block;height: auto;position: fixed;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.gongsoop__dim .mask{display:block;width:100%;position:fixed;top:0;right:0;left:0;bottom:0;background:#000;opacity:0.7;filter:alpha(opacity=40);}
.gongsoop__dim .closed{position:absolute;top: -30px;right:0;opacity:0.7;}
.gongsoop__dim .close_1day{position:absolute;top: -30px;right:37px;opacity:0.7;}

/* 메인 배너 슬라이드 */
.sp__main .main__banner .banner__slider:not(.swiper){display: flex;}
.sp__main .main__banner .banner__slider{overflow: hidden; border-radius: var(--border-radius-l, 12px);}
.sp__main .main__banner .banner__slider > [class*=pagination]{top: 11px; right: 13px; left: auto; bottom: auto; font-size: 0; line-height: 0; width: auto; z-index: 1; }
.sp__main .main__banner .banner__slider > [class*=pagination] > span{background: var(--bg-inactive); margin: 0 3px; opacity: 1; width: 6px; height: 6px;}
.sp__main .main__banner .banner__slider > [class*=pagination] > span[class*=active]{background: var(--text-inverse);}

/* 메인 실시간 */
.sp__main .sp__rank .list__tit > [class*=sp__ico--]{width: 20px; height: 20px;}
.sp__main .sp__rank .list__tit > [class*=sp__ico--] i{width: 14px; height: 14px;}
.sp__main .sp__rank .rank_area > ul > li.rank__empty{background: rgba(255, 255, 255, 0.60);}

/* 풀서비스 현황 */
.sp__main .fullservice__area .fullservice__cnt .map__area{background: #fff; background: #fff; box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);}
.sp__main .fullservice__area .fullservice__cnt .map__area #chartdiv{height: 440px !important}
.sp__main .fullservice__area .fullservice__cnt .map__data{display: flex; gap: 0; flex-wrap: wrap; background: #fff; box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);}
.sp__main .fullservice__area .fullservice__cnt .map__data > div{flex: 1;}
.sp__main .fullservice__area .fullservice__cnt .map__data > div + div{border-left: 1px solid var(--stroke-divider)}
.sp__main .fullservice__area .fullservice__cnt .map__data .data__count{margin-top: 4px; display: flex; gap: 0; align-items: center;}
.sp__main .fullservice__area .fullservice__cnt .map__data .data__count .count__up{color: var(--brand-secondary); margin-left: auto;}
.sp__main .fullservice__area .fullservice__cnt .map__data .data__count i[class*=sp__ico] {display: inline-block;width: 7px;height: 4.5px; margin-left: 2px;}
.sp__main .fullservice__area .fullservice__cnt .map__data .data__count i[class*=sp__ico]::after {background: var(--brand-secondary);}

/* 실시간 오픈 채팅 */
.sp__main .sp__rank .rank_area{min-height: 328px; flex-wrap: nowrap;}
.sp__main .sp__rank .rank_area > .chat__list > li .list__body > a{height: 17px;}

/* 사이드 질문 응답율 */
.sp__main .main__answer{background: linear-gradient(121deg, #2EEA83 4%, #00ECD9 64.85%, #036BFB 128.15%);}
.sp__main .main__answer .answer__progress{flex: 1; display: flex; align-items: center; gap: 8px;}
.sp__main .main__answer .answer__progress > .progress__bar{position: relative; flex: 1;}
.sp__main .main__answer .answer__progress > .progress__bar::before{content: ""; position: absolute; top: 50%; left: 0; background: var(--bg-inactive); width: 100%; height: 3px; border-radius: 10px; transform: translateY(-50%); z-index: 0;}
.sp__main .main__answer .answer__progress > .progress__bar > span{position: absolute; top: 50%; left: 0; background: var(--bg-inverse); height: 3px; border-radius: 10px; transform: translateY(-50%); z-index: 1;}
.sp__main .main__answer i{width: 12px; height: 24px;}

/* 리스트 (명예의 전당+공지사항) */
.sp__main .main__rank{padding: 24px 20px 12px;}
.sp__main [class*=main__list] > li > a{display: flex; align-items: center; height: 54px;}
.sp__main [class*=main__list] > li + li{border-top: 1px solid var(--stroke-divider)}
.sp__main [class*=main__list] > li + li{border-top: 1px solid var(--stroke-divider)}
.sp__main [class*=main__list] > li .list__num{display: flex; align-items: center; flex-direction: column; gap: 2px; width: 20px; flex-shrink: 0; text-align: center;}
.sp__main [class*=main__list] > li .list__num span{font-size: 14px; font-weight: 700; line-height: 18px;}
.sp__main [class*=main__list] > li .list__num i{color: var(--brand-secondary); font-size: 9px; font-weight: 700; line-height: 9px;}
.sp__main [class*=main__list] > li .list__num i.keep{background: var(--bg-inactive); width: 7px; height: 2px;}
.sp__main [class*=main__list] > li .list__num i[class*=sp__ico]{display: inline-block; width: 7px; height: 4.5px;}
.sp__main [class*=main__list] > li .list__num i[class*=sp__ico]::after{background: var(--bg-inactive);}
.sp__main [class*=main__list] > li .list__num i[class*=up]::after{background: var(--brand-secondary);}
.sp__main [class*=main__list] > li .list__ct{flex: 1; overflow: hidden;}
.sp__main [class*=main__list] > li .list__txt{flex-shrink: 0; width: 68px; text-align: right;}
.sp__main [class*=main__list] > li .list__date{flex-shrink: 0;}
.sp__main [class*=main__list] > li [class*=sp__level--wrap] > span{flex: 0 auto;}
.sp__main [class*=main__list][class*=--small] > li > a{height: 40px;}
.sp__main .main__notice{padding: 24px 20px 16px;}

/* 공숲 SNS */
.sp__main .main__sns{padding: 24px 20px 16px;}
.sp__main .main__sns .sns__list{display: grid; grid-template-columns: 1fr 1fr; gap: 8px 4px;}
.sp__main .main__sns .sns__list .sns__items a{display: flex; align-items: center; gap: 8px;}
.sp__main .main__sns .sns__list .sns__icon{display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center;}

/* 게시글 */
[class*=sp__table] table tbody > tr > :is(th, td){padding: 0 7px; height: 44px;}
[class*=sp__table] table tbody > tr > td:has(.sp__level--wrap){padding-right: 0;}

/* 메인 게시글 */
.main__content [class*=sp__table] table tbody > tr > td a > i{margin-left: 0 !important;}

.sp__rank .rank_area .chat__list:has(.chat__empty){background: rgba(255, 255, 255, 0.60); padding: 0;}
.sp__rank .rank_area .chat__list .chat__empty{display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; height: 253px; border-top: 0 !important; text-align: center;}
.main__chat{display: flex;}
.main__chat .chat__slider{width: 98px; height: 151px;}
.main__chat .chat__slider [class*=sp__level--wrap] > span{flex: 0 auto;}

/* 공숲 PICK */
.main__pick{overflow: hidden; position: relative;}
.main__pick [class*=sp__typo-]{color: #fff;}
.main__pick .pick__slider:not(.swiper){display: flex; gap: 14px;}
.main__pick .pick__slider:not(.swiper) li{flex-shrink: 0;}
.main__pick .pick__slider{width: 100%; overflow: unset; position: unset;}
.main__pick .pick__slider .pick__button{position: absolute; top: 25px; bottom: auto; left: auto; height: 24px; margin: 0;}
.main__pick .pick__slider .pick__pager{display: flex; justify-content: center; align-items: center; right: 44px; width: 28px; text-align: center; color: #fff; font-size: 13px; letter-spacing: -0.13px; white-space: nowrap;}
.main__pick .pick__slider .pick__control{top: 25px; width: 24px; height: 24px;}
.main__pick .pick__slider .pick__control::after{background: #7B8A9D; width: 12px; height: auto;}
.main__pick .pick__slider .pick-button-prev{right: 72px;}
.main__pick .pick__slider .pick-button-next{right: 20px; transform: rotate(180deg);}
.main__pick .pick__item{display: flex; flex-direction: column; gap: 12px; width: 133px; overflow: hiddens;}
.main__pick .pick__item .pick__item--thumb{background: #E1E3F1; border-radius: 8px; overflow: hidden; text-align: center; width: 133px; height: 100px; aspect-ratio: 133 / 100;}
.main__pick .pick__item .pick__item--thumb img{width: 100%; height: 100%; object-fit: cover; object-position: center;}
.main__pick .pick__item .pick__item--info{display: flex; flex-direction: column; gap: 6px; overflow: hidden;}
.main__pick .pick__item .pick__item--info > div{display: flex; gap: 4px;}
.main__pick .pick__item .pick__item--info > div > p{opacity: .7;}
.main__pick .pick__item .pick__item--info > div > span{flex-shrink: 0; opacity: .7;}

/* 메인 카테고리 */
.main__category .category__nav li{color: var(--text-inactive); font-size: 18px; font-weight: 700;}
.main__category .category__nav li.active{color: #121212;}
.main__category .category__nav li.my.active{color: var(--text-brand, #0EBA5C);}
.main__category .category__btn{display: flex; justify-content: center;}
.main__category .category__btn a{width: 66px; height: 36px;}
.main__category .comment__count{margin-left: -2px !important;}
.main__category .sp__table--board table tbody > tr > td .table__type:not([class*=sp__label]){padding-right: 0;}

/* 명예의 전당 */
.sp__main [class*=sp__table] table tbody > tr > td:has(.table__link){padding-left: 0;}
.sp__main .main__legend [class*=main__list] > li > a{height: 44px;}
[class*=legend__rank] .rank__number{padding: 0; padding-left: 7px;}
[class*=legend__rank--][class*=--top3] tbody tr:nth-child(-n+3) .rank__number,
[class*=legend__rank--][class*=--top3] li:nth-child(-n+3) .rank__number{color: var(--text-brand);}

/* 이벤트 */
.main__event .event__thumb{background: #E1E3F1; border-radius: 8px; overflow: hidden; text-align: center; width: 246px; height: 116px; aspect-ratio: 246 / 116;}
.main__event .event__thumb img{width: 100%; height: 100%; object-fit: cover; object-position: center;}

/* 풀서비스 */
.main__fullservice [class*=sp__tab--rounded][class*=--dark] li:not(.active){background: #fff;}
.main__fullservice .sp__box--border{background: #fff; overflow: visible;}
.main__fullservice [class*=sp__ico]::after{background-color: currentColor;}
.main__fullservice .sp__status--graph{background: #C2CAD6; width: 100%; height: 24px; position: relative;}
.main__fullservice .sp__status--graph .graph__space{display: inline; width: 100%;}
.main__fullservice .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 center top / 532px auto; width: 0; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden;}
.main__fullservice .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%); pointer-events: none;}
.main__fullservice .fs__info--count{display: flex; flex-direction: column; gap: 12px; width: 100%}
.main__fullservice .fs__info--count .counter1 .odometer-digit{width: 25px;}
.main__fullservice .fs__info--count .odometer-digit *{width: 100%;}
.main__fullservice .fs__info--count strong{color: var(--brand-primary); font-size: 40px; font-weight: 700; letter-spacing: -0.8px; line-height: 40px;}
.main__fullservice .fs__info--count em{color: var(--brand-primary); font-size: 24px; font-weight: 700; line-height: 36px; height: 36px;}
.main__fullservice .fs__info--count p{display: flex; align-items: center; gap: 2px; font-size: 18px; font-weight: 600;}
.main__fullservice .fs__info--grade{display: flex; flex-direction: column; width: 100%; gap: 2px; background: var(--sp-bg-neutral-tint); padding: 12px 16px 4px; border-radius: 8px; border: 1px solid var(--sp-stroke-default)}
.main__fullservice .fs__info--grade .grade__slider{display: flex; gap: 12px;}
.main__fullservice .fs__info--grade .grade__slider .swiper{flex: 1;}
.main__fullservice .fs__info--grade .fs__grade--slider{flex: 1; overflow: hidden;}
.main__fullservice .fs__info--grade .fs__grade--slider li{display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 6px 0;}
.main__fullservice .fs__info--grade .fs__grade--slider:not(.swiper) > li + li{border-top: 1px solid rgba(0, 0, 0, 0.04);}
.main__fullservice .fs__info--grade .fs__grade--slider{height: 64px;}
.main__fullservice .fs__info--grade .fs__grade--slider .swiper-slide-active{border-bottom: 1px solid rgba(0, 0, 0, 0.04);}

.main__fullservice .fs__gongsoop--form{display: flex; align-items: flex-end; gap: 4px;}
.main__fullservice .fs__gongsoop--form .form__input{flex: 1; display: flex; flex-direction: column; gap: 4px;}
.main__fullservice .fs__gongsoop--form .form__input :is(input, textarea){border: 0;}
.main__fullservice .fs__gongsoop--form .form__btn{flex-shrink: 0;}

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

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

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

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

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

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