@charset "UTF-8";

/* ==========================================================================
   공통 CSS (common.css)
   - 디자인 토큰(CSS 변수) / 리셋 / 컨테이너
   - 공통 컴포넌트: navbar, footer, side-nav, top-button
   - 공통 섹션 헤더 패턴 (.section-header / -label / -title / -subtitle)

   ※ 헤더 / 푸터 / 사이드네비 / 탑버튼 = 다크 톤 + 시안 액센트 고정
   ※ 본문 섹션들 = 각 섹션 의도된 톤 유지 (라이트 모드 기준 표시)
   ※ 다크/라이트 토글 기능 제거됨 (단일 표시 상태)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS 변수 (디자인 토큰)
   -------------------------------------------------------------------------- */
:root {
	--primary: #0066cc;
	--primary-dark: #004999;
	--accent: #00d9ff;
	--accent-dark: #00a8c7;
	--dark: #0a0e27;
	--dark-secondary: #1a1f3a;
	--text-soft: rgba(255, 255, 255, 0.85);
	--border: rgba(255, 255, 255, 0.1);

	/* ── 라이트 톤 토큰 (Tech, AI, Cert 등 라이트 배경 섹션용) ── */
	--light: #f8f9fc;          /* 가장 연한 배경 */
	--light-blue: #f0f5ff;     /* 포인트 라이트 배경 */
	--gray-text: #4a4a4a;      /* 본문 텍스트 (라이트 배경 위) */
	--gray-light: #8a8d99;     /* 보조 텍스트 */
	--line: #d1d5db;           /* 구분선 (테이블 border, divider) */
	--border-light: #e5e7eb;   /* 라이트 톤 카드 테두리 */

	/* ── 헤더 컬러 토큰 - 다크 톤 고정 ── */
	--header-bg: rgba(10, 14, 39, 0.85);
	--header-bg-scrolled: rgba(10, 14, 39, 0.95);
	--header-text-strong: white;
	--header-border: rgba(255, 255, 255, 0.1);
	--header-accent: var(--accent);
	--header-logo-main: var(--accent);
	--header-logo-sub: white;

	/* ── 사이드 네비 컬러 토큰 - 다크 톤 고정 ── */
	--sidenav-bg: rgba(0, 0, 0, 0.4);
	--sidenav-border: rgba(255, 255, 255, 0.15);
	--sidenav-text: rgba(255, 255, 255, 0.7);
	--sidenav-active-bg: var(--accent);
	--sidenav-active-text: var(--dark);
	--sidenav-active-border: var(--accent);

	/* ── 탑 버튼 컬러 토큰 - 다크 톤 고정 ── */
	--topbtn-bg: var(--accent);
	--topbtn-text: var(--dark);
	--topbtn-bg-hover: #66e6ff;

	/* ── 푸터 컬러 토큰 - 다크 톤 고정 ── */
	--footer-bg: #050816;
	--footer-text: rgba(255, 255, 255, 0.6);
	--footer-text-strong: white;
	--footer-text-soft: rgba(255, 255, 255, 0.7);
	--footer-text-content: rgba(255, 255, 255, 0.75);
	--footer-text-faint: rgba(255, 255, 255, 0.4);
	--footer-text-bottom-strong: rgba(255, 255, 255, 0.65);
	--footer-border: rgba(255, 255, 255, 0.1);
	--footer-border-soft: rgba(255, 255, 255, 0.08);
	--footer-divider: rgba(255, 255, 255, 0.25);
	--footer-accent: var(--accent);

	/* ── 타이포그래피 스케일 ── */
	--fs-2xs:  12px;
	--fs-xs:   13px;
	--fs-sm:   14px;
	--fs-base: 15px;
	--fs-md:   16px;
	--fs-lg:   17px;
	--fs-xl:   18px;

	/* 좌우 공통 여백 (헤더·푸터·콘텐츠 모두 같은 x축 기준) */
	--page-padding-x: 16px;

	/* 헤더 고정 높이 (콘텐츠 영역 계산용) */
	--header-height: 60px;

	/* ── 푸터 고정 높이 (콘텐츠 padding-bottom 계산용) ──
	   2줄 구조: padding(18px×2) + 주소행(18px) + gap(6px) + 연락처행(18px) ≈ 78px
	   border-top 1px 포함하여 88px */
	--footer-height: 88px;
}

