@charset "UTF-8";
/* ==========================================================================
   패밀리 바 : 사이트 맨 위 브랜드 선택 + 띠 배너 (원더래빗 · 728 PRODUCTION · IT센터 공용)
   - 레이아웃 CSS 와 섞이지 않도록 .fbar 안의 요소는 글꼴 · 색 · 표시 방식을 직접 지정합니다.
   - 고정(fixed) 헤더가 바 아래에 붙도록 family.js 가 :root 에 --fbar-offset (바가 보이는 높이) 을 넣습니다.
   - Breakpoint : 1599 / 1279 / 1023 / 767
   ========================================================================== */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../../../layouts/wdrb/font/Pretendard-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../../../layouts/wdrb/font/Pretendard-SemiBold.woff') format('woff');
}

:root { --fbar-h: 40px; --fbar-offset: var(--fbar-h); }

.fbar {
	--fbar-bg: #0d0f14;
	--fbar-panel: #1a1d25;
	--fbar-line: rgba(255, 255, 255, .12);
	--fbar-text: rgba(255, 255, 255, .62);
	--fbar-text-strong: #fff;
	/* 안쪽 폭 · 좌우 여백 : 레이아웃 컨테이너에 맞춤 (아래 '레이아웃 연결' 에서 사이트별로 바꿈) */
	--fbar-max: 1408px;
	--fbar-pad: 0px;
	position: relative;
	z-index: var(--fbar-z, 260);
	height: var(--fbar-h);
	background: var(--fbar-bg);
	color: var(--fbar-text);
	font-family: Pretendard, 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -.01em;
	word-break: keep-all;
	-webkit-font-smoothing: antialiased;
}
/* 일본어 : Pretendard 에는 가나만 있고 한자가 없어 섞여 보이므로 기기의 일본어 글꼴을 앞에 (영문은 InterVariable 이 있으면 그것), 줄바꿈은 일반 + 금칙 처리 */
.fbar:lang(ja) {
	font-family: InterVariable, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Noto Sans CJK JP', 'Yu Gothic UI', 'Yu Gothic', YuGothic, Meiryo, Pretendard, sans-serif;
	word-break: normal;
	line-break: strict;
}
.fbar *, .fbar *::before, .fbar *::after { box-sizing: border-box; }
.fbar ul, .fbar li { margin: 0; padding: 0; list-style: none; border: 0; }
.fbar a { text-decoration: none; }
.fbar svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.fbar a:focus-visible,
.fbar button:focus-visible { outline: 2px solid var(--fbar-current, #fff); outline-offset: -2px; border-radius: 4px; }
.fbar__sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.fbar__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: var(--fbar-max);
	height: 100%;
	margin: 0 auto;
	padding: 0 var(--fbar-pad);
}

/* 브랜드 : PC 탭 */
.fbar__brands { position: relative; flex: none; height: 100%; }
.fbar__toggle { display: none; }
.fbar__list { display: flex; align-items: center; height: 100%; }
.fbar__item { position: relative; display: flex; align-items: center; height: 100%; }
.fbar__item + .fbar__item::before {
	content: "";
	width: 1px;
	height: 12px;
	background: var(--fbar-line);
}
.fbar__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 7px;
	height: 100%;
	padding: 0 14px;
	color: var(--fbar-text);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	transition: color .2s;
}
.fbar__item:first-child .fbar__link { padding-left: 0; }
.fbar__link:hover { color: var(--fbar-text-strong); }
.fbar__link[aria-current] { color: var(--fbar-text-strong); }
.fbar__link[aria-current]::after {
	content: "";
	position: absolute;
	right: 14px;
	bottom: 0;
	left: 14px;
	height: 2px;
	background: var(--fbar-color);
}
.fbar__item:first-child .fbar__link[aria-current]::after { left: 0; }
.fbar__dot {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--fbar-color, var(--fbar-current));
	opacity: .45;
	transition: opacity .2s;
}
.fbar__link:hover .fbar__dot,
.fbar__link[aria-current] .fbar__dot,
.fbar__toggle .fbar__dot { opacity: 1; }
.fbar__meta { display: none; }

