/**
 * HC Joyn Menu Learn — 상단 동기화 네비·트리거 (Pretendard + 다크 바)
 * Astra 헤더 + hcjoyn-menu-sync-client + #hcMenuTrigger 공통 스타일
 */

:root {
	/* 메인 사이트 상단 네비와 동일 톤(참고: #121212 / 간격 ~45px / 17px·600) */
	--hcjoyn-learn-header-bg: #121212;
	--hcjoyn-learn-nav-text: #ffffff;
	--hcjoyn-learn-nav-accent: #ff6600;
	--hcjoyn-learn-nav-size: 17px;
	--hcjoyn-learn-nav-weight: 600;
	/* 최대 ~45px, 좁은 화면에서는 비율로 축소 */
	--hcjoyn-learn-nav-gap: clamp(1.25rem, 2.8vw, 2.8125rem);
	--hcjoyn-learn-nav-muted: rgba(255, 255, 255, 0.82);
	--hcjoyn-learn-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
		system-ui, "NanumSquare", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

/* ── 폰트: 상단 바·동기화 메뉴·햄버거 버튼 일괄 적용 ── */
body.hc-joyn-menu-active .ast-primary-header-bar,
body.hc-joyn-menu-active #ast-desktop-header,
body.hc-joyn-menu-active #ast-mobile-header,
body.hc-joyn-menu-active .hcjoyn-sync-menu-wrap,
body.hc-joyn-menu-active nav.hcjoyn-synced-menu-nav,
body.hc-joyn-menu-active .hc-joyn-menu-trigger,
body.hc-joyn-menu-active .hc-joyn-menu-trigger .hc-joyn-menu-trigger-text {
	font-family: var(--hcjoyn-learn-font) !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ── 헤더 바: 짙은 회색 배경 (스크린샷과 유사) ── */
body.hc-joyn-menu-active .ast-primary-header-bar,
body.hc-joyn-menu-active .ast-above-header-bar,
body.hc-joyn-menu-active #ast-desktop-header .ast-primary-header-bar,
body.hc-joyn-menu-active .ast-mobile-header-wrap .ast-primary-header-bar {
	background-color: var(--hcjoyn-learn-header-bg) !important;
	background-image: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
	box-shadow: none !important;
}

@media (max-width: 921px) {
	body.hc-joyn-menu-active .ast-primary-header-bar {
		background-color: var(--hcjoyn-learn-header-bg) !important;
	}
}

/* ── 헤더 전폭: mainpage-mini(히어로·푸터2)처럼 테마 ast-container 폭 한도 제거 ──
   footer2 의 width:100%·max-width:100%·margin 0 / base .mainpage-section width 100% 와 동일 목적 */
body.hc-joyn-menu-active #masthead.site-header,
body.hc-joyn-menu-active .site-header,
body.hc-joyn-menu-active #ast-desktop-header,
body.hc-joyn-menu-active #ast-mobile-header,
body.hc-joyn-menu-active .ast-mobile-header-wrap {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box !important;
}

body.hc-joyn-menu-active .ast-primary-header-bar .ast-builder-grid-row-container,
body.hc-joyn-menu-active .ast-above-header-bar .ast-builder-grid-row-container,
body.hc-joyn-menu-active .ast-below-header-bar .ast-builder-grid-row-container,
body.hc-joyn-menu-active .ast-mobile-header-wrap .ast-builder-grid-row-container {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp(1rem, 4vw, 1.25rem) !important;
	padding-right: clamp(1rem, 4vw, 1.25rem) !important;
	box-sizing: border-box !important;
}

/* 헤더 내부 행: 세로 정렬 */
body.hc-joyn-menu-active .ast-builder-grid-row.ast-builder-grid-row-has-sides.ast-grid-center-col-layout {
	align-items: center !important;
}

/* ═══════════════════════════════════════════════════════════
   동기화 네비 — 헤더 전체 기준 수평 가운데 정렬
   (로고는 왼쪽, 메뉴 블록만 뷰포트 중앙 — Astra는 메뉴를 오른쪽 칸에 두어
   position:absolute 의 기본 기준이 '오른쪽 열'이 되므로 중간이 비어 보임)
══════════════════════════════════════════════════════════ */
body.hc-joyn-menu-active .ast-primary-header-bar .ast-builder-grid-row-container,
body.hc-joyn-menu-active .ast-primary-header-bar .ast-builder-grid-row {
	position: relative !important;
}

/*
 * 오른쪽 섹션·레이아웃 래퍼가 position:relative 이면 nav 의 left:50% 가 '열 안'의 중앙이 된다.
 * 동기화 nav 가 들어 있는 조상만 static 으로 올려, 기준을 위 행/헤더 전체로 맞춘다.
 */
body.hc-joyn-menu-active .ast-primary-header-bar .site-header-section:has(nav.hcjoyn-synced-menu-nav),
body.hc-joyn-menu-active .ast-primary-header-bar .site-header-section:has(nav.hcjoyn-synced-menu-nav) .ast-builder-layout-element {
	position: static !important;
}

/* :has() 미지원 브라우저 대비(메뉴는 보통 primary 오른쪽 칸) */
body.hc-joyn-menu-active .ast-primary-header-bar .site-header-primary-section-right,
body.hc-joyn-menu-active .ast-primary-header-bar .site-header-primary-section-right-center,
body.hc-joyn-menu-active .ast-primary-header-bar .site-header-primary-section-right .ast-builder-layout-element,
body.hc-joyn-menu-active .ast-primary-header-bar .site-header-primary-section-right-center .ast-builder-layout-element {
	position: static !important;
}

body.hc-joyn-menu-active .ast-primary-header-bar {
	position: relative !important;
	/* 고정형 햄버거 버튼과 겹침 완화 */
	padding-right: clamp(96px, 11vw, 132px) !important;
	box-sizing: border-box !important;
}

body.hc-joyn-menu-active nav.hcjoyn-synced-menu-nav.hcjoyn-sync-site-nav {
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	right: auto !important;
	transform: translate(-50%, -50%) !important;
	margin: 0 !important;
	width: max-content !important;
	max-width: min(92vw, 960px) !important;
	flex-grow: 0 !important;
	flex-shrink: 1 !important;
	z-index: 5 !important;
	justify-content: center !important;
	pointer-events: auto !important;
}

/* 구형 마스트헤드 레이아웃 */
body.hc-joyn-menu-active .ast-masthead-custom-post-items .hcjoyn-sync-main-nav,
body.hc-joyn-menu-active .main-header-bar .hcjoyn-sync-main-nav {
	position: absolute !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	top: 50% !important;
	width: max-content !important;
	max-width: min(92vw, 960px) !important;
	z-index: 5 !important;
}

@media (max-width: 921px) {
	body.hc-joyn-menu-active nav.hcjoyn-synced-menu-nav.hcjoyn-sync-site-nav {
		max-width: min(88vw, 100%) !important;
	}
}

/* ── 동기화 메뉴(가운데 아이콘+텍스트): 간격·크기·두께 = 메인 상단과 동일 ──
   (자식 테마 .ast-primary-header-bar … !important 와 동일 구체성으로 맞춤) */
body.hc-joyn-menu-active .ast-primary-header-bar .hcjoyn-synced-menu-nav .hcjoyn-sync-menu,
body.hc-joyn-menu-active .ast-mobile-header-wrap .hcjoyn-synced-menu-nav .hcjoyn-sync-menu {
	justify-content: center !important;
	column-gap: var(--hcjoyn-learn-nav-gap) !important;
	row-gap: 0.35rem !important;
	flex-wrap: wrap !important;
}

body.hc-joyn-menu-active .ast-primary-header-bar .hcjoyn-synced-menu-nav .hcjoyn-sync-menu > li > a,
body.hc-joyn-menu-active .ast-mobile-header-wrap .hcjoyn-synced-menu-nav .hcjoyn-sync-menu > li > a,
body.hc-joyn-menu-active.ast-header-break-point .hcjoyn-synced-menu-nav .hcjoyn-sync-menu > li > a {
	color: var(--hcjoyn-learn-nav-text) !important;
	font-weight: var(--hcjoyn-learn-nav-weight) !important;
	font-size: clamp(15px, 0.35vw + 14px, var(--hcjoyn-learn-nav-size)) !important;
	letter-spacing: -0.02em;
	padding: 0.5rem 0.2rem !important;
}

body.hc-joyn-menu-active .ast-primary-header-bar .hcjoyn-synced-menu-nav .hcjoyn-sync-menu > li > a:hover,
body.hc-joyn-menu-active .ast-primary-header-bar .hcjoyn-synced-menu-nav .hcjoyn-sync-menu > li:hover > a,
body.hc-joyn-menu-active .ast-primary-header-bar .hcjoyn-synced-menu-nav .hcjoyn-sync-menu > li > a:focus,
body.hc-joyn-menu-active .ast-mobile-header-wrap .hcjoyn-synced-menu-nav .hcjoyn-sync-menu > li > a:hover,
body.hc-joyn-menu-active .ast-mobile-header-wrap .hcjoyn-synced-menu-nav .hcjoyn-sync-menu > li:hover > a {
	color: #fff !important;
	opacity: 0.95 !important;
}

/* 현재 페이지·하위 구간 — 주황 강조(메인과 동일) */
body.hc-joyn-menu-active .ast-primary-header-bar .hcjoyn-synced-menu-nav .hcjoyn-sync-menu > li.current-menu-item > a,
body.hc-joyn-menu-active .ast-primary-header-bar .hcjoyn-synced-menu-nav .hcjoyn-sync-menu > li.current-menu-ancestor > a,
body.hc-joyn-menu-active .ast-primary-header-bar .hcjoyn-synced-menu-nav .hcjoyn-sync-menu > li.current_page_item > a,
body.hc-joyn-menu-active .ast-primary-header-bar .hcjoyn-synced-menu-nav .hcjoyn-sync-menu > li.hcjoyn-current > a {
	color: var(--hcjoyn-learn-nav-accent) !important;
	opacity: 1 !important;
}

body.hc-joyn-menu-active .hcjoyn-sync-menu > li > a i[class^="ri-"],
body.hc-joyn-menu-active .hcjoyn-sync-menu > li > a i[class*=" ri-"] {
	color: inherit !important;
}

/* 서브메뉴: 헤더보다 약간 밝은 판 + 항목 간 구분선 + 넉넉한 클릭 영역 */
body.hc-joyn-menu-active .ast-primary-header-bar .hcjoyn-synced-menu-nav .hcjoyn-sync-menu .sub-menu,
body.hc-joyn-menu-active .ast-mobile-header-wrap .hcjoyn-synced-menu-nav .hcjoyn-sync-menu .sub-menu,
body.hc-joyn-menu-active.ast-header-break-point .hcjoyn-synced-menu-nav .hcjoyn-sync-menu .sub-menu {
	background: #1e1e1e !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
	padding: 0.25rem 0 !important;
	min-width: 220px !important;
}

body.hc-joyn-menu-active .ast-primary-header-bar .hcjoyn-synced-menu-nav .hcjoyn-sync-menu .sub-menu > li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.hc-joyn-menu-active .ast-primary-header-bar .hcjoyn-synced-menu-nav .hcjoyn-sync-menu .sub-menu > li:last-child {
	border-bottom: none !important;
}

body.hc-joyn-menu-active .ast-primary-header-bar .hcjoyn-synced-menu-nav .hcjoyn-sync-menu .sub-menu a,
body.hc-joyn-menu-active .ast-mobile-header-wrap .hcjoyn-synced-menu-nav .hcjoyn-sync-menu .sub-menu a,
body.hc-joyn-menu-active.ast-header-break-point .hcjoyn-synced-menu-nav .hcjoyn-sync-menu .sub-menu a {
	color: #fff !important;
	font-weight: 500 !important;
	font-size: 0.9375rem !important;
	padding: 0.75rem 1rem !important;
	border-bottom: none !important;
}

body.hc-joyn-menu-active .ast-primary-header-bar .hcjoyn-synced-menu-nav .hcjoyn-sync-menu .sub-menu a i[class^="ri-"],
body.hc-joyn-menu-active .ast-primary-header-bar .hcjoyn-synced-menu-nav .hcjoyn-sync-menu .sub-menu a i[class*=" ri-"] {
	color: var(--hcjoyn-learn-nav-accent) !important;
}

body.hc-joyn-menu-active .ast-primary-header-bar .hcjoyn-synced-menu-nav .hcjoyn-sync-menu .sub-menu a:hover,
body.hc-joyn-menu-active .ast-mobile-header-wrap .hcjoyn-synced-menu-nav .hcjoyn-sync-menu .sub-menu a:hover {
	color: #fff !important;
	background: rgba(255, 255, 255, 0.06) !important;
}

/* ── 사이트 타이틀(텍스트 로고): 가독성 ── */
body.hc-joyn-menu-active .site-title a,
body.hc-joyn-menu-active .ast-site-identity .site-title a,
body.hc-joyn-menu-active .site-branding .site-title a {
	font-family: var(--hcjoyn-learn-font) !important;
	font-weight: 700 !important;
	letter-spacing: -0.03em;
	color: #fff !important;
}

/* 커스텀 로고 이미지 옆 여백 */
body.hc-joyn-menu-active .ast-site-identity {
	font-family: var(--hcjoyn-learn-font) !important;
}

/* ── 우측 「메뉴」 버튼: 보라 → 인디고 → 블루 그라데이션(알약형) ── */
body.hc-joyn-menu-active .hc-joyn-menu-trigger {
	background: linear-gradient(90deg, #7c3aed 0%, #6366f1 42%, #2563eb 100%) !important;
	color: #fff !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	font-size: clamp(0.875rem, 0.8rem + 0.2vw, 0.95rem) !important;
	box-shadow: 0 4px 20px rgba(99, 102, 241, 0.45) !important;
	border: none !important;
}

body.hc-joyn-menu-active .hc-joyn-menu-trigger i.ri-menu-line {
	color: #fff !important;
}

body.hc-joyn-menu-active .hc-joyn-menu-trigger:hover {
	filter: brightness(1.06);
	box-shadow: 0 6px 24px rgba(99, 102, 241, 0.5) !important;
}

/* ── 풀스크린 메뉴 패널(오버레이)에도 동일 폰트 ── */
#hcMenuOverlay,
#hcMenuOverlay .hc-menu-panel,
#hcMenuOverlay .hc-joyn-menu-wrapper {
	font-family: var(--hcjoyn-learn-font) !important;
}