/* bundle-home.css — 아래 CSS 파일들을 순서 그대로 합친 묶음 파일 (자동 생성)
   원본: variables.css, base.css, layout.css, typography.css, buttons.css, navbar.css, footer.css, utilities.css, hero.css, sections.css, responsive.css
   원본 CSS를 고치면 이 묶음 파일도 다시 만들어야 화면에 반영됩니다. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');

/* ==================== variables.css ==================== */
/* ============================================================
   css/variables.css
   ─────────────────────────────────────────────────────────────
   목적: 프로젝트 전체에서 사용하는 모든 디자인 토큰(CSS 변수)을
         한 곳에서 관리합니다.
   포함: 구글 폰트 임포트, 브랜드 색상, 제품별 테마 색상,
         배경/텍스트 전용 변수, 그림자, 반경(radius), 트랜지션,
         폰트 패밀리 변수
   ============================================================ */

/* ── Google Fonts ───────────────────────────────────────────── */
/* (@import → 묶음 파일 맨 위로 이동) */

:root {
  /* ── 브랜드 Blue (Primary) ─────────────────────────────────── */
  --primary:        #1565C0;
  --primary-dark:   #0D47A1;
  --primary-light:  #1976D2;
  --primary-pale:   #E3F0FF;   /* 연한 파랑 배경 (라벨, 뱃지 등) */

  /* ── Accent 색상 ────────────────────────────────────────────── */
  --accent:         #0288D1;   /* 하늘 파랑 (Sky blue) */
  --accent2:        #00897B;   /* 청록 Teal (VasculiX 테마) */

  /* ── Purple 계열 (MaxOne / Electrophysiology 테마) ─────────── */
  --purple:         #7B1FA2;
  --purple-dark:    #6A1B9A;
  --purple-light:   #AB47BC;
  --purple-pale:    #EDE7F6;   /* 연한 보라 배경 */
  --purple-50:      #F5EEFF;   /* 섹션 배경용 */
  --purple-100:     #E8D5F5;   /* 카드 테두리용 */

  /* ── Pink/Deep Purple (MaxOne assay 번호 뱃지 색) ──────────── */
  --pink-dark:      #880E4F;
  --pink:           #AD1457;

  /* ── Indigo (Application 태그 Neuro) ───────────────────────── */
  --indigo:         #5C6BC0;

  /* ── White / Off-white ─────────────────────────────────────── */
  --white:          #FFFFFF;
  --off-white:      #F8FAFE;

  /* ── Gray Scale ─────────────────────────────────────────────── */
  --gray-50:        #F5F8FF;
  --gray-100:       #EEF2FB;
  --gray-200:       #DDE4F0;
  --gray-300:       #C5CFDF;
  --gray-400:       #98A9C0;
  --gray-500:       #6B7FA0;
  --gray-600:       #4A5870;
  --gray-700:       #2E3A50;
  --gray-800:       #1C2740;
  --gray-900:       #0F1824;

  /* ── Text 전용 컬러 (하드코딩 대체) ──────────────────────────── */
  --text-dark:      #1a2340;   /* 헤딩 진한 네이비 */
  --text-navy:      #1a2540;   /* MaxOne 섹션 헤딩 */
  --text-mid:       #4a5a78;   /* 본문 중간 */
  --text-light:     #5a6a85;   /* 서브 설명, 캡션 */
  --text-blue:      #2d3a52;   /* 일반 바디 텍스트 */
  --text-purple-mid:#4a3560;   /* MaxOne assay 리스트 텍스트 */
  --text-purple-lt: #5a6a88;   /* MaxOne feat-desc 등 */
  --text-teal-dark: #1a2f2e;   /* VasculiX 헤딩 */
  --text-teal-mid:  #4a6462;   /* VasculiX 본문 */

  /* ── 테마별 배경 (제품 섹션 배경) ──────────────────────────── */
  --bg-pathfinder:  #f4f7fc;   /* Pathfinder 시스템 섹션 배경 */
  --bg-vasculix:    #f0f8f7;   /* VasculiX 원리 섹션 배경 */
  --bg-maxone:      #f5eeff;   /* MaxOne 인트로 배경 */
  --bg-maglab:      #eaf1fb;   /* MAG_LAB 기능 섹션 배경 */
  --bg-maglab-end:  #f0f4fd;   /* MAG_LAB 그라디언트 끝 */
  --bg-dark:        #0d0d1a;   /* MaxOne 영상 섹션 다크 배경 */

  /* ── Light Color Tokens (Blue/Teal) ──────────────────────────── */
  --blue-50:        #EBF4FF;
  --blue-100:       #DAEEFF;
  --teal-50:        #E0F7F5;

  /* ── Shadows ────────────────────────────────────────────────── */
  --shadow-xs:      0 1px 3px rgba(21,101,192,.06);
  --shadow-sm:      0 2px 8px rgba(21,101,192,.08);
  --shadow:         0 4px 16px rgba(21,101,192,.10);
  --shadow-md:      0 8px 24px rgba(21,101,192,.12);
  --shadow-lg:      0 16px 40px rgba(21,101,192,.14);
  --shadow-xl:      0 24px 60px rgba(21,101,192,.16);

  /* ── Border Radius ──────────────────────────────────────────── */
  --radius-xs:      4px;
  --radius-sm:      8px;
  --radius:         12px;
  --radius-lg:      20px;
  --radius-xl:      28px;
  --radius-2xl:     40px;

  /* ── Transition ─────────────────────────────────────────────── */
  --transition:     all .28s cubic-bezier(.4,0,.2,1);

  /* ── Typography ─────────────────────────────────────────────── */
  --font-en:        'Inter', sans-serif;
  --font-kr:        'Noto Sans KR', sans-serif;
}

/* ==================== base.css ==================== */
/* ============================================================
   css/base.css
   ─────────────────────────────────────────────────────────────
   목적: CSS 리셋 및 HTML 기본 태그(html, body, img, a, ul,
         button, input 등)의 기본 스타일을 정의합니다.
         모든 컴포넌트 스타일보다 먼저 로드되어야 합니다.
   포함: 박스 모델 리셋, 스무스 스크롤, 폰트 기본값,
         언어 전환(한국어 폰트) 규칙
   ============================================================ */

/* ── 박스 모델 리셋 ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── HTML 루트 ──────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* 앵커 이동 시 고정 네비바(68px) + 여유(12px)만큼 오프셋 */
  scroll-padding-top: 80px;
}

/* ── Body 기본 ──────────────────────────────────────────────── */
body {
  font-family: var(--font-en);
  color: var(--gray-700);
  background: var(--white);
  line-height: 1.65;
  overflow-x: hidden; /* 가로 스크롤 방지 */
}

/* ── 미디어 ─────────────────────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
  display: block; /* 인라인 여백(descender gap) 제거 */
}

/* ── 링크 ───────────────────────────────────────────────────── */
a {
  text-decoration: none;
  color: inherit;
}

/* ── 목록 ───────────────────────────────────────────────────── */
ul { list-style: none; }

/* ── 버튼 ───────────────────────────────────────────────────── */
button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ── 폼 요소 ────────────────────────────────────────────────── */
input, textarea, select {
  font-family: inherit; /* 폼 요소에도 사이트 폰트 강제 적용 */
}

/* ── 한국어 언어 클래스 (.lang-ko) ─────────────────────────── */
/* js에서 <html> 또는 <body>에 .lang-ko 클래스를 토글하면
   모든 텍스트 요소에 Noto Sans KR이 자동 적용됩니다. */
.lang-ko h1, .lang-ko h2, .lang-ko h3,
.lang-ko h4, .lang-ko h5, .lang-ko h6,
.lang-ko p, .lang-ko span, .lang-ko li, .lang-ko a,
.lang-ko label, .lang-ko button {
  font-family: var(--font-kr);
}

/* ==================== layout.css ==================== */
/* ============================================================
   css/layout.css
   ─────────────────────────────────────────────────────────────
   목적: 페이지 레이아웃의 뼈대가 되는 컨테이너, 섹션 패딩,
         배경 유틸 클래스, 섹션 헤더 공통 스타일을 정의합니다.
   포함: .container, .section / .section-sm / .section-lg,
         .bg-light / .bg-blue-pale, .section-header
   ============================================================ */

/* ── 중앙 정렬 컨테이너 ─────────────────────────────────────── */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── 섹션 패딩 변형 ─────────────────────────────────────────── */
.section    { padding: 96px 0; }
.section-sm { padding: 56px 0; }  /* 작은 섹션 (feature strip 등) */
.section-lg { padding: 128px 0; } /* 큰 섹션 (히어로 다음 강조 섹션) */

/* ── 배경 유틸 ──────────────────────────────────────────────── */
.bg-light     { background: var(--off-white); }
.bg-blue-pale { background: var(--blue-50); }

/* ── 섹션 헤더 (레이블 + 타이틀 + 설명 묶음) ──────────────── */
/* 주로 각 섹션 최상단에서 중앙 정렬 타이틀 블록으로 사용 */
.section-header {
  text-align: center;
  margin-bottom: 60px;
}

/* ==================== typography.css ==================== */
/* ============================================================
   css/typography.css
   ─────────────────────────────────────────────────────────────
   목적: 섹션 공통 텍스트 요소(레이블 태그, 섹션 타이틀, 설명)와
         Pathfinder 상세 페이지에서 재사용되는 텍스트 스타일을
         정의합니다.
   포함: .label-tag, .section-title, .section-desc,
         .pf-badge, .pf-section-title, .pf-section-desc
   참고: 제품별 배지(.mx-badge, .vc-badge 등)는 각 제품 CSS에 위치
   ============================================================ */

