@charset "UTF-8";

/* ==========================================================================
   landing/header.css — 랜딩 페이지 전용 헤더 (navbar) 스타일
   원본: AILab/landing.html <style> 블록 내 navbar 관련 선언

   디자인 결정사항:
     - 다크/라이트 토글 기능 제거
     - 랜딩 페이지 다크 모드 고정
     → theme-toggle, [data-theme] 관련 선언 없음
   ========================================================================== */

/* ── navbar 컨테이너 내부 레이아웃 ─────────────────────────────────────── */
/* common.css 의 .navbar-inner 는 justify-content: flex-start 이므로
   랜딩 헤더는 .container 를 직접 사용해 space-between 적용            */
.navbar .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 40px;
	height: 100%;
}

/* ── 좌측 영역 (로고) ───────────────────────────────────────────────────── */
.nav-left {
	display: flex;
	align-items: center;
}

.landing-logo-mark {
	height: 32px;
	width: 32px;
	flex-shrink: 0;
}

/* ── 우측 영역 (그룹웨어 / 메인홈페이지 바로가기) ──────────────────────── */
.nav-right {
	display: flex;
	align-items: center;
}

.nav-apps {
	display: flex;
	align-items: center;
	gap: 6px;
}

.app-divider {
	width: 1px;
	height: 22px;
	background: rgba(255, 255, 255, 0.15);
	margin: 0 6px;
}

/* ── 로고형 바로가기 버튼 (아이콘 배지 + 라벨, 화살표 없음) ────────────── */
.app-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 6px 12px 6px 8px;
	border-radius: 10px;
	transition: background 0.2s, transform 0.2s;
}

.app-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	transform: translateY(-1px);
}

.app-icon {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.app-icon svg {
	width: 16px;
	height: 16px;
}

/* 그룹웨어 / 메인홈페이지 공통 배지: 진한 남색 + 흰색 테두리 */
.app-icon.ghost {
	background: var(--dark-secondary);
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	color: #fff;
}

.app-label {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.app-name {
	font-size: 12.5px;
	font-weight: 700;
	color: #fff;
	letter-spacing: -0.2px;
}

.app-desc {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.45);
}

@media (min-width: 768px) and (max-width: 1023px) {
	.navbar .container {
		padding: 0 20px;
	}
}

@media (max-width: 767px) {
	.navbar .container {
		padding: 0;
	}

	/* 모바일에서는 라벨 숨기고 아이콘만 노출 */
	.app-label {
		display: none;
	}

	.app-btn {
		padding: 6px 8px;
	}
}