@charset "UTF-8";

/* ========================================================================
 *  Desktop GNB — Figma GNB_수정안
 *  의료진 소개는 특별함 메뉴 안에서 진료과별 3depth 패널을 연다.
 * ======================================================================== */

@media (min-width: 992px) {
	#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu {
		overflow: visible !important;
	}

	/* Figma Component 11: 특별함 1depth 메뉴 */
	#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu.gnb-special-dropdown {
		width: 274px;
		min-width: 274px;
		padding: 16px 16px 24px;
		box-sizing: border-box;
	}

	#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu.gnb-special-dropdown > li {
		position: relative;
		width: 100%;
	}

	/* 메뉴의 좌우 padding 영역까지 hover hit-area로 사용해 3depth 진입이 끊기지 않게 한다. */
	#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu.gnb-special-dropdown > .gnb-depth2-item--doctors {
		width: calc(100% + 16px);
	}

	#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu.gnb-special-dropdown > li > a,
	#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu.gnb-special-dropdown > li > .gnb-depth2-link {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		min-height: 37px;
		padding: 10px 20px;
		box-sizing: border-box;
		font-family: 'Pretendard', sans-serif;
		font-size: 17px;
		font-weight: 500;
		line-height: normal;
		letter-spacing: -0.68px;
		text-align: left;
		color: #292524;
		white-space: nowrap;
	}

	#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu.gnb-special-dropdown > li > a:hover,
	#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu.gnb-special-dropdown > li > .gnb-depth2-link:hover,
	#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu.gnb-special-dropdown > li.gnb-depth2-item--doctors:hover > .gnb-depth2-link {
		font-weight: 700;
		color: #5e2c7b;
		background: transparent;
	}

	.gnb-depth-toggle {
		display: block;
		flex: 0 0 auto;
		width: 12px;
		height: 12px;
		object-fit: contain;
	}

	/* Figma Component 12: 의료진 소개 2depth 확장 패널 */
	#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu.gnb-special-dropdown .gnb-depth3-panel {
		display: none;
		position: absolute;
		z-index: 20;
		/* outer menu padding(16px) + 앞선 2개 행(각 40px)만큼 위로 올려 상단 정렬 */
		top: -96px;
		left: 100%;
		width: 731px;
		min-height: 240px;
		padding: 16px 16px 24px;
		box-sizing: border-box;
		background: #fff;
		align-items: flex-start;
	}

	#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu.gnb-special-dropdown .gnb-depth3-panel::before {
		content: '';
		position: absolute;
		left: 0;
		top: 16px;
		bottom: 24px;
		width: 1px;
		background: #e7e5e4;
	}

	#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu.gnb-special-dropdown > .gnb-depth2-item--doctors:hover > .gnb-depth3-panel,
	#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu.gnb-special-dropdown > .gnb-depth2-item--doctors:focus-within > .gnb-depth3-panel {
		display: flex;
	}

	#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu.gnb-special-dropdown .gnb-depth3-panel .gnb-doctor-group {
		flex: 0 0 auto;
	}

	#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu.gnb-special-dropdown .gnb-depth3-panel .gnb-doctor-group__title,
	#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu.gnb-special-dropdown .gnb-depth3-panel .gnb-doctor-group li a {
		box-sizing: border-box;
		white-space: nowrap;
	}

	#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu.gnb-special-dropdown .gnb-depth3-panel .gnb-doctor-group__title {
		display: flex;
		align-items: center;
		gap: 4px;
		min-height: 31px;
		padding: 10px 20px;
		font-family: 'Pretendard', sans-serif;
		font-size: 13px;
		font-weight: 700;
		line-height: normal;
		letter-spacing: -0.39px;
		color: #a8599e;
	}

	#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu.gnb-special-dropdown .gnb-depth3-panel .gnb-doctor-group__title > span,
	.gnb-doctor-group__title > span {
		display: block;
		flex: 0 0 auto;
		width: 2px;
		height: 11px;
		background: #a8599e;
	}

	#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu.gnb-special-dropdown .gnb-depth3-panel .gnb-doctor-group ul,
	#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu.gnb-special-dropdown .gnb-depth3-panel .gnb-doctor-group li {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu.gnb-special-dropdown .gnb-depth3-panel .gnb-doctor-group li a {
		display: block;
		min-height: 36px;
		padding: 10px 20px;
		font-family: 'Pretendard', sans-serif;
		font-size: 16px;
		font-weight: 500;
		line-height: normal;
		letter-spacing: -0.64px;
		text-align: left;
		color: #44403c;
	}

	#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu.gnb-special-dropdown .gnb-depth3-panel .gnb-doctor-group li a:hover {
		font-weight: 700;
		color: #5e2c7b;
		background: transparent;
		text-decoration: none;
	}
}