/* ── 섹션 레이블 태그 ───────────────────────────────────────── */
/* 섹션 타이틀 위에 오는 작은 캡션 배지 (예: "OUR PRODUCTS") */
.label-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--blue-50);
  color: var(--primary);
  border: 1px solid rgba(21,101,192,.18);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 14px;
}

/* 레이블 앞 파란 점 장식 */
.label-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── 섹션 타이틀 ────────────────────────────────────────────── */
/* clamp()로 뷰포트에 따라 자연스럽게 크기 조절 */
.section-title {
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  font-weight: 800;
  color: var(--gray-800);
  line-height: 1.2;
  margin-bottom: 14px;
  letter-spacing: -.02em;
}

/* 강조 텍스트: <em> 태그를 이텔릭 아닌 컬러 강조로 활용 */
.section-title em {
  font-style: normal;
  color: var(--primary);
}

/* ── 섹션 설명 ──────────────────────────────────────────────── */
.section-desc {
  font-size: 1.02rem;
  color: var(--gray-500);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.8;
}

/* ═══════════════════════════════════════════════════════════
   Pathfinder / 공통 섹션 배지 & 타이틀 (pf- prefix)
   ─────────────────────────────────────────────────────────
   Pathfinder 상세 섹션들 및 MaxOne 영상 섹션 헤더에서
   공통으로 재사용됩니다.
═══════════════════════════════════════════════════════════ */

/* 블루 그라디언트 배지 (섹션 구분용) */
.pf-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 14px;
}

/* Pathfinder 섹션 타이틀 — 독립 섹션 카드 내부용 */
.pf-section-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

/* Pathfinder 섹션 설명 */
.pf-section-desc {
  font-size: 0.95rem;
  color: var(--text-light);
  line-height: 1.75;
  max-width: 620px;
  margin: 0 auto;
}

/* 섹션 레이블 래퍼 (badge + title + desc 묶음, 중앙 정렬) */
.pf-section-label {
  text-align: center;
}

/* ==================== buttons.css ==================== */
/* ============================================================
   css/buttons.css
   ─────────────────────────────────────────────────────────────
   목적: 사이트 전체에서 사용되는 모든 버튼 컴포넌트 스타일을
         정의합니다.
   포함: .btn (기본), .btn-primary, .btn-outline, .btn-brochure,
         .btn-brochure-teal, .btn-light, .btn-white-solid,
         .btn-outline-white, .btn-lg / .btn-sm 크기 변형,
         .prod-action-btns (버튼 묶음 래퍼)
   ============================================================ */

/* ── 버튼 기본 베이스 ───────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 30px;
  border-radius: 100px; /* pill 형태 */
  font-size: .93rem;
  font-weight: 600;
  transition: var(--transition);
  white-space: nowrap;
}

/* ── Primary (채워진 파랑) ──────────────────────────────────── */
.btn-primary {
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(21,101,192,.3);
}
.btn-primary:hover {
  background: var(--primary-dark);
  box-shadow: 0 6px 20px rgba(21,101,192,.4);
  transform: translateY(-2px);
}

/* ── Outline (테두리 파랑) ──────────────────────────────────── */
.btn-outline {
  background: var(--white);
  color: var(--primary);
  border: 2px solid var(--primary);
}
.btn-outline:hover {
  background: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
}

/* ── 브로셔 다운로드 버튼 — 파랑 (Pathfinder) ─────────────── */
.btn-brochure {
  background: var(--white);
  color: var(--primary);
  border: 2px solid var(--primary);
}
.btn-brochure:hover {
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 6px 20px rgba(21,101,192,.3);
  transform: translateY(-2px);
}
/* 브로셔 버튼 내부 SVG 아이콘 크기 */
.btn-brochure svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

/* ── 브로셔 버튼 — 청록 변형 (VasculiX) ───────────────────── */
.btn-brochure-teal {
  color: var(--accent2);
  border-color: var(--accent2);
}
.btn-brochure-teal:hover {
  background: var(--accent2);
  color: var(--white);
  box-shadow: 0 6px 20px rgba(0,137,123,.3);
}

/* ── Light (연한 파랑 배경) ─────────────────────────────────── */
.btn-light {
  background: var(--blue-50);
  color: var(--primary);
  border: 1.5px solid rgba(21,101,192,.2);
}
.btn-light:hover {
  background: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
}

/* ── White Solid (흰 배경, 그림자) — 다크 배경 위에서 사용 ── */
.btn-white-solid {
  background: var(--white);
  color: var(--primary);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.btn-white-solid:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  transform: translateY(-2px);
}

/* ── Outline White (투명 배경, 흰 테두리) — CTA 다크 섹션용 */
.btn-outline-white {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,.6);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,.15);
  transform: translateY(-2px);
}

/* ── 버튼 내부 SVG 아이콘 공통 크기 ───────────────────────── */
.btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ── 크기 변형 ──────────────────────────────────────────────── */
.btn-lg { padding: 16px 38px; font-size: 1rem; }
.btn-sm { padding: 9px 20px;  font-size: .83rem; }

/* ── 버튼 묶음 래퍼 (문의 + 브로셔 등 나란히 배치) ─────────── */
.prod-action-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 4px;
}

/* 제품 레이아웃 내 버튼 높이 통일 (btn-primary와 btn-brochure 동일) */
.pl-inner .btn,
.pf-product-info-col .btn {
  align-self: flex-start;
  padding: 11px 26px;
  font-size: 0.88rem;
  box-sizing: border-box;
  height: 44px;
}

/* border가 포함된 브로셔 버튼도 동일 크기 맞춤 */
.pf-product-info-col .btn-brochure {
  padding: 11px 26px;
}

/* Primary 버튼 내 SVG flex 처리 */
.btn.btn-primary svg,
.btn.btn-primary [style*="background"] svg {
  flex-shrink: 0;
}

/* ==================== navbar.css ==================== */
/* ============================================================
   css/navbar.css
   ─────────────────────────────────────────────────────────────
   목적: 상단 고정 네비게이션 바, 로고, 메가 메뉴(드롭다운 패널),
         모바일 햄버거 메뉴, 언어 토글 버튼의 스타일을 정의합니다.
   포함: .navbar, .navbar-inner, .navbar-logo, .navbar-nav,
         .navbar-actions, .lang-toggle, .lang-btn, .nav-cta,
         .hamburger, .nav-item, .mega-menu, .mega-inner,
         .mega-group, .mega-link, .mega-overlay,
         .mobile-menu, .mobile-lang
   ============================================================ */

/* ── 네비게이션 바 (상단 고정) ──────────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--gray-100);
  transition: var(--transition);
}

/* 스크롤 시 그림자 강화 */
.navbar.scrolled { box-shadow: var(--shadow); }

/* ── 내부 flex 레이아웃 ─────────────────────────────────────── */
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 24px;
}

/* ── 로고 영역 ──────────────────────────────────────────────── */
.navbar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* 헤더 로고 이미지 */
.logo-img-header {
  height: auto;
  width: 180px;
  max-height: 48px;
  display: block;
  object-fit: contain;
}

/* 아이콘 마크 (SVG 기반 로고 마크) */
.logo-mark {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.logo-mark svg { width: 20px; height: 20px; fill: var(--white); }

/* 워드마크 텍스트 */
.logo-wordmark { display: flex; flex-direction: column; line-height: 1.1; }
.logo-name { font-size: .97rem; font-weight: 800; color: var(--gray-900); letter-spacing: -.02em; }
.logo-sub  { font-size: .58rem; color: var(--gray-400); letter-spacing: .07em; text-transform: uppercase; }

/* ── 네비게이션 링크 목록 ───────────────────────────────────── */
.navbar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.navbar-nav a {
  font-size: .87rem;
  font-weight: 500;
  color: var(--gray-600);
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  white-space: nowrap;
}
.navbar-nav a:hover,
.navbar-nav a.active {
  color: var(--primary);
  background: var(--blue-50);
}

/* ── 우측 액션 버튼 영역 ────────────────────────────────────── */
.navbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ── 언어 토글 (KO / EN) ────────────────────────────────────── */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--gray-100);
  border-radius: 100px;
  padding: 3px;
}
.lang-btn {
  font-size: .72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  color: var(--gray-400);
  transition: var(--transition);
}

/* 활성 언어 버튼 */
.lang-btn.active {
  background: var(--white);
  color: var(--primary);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* ── CTA 버튼 (네비 우측 문의하기) ─────────────────────────── */
/* !important: .navbar-nav a 규칙의 padding 상속을 덮어씀 */
.nav-cta {
  background: var(--primary) !important;
  color: var(--white) !important;
  padding: 8px 18px !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  font-size: .84rem !important;
}
.nav-cta:hover {
  background: var(--primary-dark) !important;
  box-shadow: 0 4px 12px rgba(21,101,192,.3) !important;
  transform: translateY(-1px) !important;
}

/* ── 햄버거 메뉴 (모바일) ───────────────────────────────────── */
.hamburger {
  display: none; /* 768px 이하에서 표시 — responsive.css 참조 */
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--gray-700);
  border-radius: 2px;
  transition: var(--transition);
}

/* 열린 상태 — X 모양으로 변환 */
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════
   MEGA MENU — 심플 드롭다운 커튼 패널
   ─────────────────────────────────────────────────────────
   .nav-item에 .open 클래스를 토글해 열고 닫습니다.
   clip-path 애니메이션으로 아래로 펼쳐지는 효과.
═══════════════════════════════════════════════════════════ */