/* --------------------------------------------------------------------------
   2. 리셋 / 기본 타이포
   -------------------------------------------------------------------------- */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	line-height: 1.65;
	color: var(--text-soft);
	overflow-x: hidden;
	background: var(--dark);
	/* 화면 하단에 고정된 푸터에 콘텐츠가 가리지 않도록 여백 확보 */
	padding-bottom: var(--footer-height);
}

a {
	text-decoration: none;
	color: inherit;
}

ul {
	list-style: none;
}

::selection {
	background: var(--accent);
	color: var(--dark);
}

/* --------------------------------------------------------------------------
   2-1. 공통 컨테이너 (.container)
   - 라이트 톤 섹션(Tech, AI, Cert, News)에서 사용
   - max-width 1280px, 좌우 패딩 var(--page-padding-x)
   -------------------------------------------------------------------------- */
.container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--page-padding-x);
}

/* --------------------------------------------------------------------------
   2-2. 공통 섹션 헤더 패턴
   - 라이트 톤 섹션(Tech, AI, Cert, News)에서 공통 사용 (라이트 모드 기본 색상)
   - 다크 섹션(ideology, contact 등)은 자체 헤더 사용
   -------------------------------------------------------------------------- */
.section-header {
	text-align: center;
	margin-bottom: 60px;
}

.section-label {
	color: var(--primary);
	font-size: var(--fs-xs);
	letter-spacing: 4px;
	font-weight: 700;
	margin-bottom: 16px;
}

.section-title {
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 800;
	color: #1a1a1a;
	letter-spacing: -1px;
	margin-bottom: 16px;
}

.section-subtitle {
	color: var(--gray-light);
	font-size: 17px;
}

/* --------------------------------------------------------------------------
   3. 상단 헤더 (navbar) - 고정형
   - 다크 톤 + 시안 액센트 고정
   - 스크롤 시 .scrolled 클래스가 붙어 배경이 살짝 진해지고 그림자가 생김
   -------------------------------------------------------------------------- */
.navbar {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	height: var(--header-height);
	padding: 0 var(--page-padding-x);
	background: var(--header-bg);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--header-border);
	transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

