/* SMEN — Tab Menu */
.smen-tabmenu{
	position:relative;
	display:block;
	width:100%;
	padding:var(--stm-pad-y,20px) 0;
}

/* 뷰포트 — 좌우 화살표 너비만큼 패딩으로 비워서 메뉴와 겹치지 않게 */
.smen-tabmenu__viewport{
	width:100%;
	padding:0 48px;
	box-sizing:border-box;
	overflow-x:auto;
	overflow-y:hidden;
	scroll-behavior:smooth;
	scrollbar-width:none;
	-ms-overflow-style:none;
	/* 화살표 영역 근처 글씨 그라데이션 페이드 */
	-webkit-mask-image:linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
	mask-image:linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
/* 화살표 숨김일 때는 패딩/마스크 제거 */
.smen-tabmenu:not(:has(.smen-tabmenu__arrow)) .smen-tabmenu__viewport{padding:0;-webkit-mask-image:none;mask-image:none;}
.smen-tabmenu__viewport::-webkit-scrollbar{display:none;}

.smen-tabmenu__list{
	display:inline-flex;
	gap:var(--stm-gap,32px);
	margin:0;
	padding:0 8px;
	list-style:none !important;
	white-space:nowrap;
}
.smen-tabmenu__list li{
	list-style:none !important;
	background:none !important;
	margin:0;
	padding:0;
}
.smen-tabmenu__list li::before,
.smen-tabmenu__list li::marker{
	content:none !important;
	display:none !important;
}

/* 정렬 */
.smen-tabmenu.is-align-center .smen-tabmenu__list{
	min-width:100%;
	justify-content:center;
}
.smen-tabmenu.is-align-left .smen-tabmenu__list{justify-content:flex-start;}
.smen-tabmenu.is-align-right .smen-tabmenu__list{justify-content:flex-end;}

/* 항목 */
.smen-tabmenu__item{position:relative;}
.smen-tabmenu__item a{
	display:inline-block;
	padding:6px var(--stm-item-pad-x,0);
	color:var(--stm-color, #888);
	text-decoration:none;
	font-size:15px;
	letter-spacing:.02em;
	transition:color .25s;
}
.smen-tabmenu__item a:hover{color:var(--stm-color-active, #222);}

.smen-tabmenu__item.is-current a{
	color:var(--stm-color-active, #111);
	font-weight:600;
}

/* 좌우 화살표 — 컨테이너 좌/우 끝에 절대 위치 */
.smen-tabmenu__arrow{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:36px;height:36px;
	display:flex;align-items:center;justify-content:center;
	background:none;
	border:none;
	padding:0;
	cursor:pointer;
	color:var(--stm-color, #666);
	transition:color .2s, opacity .2s;
	z-index:2;
}
.smen-tabmenu__arrow:hover{color:var(--stm-color-active, #111);}
.smen-tabmenu__arrow[disabled]{opacity:.3;cursor:not-allowed;}
.smen-tabmenu__arrow--prev{left:0;}
.smen-tabmenu__arrow--next{right:0;}

/* 테마 — Dark / Light */
.smen-tabmenu.is-theme-dark{
	--stm-color:#888;
	--stm-color-active:#111;
}
.smen-tabmenu.is-theme-light{
	--stm-color:rgba(255,255,255,.7);
	--stm-color-active:#fff;
}

/* 모바일 */
@media(max-width:768px){
	.smen-tabmenu__list{gap:calc(var(--stm-gap,32px) * .6);}
	.smen-tabmenu__item a{font-size:10px;}
	.smen-tabmenu__arrow{width:32px;height:32px;}
	.smen-tabmenu__viewport{
		padding:0 38px;
		-webkit-mask-image:linear-gradient(to right, transparent 0, #000 38px, #000 calc(100% - 38px), transparent 100%);
		mask-image:linear-gradient(to right, transparent 0, #000 38px, #000 calc(100% - 38px), transparent 100%);
	}
}