/* 트리거 래퍼 — position: static으로 전체 너비 패널 가능 */
.nav-item {
  position: static;
  display: flex;
  align-items: center;
}
.nav-item > a {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* 드롭다운 화살표 아이콘 */
.nav-item > a .nav-caret {
  width: 13px; height: 13px;
  fill: currentColor;
  opacity: .5;
  transition: transform .22s ease, opacity .22s ease;
  flex-shrink: 0;
}

/* 열렸을 때 화살표 180도 회전 */
.nav-item.open > a .nav-caret {
  transform: rotate(180deg);
  opacity: .9;
}

/* ── 메가 메뉴 패널 ─────────────────────────────────────────── */
/* clip-path로 위에서 아래로 펼쳐지는 슬라이드 효과 */
.mega-menu {
  position: fixed;
  top: 68px; /* 네비바 높이 */
  left: 0; right: 0;
  z-index: 998;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: 0 8px 32px rgba(21,101,192,.10);
  clip-path: inset(0 0 100% 0); /* 닫힌 상태: 완전히 위로 클리핑 */
  opacity: 0;
  pointer-events: none;
  transition: clip-path .3s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}

/* 열린 상태 */
.mega-menu.open {
  clip-path: inset(0 0 0% 0);
  opacity: 1;
  pointer-events: auto;
}

/* ── 메가 메뉴 내부 레이아웃 ────────────────────────────────── */
/* [FIX] 영문 메뉴 겹침 방지:
   1) max-width를 960→1100px로 넉넉하게 확장
   2) flex-wrap: wrap 추가 → 한 줄에 다 안 들어가면 자동으로 다음 줄로 줄바꿈
      (컬럼을 억지로 찌그러뜨리는 대신, 줄을 나눠서 안전하게 배치) */
.mega-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
  row-gap: 20px;
}

/* ── 그룹 단위 컬럼 (세로 링크 목록) ───────────────────────── */
/* [FIX] min-width: 140px 제거
   → flex 아이템의 기본 자동 축소 방지(min-width: auto)가 살아나서,
      글자 내용(white-space: nowrap)보다 좁게 찌그러지지 않음.
      flex-shrink: 0을 명시해 더 확실하게 축소를 막고,
      flex-grow: 0으로 남는 공간이 있어도 억지로 늘어나지 않게 함. */
.mega-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 0 32px;
  border-right: 1px solid var(--gray-200);
  flex: 0 0 auto;
}
.mega-group:first-child { padding-left: 0; }
.mega-group:last-child  { border-right: none; }

/* 그룹 상단 카테고리 레이블 */
.mega-group-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gray-400);
  white-space: nowrap;
  margin-bottom: 6px;
  padding-left: 13px;
}

/* ── 개별 링크 ──────────────────────────────────────────────── */
/* 초기에 왼쪽으로 오프셋, 열릴 때 fadeIn 처리 */
.mega-link {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 7px 13px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  font-size: .875rem;
  font-weight: 500;
  color: var(--gray-700);
  opacity: 0;
  transform: translateX(-6px);
  transition: background .15s, color .15s, opacity .2s ease, transform .2s ease;
}
.mega-menu.open .mega-link { opacity: 1; transform: translateX(0); }

/* 순차 지연 애니메이션 */
.mega-menu.open .mega-link:nth-child(2) { transition-delay: .04s; }
.mega-menu.open .mega-link:nth-child(3) { transition-delay: .08s; }
.mega-menu.open .mega-link:nth-child(4) { transition-delay: .12s; }
.mega-menu.open .mega-link:nth-child(5) { transition-delay: .16s; }
.mega-menu.open .mega-link:nth-child(6) { transition-delay: .20s; }

.mega-link:hover {
  background: var(--blue-50);
  color: var(--primary);
}

/* 링크 앞 작은 점 장식 */
.mega-link::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gray-300);
  flex-shrink: 0;
  transition: background .15s;
}
.mega-link:hover::before { background: var(--primary); }

/* ── 딤 오버레이 (메가 메뉴 열릴 때 배경 어둡게) ────────────── */
.mega-overlay {
  position: fixed;
  inset: 68px 0 0 0; /* 네비바 아래부터 */
  background: rgba(15,23,42,.25);
  z-index: 997;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.mega-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════
   모바일 메뉴 (햄버거 클릭 시 표시)
═══════════════════════════════════════════════════════════ */
.mobile-menu {
  display: none; /* .open 클래스로 표시 */
  position: fixed;
  top: 68px; left: 0; right: 0;
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  padding: 16px 24px 24px;
  z-index: 999;
  box-shadow: var(--shadow-lg);
}
.mobile-menu.open { display: block; }

.mobile-menu a {
  display: block;
  padding: 11px 0;
  font-size: .97rem;
  font-weight: 500;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
}
.mobile-menu a:hover { color: var(--primary); }

/* 모바일 메뉴 하단 언어 토글 */
.mobile-lang {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-200);
}
.mobile-lang .lang-btn {
  background: var(--gray-100);
  padding: 6px 16px;
}
.mobile-lang .lang-btn.active {
  background: var(--primary);
  color: var(--white);
}

/* ==================== footer.css ==================== */
/* ============================================================
   css/footer.css
   ─────────────────────────────────────────────────────────────
   목적: 사이트 푸터의 레이아웃, 브랜드 영역, 내비게이션 컬럼,
         소셜 버튼, 저작권 표시를 정의합니다.
   포함: .footer, .footer-grid (4열),
         .footer-brand / .fb-logo / .fb-tagline / .fb-socials,
         .footer-col / .footer-col h4 / .footer-col ul,
         .footer-bottom / .fb-links,
         로고 이미지 (.logo-img-footer)
   ============================================================ */

/* ── 푸터 전체 ──────────────────────────────────────────────── */
.footer {
  background: var(--gray-900);
  color: rgba(255,255,255,.65);
  padding: 64px 0 0;
}

/* ── 4열 그리드 레이아웃 ─────────────────────────────────────── */
/* 첫 번째 컬럼(브랜드)이 2배 너비 */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 44px;
  margin-bottom: 44px;
}

/* ── 브랜드 컬럼 ────────────────────────────────────────────── */
.footer-brand .fb-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

/* 푸터 로고 이미지 */
.logo-img-footer {
  height: 32px;
  width: auto;
  display: block;
  object-fit: contain;
}

.fb-tagline { font-size: .82rem; line-height: 1.75; margin-bottom: 16px; }
.fb-addr    { font-size: .76rem; margin-bottom: 3px; }

/* 소셜 버튼 목록 */
.fb-socials { display: flex; gap: 8px; margin-top: 14px; }

.soc-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.soc-btn:hover { background: var(--primary); }
.soc-btn svg   { width: 15px; height: 15px; fill: rgba(255,255,255,.75); }

/* ── 내비게이션 컬럼들 ──────────────────────────────────────── */
.footer-col h4 {
  font-size: .83rem; font-weight: 700; color: var(--white);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 14px;
}

.footer-col ul li { margin-bottom: 8px; }
.footer-col ul a {
  font-size: .81rem;
  color: rgba(255,255,255,.45);
  transition: var(--transition);
}
.footer-col ul a:hover { color: var(--white); }

/* ── 하단 저작권 바 ─────────────────────────────────────────── */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.footer-bottom p { font-size: .78rem; }

/* 하단 링크 목록 (개인정보처리방침 등) */
.fb-links { display: flex; gap: 18px; }
.fb-links a {
  font-size: .76rem;
  color: rgba(255,255,255,.35);
  transition: var(--transition);
}
.fb-links a:hover { color: var(--white); }

/* ==================== utilities.css ==================== */
/* ============================================================
   css/utilities.css
   ─────────────────────────────────────────────────────────────
   목적: 페이지 전체에 걸쳐 사용하는 유틸리티 클래스와
         공통 인터랙션 컴포넌트를 정의합니다.
   포함: .fade-up (스크롤 인입 애니메이션),
         .lb-overlay / .lb-content / .lb-img / .lb-close
           (범용 이미지 라이트박스),
         #scrollTopBtn (스크롤 to Top 버튼)
   참고: 섹션 내 lightbox (.lightbox-overlay)는 sections.css에,
         인증서 라이트박스 (#cert-lightbox)는 research.css에 위치
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   Scroll 인입 애니메이션 (Intersection Observer 연동)
   ─────────────────────────────────────────────────────────
   .fade-up 클래스를 요소에 붙이고 JS에서
   IntersectionObserver로 .visible을 토글하면 됩니다.
════════════════════════════════════════════════════════════ */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 자식 순서별 지연 애니메이션 */
.fade-up:nth-child(2) { transition-delay: .1s; }
.fade-up:nth-child(3) { transition-delay: .2s; }
.fade-up:nth-child(4) { transition-delay: .3s; }

/* ════════════════════════════════════════════════════════════
   범용 이미지 라이트박스 (.lb-overlay)
   ─────────────────────────────────────────────────────────
   제품 섹션 이미지, Pathfinder 전임상 이미지 등에서 사용.
   JS에서 .lb-open 클래스를 토글합니다.
════════════════════════════════════════════════════════════ */

/* 전체화면 오버레이 */
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.88);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lb-overlay.lb-open {
  opacity: 1;
  pointer-events: all;
}

/* 이미지 컨테이너 */
.lb-content {
  position: relative;
  max-width: 90vw; max-height: 88vh;
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
}

/* 라이트박스 이미지 — 열릴 때 scale 애니메이션 */
.lb-img {
  max-width: 90vw; max-height: 88vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  transform: scale(.92);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  display: block;
}
.lb-overlay.lb-open .lb-img { transform: scale(1); }

/* 닫기 버튼 (우상단 고정) */
.lb-close {
  position: fixed;
  top: 20px; right: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s;
  z-index: 10000;
}
.lb-close:hover { background: rgba(255,255,255,.28); }
.lb-close svg   { width: 22px; height: 22px; fill: var(--white); }