/* 띠 배너 : 위로 넘어가는 한 줄 */
.fbar__banner {
	flex: 1;
	min-width: 0;
	height: 100%;
	overflow: hidden;
}
.fbar__track { height: 100%; transition: transform .6s cubic-bezier(.33, 1, .68, 1); }
.fbar__track.is-instant { transition: none; }
.fbar__slide { display: flex; justify-content: flex-end; align-items: center; height: var(--fbar-h); }
.fbar__promo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	color: var(--fbar-text);
	transition: color .2s;
}
a.fbar__promo:hover { color: var(--fbar-text-strong); }
.fbar__badge {
	flex: none;
	padding: 2px 6px;
	border-radius: 4px;
	background: rgba(255, 255, 255, .08);
	background: color-mix(in srgb, var(--fbar-color) 20%, transparent);
	color: var(--fbar-color);
	font-family: InterVariable, Pretendard, sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .04em;
}
.fbar__text { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
.fbar__arrow { width: 13px !important; height: 13px !important; transition: transform .2s; }
a.fbar__promo:hover .fbar__arrow { transform: translateX(2px); }

/* 원더래빗 헤더(.header__inner)와 같은 폭 */
@media screen and (max-width: 1599px) {
	.fbar { --fbar-max: 1280px; --fbar-pad: 48px; }
}
@media screen and (max-width: 1279px) {
	.fbar { --fbar-pad: 32px; }
}
@media screen and (max-width: 1023px) {
	.fbar { --fbar-pad: 20px; }
	.fbar__inner { gap: 16px; }
	.fbar__link { padding: 0 11px; }
	.fbar__link[aria-current]::after { right: 11px; left: 11px; }
}

/* 모바일 : 현재 브랜드 버튼 + 드롭다운 */
@media screen and (max-width: 767px) {
	.fbar { --fbar-pad: 16px; }
	.fbar__inner { gap: 12px; }
	.fbar__toggle {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		height: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--fbar-text-strong);
		font: inherit;
		font-size: 13px;
		font-weight: 600;
		white-space: nowrap;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}
	.fbar__chevron { transition: transform .25s; }
	.fbar.is-open .fbar__chevron { transform: rotate(180deg); }
	.fbar__list {
		display: none;
		position: absolute;
		top: 100%;
		left: calc(var(--fbar-pad) * -1);
		width: min(300px, calc(100vw - 32px));
		height: auto;
		padding: 6px 0;
		border-radius: 0 0 12px 0;
		background: var(--fbar-panel);
		box-shadow: 0 16px 32px rgba(0, 0, 0, .28);
	}
	.fbar.is-open .fbar__list { display: block; }
	.fbar__item { display: block; height: auto; }
	.fbar__item + .fbar__item::before { display: none; }
	.fbar__link,
	.fbar__item:first-child .fbar__link {
		display: grid;
		grid-template-columns: 6px 1fr;
		column-gap: 10px;
		row-gap: 2px;
		align-items: center;
		height: auto;
		padding: 11px 16px;
		font-size: 14px;
		white-space: normal;
	}
	.fbar__link[aria-current] { background: rgba(255, 255, 255, .06); }
	.fbar__link[aria-current]::after { display: none; }
	.fbar__meta { display: block; grid-column: 2; color: rgba(255, 255, 255, .5); font-size: 12px; font-weight: 400; }
	.fbar__en { margin-right: 6px; font-family: InterVariable, Pretendard, sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .36); }
	.fbar__slide { justify-content: flex-start; }
	.fbar__promo { font-size: 12px; gap: 6px; }
	.fbar__badge { font-size: 10px; padding: 1px 5px; }
	.fbar__arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fbar__track, .fbar__chevron, .fbar__arrow { transition: none !important; }
}

/* ==========================================================================
   레이아웃 연결
   ========================================================================== */
/* 728 PRODUCTION(natsuya) : .container--wide 와 같은 폭 */
.n728 .fbar { --fbar-max: calc(var(--container-wide, 1560px) + var(--gutter, 40px) * 2); --fbar-pad: var(--gutter, 40px); }
/* 원더래빗 IT센터(itcenter) : .itc-container 와 같은 폭 */
.itc .fbar { --fbar-max: calc(var(--container, 1200px) + var(--gutter, 24px) * 2); --fbar-pad: var(--gutter, 24px); }

/* 원더래빗(wdrb) : 고정 헤더 · 메가메뉴를 바 아래에서 시작 */
.wdrbcorp.has-fbar .header { top: var(--fbar-offset); }
.wdrbcorp.has-fbar .header .nav__list2,
.wdrbcorp.has-fbar .search-tab { top: var(--fbar-offset); }
/* 헤더가 transform 상태(서브 페이지 스크롤)면 패널 기준이 헤더가 되므로 0 */
.wdrbcorp.has-fbar:not(.main).is-scroll-down .header .nav__list2,
.wdrbcorp.has-fbar:not(.main).is-anchor-moving .header .nav__list2 { top: 0; }