260219 (중첩CSS)

<!-- 테일윈드 -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<!-- 폰트어썸 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />

<header class="top-bar">
	<div class="con">
		<div class="logo-box">
			<a href="#" class="logo">
				UIUX
			</a>
		</div>
		
		<nav class="top-bar__menu-1">
			<ul class="depth1-menu">
				<li class="menu-item"><a href="#" class="menu-text">1차 메뉴 아이템1</a></li>
				<li class="menu-item"><a href="#" class="menu-text">1차 메뉴 아이템2</a></li>
				<li class="menu-item"><a href="#" class="menu-text">1차 메뉴 아이템3</a></li>
				<li class="menu-item"><a href="#" class="menu-text">1차 메뉴 아이템4</a></li>
			</ul>
		</nav>
		
		<div class="mobile-menu-btn-box">
			<button class="mobile-menu-btn">
				<span>
					<i class="fa-solid fa-bars"></i>
				</span>
			</button>
		</div>
	</div>
</header>

@font-face {
	font-family: "SUIT-Regular";
	src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2")
		format("woff2");
	font-weight: normal;
	font-style: normal;
}

html > body {
	font-family: "SUIT-Regular";
}

/* 라이브러리 */
.con {
	margin-inline: auto;
	max-width: 1080px;
}

/* 커스텀 */
/*
1 : .top-bar > .con {}
2 : .top-bar .con {}
*/

.top-bar {
	height: 80px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
	/* 		
	> .con {
	background-color: red;
	height: 100%;
}
	*/

	.con {
		height: 100%;
		display: flex;

		@media (width <= 920px) {
			padding-inline: 1rem;
		}
	}

	.logo {
		font-size: 1.5rem;
		font-weight: bold;
		height: 100%;
		display: flex;
		align-items: center;
		transition: color 0.3s ease-in-out;

		/* .logo:hover */
		&:hover {
			color: red;
		}
	}
}

.top-bar__menu-1 {
	margin-left: auto;

	@media (width <= 920px) {
		display: none;
	}

	.depth1-menu {
		display: flex;
		height: 100%;

		.menu-item {
			&:hover .menu-text {
				font-weight: bold;
			}

			.menu-text {
				display: flex;
				height: 100%;
				align-items: center;
				padding-inline: 1rem;
			}
		}
	}
}

.mobile-menu-btn-box {
	align-self: center;
	margin-left: auto;

	@media (width > 920px) {
		display: none;
	}

	.mobile-menu-btn {
		cursor: pointer;

		i {
			font-size: 1.3rem;
		}
	}
}