/* 스크롤 다운 시: 배경 더 진하게 + 그림자 추가 + 블러 강화 */
.navbar.scrolled {
	background: var(--header-bg-scrolled);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.navbar-inner {
	max-width: 1440px;
	height: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.nav-left {
	display: flex;
	align-items: center;
	gap: 14px;
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
}

/* 가로 글자 로고 (인라인 SVG) - "(주)에이아이랩" 2줄 구성 포함, 심볼과 높이 비슷하게
   (main-header 쪽과 동일한 28px로 통일) */
.logo .ailab-text-logo {
	height: 28px;
	width: auto;
	display: block;
}


/* === 글자 로고 색상 (다크 톤 고정) === */
.ailab-text-logo .ai-part {
	fill: var(--accent);
}
.ailab-text-logo .lab-part {
	fill: white;
}
.ailab-text-logo .kr-part {
	fill: var(--accent);
}

/* --------------------------------------------------------------------------
   4. 사이드 네비게이션 (랜딩 페이지 우측 점프 버튼)
   - 다크 톤 + 시안 액센트 고정
   - 콘텐츠 영역(헤더~푸터 사이) 의 정중앙에 위치
   -------------------------------------------------------------------------- */
.side-nav {
	position: fixed;
	right: 24px;
	/* 헤더 60px + 콘텐츠 영역(100vh - 헤더 - 푸터)의 절반
	   = 헤더 60px + (100vh - 60 - 56) / 2 */
	top: calc(var(--header-height) + (100vh - var(--header-height) - var(--footer-height)) / 2);
	transform: translateY(-50%);
	z-index: 99;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.side-nav-item {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--sidenav-bg);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid var(--sidenav-border);
	color: var(--sidenav-text);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
	text-decoration: none;
}

.side-nav-item:hover,
.side-nav-item.active {
	background: var(--sidenav-active-bg);
	color: var(--sidenav-active-text);
	border-color: var(--sidenav-active-border);
	transform: translateX(-4px) scale(1.05);
}

.side-nav-item .icon {
	width: 18px;
	height: 18px;
}

.side-nav-item .label {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.5px;
	margin-top: 2px;
}

/* --------------------------------------------------------------------------
   5. 맨 위로 가기 버튼 - 다크 톤 + 시안 액센트 고정
   - 푸터 위에 위치하도록 bottom 에 footer-height 만큼 추가
   -------------------------------------------------------------------------- */
.top-button {
	position: fixed;
	right: 24px;
	bottom: calc(var(--footer-height) + 24px);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--topbtn-bg);
	color: var(--topbtn-text);
	border: none;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	z-index: 99;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease,
	            background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
	font-family: inherit;
}

.top-button.visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.top-button:hover {
	background: var(--topbtn-bg-hover);
	transform: translateY(-4px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

.top-button svg {
	width: 14px;
	height: 14px;
}

.top-button .top-label {
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 1px;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   6. 푸터 (footer) - 컴팩트 한 줄 구조 + 화면 하단 고정 (fixed)
   - 좌측: 로고
   - 가운데: 회사정보 (주소 · Tel · Fax · Email, divider 구분)
   - 우측: 카피라이트
   - 다크 톤 + 시안 액센트 고정
   - 모든 섹션에서 항상 화면 하단에 고정됨 (헤더와 대칭 구조)
   - body 의 padding-bottom 으로 콘텐츠 영역 가리지 않음
   -------------------------------------------------------------------------- */
footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--footer-bg);
	color: var(--footer-text);
	padding: 18px 0;
	border-top: 1px solid var(--footer-border);
	font-size: var(--fs-sm);
	height: var(--footer-height);
	display: flex;
	align-items: center;
}

.footer-inner {
	max-width: 1280px;
	margin: 0 auto;
	width: 100%;
	padding: 0 40px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 28px;
	align-items: center;
}

/* ─── 좌측: 로고 ─── */
.footer-brand {
	display: flex;
	align-items: center;
}

.footer-logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 34px;
}

.footer-logo-mark {
	height: 100%;
	width: auto;
	display: block;
	flex-shrink: 0;
}
.footer-logo .ailab-text-logo {
	height: 88%;
	width: auto;
	display: block;
}

/* ─── 가운데: 회사정보 ─── */
.footer-info {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 6px 10px;
	color: var(--footer-text-content);
	font-size: var(--fs-sm);
	line-height: 1.5;
	min-width: 0;
}

.fi-item {
	color: var(--footer-text-content);
}

.fi-item.fi-addr {
	font-weight: 500;
	flex-basis: 100%;
	text-align: center;
}

/* 주소-연락처 사이 구분자(|) 숨김 — 2줄 구조에서 불필요 */
.fi-divider:not(.fi-divider-contact) {
	display: none;
}

/* Tel + Fax 그룹 (한 묶음으로 줄바꿈) */
.fi-group {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 10px;
	color: var(--footer-text-content);
}

.fi-tel,
.fi-fax {
	white-space: nowrap;
}

.fi-item strong,
.fi-tel strong,
.fi-fax strong,
.fi-email-item strong {
	color: var(--footer-accent);
	font-weight: 700;
	margin-right: 3px;
	letter-spacing: 0.2px;
}

.fi-divider,
.fi-divider-inner {
	color: var(--footer-divider);
	opacity: 0.6;
}

.footer-email {
	color: var(--footer-text-content);
	transition: color 0.3s ease;
}

.footer-email:hover {
	color: var(--footer-accent);
}

/* ─── 우측: 카피라이트 ─── */
.footer-copy {
	color: var(--footer-text-faint);
	font-size: var(--fs-xs);
	text-align: right;
	white-space: nowrap;
	letter-spacing: 0.2px;
}

.footer-copy strong {
	color: var(--footer-text-bottom-strong);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. AOS 보조 스타일
   -------------------------------------------------------------------------- */
[data-aos="fade-up"] {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.8s, transform 0.8s;
}

[data-aos="fade-up"].aos-animate {
	opacity: 1;
	transform: translateY(0);
}

/* --------------------------------------------------------------------------
   8. 반응형
   -------------------------------------------------------------------------- */
.mobile-br {
	display: none;
}

/* ── 푸터 태블릿 (768px ~ 1023px) ──
   데스크톱 3단 grid(auto 1fr auto)가 좁은 화면에서
   텍스트 줄바꿈 없이 압축되며 영역을 벗어나는 문제 해결
   → 로고(.footer-brand) 숨김 + 2행 레이아웃으로 전환
   1행: 회사정보(전체 폭, 가운데 정렬, wrap 허용)
   2행: 카피라이트(우측 정렬) */
@media (min-width: 768px) and (max-width: 1023px) {
	:root {
		/* 2행 구조에 맞춰 높이 확장 (88px → 108px) */
		--footer-height: 108px;
	}

	.footer-inner {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		gap: 6px 16px;
		padding: 0 24px;
	}

	.footer-brand {
		display: none;
	}

	.footer-info {
		grid-column: 1;
		grid-row: 1;
		justify-content: center;
		text-align: center;
	}

	.footer-copy {
		grid-column: 1;
		grid-row: 2;
		text-align: right;
	}

	.fi-item.fi-addr {
		flex-basis: 100%;
		text-align: center;
	}

	.fi-group.fi-telfax {
		flex-wrap: wrap;
		row-gap: 4px;
	}

	/* 사이드 네비 - 태블릿에서는 콘텐츠 침범 방지를 위해 숨김 */
	.side-nav {
		display: none;
	}
}

@media (max-width: 767px) {
	:root {
		--page-padding-x: 20px;
		/* 모바일 푸터 높이 - 4줄 컴팩트 (카피라이트 제거)
		   로고(18) + 주소2행(30) + Tel/Fax(15) + Email(15)
		   + gap×3(12) + padding×2(20) ≈ 110 */
		--footer-height: 110px;
	}

	/* 사이드 네비 - 모바일에서는 숨김 (화면 좁아서 too much) */
	.side-nav {
		display: none;
	}

	.top-button {
		right: 16px;
		/* 푸터가 fixed 이므로 footer-height 위로 */
		bottom: calc(var(--footer-height) + 16px);
		width: 44px;
		height: 44px;
	}

	.mobile-br {
		display: inline;
	}

	/* ── 푸터 모바일 (v9) ──
	   fixed 유지 + 3줄 구조 (Tel/Fax/Email 한 줄에)
	   1줄: 로고 + 회사명 (가운데)
	   2줄: 주소 (한 그룹, 2행 자연 줄바꿈)
	   3줄: Tel | Fax | Email (한 줄, 종단 좁으면 Email만 자동 줄바꿈)
	   ※ 카피라이트는 모바일에서 숨김 (공간 절약) */
	footer {
		padding: 10px 0;
		font-size: var(--fs-2xs);
	}
	.footer-inner {
		padding: 0 var(--page-padding-x);
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		gap: 4px;
		text-align: center;
		justify-items: center;
	}
	.footer-brand {
		justify-content: center;
		display: none;
	}
	.footer-logo {
		height: 18px;
	}
	/* 정보 영역 - row 유지 (wrap 허용) + 가운데 정렬
	   주소는 100% width 강제 → 항상 별도 행
	   Tel/Fax 그룹 + Email 은 한 줄, 종단 좁으면 wrap */
	.footer-info {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: baseline;
		font-size: var(--fs-2xs);
		gap: 3px 7px;
		max-width: 100%;
		row-gap: 3px;
	}
	/* 주소는 항상 한 줄 단독 차지 */
	.fi-item.fi-addr {
		flex-basis: 100%;
		display: block;
		text-align: center;
		line-height: 1.5;
		max-width: 92%;
		margin: 0 auto;
	}
	/* 주소와 연락처 사이의 큰 divider 는 숨김 (행 분리) */
	.fi-divider {
		display: none;
	}
	/* 연락처 그룹 사이 divider (Tel/Fax/Email) 는 모바일에서도 표시 */
	.fi-divider.fi-divider-contact {
		display: inline;
	}
	/* Tel/Fax 내부 divider 도 표시 */
	.fi-divider-inner {
		display: inline;
	}
	/* Tel/Fax 그룹 - nowrap 한 줄 유지 (둘은 절대 분리 안 됨) */
	.fi-group.fi-telfax {
		display: inline-flex;
		flex-wrap: nowrap;
		gap: 7px;
		align-items: baseline;
		white-space: nowrap;
	}
	/* Email 도 한 단위로 묶임 (wrap 시 통째로 다음 줄) */
	.fi-item.fi-email-item {
		display: inline-flex;
		flex-wrap: nowrap;
		gap: 2px;
		align-items: baseline;
		white-space: nowrap;
	}
	/* 카피라이트 - 모바일에서 숨김 */
	.footer-copy {
		display: none;
	}
	/* strong 라벨 축소 */
	.fi-item strong,
	.fi-tel strong,
	.fi-fax strong,
	.fi-email-item strong {
		font-size: var(--fs-2xs);
		margin-right: 2px;
	}
}

/* --------------------------------------------------------------------------
   9. 영문 라벨 양옆 dash 장식 (— LABEL —)
   - 시안 디자인 그대로 적용
   - 라벨 양 옆에 짧은 대시(—) + 살짝 투명 (opacity 0.4)
   - 적용 대상:
       · .section-label      (§4 §5 §7)
       · .ideology-label     (§2)
       · .services-label     (§3)
       · .ai-intro-label     (§6 인트로)
       · .ai-section-label   (§6 각 프로젝트 헤더)
       · .contact-label      (§8 Contact)
   -------------------------------------------------------------------------- */
.section-label,
.ideology-label,
.services-label,
.ai-intro-label,
.ai-section-label,
.contact-label {
	display: inline-block;
	position: relative;
}

.section-label::before,
.section-label::after,
.ideology-label::before,
.ideology-label::after,
.services-label::before,
.services-label::after,
.ai-intro-label::before,
.ai-intro-label::after,
.ai-section-label::before,
.ai-section-label::after,
.contact-label::before,
.contact-label::after {
	content: '—';
	margin: 0 12px;
	opacity: 0.4;
	/* 색상은 부모(라벨) 의 color 를 자동 상속 */
}

/* 태블릿에서는 dash 중간 크기 */
@media (min-width: 768px) and (max-width: 1023px) {
	.section-label::before,
	.section-label::after,
	.ideology-label::before,
	.ideology-label::after,
	.services-label::before,
	.services-label::after,
	.ai-intro-label::before,
	.ai-intro-label::after,
	.ai-section-label::before,
	.ai-section-label::after,
	.contact-label::before,
	.contact-label::after {
		margin: 0 10px;
	}
}

/* 모바일에서는 dash 살짝 짧게 */
@media (max-width: 767px) {
	.section-label::before,
	.section-label::after,
	.ideology-label::before,
	.ideology-label::after,
	.services-label::before,
	.services-label::after,
	.ai-intro-label::before,
	.ai-intro-label::after,
	.ai-section-label::before,
	.ai-section-label::after,
	.contact-label::before,
	.contact-label::after {
		margin: 0 8px;
	}
}
/* ==========================================================================
   메인 사이트 헤더 (main-header) / 플로팅 버튼
   — 랜딩(.navbar)과 완전히 분리된 별도 컴포넌트
   원본 디자인: AILab/main.html <style> 블록
   ========================================================================== */

/* ── 헤더 공통 변수 (main-header 전용 라이트 토큰) ─────────────────────── */
:root {
	--mh-border:      #e5e7eb;   /* 헤더 하단 선 */
	--mh-gray-light:  #8a8d99;   /* 유틸 링크 기본 색 */
	--mh-gray-text:   #4a4a4a;   /* 소메뉴 텍스트 */
	--mh-light:       #f8f9fc;   /* 모바일 소메뉴 배경 */
	--mh-light-blue:  #f0f5ff;   /* 모바일 열린 카테고리 배경 */
	--mh-dark:        #0a0e27;   /* float-btn 호버 배경 */
}

/* ── 헤더 컨테이너 ──────────────────────────────────────────────────────── */
.main-header {
	background: #fff;
	border-bottom: 1px solid var(--mh-border);
	position: sticky;
	top: 0;
	z-index: 100;
}

/* main-header 안 .container — max-width 1440px, 좌우 padding은 본문 .container와 동일하게 정렬
   grid(1fr auto 1fr): 좌우 칸이 항상 동일한 비율(1fr)이라 로고/우측 영역의 실제 폭과 무관하게
   가운데 칸(nav)이 정확히 중앙에 오고, absolute와 달리 일반 흐름에 남아 높이 계산에도 정상 반영됨.
   (참고: PC에서 header-right(햄버거)는 display:none 이라 폭이 0 — flex:1 방식이면 로고 폭만큼 중심이 밀림) */
.main-header .container {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	padding: 8px var(--page-padding-x);
}

.main-header > .container > nav {
	justify-self: center;
	min-width: 0;
}

/* ── 로고 (main-header 내부) ────────────────────────────────────────────── */
/* 공통 .logo 는 common.css 에 이미 있음 → display/gap 재정의만 */
.main-header .logo {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	justify-self: start;
}

/* main-header 안 심볼/텍스트 로고 크기 (라이트 배경 맞춤) */
.main-header .logo .logo-mark-img {
	height: 32px;
	width: 32px;
	flex-shrink: 0;
}
.main-header .logo .ailab-text-logo {
	height: 28px;
	width: auto;
}

/* main-header 안 텍스트 로고 색상 오버라이드 */
.main-header .ailab-text-logo .ai-part  { fill: #228cd4; }
.main-header .ailab-text-logo .lab-part { fill: #9ca2a9; }
.main-header .ailab-text-logo .kr-part  { fill: #228cd4; }

/* ── 우측 영역 (유틸 + 햄버거) ─────────────────────────────────────────── */
.header-right {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
	justify-self: end;
	/* .mobile-menu(형제 요소, z-index:200)보다 위에서 그려져야 열림 상태에서도 X 버튼이 보임 */
	position: relative;
	z-index: 201;
}

/* ── 햄버거 버튼 (모바일 전용) ─────────────────────────────────────────── */
.hamburger {
	display: none;
	width: 36px;
	height: 36px;
	background: #fff;
	border: 1px solid var(--mh-border);
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 0;
	transition: all 0.2s;
}
.hamburger:hover             { border-color: var(--primary); }

.hamburger span {
	display: block;
	width: 18px;
	height: 2px;
	background: #1a1a1a;
	transition: all 0.3s;
}
.hamburger.active span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
	background: var(--primary);
}
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
	background: var(--primary);
}

/* ── PC GNB ────────────────────────────────────────────────────────────── */
.gnb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	row-gap: 4px;
	gap: 0;
}

.gnb > li {
	position: relative;
	text-align: center;
	min-width: 145px;
}

.gnb > li > a {
	display: block;
	padding: 8px 12px;
	font-size: var(--fs-xl);
	font-weight: 600;
	color: #2a2a2a;
	transition: color 0.2s;
	position: relative;
}

/* 하단 인디케이터 바 */
.gnb > li > a::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 12px;
	right: 12px;
	height: 2px;
	background: #1a1a1a;
	transform: scaleX(0);
	transition: transform 0.3s;
}

.gnb > li:hover > a,
.gnb > li.active > a {
	color: var(--primary);
}

.gnb > li:hover > a::after,
.gnb > li.active > a::after {
	transform: scaleX(1);
	background: var(--primary);
}

/* ── 풀너비 드롭다운 ────────────────────────────────────────────────────── */
.gnb-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border-top: 1px solid var(--mh-border);
	border-bottom: 1px solid var(--mh-border);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: all 0.3s;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
	z-index: 99;
}

