@charset "utf-8";

/* 기타 > 사이트맵 (etc_a_1) — $menu 3뎁스 순회 */

.sitemap {
	display: flex;
	flex-direction: column;
}

/* ── 큰메뉴 섹션 ─────────────────────────────────────────────── */
.sitemap-group {
	padding: 50px 0;
	border-top: 2px solid var(--color-black);
}

.sitemap-group:first-child {
	padding-top: 0;
	border-top: 0;
}

.sitemap-group-title {
	margin-bottom: 24px;
	font-size: var(--font-size-heading-lg);
	line-height: var(--line-height-heading-lg);
	font-weight: var(--font-weight-bold);
	color: var(--color-black);
}

/* ── 2뎁스 + 3뎁스 컬럼 (가로 배치, 각 362px) ───────────────── */
.sitemap-depth2-list {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 24px;
}

.sitemap-depth2 {
	width: 362px;
}

/* 2뎁스 = 회색 박스 72px + 우측 화살표 */
.sitemap-depth2-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	height: 72px;
	padding: 0 24px;
	/* background: var(--color-gray50); */
	font-size: 18px;
	font-weight: var(--font-weight-semibold);
	color: var(--color-black);
	border: 1px solid var(--color-border-base);
	transition: background .2s, color .2s, border-color .2s;
}

.sitemap-depth2-link:hover {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	color: var(--color-text-inverse);
}

.sitemap-depth2-link:active {
	background: var(--color-primary-pressed);
	border-color: var(--color-primary-pressed);
	color: var(--color-text-inverse);
}

/* .icon 은 mask(background:currentColor)라 color 상속만 하면 hover/active 시 흰색 따라감 */
.sitemap-depth2-link .icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: inherit;
}

/* 3뎁스 = 불릿(•) + 텍스트, 보더 없음, 2뎁스 아래 세로 나열 */
.sitemap-depth3-list {
	display: flex;
	flex-direction: column;
	margin-top: 12px;
	padding-left: 8px;
}

.sitemap-depth3-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 8px;
	font-size: 16px;
	font-weight: var(--font-weight-regular);
	color: var(--color-text-title1);
}

.sitemap-depth3-link .icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: inherit;
}

.sitemap-depth3-link::before {
	content: "";
	flex-shrink: 0;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--color-text-title1);
}

.sitemap-depth3-link:hover {
	color: var(--color-primary);
}

.sitemap-depth3-link:hover::before {
	background: var(--color-primary);
}

/* ── 반응형 ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.sitemap-group {
		padding: 32px 0;
	}

	.sitemap-depth2-list {
		gap: 28px;
	}

	.sitemap-depth2 {
		width: 100%;
	}
}