.skm-dt-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 60px;
	position: relative;
}

/* ---------- Desktop sidebar ---------- */
.skm-dt-sidebar {
	flex: 0 0 260px;
	position: sticky;
	top: 40px;
}

.skm-dt-sidebar-title {
	font-size: 30px;
	font-weight: 600;
	line-height: 1.25;
	color: #a9c2ec;
	margin-bottom: 32px;
}

.skm-dt-tab-col {
	position: relative;
	padding-left: 22px;
}

.skm-dt-line {
	position: absolute;
	left: 3px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background-color: #e2e5ec;
	border-radius: 2px;
	overflow: hidden;
}

.skm-dt-line-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #2451C4;
	transition: height 0.25s ease;
}

.skm-dt-tab-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.skm-dt-tab {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	cursor: pointer;
	color: #9aa0aa;
	font-size: 15px;
	line-height: 1.4;
	transition: color 0.2s ease;
}

.skm-dt-tab.active {
	color: #2451C4;
	font-weight: 600;
}

.skm-dt-dot {
	flex: 0 0 auto;
	position: absolute;
	left: -22px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #e2e5ec;
	border: 2px solid #e2e5ec;
}

.skm-dt-dot.active,
.skm-dt-dot.passed {
	background-color: #2451C4;
	border-color: #2451C4;
}

/* ---------- Mobile nav (hidden on desktop) ---------- */
.skm-dt-mobile-nav {
	display: none;
}

/* ---------- Panels ---------- */
.skm-dt-panels {
	flex: 1 1 auto;
	min-width: 0;
}

.skm-dt-panel {
	display: none;
}
.skm-dt-panel.active {
	display: block;
}

.skm-dt-block {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 28px 0;
	border-bottom: 1px solid #e6e6e6;
}
.skm-dt-block:first-child {
	padding-top: 0;
}
.skm-dt-block:last-child {
	border-bottom: none;
}

.skm-dt-block-text {
	flex: 1 1 auto;
	min-width: 0;
}

.skm-dt-heading {
	margin: 0 0 12px;
	font-size: 19px;
	font-weight: 700;
	color: #151515;
	line-height: 1.35;
}

.skm-dt-description {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: #5c5c5c;
}

/* ---------- Button: circle on desktop ---------- */
.skm-dt-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: #2451C4;
	text-decoration: none;
	transition: transform 0.2s ease;
}
.skm-dt-btn:hover {
	transform: translateY(2px);
}

.skm-dt-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
}
.skm-dt-circle svg {
	stroke: #ffffff;
}

.skm-dt-btn-label {
	display: none;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

/* =========================================================
   MOBILE (<= 768px)
   ========================================================= */
@media (max-width: 768px) {

	.skm-dt-wrapper {
		flex-direction: column;
		gap: 0;
	}

	.skm-dt-sidebar {
		display: none;
	}

	.skm-dt-mobile-nav {
		display: block;
		width: 100%;
		margin-bottom: 20px;
	}

	.skm-dt-mobile-title {
		font-size: 22px;
		font-weight: 600;
		color: #a9c2ec;
		margin-bottom: 14px;
	}

	.skm-dt-mobile-tabs {
		display: flex;
		gap: 22px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
	}
	.skm-dt-mobile-tabs::-webkit-scrollbar {
		display: none;
	}

	.skm-dt-mobile-tab {
		flex: 0 0 auto;
		background: none;
		border: none;
		padding: 0;
		font-size: 14px;
		color: #9aa0aa;
		white-space: nowrap;
		cursor: pointer;
	}
	.skm-dt-mobile-tab.active {
		color: #2451C4;
		font-weight: 600;
	}

	.skm-dt-mobile-track {
		position: relative;
		height: 3px;
		width: 100%;
		background-color: #e2e5ec;
		border-radius: 3px;
		margin-top: 12px;
		overflow: hidden;
	}
	.skm-dt-mobile-fill {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 0%;
		background-color: #2451C4;
		transition: width 0.25s ease;
	}

	/* Content blocks: text left, button pinned mid-right */
	.skm-dt-panels {
		position: relative;
	}

	.skm-dt-block {
		position: relative;
		padding: 20px 64px 20px 0;
		align-items: flex-start;
	}

	/* Button becomes a pill: circle + label, pinned to the right edge,
	   vertically centered against its own text block. */
	.skm-dt-btn {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		width: auto;
		height: 44px;
		border-radius: 22px;
		padding: 0 16px 0 0;
		gap: 0;
	}
	.skm-dt-btn:hover {
		transform: translateY(-50%);
	}

	.skm-dt-circle {
		width: 44px;
		height: 44px;
	}

	.skm-dt-btn-label {
		display: inline-block;
		margin-left: 4px;
	}
}