.main-header:hover .gnb-dropdown,
.gnb-dropdown:hover {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* 드롭다운 내부 — 헤더와 동일한 grid 레이아웃 맞춤 (헤더와 어긋나지 않도록)
   absolute 방식은 nav가 흐름에서 빠져 박스 높이 계산에 반영되지 않아
   서브메뉴 아래쪽 줄이 흰 배경 밖으로 넘치는 문제가 있었음 → grid로 교체 */
.gnb-dropdown .container {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	gap: 24px;
	padding: 8px var(--page-padding-x);
}

.gnb-dropdown .container > nav {
	justify-self: center;
	min-width: 0;
}

/* GNB 와 동일한 flex 레이아웃 */
.gnb-dropdown .dropdown-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
	padding: 8px 0 20px;
}

.gnb-dropdown .sub-column {
	min-width: 145px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	text-align: center;
}

.gnb-dropdown .sub-column li a {
	color: var(--mh-gray-text);
	font-size: var(--fs-sm);
	font-weight: 500;
	transition: all 0.2s;
	display: inline-block;
	white-space: nowrap;
}

.gnb-dropdown .sub-column li a:hover {
	color: var(--primary);
	font-weight: 700;
}

/* GNB - 태블릿/모바일에서는 햄버거 메뉴로 전환 */
@media (min-width: 768px) and (max-width: 1023px) {
	.gnb            { display: none; }
	.gnb-dropdown   { display: none; }
	.hamburger      { display: flex; }
}