/* ════════════════════════════════════════════════════════════
   Scroll to Top 버튼 (#scrollTopBtn)
   ─────────────────────────────────────────────────────────
   JS에서 window.scrollY > 400 일 때 .stt-visible 토글
════════════════════════════════════════════════════════════ */
#scrollTopBtn {
  position: fixed;
  bottom: 36px; right: 36px;
  z-index: 900;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  box-shadow: 0 4px 18px rgba(21,101,192,.35);
  /* 기본 숨김 상태 */
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity .28s ease, visibility .28s ease,
              transform .28s ease, box-shadow .2s ease,
              background .2s ease;
}

/* 표시 상태 */
#scrollTopBtn.stt-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#scrollTopBtn:hover {
  background: linear-gradient(135deg, var(--primary-light) 0%, #1E88E5 100%);
  box-shadow: 0 8px 28px rgba(21,101,192,.45);
  transform: translateY(-3px);
}

#scrollTopBtn:active {
  transform: translateY(0);
  box-shadow: 0 3px 12px rgba(21,101,192,.3);
}

#scrollTopBtn svg {
  width: 22px; height: 22px;
  fill: var(--white); flex-shrink: 0;
}

/* ==================== hero.css ==================== */
/* ============================================================
   css/hero.css
   ─────────────────────────────────────────────────────────────
   목적: 메인 히어로 섹션의 전체 스타일을 정의합니다.
   포함: .hero 배경/레이아웃, .hero-deco-circle (장식 원),
         .hero-grid (점선 패턴), .hero-inner (2열 그리드),
         .hero-badge, .hero-title, .hero-slogan, .hero-actions,
         .hero-stats (통계), .hero-visual (우측 비주얼),
         .ring (회전 링), .ring-dot, .hero-center (중앙 카드),
         .chip (플로팅 칩), .scroll-hint (스크롤 인디케이터),
         @keyframes blink / spinRing / chipFloat / scrollW
   ============================================================ */

/* ── 히어로 섹션 전체 ───────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  /* 파란 계열 부드러운 그라디언트 배경 */
  background: linear-gradient(145deg, #EBF4FF 0%, #F0F8FF 40%, #FAFCFF 70%, var(--white) 100%);
  position: relative;
  overflow: hidden;
  padding-top: 68px; /* 고정 네비바 높이만큼 오프셋 */
}

/* ── 배경 장식 원 ───────────────────────────────────────────── */
/* pointer-events: none — 클릭 영역 차단 안 함 */
.hero-deco-circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(21,101,192,.06), rgba(2,136,209,.04));
  pointer-events: none;
}
.hero-deco-1 { width: 700px; height: 700px; top: -200px; right: -180px; }
.hero-deco-2 { width: 400px; height: 400px; bottom: -120px; left: -100px; }
.hero-deco-3 {
  width: 200px; height: 200px;
  top: 30%; right: 20%;
  /* teal 계열 별도 색상 */
  background: linear-gradient(135deg, rgba(0,137,123,.06), rgba(0,137,123,.02));
}

/* ── 점선 격자 배경 ─────────────────────────────────────────── */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(21,101,192,.12) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: .5;
  pointer-events: none;
}

/* ── 2열 내부 레이아웃 ──────────────────────────────────────── */
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 80px 24px 80px;
}

/* ── 히어로 배지 ────────────────────────────────────────────── */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue-50);
  border: 1px solid rgba(21,101,192,.2);
  color: var(--primary);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 24px;
}

/* 배지 점 — 깜박임 애니메이션 */
.hero-badge-dot {
  width: 7px; height: 7px;
  background: var(--primary);
  border-radius: 50%;
  animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .25; }
}

/* ── 히어로 타이틀 ──────────────────────────────────────────── */
.hero-title {
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1.18;
  margin-bottom: 10px;
  letter-spacing: -.025em;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.hero-title .hl  { color: var(--primary); }   /* 파랑 강조 */
.hero-title .hl2 { color: var(--accent2); }   /* 청록 강조 */

/* 타이틀 내 줄바꿈 방지 인라인 그룹 */
.hero-title-inline { white-space: nowrap; }

/* ── 슬로건 (이탤릭 인용구 스타일) ──────────────────────────── */
.hero-slogan {
  font-size: clamp(.88rem, 1.4vw, 1.05rem);
  color: var(--gray-500);
  border-left: 3px solid var(--primary);
  padding-left: 14px;
  margin-bottom: 36px;
  line-height: 1.75;
  font-style: italic;
}

/* ── CTA 버튼 그룹 ──────────────────────────────────────────── */
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

/* ── 통계 수치 영역 ─────────────────────────────────────────── */
.hero-stats { display: flex; gap: 36px; }

.stat-item {
  display: flex;
  flex-direction: column;
}
.stat-num {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}
.stat-label {
  font-size: .72rem;
  color: var(--gray-400);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
/* 통계 항목 사이 세로 구분선 */
.stat-divider {
  width: 1px;
  background: var(--gray-200);
  align-self: stretch;
  flex-shrink: 0;
}

/* ── 우측 비주얼 영역 ───────────────────────────────────────── */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-visual-wrap {
  position: relative;
  width: 384px;
  height: 384px;
}

/* ── 회전 링 (3개 동심원) ───────────────────────────────────── */
.ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(21,101,192,.14);
  animation: spinRing linear infinite;
}
.ring-1 { inset: 0;   animation-duration: 30s; }
.ring-2 {
  inset: 50px;
  border-color: rgba(2,136,209,.12);
  animation-duration: 22s;
  animation-direction: reverse; /* 반대 방향 회전 */
  border-style: dashed;
}
.ring-3 {
  inset: 100px;
  border-color: rgba(0,137,123,.10);
  animation-duration: 18s;
}

@keyframes spinRing {
  to { transform: rotate(360deg); }
}

/* ── 링 위 점 (파랑/시안/청록) ─────────────────────────────── */
.ring-dot {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  top: -5px; left: 50%;
  transform: translateX(-50%);
}
.ring-dot.blue { background: var(--primary); box-shadow: 0 0 8px rgba(21,101,192,.5); }
.ring-dot.cyan { background: var(--accent);  box-shadow: 0 0 8px rgba(2,136,209,.5); }
.ring-dot.teal {
  background: var(--accent2);
  box-shadow: 0 0 8px rgba(0,137,123,.5);
  bottom: -5px; top: auto; /* 아래쪽에 배치 */
}

/* ── 중앙 카드 ──────────────────────────────────────────────── */
.hero-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  text-align: center;
}
.hero-center-icon {
  width: 60px; height: 60px;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--blue-50), #daeeff);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
}
.hero-center-icon svg { width: 30px; height: 30px; fill: var(--primary); }
.hero-center h3 { font-size: .93rem; font-weight: 700; color: var(--gray-800); margin-bottom: 4px; }
.hero-center p  { font-size: .72rem; color: var(--gray-400); }

/* ── 플로팅 칩 ──────────────────────────────────────────────── */
.chip {
  position: absolute;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: chipFloat ease-in-out infinite;
}

/* 각 칩 위치 및 부유 타이밍 */
/* ── 수정 후 (11시 방향으로 이동, chip-1/chip-2는 그대로) ────── */
.chip-1 { top: 40px; right: -10px;  animation-duration: 5s; animation-delay: 0s; }
.chip-2 { bottom: 70px; left: -20px; animation-duration: 6s; animation-delay: 1.2s; }
.chip-3 { top: 20px; left: -10px; right: auto; animation-duration: 7s; animation-delay: 2.5s; }


