.tabs-main {
    width: 100%;
}
.tabs-main.--boxed {
    padding: 32px var(--sp-16-32) 40px var(--sp-16-32);
    border-radius: var(--b-radius--16);
    border: 1px solid var(--gray-200, #E5E7EB);
}
.tabs__nav {
	display: flex; 
	flex-direction: row; 
	flex-wrap: wrap;
	border-bottom: 2px solid var(--gray-200, #E5E7EB);
	gap: 0;
}
.tabs__nav__btn {
	padding: 6px var(--sp-16-24);
	min-height: 42px;
	background: none; 
	border: 0; 
	border-bottom: 3px solid transparent;
	margin-bottom: -2px; 
	cursor: pointer;
	color: var(--gray-500, #6B7280);
	display: inline-flex;
	align-items: center;
	transition: color 0.15s;
}
.tabs__nav__btn[aria-selected="true"] {
	color: var(--blue-700, #1D4ED8);
	border-bottom-color: var(--blue-700, #1D4ED8);
}
.tabs__nav__btn:hover { 
    color: var(--blue-700, #1D4ED8); 
}
.tabs__content { 
    padding-top: 32px; 
}
.tabs__panel { 
    display: block;
}
.tabs__panel[hidden] { 
    display: none;
}
.tabs__panel .tabs__panel__title {
	color: var(--gray-900);
}
.tabs__panel .tabs__panel__desc {
	color: var(--gray-700);
}

.tabs--nobg .tabs__nav {
	border-bottom: none;
}
.tabs--nobg .tabs__nav__btn {
	border-color: transparent;
}
.tabs--nobg .tabs__content {
    padding-top: 24px;
}

.tabs--bullet .tabs__nav {
	border-bottom: none;
	gap: 8px;
}
.tabs--bullet .tabs__nav__btn {
	gap: 8px;
	border-radius: 32px;
	border: 2px solid var(--gray-200, #E5E7EB);
	background: #fff;
	color: var(--gray-600, #4B5563);
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.tabs--bullet .tabs__nav__btn[aria-selected="true"] {
	background: var(--blue-700, #1D4ED8);
	border-color: var(--blue-700, #1D4ED8);
	color: #fff;
}
.tabs--bullet .tabs__nav__btn:hover:not([aria-selected="true"]) {
	border-color: var(--blue-400, #60A5FA);
	color: var(--blue-700, #1D4ED8);
}
.tabs--bullet .tabs__nav__btn:before {
	content: "";
	display: inline-block;
	width: 8px; 
	min-width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.6;
	flex-shrink: 0;
	transition: opacity 0.15s;
}
.tabs--bullet .tabs__nav__btn[aria-selected="true"]:before {
	opacity: 1;
	background: var(--lime-400, #a3e635);
}
.tabs--bullet .tabs__content { 
    padding-top: 24px; 
}