@media (max-width: 767px) {
	.gnb            { display: none; }
	.gnb-dropdown   { display: none; }
	.hamburger      { display: flex; }
}

/* ── 모바일 슬라이드 메뉴 ───────────────────────────────────────────────── */
.mobile-menu {
	position: fixed;
	top: 0;
	right: 0;
	width: 320px;
	max-width: 85vw;
	height: 100vh;
	background: #fff;
	z-index: 200;
	box-shadow: -8px 0 24px rgba(0, 0, 0, 0.1);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
	visibility: hidden;
	pointer-events: none;
}

.mobile-menu.open {
	transform: translateX(0);
	visibility: visible;
	pointer-events: auto;
}

.mobile-menu-content {
	padding: 80px 0 40px;
}

body.menu-open { overflow: hidden; }

/* 모바일 GNB 목록 */
.mobile-gnb > li {
	border-bottom: 1px solid var(--mh-border);
}

.mobile-cat {
	width: 100%;
	background: #fff;
	border: none;
	padding: 16px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--fs-base);
	font-weight: 700;
	color: #1a1a1a;
	cursor: pointer;
	text-align: left;
	transition: background 0.2s;
	font-family: inherit;
}

.mobile-cat:hover { background: var(--mh-light); }

.mobile-cat-link {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 16px 24px;
	font-size: var(--fs-base);
	font-weight: 700;
	color: #1a1a1a;
	text-decoration: none;
	transition: background 0.2s;
}
.mobile-cat-link:hover { background: var(--mh-light); }