@keyframes chipFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* 칩 아이콘 */
.chip-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chip-icon.ci-blue { background: var(--blue-50); }
.chip-icon.ci-teal { background: var(--teal-50); }
.chip-icon.ci-sky  { background: #E0F4FF; }
.chip-icon svg           { width: 16px; height: 16px; fill: var(--primary); }
.chip-icon.ci-teal svg   { fill: var(--accent2); }
.chip-icon.ci-sky  svg   { fill: var(--accent); }

/* 칩 텍스트 */
.chip-label { font-size: .65rem; color: var(--gray-400); }
.chip-value { font-size: .83rem; font-weight: 600; color: var(--gray-800); }

/* ── 스크롤 힌트 인디케이터 ─────────────────────────────────── */
.scroll-hint {
  position: absolute;
  bottom: 36px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--gray-300);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.scroll-mouse {
  width: 20px; height: 32px;
  border: 2px solid var(--gray-300);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  padding-top: 5px;
}
.scroll-wheel {
  width: 3px; height: 6px;
  background: var(--gray-300);
  border-radius: 2px;
  animation: scrollW 2s ease-in-out infinite;
}

@keyframes scrollW {
  0%, 100% { transform: translateY(0);  opacity: 1; }
  50%       { transform: translateY(6px); opacity: .3; }
}

/* ════════════════════════════════════════════════════════════
   우측 제품 슬라이드 (2026.10 개편) — 기존 링·칩 비주얼을 대체
   .hs-slide 4장이 겹쳐 있고 .is-on 인 한 장만 보임
════════════════════════════════════════════════════════════ */
.hero-slider { display: block; width: 100%; max-width: 560px; justify-self: end; }
.hs-frame {
  position: relative;
  aspect-ratio: 5 / 4;
  max-width: 100%;
  border-radius: 28px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 60px -20px rgba(21, 56, 110, .25), 0 0 0 1px #dbe7f6;
}
.hs-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.hs-slide.is-on { opacity: 1; visibility: visible; transition: opacity .9s ease; }
.hs-slide img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  transform: scale(1.06); transition: transform 6s ease;
}
.hs-slide.is-on img { transform: scale(1); }
/* 배경이 투명한 제품 컷 이미지: 잘리지 않게 전체를 보여 주고 연한 하늘빛 배경 */
.hs-slide.hs-fit img {
  object-fit: contain;
  padding: 7% 10% 24%;
  background: radial-gradient(circle at 50% 45%, #ffffff 0%, #e9f2fd 75%);
}
/* 이미지 보호 스크립트가 감싸는 상자도 꽉 채우기.
   보호 상자의 투명 덮개(::after, z-index 10)가 '자세히 보기'를 가려 클릭이 안 되던 문제 →
   상자에 z-index:0 을 줘서 덮개가 상자 안에서만 작동하게 하고, 이름표를 그 위에 올림 */
.hs-slide > .img-protect-wrap { width: 100%; height: 100%; z-index: 0; }

.hs-cap {
  position: absolute; left: 18px; right: 18px; bottom: 18px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 18px; padding: 14px 18px;
  text-decoration: none; color: inherit;
  text-align: left;
  transition: box-shadow .2s;
  z-index: 2;
}
.hs-cap:hover { box-shadow: 0 8px 24px -10px rgba(21, 56, 110, .35); }
.hs-cap-text { display: block; min-width: 0; }
.hs-cap small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary, #1565C0); }
.hs-cap strong { display: block; font-size: 1.15rem; font-weight: 800; color: #121a2e; margin-top: 2px; }
.hs-cap-text > span { display: block; font-size: .85rem; color: #4a5a78; margin-top: 2px; }
.hs-more { font-size: .82rem; font-weight: 700; color: var(--primary, #1565C0); white-space: nowrap; }

.hs-dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.hs-dot {
  position: relative; width: 64px; height: 4px; padding: 0; border: 0; border-radius: 4px;
  background: #d3e2f5; cursor: pointer; overflow: hidden;
}
.hs-dot::before { content: ""; position: absolute; inset: -10px 0; }   /* 누르기 쉬운 영역 */
.hs-dot i { position: absolute; inset: 0; width: 0; background: var(--primary, #1565C0); border-radius: 4px; }
.hs-dot.is-on i { animation: hsFill 5s linear forwards; }
.hero-slider.is-paused .hs-dot.is-on i { animation-play-state: paused; }
.hs-dot:focus-visible { outline: 3px solid rgba(21, 101, 192, .4); outline-offset: 4px; }
@keyframes hsFill { to { width: 100%; } }

/* 태블릿·모바일: 기존에는 오른쪽 비주얼을 숨겼지만, 슬라이드는 문구 아래에 보여 줌 */
@media (max-width: 1024px) {
  .hero-inner .hero-slider { display: block; justify-self: center; max-width: 520px; margin-top: 8px; }
  .hero .scroll-hint { display: none; }   /* 슬라이드 점과 겹치지 않게 */
}
@media (max-width: 520px) {
  .hs-frame { border-radius: 20px; }
  .hs-cap { left: 10px; right: 10px; bottom: 10px; padding: 10px 12px; border-radius: 14px; }
  .hs-cap strong { font-size: 1rem; }
  .hs-slide.hs-fit img { padding: 5% 8% 34%; }
  .hs-cap-text > span { font-size: .78rem; }
  .hs-more { display: none; }
  .hs-dot { width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-slide, .hs-slide img { transition: none; }
  .hs-dot.is-on i { animation: none; width: 100%; }
}

/* ==================== sections.css ==================== */
/* ============================================================
   css/sections.css
   ─────────────────────────────────────────────────────────────
   목적: 홈 페이지 및 내부 페이지 공통 섹션 컴포넌트를 정의합니다.
   포함: .feature-strip / .feat-grid (기능 스트립),
         .prod-home-grid / .prod-card (홈 제품 카드),
         .pcv-* (카드 비주얼 배경 변형), .lightbox-overlay,
         .partners-wrap (파트너 슬라이더),
         .cta-sec (CTA 섹션), .page-hero (내부 페이지 히어로)
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   FEATURE STRIP — 홈 히어로 아래 4개 특징 가로 나열
═══════════════════════════════════════════════════════════ */
.feature-strip {
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
}

/* 4열 균등 분할 */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.feat-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 22px;
  border-right: 1px solid var(--gray-100);
  transition: var(--transition);
}
.feat-item:last-child { border-right: none; }
.feat-item:hover      { background: var(--off-white); }

.feat-icon {
  width: 42px; height: 42px;
  flex-shrink: 0;
  background: var(--blue-50);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.feat-icon svg { width: 20px; height: 20px; fill: var(--primary); }

.feat-text h4 { font-size: .88rem; font-weight: 700; color: var(--gray-800); margin-bottom: 2px; }
.feat-text p  { font-size: .75rem; color: var(--gray-400); }

/* ═══════════════════════════════════════════════════════════
   PRODUCT CARDS (HOME) — 홈 페이지 제품 3열 카드 그리드
═══════════════════════════════════════════════════════════ */
.prod-home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* 카드 기본 */
.prod-card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
.prod-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(21,101,192,.2);
}

/* 카드 상단 비주얼 영역 */
.prod-card-visual {
  height: 200px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* 비주얼 배경 변형 */
.pcv-blue   { background: linear-gradient(145deg, var(--blue-50) 0%, #C8E6FF 100%); }
.pcv-img    { background: #f8f9fa; }

/* Pathfinder 실제 제품 이미지 카드 비주얼 */
.pcv-pathfinder {
  background-image: url('../images/pathfinder_navi_v2.png');  /* 🔧 새 제품 이미지로 교체 */
  background-color: var(--white);
  background-repeat: no-repeat;
  background-size: contain;          /* 🔧 이미지 전체가 잘리지 않고 보이도록 */
  background-position: center;       /* 🔧 가운데 정렬 */
  overflow: hidden;
}

/* VasculiX 이미지 카드 비주얼
   🔧 제품 소개 페이지(VasculiX_Pro)와 같은 파일을 사용합니다.
      images/vasculix_pro_full.jpg 파일만 교체하면 홈 카드도 함께 바뀝니다. */
.pcv-vasculix {
  background-image: url('../images/vasculix_pro_full.jpg');
  background-color: var(--white);
  background-repeat: no-repeat;
  background-size: contain;          /* 🔧 이미지가 바뀌어도 잘리지 않도록 */
  background-position: center;
  overflow: hidden;
}

/* Pathfinder 카드 — 파랑 강조 테두리 */
.prod-card-blue {
  border: 2px solid var(--primary) !important;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 4px rgba(21,101,192,.08);
}
.prod-card-blue:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(21,101,192,.15), var(--shadow-xl);
}

/* VasculiX 카드 — 청록(teal) 강조 테두리 */
.prod-card-teal {
  border: 2px solid var(--accent2) !important;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 4px rgba(0,137,123,.08);
}
.prod-card-teal:hover {
  border-color: var(--accent2) !important;
  box-shadow: 0 0 0 4px rgba(0,137,123,.15), var(--shadow-xl);
}

/* VasculiX 카드 — 분홍(pink) 강조 테두리 (products.html 테마와 통일) */
.prod-card-pink {
  border: 2px solid #ec4863 !important;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 4px rgba(236,72,99,.08);
}
.prod-card-pink:hover {
  border-color: #ec4863 !important;
  box-shadow: 0 0 0 4px rgba(236,72,99,.15), var(--shadow-xl);
}

/* MaxOne/MaxTwo 카드 — 보라(purple) 강조 테두리 */
.prod-card-purple {
  border: 2px solid var(--purple) !important;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 4px rgba(123,31,162,.08);
}
.prod-card-purple:hover {
  border-color: var(--purple) !important;
  box-shadow: 0 0 0 4px rgba(123,31,162,.15), var(--shadow-xl);
}

/* MaxOne / MaxTwo 카드 비주얼
   실제 제품 영역 크롭: 좌우 여백 제거, 상단 치우침 보정 */
.pcv-maxone {
  background-image: url('../images/maxone_maxtwo.jpg');
  background-color: #f0f0f0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  height: 220px;
  overflow: hidden;
}
/* MaxOne 비주얼 내 배지 색상 */
.pcv-maxone .pcv-badge {
  background: rgba(103,58,183,.12);
  color: #6200EA;
}

/* 기타 배경 변형 */
.pcv-teal   { background: linear-gradient(145deg, var(--teal-50) 0%, #B2DFDB 100%); }
.pcv-purple { background: linear-gradient(145deg, var(--purple-pale) 0%, #D1C4E9 100%); }

/* 비주얼 영역 아이콘 래퍼 */
.pcv-icon {
  width: 88px; height: 88px;
  background: var(--white);
  border-radius: 22px;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.pcv-icon svg { width: 42px; height: 42px; }
.pcv-icon.ico-blue   svg { fill: var(--primary); }
.pcv-icon.ico-teal   svg { fill: var(--accent2); }
.pcv-icon.ico-purple svg { fill: var(--purple); }

/* 비주얼 배지 (좌상단 카테고리 라벨) */
.pcv-badge {
  position: absolute;
  top: 14px; left: 14px;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(4px);
}
.pcv-badge.bb  { color: var(--primary);  border: 1px solid rgba(21,101,192,.3); }
.pcv-badge.bt  { color: var(--accent2);  border: 1px solid rgba(0,137,123,.3); }
.pcv-badge.bp  { color: var(--purple);   border: 1px solid rgba(123,31,162,.3); }
.pcv-badge.bpk { color: #ec4863;         border: 1px solid rgba(236,72,99,.3); }

/* 비주얼 장식 원 (배경 장식) */
.pcv-deco {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
}
.pcv-deco-1 { width: 180px; height: 180px; top: -60px; right: -60px; }
.pcv-deco-2 { width: 120px; height: 120px; bottom: -40px; left: -20px; }

/* ── 카드 본문 ──────────────────────────────────────────────── */
.prod-card-body {
  padding: 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pcd-tag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 6px; }
.pcd-tag.t-blue   { color: var(--primary); }
.pcd-tag.t-teal   { color: var(--accent2); }
.pcd-tag.t-purple { color: var(--purple);  }
.pcd-tag.t-pink   { color: #ec4863; }

.pcd-title { font-size: 1.28rem; font-weight: 800; color: var(--gray-900); margin-bottom: 10px; }
.pcd-desc  { font-size: .85rem; color: var(--gray-500); line-height: 1.72; flex: 1; margin-bottom: 18px; }

/* 카드 특징 목록 */
.pcd-features { display: flex; flex-direction: column; gap: 5px; margin-bottom: 22px; }
.pcd-feat {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; color: var(--gray-600);
}

/* 체크 아이콘 (SVG inline data URI) */
.pcd-feat::before {
  content: '';
  width: 16px; height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--blue-50);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231565C0'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center;
}
/* 청록 변형 체크 */
.pcd-feat.ft-teal::before {
  background-color: var(--teal-50);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300897B'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}
/* 분홍 변형 체크 */
.pcd-feat.ft-pink::before {
  background-color: rgba(236,72,99,.08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ec4863'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}
/* 보라 변형 체크 */
.pcd-feat.ft-purple::before {
  background-color: var(--purple-pale);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237B1FA2'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}

/* 카드 링크 */
.pcd-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .84rem; font-weight: 600;
  transition: var(--transition);
}
.pcd-link.l-blue   { color: var(--primary); }
.pcd-link.l-teal   { color: var(--accent2); }
.pcd-link.l-purple { color: var(--purple);  }
.pcd-link.l-pink   { color: #ec4863; }
.pcd-link svg { width: 15px; height: 15px; fill: currentColor; transition: var(--transition); }
.pcd-link:hover svg { transform: translateX(4px); }

/* 클릭 가능한 비주얼 커서 */
.pcv-clickable { cursor: zoom-in; }

/* 제품 이미지 (object-fit contain) */
.pcv-product-img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 12px;
  display: block;
}

/* ── 이미지 라이트박스 오버레이 ─────────────────────────────── */
/* 홈 카드 이미지 클릭 시 전체화면 표시 */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.lightbox-overlay.open { display: flex; }
.lightbox-overlay img {
  max-width: 90vw; max-height: 88vh;
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  object-fit: contain;
  cursor: default;
  animation: lbFadeIn .2s ease;
}
.lightbox-close {
  position: absolute; top: 20px; right: 24px;
  background: rgba(255,255,255,.15);
  border: none; border-radius: 50%;
  width: 44px; height: 44px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--white); font-size: 22px;
  transition: background .2s;
}
.lightbox-close:hover { background: rgba(255,255,255,.3); }

@keyframes lbFadeIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════
   PARTNERS SLIDER — 자동 스크롤 로고 슬라이더
═══════════════════════════════════════════════════════════ */
.partners-wrap {
  overflow: hidden;
  position: relative;
  margin-top: 48px;
}

/* 좌우 페이드 그라디언트 */
.partners-wrap::before,
.partners-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
}
.partners-wrap::before { left: 0;  background: linear-gradient(90deg,  var(--white), transparent); }
.partners-wrap::after  { right: 0; background: linear-gradient(-90deg, var(--white), transparent); }

/* 무한 슬라이드 트랙 (아이템 2배 복제로 무한 루프) */
.partners-track {
  display: flex;
  gap: 20px;
  animation: slideP 28s linear infinite;
  width: max-content;
}
.partners-track:hover { animation-play-state: paused; } /* 호버 시 일시정지 */

@keyframes slideP {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* 복제본 위치로 이동 */
}

/* 텍스트 파트너 칩 */
.partner-chip {
  display: flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 24px; min-width: 140px;
  background: var(--off-white);
  border: 1.5px solid var(--gray-100);
  border-radius: var(--radius);
  font-size: .9rem; font-weight: 600;
  color: var(--gray-500);
  transition: var(--transition);
  white-space: nowrap;
}
.partner-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--blue-50); }

/* 로고 이미지 파트너 아이템 */
.partner-logo-item {
  display: flex; align-items: center; justify-content: center;
  height: 72px; padding: 0 28px; min-width: 160px;
  background: var(--white);
  border: 1.5px solid var(--gray-100);
  border-radius: var(--radius);
  transition: var(--transition);
  flex-shrink: 0;
}
.partner-logo-item:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(21,101,192,.10);
  transform: translateY(-2px);
}
.partner-logo-item img {
  height: 44px; width: auto; max-width: 200px;
  object-fit: contain; display: block;
  filter: grayscale(30%);
  transition: filter .3s;
}
.partner-logo-item:hover img { filter: grayscale(0%); }

/* ═══════════════════════════════════════════════════════════
   CTA SECTION — 하단 행동 유도 섹션 (파랑 그라디언트 배경)
═══════════════════════════════════════════════════════════ */
.cta-sec {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 55%, var(--accent) 100%);
  position: relative;
  overflow: hidden;
}

/* 도트 패턴 오버레이 */
.cta-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 36px 36px;
}

.cta-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.cta-inner h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  color: var(--white);
  margin-bottom: 14px;
}
.cta-inner p {
  font-size: 1rem;
  color: rgba(255,255,255,.8);
  margin-bottom: 36px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════
   PAGE HERO — 내부 페이지(About, Research 등) 상단 히어로
═══════════════════════════════════════════════════════════ */
.page-hero {
  background: linear-gradient(160deg, var(--blue-50) 0%, #E8F4FF 50%, var(--off-white) 100%);
  padding: 140px 0 72px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* 도트 패턴 배경 */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(21,101,192,.1) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: .5;
}

.ph-inner { position: relative; z-index: 1; }

/* 페이지 히어로 태그 배지 */
.ph-tag {
  display: inline-block;
  background: rgba(21,101,192,.1);
  border: 1px solid rgba(21,101,192,.2);
  color: var(--primary);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.page-hero h1 {
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  color: var(--gray-900);
  margin-bottom: 14px;
  font-weight: 800;
}
.page-hero .lead {
  font-size: 1.02rem;
  color: var(--gray-500);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.8;
}

/* ==================== responsive.css ==================== */
/* ============================================================
   css/responsive.css
   ─────────────────────────────────────────────────────────────
   목적: 전체 사이트의 반응형 미디어 쿼리를 한 곳에 집중 관리합니다.
         컴포넌트별 파일에 분산된 @media 규칙을 이 파일에서
         브레이크포인트 순서대로 정리하여 유지보수를 쉽게 합니다.

   브레이크포인트 체계:
     ├── max-width: 1024px  — 태블릿 (가로)
     ├── max-width: 1024px and min-width: 769px — 태블릿 메가메뉴
     ├── max-width: 768px   — 모바일 (가로) / 태블릿 (세로)
     ├── max-width: 640px   — 소형 태블릿 / 대형 폰
     ├── max-width: 600px   — 인증 그리드 전용
     └── max-width: 480px   — 소형 모바일

   사용된 CSS 변수 (variables.css 참조):
     --primary, --primary-dark, --primary-light, --primary-pale
     --accent2, --gray-*, --blue-50, --teal-50
     --shadow-*, --radius-*, --transition
     --off-white, --white, --font-en, --font-kr
============================================================ */

/* ══════════════════════════════════════════════════════════════
   ── max-width: 1024px (태블릿 / 좁은 데스크탑)
══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── Layout ── */
  /* Hero: 2열 → 1열 */
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 100px 24px 80px;
  }
  .hero-actions  { justify-content: center; }
  .hero-stats    { justify-content: center; }
  .hero-visual   { display: none; } /* 태블릿에서 비주얼 요소 숨김 */

  /* Home product cards: 3열 → 2열 */
  .prod-home-grid { grid-template-columns: 1fr 1fr; }

  /* Values grid: 4열 → 2열 */
  .values-grid { grid-template-columns: 1fr 1fr; }

  /* Products detail: 2열 → 1열 (모든 plv- 비주얼 위로 이동) */
  .pl-inner     { grid-template-columns: 1fr; gap: 40px; }
  .pl-inner.rev { direction: ltr; } /* RTL 트릭 해제 */

  /* Mission grid: 2열 → 1열 */
  .mission-grid { grid-template-columns: 1fr; }

  /* Team grid: 4열 → 2열 */
  .team-grid { grid-template-columns: 1fr 1fr; }

  /* News grid: 3열 → 2열 */
  .news-grid { grid-template-columns: 1fr 1fr; }

  /* Contact layout: 2열 → 1열 */
  .contact-layout { grid-template-columns: 1fr; }

  /* Footer grid: 4열 → 2열 */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* Patent grid: 2열 → 1열 */
  .patent-grid { grid-template-columns: 1fr; }

  /* Certification grid: 3열 → 2열 */
  .cert-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Products Tab ── */
  .prod-tab-btn { padding: 18px 20px; gap: 10px; }
  .ptb-num      { font-size: 1.25rem; }
  .pl-inner     { gap: 40px; }

  /* ── Pathfinder ── */
  /* 제품 소개 레이아웃: 태블릿에서는 2열 유지, 간격 좁힘 */
  .pf-product-layout {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  /* 시스템 구성 섹션 */
  .pf-system-section {
    padding: 48px 36px;
    gap: 32px;
  }
  .pf-system-grid { grid-template-columns: repeat(2, 1fr); } /* 4열 → 2열 */

  /* 개요 섹션 */
  .pf-overview-section { padding: 48px 36px; gap: 32px; }

  /* 핵심 이점 섹션: 4열 → 2열 */
  .pf-benefit-section { padding: 48px 36px; }
  .pf-benefit-grid    { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* 활용 범위 섹션 */
  .pf-application-section { padding: 48px 36px; gap: 28px; }

  /* 스펙 슬라이더: 카드 4열 → 2열 */
  .pf-cards-grid    { grid-template-columns: repeat(2, 1fr); }
  .pf-bc-circle     { width: 52px; height: 52px; }
  .pf-bc-circle svg { width: 24px; height: 24px; }

  /* 전임상 섹션 */
  .pf-preclinical-section { padding: 52px 36px; gap: 36px; }
  .pf-preclinical-caps    { grid-template-columns: repeat(2, 1fr); } /* 4열 → 2열 */
  .pf-preclinical-cards   { grid-template-columns: repeat(2, 1fr); } /* 3열 → 2열 */

  /* ── MaxOne ── */
  .mx-intro-section { padding: 44px 32px; gap: 30px; }
  .mx-app-section   { padding: 44px 32px; gap: 28px; }
  .mx-assay-section { padding: 44px 32px; gap: 28px; }
  /* 어세이 행: 고정 340px → 280px */
  .mx-assay-row,
  .mx-assay-row--reverse { grid-template-columns: 280px 1fr; gap: 24px; }
  .mx-chip-section  { padding: 44px 32px; gap: 28px; }
  .mx-video-section { padding: 44px 32px; gap: 28px; }

  /* ── MAG_LAB ── */
  .ml-feature-section { padding: 44px 32px; gap: 32px; }
  .ml-feat-grid       { grid-template-columns: repeat(2, 1fr); gap: 14px; } /* 3열 → 2열 */
  .ml-slider          { height: 260px !important; }
  .ml-system-section  { padding: 44px 32px; gap: 30px; }
  .ml-sys-img-wrap    { height: 155px; }
  .ml-app-section     { padding: 44px 32px; gap: 30px; }
  .ml-app-grid        { grid-template-columns: repeat(2, 1fr); gap: 14px; } /* 4열 → 2열 */

  /* ── VasculiX ── */
  .vc-feat-grid       { grid-template-columns: repeat(2, 1fr); } /* 3열 → 2열 */
  .vc-principle-section { padding: 44px 36px; gap: 36px; }
}

/* ══════════════════════════════════════════════════════════════
   ── max-width: 1024px AND min-width: 769px (태블릿 메가메뉴)
      — 데스크탑 메가메뉴를 유지하되 여백을 좁힘
══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) and (min-width: 769px) {
  .mega-inner       { padding: 16px 24px; }
  .mega-group       { padding: 0 16px; }
  .mega-link        { font-size: .82rem; padding: 6px 10px; }
  .mega-group-label { font-size: .62rem; }
}

/* ══════════════════════════════════════════════════════════════
   ── max-width: 768px (모바일 / 작은 태블릿)
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Layout ── */
  .section { padding: 64px 0; } /* 섹션 상하 패딩 축소 */

  /* ── Navbar: 햄버거 메뉴로 전환 ── */
  .navbar-nav                   { display: none; } /* 데스크탑 nav 숨김 */
  .navbar-actions .lang-toggle  { display: none; } /* 언어 토글 숨김 */
  .navbar-actions .nav-cta      { display: none; } /* CTA 버튼 숨김 */
  .hamburger                    { display: flex; } /* 햄버거 표시 */

  /* ── 메가메뉴 완전 비활성화 (모바일-menu 사용) ── */
  .mega-menu,
  .mega-overlay { display: none !important; }
  .nav-item .nav-caret { display: none; } /* 드롭다운 화살표 숨김 */

  /* ── Feature strip: 4열 → 2열 ── */
  .feat-grid { grid-template-columns: 1fr 1fr; }

  /* ── Home product cards: 2열 → 1열 ── */
  .prod-home-grid { grid-template-columns: 1fr; }

  /* ── Values: 2열 유지 ── */
  .values-grid { grid-template-columns: 1fr 1fr; }

  /* ── Timeline: 좌우 교차 → 우측 단일 컬럼 ── */
  .timeline::before     { left: 16px; } /* 중앙선 → 왼쪽으로 이동 */
  .tl-item              { grid-template-columns: 32px 1fr; }
  .tl-content.left      { grid-column: 2; text-align: left; margin-right: 0; margin-left: 14px; }
  .tl-content.left::after { display: none; } /* 왼쪽 화살표 꼬리 숨김 */
  .tl-content.right     { grid-column: 2; margin-left: 14px; }
  .tl-dot               { grid-column: 1; }

  /* ── Team grid: 4열 → 2열 ── */
  .team-grid { grid-template-columns: 1fr 1fr; }

  /* ── News grid: 3열 → 1열 ── */
  .news-grid { grid-template-columns: 1fr; }

  /* ── Stats bar: 4열 → 2열 ── */
  .stats-bar-grid { grid-template-columns: 1fr 1fr; }

  /* ── Project item: 2열 → 1열 ── */
  .proj-item { grid-template-columns: 1fr; }

  /* ── Product spec grid: 2열 → 1열 ── */
  .prod-specs { grid-template-columns: 1fr; }

  /* ── Contact form ── */
  .contact-form-card { padding: 28px; }
  .form-row          { grid-template-columns: 1fr; } /* 2열 → 1열 */

  /* ── Footer ── */
  .footer-grid   { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }

  /* ── Hero stats ── */
  .hero-stats { flex-wrap: wrap; gap: 20px; justify-content: center; }

  /* ── Products tab ── */
  .prod-tab-btn     { padding: 14px 12px; gap: 8px; flex: none; }
  .ptb-num          { font-size: 1rem; }
  .ptb-products     { display: none; } /* 작은 화면에서 제품 목록 텍스트 숨김 */
  .pl-inner         { grid-template-columns: 1fr; gap: 28px; }
  .pl-inner.rev     { direction: ltr; }
  .pl-visual        { min-height: 240px; }
  .prod-name        { font-size: 1.6rem; }
  .prod-specs       { grid-template-columns: 1fr; }
  .prod-tab-section { padding-bottom: 56px; }
  .prod-tab-bar     { top: 60px; } /* 모바일 navbar 높이에 맞춤 */
  .prod-sub-tab-bar { top: 120px; } /* 네비바(60px) + 메인탭바(~60px) */

  /* ── Products sub-tab ── */
  .prod-sub-tab-btn { padding: 10px 16px; }
  .pstb-sub         { display: none; } /* 부제 숨김 */

  /* ── Patent grid: 2열 → 1열 ── */
  .patent-grid { grid-template-columns: 1fr; }

  /* ── About tab bar ── */
  .about-tab-btn { padding: 12px 22px; }
  .atb-label     { font-size: 0.82rem; }
  .about-tab-bar { top: 60px; }

  /* ── Pathfinder: 제품 소개 레이아웃: 2열 → 1열 ── */
  .pf-product-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px 0 28px;
  }
  .pf-product-img-col {
    position: static; /* sticky 해제 */
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
  }

  /* ── Pathfinder sections ── */
  .pf-overview-section {
    padding: 36px 24px;
    gap: 24px;
    border-radius: 18px;
  }
  .pf-ovp-item     { gap: 14px; padding: 20px 0; }
  .pf-ovp-num      { width: 34px; height: 34px; font-size: .66rem; border-radius: 8px; }
  .pf-ovp-title    { font-size: 0.92rem; }
  .pf-ovp-desc     { font-size: 0.83rem; }

  .pf-application-section {
    padding: 36px 24px;
    gap: 24px;
    border-radius: 18px;
  }
  .pf-app-categories {
    flex-direction: column;
    gap: 16px;
  }
  /* 신경 질환 그룹: 세로 배치로 전환 (border-left → border-top) */
  .pf-app-group--neuro {
    padding-left: 0;
    padding-top: 16px;
    border-left: none;
    border-top: 2px solid var(--gray-200);
  }

  /* ── Pathfinder spec slider: 카드 2열 → 2열 유지 ── */
  .pf-cards-grid    { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .pf-benefit-card  { padding: 20px 10px 18px; gap: 9px; border-radius: 14px; }
  .pf-bc-circle     { width: 44px; height: 44px; }
  .pf-bc-circle svg { width: 20px; height: 20px; }
  .pf-bc-title      { font-size: 0.75rem; }
  .pf-bc-list li    { font-size: 0.70rem; }

  /* ── Pathfinder principle section ── */
  .pf-principle-section {
    padding: 40px 20px;
    gap: 36px;
    border-radius: 16px;
    margin: 0 0 40px;
  }
  .pf-section-title { font-size: 1.35rem; }
  .pf-section-desc  { font-size: 0.88rem; }

  /* ── Pathfinder preclinical ── */
  .pf-preclinical-section {
    padding: 36px 22px;
    border-radius: 18px;
    margin: 0 0 36px;
    gap: 28px;
  }
  .pf-preclinical-caps   { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .pf-preclinical-cap    { padding: 10px 12px; }
  .pf-preclinical-cards  { grid-template-columns: 1fr; gap: 14px; } /* 2열 → 1열 */
  .pf-preclinical-card   { padding: 22px 18px; }

  /* ── MaxOne ── */
  .mx-intro-section { padding: 32px 20px; border-radius: 18px; margin: 0 0 32px; gap: 24px; }
  .mx-feat-grid     { grid-template-columns: 1fr; gap: 12px; } /* 2열 → 1열 */
  .mx-feat-card     { padding: 18px 16px; gap: 14px; }
  .mx-highlight-bar { flex-wrap: wrap; gap: 16px; padding: 20px; }
  .mx-hl-divider    { display: none; } /* 구분선 숨김 */
  .mx-hl-item       { flex: 0 0 calc(50% - 8px); }

  .mx-app-section   { padding: 32px 20px; border-radius: 18px; margin: 0 0 32px; }
  .mx-app-grid      { grid-template-columns: 1fr; gap: 28px; } /* 2열 → 1열 */

  /* MaxOne 어세이: 고정 열 → 1열 */
  .mx-assay-section { padding: 32px 20px; border-radius: 18px; margin: 0 0 32px; gap: 16px; }
  .mx-assay-row,
  .mx-assay-row--reverse {
    grid-template-columns: 1fr;
    padding: 22px 18px;
    gap: 18px;
  }
  /* reverse 행 순서 원래대로 */
  .mx-assay-row--reverse .mx-assay-row-visual,
  .mx-assay-row--reverse .mx-assay-row-body { order: unset; }

  .mx-chip-section  { padding: 32px 20px; border-radius: 18px; margin: 0 0 32px; gap: 22px; }
  .mx-chip-variants { grid-template-columns: 1fr; gap: 14px; } /* 2열 → 1열 */
  .mx-chip-var-head { flex-wrap: wrap; }
  .mx-chip-table    { table-layout: auto; }
  .mx-chip-table tbody td,
  .mx-chip-table thead th { padding: 10px 12px; }
  .mx-chip-th-psm,
  .mx-chip-th-plm   { font-size: 0.72rem; }

  .mx-video-section  { padding: 32px 20px; border-radius: 18px; margin: 0 0 32px; }
  .mx-video-points   { grid-template-columns: 1fr; gap: 12px; } /* 3열 → 1열 */
  .mx-video-point    { padding: 16px 14px; }

  /* ── MAG_LAB ── */
  .ml-feature-section { padding: 32px 20px; border-radius: 18px; margin: 0 0 32px; gap: 24px; }
  .ml-feat-grid       { grid-template-columns: 1fr 1fr; gap: 12px; } /* 2열 유지 */
  .ml-feat-card       { padding: 20px 16px; gap: 10px; }
  .ml-slider          { height: 220px !important; }

  .ml-system-section  { padding: 32px 20px; border-radius: 18px; margin: 0 0 32px; gap: 24px; }
  .ml-sys-grid        { grid-template-columns: 1fr; gap: 16px; } /* 3열 → 1열 */
  /* 모바일에서 카드를 가로 배치 (이미지 왼쪽, 텍스트 오른쪽) */
  .ml-sys-card        { flex-direction: row; border-radius: 14px; }
  .ml-sys-img-wrap {
    width: 130px;
    min-width: 130px;
    height: auto;
    min-height: 110px;
    border-bottom: none;
    border-right: 1px solid var(--gray-100);
    flex-shrink: 0;
  }
  .ml-sys-body        { padding: 16px 18px; justify-content: center; }

  .ml-app-section     { padding: 32px 20px; border-radius: 18px; margin: 0 0 32px; gap: 24px; }
  .ml-app-grid        { grid-template-columns: repeat(2, 1fr); gap: 12px; } /* 2열 유지 */
  .ml-app-card        { padding: 18px 14px; gap: 10px; }

  /* ── VasculiX ── */
  .vc-feat-grid     { grid-template-columns: 1fr; } /* 2열 → 1열 */
  .vc-principle-section {
    padding: 36px 24px;
    gap: 28px;
    border-radius: 18px;
  }
  .vc-step-title { font-size: 0.95rem; }
  .vc-step-desc  { font-size: 0.84rem; }
  .vc-coating-body {
    grid-template-columns: 1fr; /* 2열 → 1열 */
    gap: 18px;
  }
  .vc-coating-title { font-size: 0.95rem; }

  /* ── Lightbox ── */
  .lb-img   { max-width: 95vw; max-height: 80vh; border-radius: 8px; }
  .lb-close { top: 12px; right: 12px; width: 38px; height: 38px; }
  .lb-close svg { width: 18px; height: 18px; }

  /* ── Scroll to top button ── */
  #scrollTopBtn {
    bottom: 24px;
    right: 20px;
    width: 42px;
    height: 42px;
  }
  #scrollTopBtn svg {
    width: 20px;
    height: 20px;
  }
}

/* ══════════════════════════════════════════════════════════════
   ── max-width: 640px (소형 모바일)
══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── History timeline: 2열 → 1열 ── */
  .tl-year-group {
    grid-template-columns: 1fr;
    gap: 8px 0;
  }
  .tl-year-group::before { display: none; } /* 세로 구분선 숨김 */
  .tl-year-label {
    font-size: 1.2rem;
    text-align: left;
    padding: 0 0 8px 0;
    border-bottom: 2px solid var(--primary);
    margin-bottom: 8px;
    position: static; /* sticky 해제 */
  }
  .hist-tab { padding: 8px 14px; font-size: .85rem; }

  /* ── VasculiX 특징 슬라이드 탭 ── */
  .vc-feat-grid {
    grid-template-columns: 1fr;
  }
  .vc-slide-tab {
    padding: 9px 14px;
    font-size: 0.82rem;
  }
  .vc-feat-card {
    padding: 14px 13px 13px;
  }

  /* ── VasculiX 특징 이미지 캡션 ── */
  .vc-feat-img-caps {
    gap: 6px;
    padding: 8px 11px 10px;
  }
  .vc-feat-img-caps span {
    font-size: 0.7rem;
    padding: 3px 9px;
  }
}

/* ══════════════════════════════════════════════════════════════
   ── max-width: 600px (인증 그리드 전용)
══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── Pathfinder 시스템 구성: 2열 → 1열 ── */
  .pf-system-section {
    padding: 32px 20px;
    gap: 24px;
    border-radius: 18px;
  }
  .pf-system-grid { grid-template-columns: 1fr; gap: 12px; }
  .pf-sys-card    { padding: 18px 16px; }

  /* ── Pathfinder 핵심 이점: 2열 → 1열 ── */
  .pf-benefit-section {
    padding: 36px 20px;
    gap: 28px;
    border-radius: 18px;
    margin: 0 0 28px;
  }
  .pf-benefit-grid { grid-template-columns: 1fr; }
  .pf-bene-card    { padding: 20px 16px; }

  /* ── Certification grid: 2열 → 1열 ── */
  .cert-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   ── max-width: 480px (소형 모바일 / iPhone SE 등)
══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Feature strip: 2열 → 1열 ── */
  .feat-grid { grid-template-columns: 1fr; }

  /* ── Values: 2열 → 1열 ── */
  .values-grid { grid-template-columns: 1fr; }

  /* ── CTA 버튼: 가로 → 세로 ── */
  .cta-actions { flex-direction: column; align-items: center; }

  /* ── Hero 버튼: 가로 → 세로 ── */
  .hero-actions { flex-direction: column; align-items: center; }

  /* ── Stats bar: 2열 유지 ── */
  .stats-bar-grid { grid-template-columns: 1fr 1fr; }

  /* ── About tab: 번호 숨김 ── */
  .about-tab-btn { padding: 10px 14px; }
  .atb-label     { font-size: 0.76rem; }
  .atb-num       { display: none; } /* 번호 숨김으로 공간 절약 */

  /* ── Products tab ── */
  .pf-cards-grid { grid-template-columns: repeat(1, 1fr); gap: 8px; } /* 2열 → 1열 */

  /* ── Pathfinder 개요 섹션 ── */
  .pf-overview-section {
    padding: 28px 18px;
    margin: 0 0 28px;
    border-radius: 14px;
  }

  /* ── Pathfinder 활용 범위 ── */
  .pf-application-section {
    padding: 28px 18px;
    border-radius: 14px;
    margin: 0 0 28px;
  }

  /* ── Pathfinder 전임상 ── */
  .pf-preclinical-section {
    padding: 28px 16px;
    border-radius: 14px;
    margin: 0 0 28px;
  }
  .pf-preclinical-caps  { grid-template-columns: 1fr 1fr; gap: 6px; }
  .pf-preclinical-cap-text { font-size: 0.76rem; }

  /* ── MaxOne ── */
  .mx-intro-section { padding: 24px 14px; border-radius: 14px; }
  .mx-hl-num        { font-size: 1.4rem; }

  .mx-app-section   { padding: 24px 14px; border-radius: 14px; }
  .mx-app-icon      { width: 38px; height: 38px; }
  .mx-app-label     { font-size: 0.86rem; }

  .mx-assay-section { padding: 24px 14px; border-radius: 14px; }
  .mx-assay-row     { padding: 18px 14px; }

  .mx-chip-section  { padding: 24px 14px; border-radius: 14px; }
  .mx-chip-table    { font-size: 0.8rem; }
  .mx-chip-table tbody td { padding: 9px 10px; }
  .mx-chip-app-tag  { font-size: 0.68rem; padding: 1px 7px; }

  .mx-video-section { padding: 24px 14px; border-radius: 14px; }
  .mx-video-player  { border-radius: 10px; }

  /* ── MAG_LAB ── */
  .ml-feature-section { padding: 24px 16px; border-radius: 14px; }
  .ml-feat-grid       { grid-template-columns: 1fr; gap: 10px; } /* 2열 → 1열 */
  .ml-slider          { height: 200px !important; }

  .ml-system-section  { padding: 24px 14px; border-radius: 14px; }
  /* 480px 이하: 카드 다시 세로 배치 */
  .ml-sys-card        { flex-direction: column; }
  .ml-sys-img-wrap {
    width: 100%;
    min-width: unset;
    height: 140px;
    border-right: none;
    border-bottom: 1px solid var(--gray-100);
  }

  .ml-app-section     { padding: 24px 14px; border-radius: 14px; }
  .ml-app-grid        { grid-template-columns: 1fr; gap: 10px; } /* 2열 → 1열 */

  /* ── VasculiX ── */
  .vc-principle-section {
    padding: 28px 18px;
    gap: 24px;
    border-radius: 14px;
    margin: 24px 0 36px;
  }
  .vc-step-body  { gap: 12px; }
  .vc-step-icon  { width: 38px; height: 38px; border-radius: 10px; }
  .vc-step-icon svg { width: 20px; height: 20px; }
  .vc-step-title { font-size: 0.88rem; }
  .vc-step-desc  { font-size: 0.8rem; line-height: 1.7; }
  .vc-step-list li { font-size: 0.78rem; }

  .vc-coating-block { padding-top: 24px; gap: 16px; }
}