@charset "utf-8";

.ced-program-menu-container{ display: grid; grid-template-columns: 43px minmax(0, 1fr) 43px; align-items: center; width: 100%; height: 56px; overflow: hidden; }

/* grid 안에서 가운데 아이템이 안 줄어드는 문제 해결 */
.ced-program-menu-container .swiper.menu-wrapper{ min-width: 0; width: 100%; }

/* 가운데 swiper 영역 폭 전체에 라인 */
.ced-program-menu-container .swiper.menu-wrapper::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #dbdbdb; pointer-events: none; z-index: 3; }

/* 탭 선택 시 두꺼운 파란 줄 관련 */
.com-tab.type-01 > li > button.active{ position: relative; }
  
.com-tab.type-01 > li > button.active:before{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background-color: var(--career--primary-60) !important; }

/* 좌/우 버튼은 각 칸 중앙 */
.ced-program-menu-container .scroll-button{ justify-self: center; width: 40px; height: 40px; border: 1px solid rgba(0,0,0,.15); border-radius: 999px; background: #fff; display: inline-flex; align-items: center; justify-content: center; }

/* 핵심: li가 100% 먹지 못하게 */
.ced-srch-list > li{ width: auto !important; flex: 0 0 auto !important; margin: 0 !important; }

/* 버튼도 늘어나면 안 됨 */
.ced-srch-list > li > button{ flex: 0 0 auto !important; width: 180px !important; }

.scroll-button{ opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .15s ease; }

/* 숨김 상태 */
.scroll-button.is-hidden{ opacity: 0; visibility: hidden; pointer-events: none; }

/* 공통 버튼 스타일 */
.scroll-button{ width: 40px; height: 40px; border-radius: 999px; background: #fff; border: 1px solid rgba(0,0,0,.12); box-shadow: 0 2px 6px rgba(0,0,0,.12); display: inline-flex; align-items: center; justify-content: center; }

/* 버튼 위치 및 그라데이션 추가 */
.scroll-button{position: relative;}
.scroll-left.scroll-button.show:after {position:absolute; z-index: 2; top:0; right:-102px; width: 100px; height: 58px; background: linear-gradient(to left, rgba(255,255,255,0) 0%, #fff 60%); content: '';}
.scroll-right.scroll-button.show:before {position:absolute; z-index: 2; top:0; left:-102px; width: 100px; height: 58px; background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 60%); content: '';}