.mobile-cat svg {
	width: 18px;
	height: 18px;
	color: var(--mh-gray-light);
	transition: transform 0.3s;
	flex-shrink: 0;
}

.mobile-gnb > li.open .mobile-cat {
	background: var(--mh-light-blue);
	color: var(--primary);
}

.mobile-gnb > li.open .mobile-cat svg {
	transform: rotate(180deg);
	color: var(--primary);
}

/* 소메뉴 아코디언 */
.mobile-sub {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	background: var(--mh-light);
}

.mobile-gnb > li.open .mobile-sub { max-height: 400px; }

.mobile-sub li a {
	display: block;
	padding: 12px 24px 12px 36px;
	color: var(--mh-gray-text);
	font-size: var(--fs-sm);
	transition: all 0.2s;
	border-top: 1px solid var(--mh-border);
}

.mobile-sub li a:hover {
	color: var(--primary);
	background: #fff;
	padding-left: 40px;
}

/* 모바일 로그인/회원가입 */
.mobile-utility {
	display: flex;
	flex-direction: column;
	padding: 24px;
	gap: 12px;
	margin-top: 16px;
	border-top: 1px solid var(--mh-border);
}

.mobile-utility a {
	padding: 10px 16px;
	text-align: center;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--mh-gray-text);
	border: 1px solid var(--mh-border);
	transition: all 0.2s;
}

.mobile-utility a:hover {
	border-color: var(--primary);
	color: var(--primary);
}

/* 배경 오버레이 */
.mobile-menu-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
	z-index: 199;
	pointer-events: none;
}

body.menu-open .mobile-menu-backdrop {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* ── 우하단 플로팅 버튼 그룹 ────────────────────────────────────────────── */
.float-btn-group {
	position: fixed;
	bottom: 28px;
	right: 28px;
	z-index: 150;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-end;
	transition: opacity 0.3s, transform 0.3s;
}

.float-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px 9px 10px;
	background: #fff;
	color: #1a1a1a;
	border: 1px solid var(--mh-border);
	border-radius: 50px;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: -0.3px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.float-btn:hover {
	background: var(--mh-dark);
	color: #fff;
	border-color: var(--mh-dark);
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(10, 14, 39, 0.3);
}

.float-btn-icon {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--light-blue, #f0f5ff);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s, color 0.3s;
}

.float-btn:hover .float-btn-icon {
	background: var(--accent);
	color: var(--mh-dark);
}

.float-btn svg {
	width: 14px;
	height: 14px;
}

.float-btn-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.float-btn-text small {
	font-weight: 500;
	color: var(--gray-light, #8a8d99);
	font-size: 10px;
	transition: color 0.3s;
}

.float-btn:hover .float-btn-text small {
	color: rgba(255, 255, 255, 0.65);
}

.float-btn-promo:hover .float-btn-icon svg {
	transform: translateX(-2px);
	transition: transform 0.3s;
}

/* 모바일 메뉴 열릴 때 플로팅 버튼 숨김 */
body.menu-open .float-btn-group {
	opacity: 0;
	pointer-events: none;
	transform: translateY(20px);
}

/* ── 반응형 ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.float-btn-group {
		bottom: 16px;
		right: 16px;
		gap: 8px;
	}
	.float-btn {
		padding: 8px;
		border-radius: 50%;
	}
	.float-btn-text { display: none; }
	.float-btn-icon { margin: 0; }
}

/* ── 준비중 (Coming Soon) 본문 블록 ─────────────────────────────────────── */
.coming-soon {
	text-align: center;
	padding: 60px 20px;
	border: 1px solid var(--border, #e5e7eb);
	background: linear-gradient(135deg, var(--light, #f8f9fc) 0%, #fff 100%);
}

.coming-soon-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 24px;
	border-radius: 50%;
	background: #f0f5ff;
	color: var(--primary, #0066cc);
	display: flex;
	align-items: center;
	justify-content: center;
}

.coming-soon-icon svg {
	width: 40px;
	height: 40px;
}

.coming-soon h2 {
	font-size: 24px;
	font-weight: 800;
	color: #1a1a1a;
	margin-bottom: 14px;
	letter-spacing: -0.5px;
}

.coming-soon p {
	color: var(--gray-text, #4a4a4a);
	font-size: var(--fs-sm);
	line-height: 1.8;
	margin-bottom: 30px;
}

.coming-soon p strong {
	color: var(--primary, #0066cc);
	font-weight: 700;
}

.coming-soon-actions {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.cs-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 22px;
	background: #fff;
	border: 1px solid var(--border, #e5e7eb);
	color: var(--gray-text, #4a4a4a);
	font-size: var(--fs-xs);
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s;
}

.cs-btn:hover {
	border-color: var(--primary, #0066cc);
	color: var(--primary, #0066cc);
}

.cs-btn svg {
	width: 14px;
	height: 14px;
}

.cs-btn-primary {
	background: var(--primary, #0066cc);
	border-color: var(--primary, #0066cc);
	color: #fff;
}

.cs-btn-primary:hover {
	background: #004999;
	border-color: #004999;
	color: #fff;
	transform: translateY(-1px);
}

/* ── 준비중 뱃지 ─────────────────────────────────────────────────────────── */
.menu-badge-soon {
	display: inline-block;
	padding: 1px 6px;
	background: #e8edf8;
	color: #6b7aad;
	font-size: var(--fs-2xs);
	font-weight: 600;
	border-radius: 10px;
	line-height: 16px;
	letter-spacing: 0.02em;
}