/* bundle-products.css — 아래 CSS 파일들을 순서 그대로 합친 묶음 파일 (자동 생성)
   원본: variables.css, base.css, layout.css, typography.css, buttons.css, navbar.css, footer.css, utilities.css, sections.css, products-page.css, product-pathfinder.css, product-maxone.css, product-maglab.css, product-vasculix.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;
}

/* ==================== 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;
}

/* ==================== products-page.css ==================== */
/* ============================================================
   css/products-page.css
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   제품 카테고리 네비게이션 카드 (페이지 상단 3개 카드)
═══════════════════════════════════════════════════════════ */
.prod-cat-nav {
  padding: 60px 0 20px;
  background: #f8f9fb;
}

.pcn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.pcn-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: var(--white);
  border-radius: 16px;
  border: 1px solid #e8eaed;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  cursor: pointer;
}
.pcn-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
}

.pcn-blue:hover   { border-color: #2979ff; }
.pcn-teal:hover   { border-color: var(--accent2); }
.pcn-purple:hover { border-color: var(--purple); }

.pcn-icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.pcn-icon svg { width: 24px; height: 24px; }

.pcn-blue .pcn-icon     { background: rgba(41,121,255,0.1); }
.pcn-blue .pcn-icon svg { fill: #2979ff; }
.pcn-teal .pcn-icon     { background: rgba(0,137,123,0.1); }
.pcn-teal .pcn-icon svg { fill: var(--accent2); }
.pcn-purple .pcn-icon     { background: rgba(123,31,162,0.1); }
.pcn-purple .pcn-icon svg { fill: var(--purple); }

.pcn-info  { flex: 1; min-width: 0; }
.pcn-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  opacity: 0.5;
}
.pcn-info h3 {
  font-size: 16px; font-weight: 700;
  margin: 4px 0 6px; line-height: 1.3;
}
.pcn-products { font-size: 13px; color: #888; margin: 0; }

.pcn-arrow {
  flex-shrink: 0;
  opacity: 0.3;
  transition: opacity 0.25s, transform 0.25s;
}
.pcn-arrow svg { width: 20px; height: 20px; fill: currentColor; }
.pcn-card:hover .pcn-arrow { opacity: 0.8; transform: translateX(3px); }

/* ── 카테고리 헤더 바 ────────────────────────────────────────── */
.cat-header {
  background: var(--off-white);
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  padding: 28px 0;
}
.cat-header-inner {
  display: flex; align-items: center; gap: 14px;
}
.cat-num-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cat-num-icon svg { width: 22px; height: 22px; fill: var(--white); }

.cni-blue   { background: linear-gradient(135deg, var(--primary), var(--accent)); }
.cni-teal   { background: linear-gradient(135deg, var(--accent2), #00ACC1); }
.cni-purple { background: linear-gradient(135deg, var(--purple), var(--purple-light)); }

.cat-label {
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  margin-bottom: 2px;
}
.cat-label.cl-blue   { color: var(--primary); }
.cat-label.cl-teal   { color: var(--accent2); }
.cat-label.cl-purple { color: var(--purple); }

.cat-header h2 { font-size: 1.35rem; color: var(--gray-900); font-weight: 800; }

/* ═══════════════════════════════════════════════════════════
   메인 탭 UI (카테고리별 탭 전환)
═══════════════════════════════════════════════════════════ */
.prod-tab-section {
  padding: 0 0 80px;
  background: var(--white);
}

.prod-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--gray-200);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: sticky;
  top: 70px;
  z-index: 10;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.prod-tab-bar::-webkit-scrollbar { display: none; }

.prod-tab-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 32px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, border-color .2s, background .2s;
  text-align: left;
  flex: 1;
  justify-content: center;
}
.prod-tab-btn:hover { background: var(--off-white); }
.prod-tab-btn.active {
  border-bottom-color: var(--primary);
  background: var(--off-white);
}

.ptb-num {
  font-size: 1.5rem; font-weight: 800;
  color: var(--gray-200); line-height: 1;
  transition: color .2s; letter-spacing: -.02em;
  flex-shrink: 0;
}
.prod-tab-btn.active .ptb-num { color: var(--primary); }
.prod-tab-btn:hover  .ptb-num { color: var(--gray-400); }

.ptb-info { display: flex; flex-direction: column; gap: 3px; }

.ptb-cat {
  font-size: .82rem; font-weight: 700;
  color: var(--gray-500); letter-spacing: .01em;
  transition: color .2s;
}
.prod-tab-btn.active .ptb-cat { color: var(--gray-800); }

.ptb-products {
  font-size: .72rem; color: var(--gray-400); font-weight: 500;
}
.prod-tab-btn.active .ptb-products {
  color: var(--primary); opacity: .7;
}

.prod-tab-panel        { display: none; }
.prod-tab-panel.active { display: block; }

/* ═══════════════════════════════════════════════════════════
   제품 상세 레이아웃 (비주얼 + 텍스트 2열)
═══════════════════════════════════════════════════════════ */
.pl-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;

  /* ✅ NEW — MAG_LAB, VasculiX(3종), MaxOne/Two 최상단 이미지+사양
     레이아웃이 모두 이 클래스를 공유하므로, 여기 한 번만 추가하면
     해당 제품들의 상단 섹션 전체에 스냅이 적용됩니다. */
  scroll-snap-align: start;
}

.pl-inner.rev     { direction: rtl; }
.pl-inner.rev > * { direction: ltr; }

.pl-inner > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pl-visual {
  border-radius: var(--radius-xl);
  min-height: 380px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}

.plv-blue   { background: linear-gradient(145deg, var(--blue-50), #C8E6FF); }
.plv-teal   { background: linear-gradient(145deg, var(--teal-50), #B2DFDB); }
.plv-purple { background: linear-gradient(145deg, var(--purple-pale), #D1C4E9); }
.plv-img, .plv-vasculix, .plv-maxone-gif { background: #f8f9fa; overflow: hidden; }

.plv-slider { position: relative; overflow: hidden; cursor: pointer; }

.plv-slides {
  display: flex;
  width: 100%; height: 100%;
  transition: none;
}
.plv-slide {
  min-width: 100%; height: 100%;
  display: none;
  align-items: center; justify-content: center;
}
.plv-slide.active { display: flex; }

.plv-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  transition: background .2s, opacity .2s;
  z-index: 5;
  opacity: 0;
}
.plv-slider:hover .plv-arrow { opacity: 1; }
.plv-arrow svg { width: 20px; height: 20px; fill: var(--gray-700); }
.plv-arrow:hover { background: var(--white); box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.plv-prev { left: 12px; }
.plv-next { right: 12px; }

.plv-dots {
  position: absolute;
  bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 5;
}
.plv-dot {
  width: 7px; height: 7px;
  border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.5);
  transition: background .2s, transform .2s; padding: 0;
}
.plv-dot.active { background: var(--white); transform: scale(1.3); }

.plv-product-img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 16px;
  display: block;
}

.plv-product-img.plv-gif {
  object-fit: contain;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 12px;
}

.plv-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(21,101,192,.08); }
.plv-r1   { width: 280px; height: 280px; }
.plv-r2   { width: 200px; height: 200px; }
.plv-r3   { width: 130px; height: 130px; }

.plv-icon-wrap {
  width: 110px; height: 110px;
  border-radius: 28px;
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
  position: relative; z-index: 1;
}
.plv-icon-wrap svg { width: 54px; height: 54px; }
.ico-blue   svg { fill: var(--primary); }
.ico-teal   svg { fill: var(--accent2); }
.ico-purple svg { fill: var(--purple); }

.plv-label {
  position: absolute;
  bottom: 20px; left: 50%; transform: translateX(-50%);
  text-align: center;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 10px 20px;
  white-space: nowrap;
  z-index: 1;
}
.pl-l { font-size: .65rem; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .1em; }
.pl-v { font-size: .95rem; font-weight: 800; color: var(--gray-800); }

/* ═══════════════════════════════════════════════════════════
   제품 텍스트 요소들
═══════════════════════════════════════════════════════════ */
.prod-cat {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 10px; display: inline-block;
  padding: 4px 12px; border-radius: 100px;
}
.cat-blue   { background: var(--blue-50);      color: var(--primary); }
.cat-teal   { background: var(--teal-50);      color: var(--accent2); }
.cat-purple { background: var(--purple-pale);  color: var(--purple); }

.prod-name {
  font-size: 2rem; font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 6px; line-height: 1.15;
}

.prod-sub  { font-size: .88rem; color: var(--gray-400); font-weight: 500; margin-bottom: 18px; }

.prod-desc { font-size: .92rem; color: var(--gray-600); line-height: 1.75; margin-bottom: 28px; }

.prod-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin-bottom: 24px;
}
.spec-box {
  background: var(--off-white);
  border: 1px solid var(--gray-100);
  border-radius: 10px;
  padding: 10px 14px;
}
.spec-l {
  font-size: .68rem; font-weight: 700;
  color: var(--gray-400); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 3px;
}
.spec-v { font-size: .88rem; font-weight: 700; color: var(--gray-800); }

.prod-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }

.ptag {
  font-size: .72rem; font-weight: 700;
  padding: 4px 12px; border-radius: 100px;
  letter-spacing: .04em;
}
.ptag-blue   { background: var(--blue-50);     color: var(--primary); }
.ptag-teal   { background: var(--teal-50);     color: var(--accent2); }
.ptag-purple { background: var(--purple-pale); color: var(--purple);  }

.prod-divider {
  border: none;
  border-top: 1px solid var(--gray-100);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   서브 탭 UI
═══════════════════════════════════════════════════════════ */
.prod-sub-tab-bar {
  display: flex;
  gap: 8px;
  padding: 24px 0 0;
  margin-bottom: 0;
  border-bottom: 2px solid var(--gray-100);
  position: sticky;
  top: 140px;
  z-index: 9;
  background: var(--white);
  box-shadow: 0 3px 10px rgba(0,0,0,.05);
}

.prod-sub-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 24px;
  background: var(--off-white);
  border: 1.5px solid var(--gray-100);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  position: relative;
  bottom: -2px;
}
.prod-sub-tab-btn:hover {
  background: var(--white);
  border-color: var(--gray-200);
}
.prod-sub-tab-btn.active {
  background: var(--white);
  border-color: var(--primary);
  border-bottom: 2px solid var(--white);
}

.pstb-name {
  font-size: .88rem; font-weight: 700;
  color: var(--gray-500);
  transition: color .2s;
}
.prod-sub-tab-btn.active .pstb-name  { color: var(--primary); }
.prod-sub-tab-btn:hover  .pstb-name  { color: var(--gray-700); }

.pstb-sub {
  font-size: .7rem; color: var(--gray-400); font-weight: 500;
}
.prod-sub-tab-btn.active .pstb-sub { color: var(--primary); opacity: .6; }

.prod-sub-tab-btn--purple.active {
  border-color: var(--purple);
  border-bottom: 2px solid var(--white);
}
.prod-sub-tab-btn--purple.active .pstb-name { color: var(--purple); }
.prod-sub-tab-btn--purple.active .pstb-sub  { color: var(--purple); opacity: .6; }
.prod-sub-tab-bar--purple { border-bottom-color: var(--purple-pale); }

.prod-sub-panel        { display: none; }
.prod-sub-panel.active { display: block; }

/* ════════════════════════════════════════════════════════════
   ✅ NEW — 전역 스크롤 스냅(Scroll Snap) 설정
   페이지 전체에서 딱 한 번만 선언하면 되므로, 공통 파일인
   이 파일에 배치합니다. (product-maglab.css 등 다른 파일에
   동일 규칙이 중복되어 있다면 정리하는 것을 권장합니다.)
════════════════════════════════════════════════════════════ */
html {
  scroll-behavior: auto;
  scroll-snap-type: y proximity;
  /* navbar + prod-tab-bar + prod-sub-tab-bar 실측 높이 합산값으로 교체 */
  scroll-padding-top: 160px;
}

@media (max-width: 768px) {
  html {
    scroll-snap-type: none;
  }
}

/* ==================== product-pathfinder.css ==================== */
/* ============================================================
   css/product-pathfinder.css
   ============================================================ */

.pf-product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  padding: 60px 0 40px;

  /* ✅ NEW */
  scroll-snap-align: start;
}

.pf-product-img-col {
  position: sticky;
  top: 100px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-pathfinder);
  box-shadow: 0 8px 40px rgba(21,101,192,0.10);
}
.pf-product-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  display: block;
  padding: 20px;
}

.pf-product-info-col {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  align-items: flex-start;
}

/* ════════════════════════════════════════════════════════════
   시스템 구성 섹션
════════════════════════════════════════════════════════════ */
.pf-system-section {
  background: var(--bg-pathfinder);
  border-radius: 24px;
  margin: 0 0 40px;
  padding: 60px 56px;
  display: flex;
  flex-direction: column;
  gap: 40px;

  /* ✅ NEW — 이 섹션이 이전에 누락되기 쉬운 부분이니 반드시 확인! */
  scroll-snap-align: start;
}

.pf-system-img-wrap {
  border-radius: 14px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid #dde6f5;
  box-shadow: 0 6px 28px rgba(21,101,192,.08);
}
.pf-system-img { width: 100%; height: auto; display: block; }

.pf-system-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.pf-sys-card {
  background: var(--white);
  border: 1px solid #dde6f5;
  border-radius: 14px;
  padding: 22px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: box-shadow .2s, transform .2s;
}
.pf-sys-card:hover {
  box-shadow: 0 8px 28px rgba(21,101,192,.13);
  transform: translateY(-2px);
}

.pf-sys-num {
  font-size: 0.64rem; font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(21,101,192,.3);
  line-height: 1;
}

.pf-sys-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(21,101,192,.1), rgba(21,101,192,.05));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pf-sys-icon svg { width: 22px; height: 22px; }

.pf-sys-title {
  font-size: 0.86rem; font-weight: 700;
  color: var(--text-dark); margin: 0;
  line-height: 1.4; letter-spacing: -.01em;
  word-break: keep-all;
}
.pf-sys-desc {
  font-size: 0.78rem; color: var(--text-light);
  line-height: 1.7; margin: 0;
  word-break: keep-all;
}

/* ════════════════════════════════════════════════════════════
   제품 개요 섹션
════════════════════════════════════════════════════════════ */
.pf-overview-section {
  background: var(--white);
  border: 1px solid #e4ecf8;
  border-radius: 24px;
  margin: 0 0 40px;
  padding: 60px 56px;
  display: flex;
  flex-direction: column;
  gap: 40px;

  /* ✅ NEW */
  scroll-snap-align: start;
}

.pf-overview-img-wrap {
  border-radius: 14px;
  overflow: hidden;
  background: #f8fafe;
  border: 1px solid #e4ecf8;
  box-shadow: 0 4px 24px rgba(21,101,192,.07);
}
.pf-overview-img { width: 100%; height: auto; display: block; }

.pf-overview-points {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pf-ovp-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 0;
  border-bottom: 1px solid #edf2fb;
}
.pf-ovp-item:first-child { padding-top: 0; }
.pf-ovp-item:last-child  { border-bottom: none; padding-bottom: 0; }

.pf-ovp-num {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--white);
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: .08em;
  display: flex; align-items: center; justify-content: center;
}

.pf-ovp-body { flex: 1; min-width: 0; }
.pf-ovp-title {
  font-size: 1rem; font-weight: 700;
  color: var(--text-dark); margin: 0 0 8px;
  letter-spacing: -.01em; line-height: 1.4;
}
.pf-ovp-desc {
  font-size: 0.88rem; color: var(--text-mid);
  line-height: 1.85; margin: 0;
  word-break: keep-all;
}

/* ════════════════════════════════════════════════════════════
   핵심 가치 & 이점 섹션
════════════════════════════════════════════════════════════ */
.pf-benefit-section {
  background: linear-gradient(160deg, #f0f5ff 0%, #e8f0fe 100%);
  border-radius: 24px;
  margin: 0 0 40px;
  padding: 60px 56px;
  display: flex;
  flex-direction: column;
  gap: 40px;

  /* ✅ NEW */
  scroll-snap-align: start;
}
.pf-benefit-header { text-align: center; }

.pf-benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.pf-bene-card {
  background: var(--white);
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 2px 12px rgba(21,101,192,.07);
  border: 1px solid rgba(21,101,192,.08);
  transition: transform .2s, box-shadow .2s;
}
.pf-bene-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(21,101,192,.14);
}

.pf-bene-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pf-bene-icon svg { width: 26px; height: 26px; }

.pf-bene-icon--red  { background: #FFF0F0; } .pf-bene-icon--red  svg { fill: #E53935; }
.pf-bene-icon--blue { background: var(--primary-pale); } .pf-bene-icon--blue svg { fill: var(--primary); }
.pf-bene-icon--pink { background: #FFF0F6; } .pf-bene-icon--pink svg { fill: #D81B60; }
.pf-bene-icon--teal { background: #E0F7FA; } .pf-bene-icon--teal svg { fill: #00838F; }

.pf-bene-title {
  font-size: 1rem; font-weight: 700;
  color: var(--text-dark); margin: 0;
  letter-spacing: -.01em; line-height: 1.3;
}
.pf-bene-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.pf-bene-list li {
  font-size: 0.82rem; color: var(--text-mid);
  line-height: 1.55; padding-left: 14px;
  position: relative; font-weight: 400;
}
.pf-bene-list li::before {
  content: '';
  position: absolute; left: 0; top: 7px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.5;
}

/* ════════════════════════════════════════════════════════════
   활용 범위 섹션
════════════════════════════════════════════════════════════ */
.pf-application-section {
  background: var(--white);
  border: 1px solid #e4ecf8;
  border-radius: 24px;
  margin: 0 0 40px;
  padding: 60px 56px;
  display: flex;
  flex-direction: column;
  gap: 36px;

  /* ✅ NEW */
  scroll-snap-align: start;
}

.pf-app-img-wrap {
  border-radius: 14px;
  overflow: hidden;
  background: #f8fafe;
  border: 1px solid #e4ecf8;
  box-shadow: 0 4px 20px rgba(21,101,192,.07);
}
.pf-app-img { width: 100%; height: auto; display: block; }

.pf-app-categories {
  display: flex; gap: 24px;
  align-items: flex-start; flex-wrap: wrap;
}

.pf-app-group { display: flex; flex-direction: column; gap: 12px; }

.pf-app-group-header {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.82rem; font-weight: 700;
  color: var(--primary); letter-spacing: .02em;
}

.pf-app-group--neuro {
  padding-left: 24px;
  border-left: 2px solid #dde6f5;
}
.pf-app-group--neuro .pf-app-group-header { color: var(--indigo); }

.pf-app-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.pf-app-tag {
  display: inline-flex; align-items: center;
  font-size: 0.8rem; font-weight: 600;
  color: var(--primary);
  background: rgba(21,101,192,.07);
  border: 1px solid rgba(21,101,192,.18);
  border-radius: 100px;
  padding: 5px 14px; letter-spacing: .01em;
  transition: background .15s, color .15s;
}
.pf-app-tag:hover { background: var(--primary); color: var(--white); }

.pf-app-tag--neuro {
  color: var(--indigo);
  background: rgba(92,107,192,.07);
  border-color: rgba(92,107,192,.2);
}
.pf-app-tag--neuro:hover { background: var(--indigo); color: var(--white); }

/* ════════════════════════════════════════════════════════════
   작동 원리 & 영상 섹션
════════════════════════════════════════════════════════════ */
.pf-principle-section {
  background: var(--bg-pathfinder);
  border-radius: 24px;
  margin: 0 0 64px;
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  gap: 48px;

  /* ✅ NEW */
  scroll-snap-align: start;
}

.pf-principle-img-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(21,101,192,.12);
  background: var(--white);
}
.pf-principle-img { width: 100%; display: block; border-radius: 16px; }

.pf-img-caption {
  background: rgba(21,101,192,.06);
  border-top: 1px solid rgba(21,101,192,.12);
  text-align: center;
  padding: 10px 20px;
  font-size: 0.78rem;
  color: var(--primary);
  font-weight: 600;
  letter-spacing: .03em;
}

.pf-video-block { display: flex; flex-direction: column; gap: 16px; }

.pf-video-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 700;
  color: var(--primary); letter-spacing: .04em; text-transform: uppercase;
}
.pf-video-label svg { width: 18px; height: 18px; fill: var(--primary); flex-shrink: 0; }

.pf-video-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 56px rgba(21,101,192,.15);
  background: #000;
}
.pf-video-wrap iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none; border-radius: 16px;
}

/* ════════════════════════════════════════════════════════════
   스펙 비교 슬라이더 (내부 가로 슬라이더이므로 스냅 대상에서 제외)
════════════════════════════════════════════════════════════ */
.pf-spec-slider { overflow: hidden; position: relative; margin: 4px 0 8px; }

.pf-spec-track {
  display: flex;
  transition: transform 0.42s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

.pf-slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 2px 2px 4px;
  box-sizing: border-box;
}

.pf-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.pf-benefit-card {
  background: var(--white);
  border: 1px solid #eaeff7;
  border-radius: 14px;
  padding: 16px 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  transition: transform .2s, box-shadow .2s;
}
.pf-benefit-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.09);
}

.pf-bc-circle {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pf-bc-circle svg { width: 20px; height: 20px; }

.pf-bc-red   { background: #ffebee; } .pf-bc-red   svg { fill: #e53935; }
.pf-bc-green { background: #e8f5e9; } .pf-bc-green svg { fill: #2e7d32; }
.pf-bc-blue  { background: #e3f2fd; } .pf-bc-blue  svg { fill: var(--primary); }
.pf-bc-pink  { background: #fce4ec; } .pf-bc-pink  svg { fill: #c2185b; }
.pf-bc-teal  { background: #e0f7fa; } .pf-bc-teal  svg { fill: #00838f; }

.pf-bc-title {
  font-size: 0.75rem; font-weight: 800;
  color: var(--text-dark); letter-spacing: .01em; line-height: 1.3;
}
.pf-bc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; width: 100%; }
.pf-bc-list li {
  font-size: 0.70rem; color: var(--text-light);
  line-height: 1.4; padding: 3px 0;
  border-top: 1px solid #f0f3f8;
}

.pf-slide-spec {
  border: 1px solid #e3eaf5;
  border-radius: 18px;
  padding: 24px 24px 28px;
  background: #f8faff;
}
.pf-slide-spec-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 18px;
}
.pf-slide-spec-title svg { width: 18px; height: 18px; fill: var(--primary); }

.pf-spec-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-top: 16px;
}
.pf-spec-prev,
.pf-spec-next {
  width: 34px; height: 34px;
  border: 1.5px solid #dce3ef;
  border-radius: 50%; background: var(--white);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, border-color .18s;
  flex-shrink: 0;
}
.pf-spec-prev:hover,
.pf-spec-next:hover { background: var(--primary); border-color: var(--primary); }
.pf-spec-prev svg,
.pf-spec-next svg { width: 18px; height: 18px; fill: var(--text-light); transition: fill .18s; }
.pf-spec-prev:hover svg,
.pf-spec-next:hover svg { fill: var(--white); }

.pf-spec-dots { display: flex; gap: 7px; align-items: center; }
.pf-spec-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #dce3ef; border: none; cursor: pointer; padding: 0;
  transition: background .2s, transform .2s;
}
.pf-spec-dot.active { background: var(--primary); transform: scale(1.4); }

/* ════════════════════════════════════════════════════════════
   전임상 검증 섹션
════════════════════════════════════════════════════════════ */
.pf-preclinical-section {
  background: var(--bg-pathfinder);
  border-radius: 24px;
  margin: 0 0 64px;
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  gap: 48px;

  /* ✅ NEW */
  scroll-snap-align: start;
}

.pf-preclinical-grid { display: flex; flex-direction: column; gap: 20px; }

.pf-preclinical-img-main {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(21,101,192,.12);
  line-height: 0;
  cursor: zoom-in;
  transition: box-shadow .22s ease, transform .22s ease;
}
.pf-preclinical-img-main:hover {
  box-shadow: 0 16px 48px rgba(21,101,192,.2);
  transform: translateY(-2px);
}
.pf-preclinical-img {
  width: 100%; height: auto;
  object-fit: cover; display: block;
  border-radius: 16px;
}

.pf-preclinical-caps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.pf-preclinical-cap {
  display: flex; align-items: center; gap: 10px;
  background: var(--white);
  border: 1px solid #dde6f5;
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color .18s, box-shadow .18s;
}
.pf-preclinical-cap:hover {
  border-color: var(--primary-light);
  box-shadow: 0 4px 14px rgba(21,101,192,.1);
}
.pf-preclinical-cap-num {
  flex-shrink: 0; width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--white);
  font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.pf-preclinical-cap-text {
  font-size: 0.82rem; font-weight: 500;
  color: var(--text-blue); line-height: 1.4;
}

.pf-preclinical-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.pf-preclinical-card {
  background: var(--white);
  border: 1px solid #dde6f5;
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.pf-preclinical-card:hover {
  border-color: var(--primary-light);
  box-shadow: 0 8px 28px rgba(21,101,192,.12);
  transform: translateY(-3px);
}
.pf-preclinical-card-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #e8f0fe, #dde6f5);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pf-preclinical-card-body { display: flex; flex-direction: column; gap: 8px; }
.pf-preclinical-card-title {
  font-size: 0.97rem; font-weight: 700;
  color: var(--text-navy); margin: 0; line-height: 1.4;
}
.pf-preclinical-card-desc {
  font-size: 0.85rem; color: var(--text-purple-lt);
  line-height: 1.65; margin: 0;
}

/* ==================== product-maxone.css ==================== */
/* ============================================================
   css/product-maxone.css
   ============================================================ */

.mx-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--purple-dark) 0%, var(--purple) 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;
}

/* ════════════════════════════════════════════════════════════
   플랫폼 소개 섹션 — MaxOne/MaxTwo 둘 다 이 클래스를 재사용
════════════════════════════════════════════════════════════ */
.mx-intro-section {
  background: linear-gradient(160deg, var(--purple-50) 0%, #f0ebfb 100%);
  border-radius: 24px;
  margin: 0 0 48px;
  padding: 56px 52px;
  display: flex; flex-direction: column; gap: 40px;

  /* ✅ NEW */
  scroll-snap-align: start;
}

.mx-feat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.mx-feat-card {
  background: var(--white);
  border: 1px solid var(--purple-100);
  border-radius: 16px;
  padding: 26px 22px;
  display: flex; gap: 18px; align-items: flex-start;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.mx-feat-card:hover {
  border-color: var(--purple);
  box-shadow: 0 8px 28px rgba(123,31,162,.12);
  transform: translateY(-3px);
}

.mx-feat-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f3e5ff 0%, var(--purple-100) 100%);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.mx-feat-body  { display: flex; flex-direction: column; gap: 7px; }
.mx-feat-title { font-size: 0.95rem; font-weight: 700; color: var(--text-navy); margin: 0; line-height: 1.35; }
.mx-feat-desc  { font-size: 0.83rem; color: var(--text-purple-lt); line-height: 1.65; margin: 0; }

.mx-highlight-bar {
  display: flex; align-items: center; justify-content: space-around;
  background: var(--white);
  border: 1px solid var(--purple-100);
  border-radius: 16px;
  padding: 28px 32px; gap: 0;
}
.mx-hl-item {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px; flex: 1;
}
.mx-hl-num {
  font-size: 1.75rem; font-weight: 800;
  color: var(--purple); line-height: 1; letter-spacing: -.02em;
}
.mx-hl-num small { font-size: 0.9rem; font-weight: 600; opacity: .7; }
.mx-hl-label { font-size: 0.78rem; color: var(--text-purple-lt); font-weight: 500; text-align: center; }
.mx-hl-divider { width: 1px; height: 44px; background: var(--purple-100); flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════
   Applications 섹션
════════════════════════════════════════════════════════════ */
.mx-app-section {
  background: var(--white);
  border: 1.5px solid var(--purple-100);
  border-radius: 24px;
  margin: 0 0 48px;
  padding: 56px 52px;
  display: flex; flex-direction: column; gap: 40px;

  /* ✅ NEW */
  scroll-snap-align: start;
}

.mx-app-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.mx-app-col-title {
  font-size: 1.15rem; font-weight: 800;
  color: var(--text-navy); margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--purple-100);
  line-height: 1.3;
}

.mx-app-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.mx-app-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid #f0e8fa;
  cursor: default;
  transition: background .18s, padding-left .18s;
  border-radius: 8px;
}
.mx-app-item:last-child { border-bottom: none; }
.mx-app-item:hover { background: #faf5ff; padding-left: 10px; }

.mx-app-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f3e5ff 0%, #ede0f7 100%);
  border: 1px solid var(--purple-100);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .18s, border-color .18s;
}
.mx-app-item:hover .mx-app-icon {
  background: linear-gradient(135deg, var(--purple-100) 0%, #dcc5f0 100%);
  border-color: var(--purple);
}

.mx-app-label {
  font-size: 0.92rem; font-weight: 600;
  color: var(--text-blue); flex: 1; line-height: 1.4;
  transition: color .18s;
}
.mx-app-item:hover .mx-app-label { color: var(--purple-dark); }

.mx-app-arrow {
  width: 16px; height: 16px; flex-shrink: 0;
  stroke: var(--purple); stroke-width: 2;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  opacity: .4; transition: opacity .18s, transform .18s;
}
.mx-app-item:hover .mx-app-arrow { opacity: 1; transform: translate(2px,-2px); }

/* ════════════════════════════════════════════════════════════
   Activity Scan / Network Assay / Stimulation 섹션
════════════════════════════════════════════════════════════ */
.mx-assay-section {
  background: var(--white);
  border: 1.5px solid var(--purple-100);
  border-radius: 24px;
  margin: 0 0 48px;
  padding: 56px 52px;
  display: flex; flex-direction: column; gap: 36px;

  /* ✅ NEW */
  scroll-snap-align: start;
}

.mx-assay-list { display: flex; flex-direction: column; gap: 20px; }

.mx-assay-row {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 32px; align-items: center;
  background: #faf8ff;
  border: 1.5px solid #ede4f8;
  border-radius: 18px;
  padding: 28px 32px;
  transition: box-shadow .22s, border-color .22s;
}
.mx-assay-row:hover { border-color: #b97fda; box-shadow: 0 6px 28px rgba(123,31,162,.09); }

.mx-assay-row--reverse {
  grid-template-columns: 1fr 340px;
}
.mx-assay-row--reverse .mx-assay-row-visual { order: 2; }
.mx-assay-row--reverse .mx-assay-row-body   { order: 1; }

.mx-assay-row-visual { flex-shrink: 0; }
.mx-assay-row-body   { display: flex; flex-direction: column; gap: 16px; }

.mx-assay-label-wrap { display: flex; align-items: center; gap: 14px; }
.mx-assay-num {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--purple-dark), var(--purple));
  color: var(--white);
  font-size: 0.78rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; letter-spacing: .04em;
}
.mx-assay-num--net  { background: linear-gradient(135deg, var(--purple), var(--purple-light)); }
.mx-assay-num--axon { background: linear-gradient(135deg, #4A0072, var(--purple-dark)); }
.mx-assay-num--stim { background: linear-gradient(135deg, var(--pink-dark), var(--pink)); }

.mx-assay-title { font-size: 1.1rem; font-weight: 700; color: #2d1a40; margin: 0; line-height: 1.2; }

.mx-assay-img-wrap {
  position: relative; border-radius: 12px;
  overflow: hidden; background: #0a0a12;
  border: 1px solid rgba(123,31,162,.18);
}
.mx-assay-img { width: 100%; height: auto; display: block; object-fit: contain; }
.mx-assay-img--net  { background: #f5f9ff; }
.mx-assay-img--stim { background: var(--white); }

.mx-assay-video-wrap {
  position: relative; border-radius: 12px;
  overflow: hidden; background: #000;
  border: 1px solid rgba(171,71,188,.25);
}
.mx-assay-video { width: 100%; height: auto; display: block; }

.mx-assay-img-badge {
  position: absolute;
  bottom: 8px; right: 8px;
  display: flex; align-items: center; gap: 4px;
  background: rgba(10,10,20,.72);
  color: rgba(255,255,255,.85);
  font-size: 0.7rem; font-weight: 600;
  padding: 3px 9px; border-radius: 20px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.12);
}
.mx-assay-img-badge svg { width: 12px; height: 12px; fill: #CE93D8; }
.mx-assay-img-badge--net  { background: rgba(20,40,80,.72); }
.mx-assay-img-badge--axon { background: rgba(10,0,20,.75); }
.mx-assay-img-badge--stim { background: rgba(30,5,15,.70); }
.mx-assay-img-badge--stim svg { fill: #F48FB1; }

.mx-assay-desc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mx-assay-desc-list li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.84rem; color: var(--text-purple-mid); line-height: 1.6;
}
.mx-assay-desc-list li svg { width: 16px; height: 16px; fill: #9C27B0; flex-shrink: 0; margin-top: 2px; }

/* ════════════════════════════════════════════════════════════
   Chip Specifications 섹션
════════════════════════════════════════════════════════════ */
.mx-chip-section {
  background: linear-gradient(160deg, var(--purple-50) 0%, #f0ebfb 100%);
  border-radius: 24px;
  margin: 0 0 48px;
  padding: 56px 52px;
  display: flex; flex-direction: column; gap: 36px;

  /* ✅ NEW */
  scroll-snap-align: start;
}

.mx-chip-variants {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.mx-chip-var-card {
  background: var(--white);
  border: 1.5px solid var(--purple-100);
  border-radius: 16px;
  padding: 28px 26px;
  display: flex; flex-direction: column; gap: 16px;
  transition: box-shadow .2s, border-color .2s;
}
.mx-chip-var-card:hover { border-color: var(--purple); box-shadow: 0 8px 28px rgba(123,31,162,.10); }
.mx-chip-var-card--psm { border-top: 3px solid var(--purple); }
.mx-chip-var-card--plm { border-top: 3px solid var(--purple-light); }

.mx-chip-var-head { display: flex; align-items: center; gap: 10px; }
.mx-chip-var-subtitle { font-size: 0.8rem; font-weight: 500; color: #8a6fa0; margin: 0; }

.mx-chip-var-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--purple-dark), var(--purple));
  color: var(--white); font-size: 0.78rem; font-weight: 800;
  letter-spacing: .08em; flex-shrink: 0;
}
.mx-chip-var-badge--plm { background: linear-gradient(135deg, var(--purple), var(--purple-light)); }

.mx-chip-var-info { margin: 0; }
.mx-chip-var-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 0; border-bottom: 1px solid #f0e8fa;
}
.mx-chip-var-row:last-child { border-bottom: none; }
.mx-chip-var-row dt { font-size: 0.72rem; font-weight: 600; color: #9e7bb5; text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.mx-chip-var-row dd { font-size: 0.9rem; font-weight: 600; color: var(--text-navy); margin: 0; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

.mx-chip-dim-label { font-size: 0.7rem; font-weight: 700; color: #9e7bb5; background: var(--purple-50); border-radius: 4px; padding: 1px 5px; }
.mx-chip-dim-sep { color: #c9b3d8; font-weight: 400; }

.mx-chip-app-tag {
  display: inline-block;
  font-size: 0.73rem; font-weight: 600;
  color: var(--purple-dark); background: var(--purple-50);
  border: 1px solid #e0cef5; border-radius: 20px;
  padding: 2px 9px; margin: 1px 0;
}

.mx-chip-table-wrap {
  background: var(--white);
  border: 1px solid var(--purple-100);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(106,27,154,.06);
}
.mx-chip-table { width: 100%; border-collapse: collapse; table-layout: fixed; }

.mx-chip-table thead tr { background: linear-gradient(135deg, var(--purple-dark) 0%, var(--purple) 100%); }
.mx-chip-table thead th { padding: 14px 22px; text-align: left; font-size: 0.8rem; font-weight: 700; color: var(--white); letter-spacing: .06em; text-transform: uppercase; }
.mx-chip-table thead th:first-child { width: 50%; }

.mx-chip-th-psm {
  text-align: center; background: rgba(255,255,255,.12); position: relative;
}
.mx-chip-th-psm::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #CE93D8; }
.mx-chip-th-plm {
  text-align: center; background: rgba(255,255,255,.06); position: relative;
}
.mx-chip-th-plm::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #9C27B0; }

.mx-chip-table tbody tr { border-bottom: 1px solid #f0e8fa; transition: background .15s; }
.mx-chip-table tbody tr:last-child  { border-bottom: none; }
.mx-chip-table tbody tr:hover       { background: #faf5ff; }
.mx-chip-table tbody tr:nth-child(even)       { background: #fdf9ff; }
.mx-chip-table tbody tr:nth-child(even):hover { background: var(--purple-50); }
.mx-chip-table tbody td { padding: 12px 22px; font-size: 0.87rem; color: var(--text-blue); line-height: 1.45; vertical-align: middle; }
.mx-chip-table tbody td:first-child { font-weight: 500; color: #5a4a6a; }

.mx-chip-td-shared { text-align: center; font-weight: 600; color: var(--text-navy); }
.mx-chip-td-psm   { text-align: center; font-weight: 600; color: var(--purple-dark); border-left: 1px solid #f0e8fa; background: rgba(106,27,154,.025); }
.mx-chip-td-plm   { text-align: center; font-weight: 600; color: var(--purple);      border-left: 1px solid #f0e8fa; background: rgba(171,71,188,.025); }
.mx-chip-table tbody td strong { color: var(--purple-dark); font-weight: 700; }
.mx-chip-table tbody td sub { font-size: .75em; }

.mx-chip-yes {
  display: inline-flex; align-items: center; gap: 4px;
  background: #f0faf4; color: #2e7d32;
  border: 1px solid #c8e6c9; border-radius: 20px;
  padding: 3px 10px; font-size: 0.78rem; font-weight: 700;
}

/* ════════════════════════════════════════════════════════════
   Axon Tracking 영상 섹션 (다크 배경)
════════════════════════════════════════════════════════════ */
.mx-video-section {
  background: var(--bg-dark);
  border-radius: 24px;
  margin: 0 0 48px;
  padding: 56px 52px;
  display: flex; flex-direction: column; gap: 36px;
  position: relative;
  overflow: hidden;

  /* ✅ NEW */
  scroll-snap-align: start;
}

.mx-video-section::before {
  content: '';
  position: absolute; top: -80px; left: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(123,31,162,.25) 0%, transparent 70%);
  pointer-events: none;
}
.mx-video-section::after {
  content: '';
  position: absolute; bottom: -60px; right: -60px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(171,71,188,.15) 0%, transparent 70%);
  pointer-events: none;
}

.mx-video-header {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 14px; position: relative; z-index: 1;
}
.mx-video-header .pf-section-title { color: var(--white); }
.mx-video-header .pf-section-desc  { color: rgba(255,255,255,.68); max-width: 680px; }

.mx-video-wrap {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
}
.mx-video-player {
  width: 100%; max-width: 860px;
  border-radius: 16px;
  border: 1.5px solid rgba(171,71,188,.35);
  box-shadow: 0 0 0 1px rgba(123,31,162,.2),
              0 8px 48px rgba(0,0,0,.55),
              0 0 60px rgba(123,31,162,.18);
  background: #000; display: block;
}

.mx-video-caption {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.78rem; color: rgba(255,255,255,.45); line-height: 1.4;
}
.mx-video-cap-icon { width: 14px; height: 14px; fill: rgba(255,255,255,.3); flex-shrink: 0; }

.mx-video-points {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.mx-video-point {
  display: flex; align-items: flex-start; gap: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(171,71,188,.2);
  border-radius: 14px; padding: 20px 18px;
  transition: background .2s, border-color .2s;
}
.mx-video-point:hover {
  background: rgba(123,31,162,.12);
  border-color: rgba(171,71,188,.45);
}
.mx-video-point-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(123,31,162,.6), rgba(171,71,188,.4));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mx-video-point-icon svg { width: 18px; height: 18px; fill: #CE93D8; color: #CE93D8; }
.mx-video-point-body { display: flex; flex-direction: column; gap: 4px; }
.mx-video-point-body strong { font-size: 0.85rem; font-weight: 700; color: #e1b8f5; display: block; }
.mx-video-point-body span  { font-size: 0.78rem; color: rgba(255,255,255,.5); line-height: 1.45; }

/* ════════════════════════════════════════════════════════════
   MEA 전문 사이트 바로가기 버튼 (MaxOne 상단 버튼 줄)
   — 보라색 테두리 버튼, 마우스를 올리면 보라색으로 채워짐
════════════════════════════════════════════════════════════ */
.btn-mea-site {
  background: var(--white, #fff);
  color: #7B1FA2;
  border: 1.5px solid #7B1FA2;
}
.btn-mea-site svg {
  width: 16px; height: 16px;
  fill: currentColor;
  transition: transform .2s;
}
.btn-mea-site:hover {
  background: #7B1FA2;
  color: #fff;
  box-shadow: 0 4px 14px rgba(123,31,162,.3);
}
.btn-mea-site:hover svg { transform: translate(2px, -2px); }
.btn-mea-site:focus-visible { outline: 3px solid rgba(123,31,162,.35); outline-offset: 3px; }

/* ════════════════════════════════════════════════════════════
   MEA 통합 페이지 (MaxOne · MaxTwo 한 페이지, 적용 분야 중심) — 2026.10 개편
   순서: ① 제품 2종 → ② 적용 분야 → ③ 측정 방법 → ④ 장비 선택 → ⑤ 문의
   이 아래 .mea2- 로 시작하는 규칙만 새 레이아웃에 쓰입니다.
════════════════════════════════════════════════════════════ */
.mea2 {
  --mea2-ink: var(--text-navy, #1a2540);
  --mea2-ink2: #475569;
  --mea2-ink3: #64748b;
  --mea2-line: var(--purple-100, #E8D5F5);
  --mea2-soft: var(--purple-50, #F5EEFF);
  --mea2-acc: var(--purple, #7B1FA2);
  --mea2-acc-soft: #f3e8fa;
  --mea2-acc-ink: #5b1478;
  --mea2-two: #2f7fb8;            /* MaxTwo 표시색 (장비 외관의 하늘색) */
  --mea2-two-soft: #e6f1f9;
  --mea2-r: 16px;
  color: var(--mea2-ink);
  word-break: keep-all;
  overflow-wrap: break-word;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
  padding-block: 8px 24px;
}
.mea2 > * { min-width: 0; }
.mea2 h2, .mea2 h3 { margin: 0; letter-spacing: -.02em; }
.mea2 p { margin: 0; }
.mea2 :focus-visible { outline: 3px solid rgba(123,31,162,.4); outline-offset: 3px; border-radius: 6px; }

/* 공통 머리말 */
.mea2-head { display: grid; gap: 8px; max-width: 720px; }
.mea2-eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mea2-acc); }
.mea2-title { font-size: clamp(1.6rem, 3.2vw, 2.25rem); font-weight: 800; line-height: 1.3; color: var(--mea2-ink); }
.mea2-title--sm { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.mea2-lead { color: var(--mea2-ink2); font-size: 1rem; line-height: 1.7; }

/* ① 제품 2종 */
.mea2-duo { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; margin-top: 28px; }
.mea2-unit {
  display: grid; grid-template-rows: auto 1fr;
  border: 1px solid var(--mea2-line); border-radius: var(--mea2-r);
  overflow: hidden; background: #fff;
  scroll-margin-top: 110px;
  transition: box-shadow .4s;
}
.mea2-unit.mea2-flash { box-shadow: 0 0 0 4px rgba(123,31,162,.35); }
.mea2-unit--two.mea2-flash { box-shadow: 0 0 0 4px rgba(47,127,184,.35); }
.mea2-unit video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #eef2f4; }
.mea2-unit-body { padding: 18px 20px 20px; display: grid; gap: 10px; align-content: start; }
.mea2-unit-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mea2-unit-name { font-size: 1.5rem; font-weight: 800; color: var(--mea2-ink); }
.mea2-kind { font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.mea2-unit--one .mea2-kind { background: var(--mea2-acc-soft); color: var(--mea2-acc-ink); }
.mea2-unit--two .mea2-kind { background: var(--mea2-two-soft); color: var(--mea2-two); }
.mea2-unit p { color: var(--mea2-ink2); font-size: .93rem; line-height: 1.65; }
.mea2-specs { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .84rem; color: var(--mea2-ink3); }
.mea2-specs b { color: var(--mea2-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.mea2-shared { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .86rem; color: var(--mea2-ink3); }
.mea2-shared b { font-size: 1.05rem; color: var(--mea2-ink); font-weight: 800; margin-right: 5px; font-variant-numeric: tabular-nums; }
.mea2-bro {
  margin-top: 22px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px 20px; flex-wrap: wrap; padding: 14px 18px;
  border: 1px dashed var(--mea2-line); border-radius: 12px; background: var(--mea2-soft);
}
.mea2-bro p { font-size: .9rem; color: var(--mea2-ink2); }

/* 보라 브로셔 버튼 (MEA 전용) */
.btn-brochure-purple { background: var(--mea2-acc, #7B1FA2); color: #fff; border: 1.5px solid var(--mea2-acc, #7B1FA2); }
.btn-brochure-purple:hover { background: var(--purple-dark, #6A1B9A); border-color: var(--purple-dark, #6A1B9A); color: #fff; box-shadow: 0 4px 14px rgba(123,31,162,.3); }
.btn-brochure-purple svg { width: 16px; height: 16px; fill: currentColor; }

/* ② 적용 분야 (페이지의 주인공) */
.mea2-apps { background: var(--mea2-soft); border-radius: 24px; padding: 44px 32px; }
.mea2-apps-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.mea2-filter { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--mea2-line); border-radius: 999px; background: #fff; }
.mea2-filter button {
  font: inherit; font-size: .86rem; font-weight: 600; border: 0; background: none;
  color: var(--mea2-ink2); padding: 7px 15px; border-radius: 999px; cursor: pointer;
}
.mea2-filter button[aria-pressed="true"] { background: var(--mea2-acc); color: #fff; }
.mea2-filter button[data-f="two"][aria-pressed="true"] { background: var(--mea2-two); }
.mea2-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 28px; }
.mea2-app {
  background: #fff; border: 1px solid var(--mea2-line); border-radius: var(--mea2-r);
  overflow: hidden; display: grid; grid-template-rows: auto 1fr;
  transition: opacity .25s, transform .25s;
}
.mea2-app.mea2-dim { opacity: .28; }
.mea2-vis { aspect-ratio: 16/10; max-width: 100%; background: #0d0b12; overflow: hidden; position: relative; display: grid; place-items: center; }
.mea2-vis img, .mea2-vis video { width: 100%; height: 100%; display: block; object-fit: cover; }
.mea2-vis--data { background: #fff; padding: 10px; }
.mea2-vis--data img { object-fit: contain; }
.mea2-vis--light { background: #fff; }
.mea2-vis--light img { object-fit: contain; }
.mea2-vis--dark { background: #0d0d0d; }
.mea2-vis--dark video { object-fit: contain; }
.mea2-vis-tag {
  position: absolute; left: 12px; top: 12px; font-size: .7rem; font-weight: 700; color: #fff;
  background: rgba(15,10,22,.62); padding: 3px 9px; border-radius: 999px;
}
.mea2-vis-tag--br { top: auto; left: auto; right: 12px; bottom: 12px; }
.mea2-app-body { padding: 18px; display: grid; gap: 10px; align-content: start; }
.mea2-app-en { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mea2-ink3); }
.mea2-app h3 { font-size: 1.14rem; font-weight: 800; color: var(--mea2-ink); }
.mea2-app p { font-size: .89rem; color: var(--mea2-ink2); line-height: 1.65; }
.mea2-meas { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .83rem; color: var(--mea2-ink2); padding-top: 10px; border-top: 1px dashed var(--mea2-line); }
.mea2-meas-k { color: var(--mea2-ink); font-weight: 700; }
.mea2-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mea2-chip-tag {
  font-size: .75rem; font-weight: 700; padding: 3px 9px; border-radius: 6px;
  border: 1px solid var(--mea2-line); color: var(--mea2-ink2); background: var(--mea2-soft);
}
.mea2-more .mea2-chip-tag { background: #fff; }
.mea2-fit { display: flex; gap: 6px; }
.mea2-fit span { font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.mea2-fit-one { background: var(--mea2-acc-soft); color: var(--mea2-acc-ink); }
.mea2-fit-two { background: var(--mea2-two-soft); color: var(--mea2-two); }
.mea2-vlink { font-size: .82rem; font-weight: 700; color: var(--mea2-acc); text-decoration: none; }
.mea2-vlink:hover { text-decoration: underline; }
.mea2-more { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .86rem; color: var(--mea2-ink3); }

/* ③ 측정 방법 */
.mea2-steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-top: 24px; }
.mea2-step { display: grid; gap: 10px; align-content: start; }
.mea2-th { aspect-ratio: 4/3; max-width: 100%; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--mea2-line); padding: 6px; }
.mea2-th img, .mea2-th video { width: 100%; height: 100%; object-fit: contain; display: block; }
.mea2-step h3 { font-size: 1rem; font-weight: 800; color: var(--mea2-ink); }
.mea2-step p { font-size: .86rem; color: var(--mea2-ink2); line-height: 1.6; }

/* ④ 장비 선택 */
.mea2-tbl-wrap { margin-top: 22px; overflow-x: auto; border: 1px solid var(--mea2-line); border-radius: var(--mea2-r); background: #fff; }
.mea2-tbl { width: 100%; border-collapse: collapse; min-width: 560px; font-size: .92rem; }
.mea2-tbl th, .mea2-tbl td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--mea2-line); vertical-align: top; }
.mea2-tbl tbody tr:last-child th, .mea2-tbl tbody tr:last-child td { border-bottom: 0; }
.mea2-tbl thead th { font-size: 1.02rem; font-weight: 800; }
.mea2-tbl thead .mea2-o { color: var(--mea2-acc); }
.mea2-tbl thead .mea2-w { color: var(--mea2-two); }
.mea2-tbl tbody th { font-weight: 700; color: var(--mea2-ink2); width: 22%; white-space: nowrap; }
.mea2-tbl td { color: var(--mea2-ink); }
.mea2-details { margin-top: 18px; border: 1px solid var(--mea2-line); border-radius: var(--mea2-r); background: #fff; }
.mea2-details > summary {
  cursor: pointer; list-style: none; padding: 16px 20px; font-weight: 700; color: var(--mea2-acc);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.mea2-details > summary::-webkit-details-marker { display: none; }
.mea2-details > summary::after { content: "+"; font-size: 1.3rem; line-height: 1; }
.mea2-details[open] > summary::after { content: "−"; }
.mea2-details .mea2-chip { margin: 0; padding: 4px 20px 24px; opacity: 1; transform: none; }

/* ⑤ 문의 */
.mea2-cta {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  border: 1px solid var(--mea2-line); border-radius: var(--mea2-r); padding: 26px 28px; background: #fff;
}
.mea2-cta h2 { font-size: 1.28rem; font-weight: 800; color: var(--mea2-ink); }
.mea2-cta p { color: var(--mea2-ink2); font-size: .93rem; margin-top: 4px; }
.mea2-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.mea2-btns .btn svg { width: 16px; height: 16px; fill: currentColor; }
.mea2-btn-primary { background: var(--mea2-acc); border-color: var(--mea2-acc); color: #fff; }
.mea2-btn-primary:hover { background: var(--purple-dark, #6A1B9A); }

@media (max-width: 960px) {
  .mea2-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mea2-steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .mea2 { gap: 40px; }
  .mea2-duo, .mea2-grid { grid-template-columns: 1fr; }
  .mea2-apps { padding: 32px 16px; border-radius: 18px; }
  .mea2-cta { padding: 22px 18px; }
  .mea2-btns .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .mea2-app, .mea2-unit { transition: none; } }

/* 네트워크 어세이 이미지: 거의 정사각형이라 다른 이미지보다 크게 보여서 크기를 줄여 균형 맞춤 */
.mea2-vis img.mea2-img-sm,
.mea2-th img.mea2-img-sm {
  width: auto; height: auto;
  max-width: 72%; max-height: 78%;
  margin: auto;
}
.mea2-th { display: grid; place-items: center; }

/* 이미지 보호 스크립트가 이미지를 <div class="img-protect-wrap">로 감싸서 크기가 틀어지는 문제 수정 */
.mea2-vis > .img-protect-wrap,
.mea2-th > .img-protect-wrap {
  width: 100%; height: 100%;
  display: grid; place-items: center;
}

/* ==================== product-maglab.css ==================== */
/* ============================================================
   css/product-maglab.css
   ─────────────────────────────────────────────────────────────
   목적: IM_3D MAG_LAB 제품 상세 페이지 전용 스타일을 정의합니다.
         파란 계열 컬러 테마를 사용합니다.
   포함: .ml-slider (이미지 슬라이더 크기 통일),
         .ml-badge, .ml-feature-section (주요 기능 섹션),
         .ml-system-section (장비 구성 섹션),
         .ml-app-section (적용 범위 섹션)
   배경색: --bg-maglab (#eaf1fb), --bg-maglab-end (#f0f4fd)
   ============================================================ */

/* ── MAG_LAB 섹션 배지 (블루 그라디언트) ───────────────────── */
.ml-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;
}

/* ════════════════════════════════════════════════════════════
   이미지 슬라이더 크기 통일
   mag_lab_2.jpg 기준 정방형 고정
════════════════════════════════════════════════════════════ */
.ml-img-col {
  position: sticky;
  top: 100px;
  border-radius: 20px;
  overflow: hidden;
  background: #f8f9fa;
  box-shadow: 0 8px 40px rgba(21,101,192,.10);
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: unset !important;
}

.ml-img-col.plv-slider {
  position: sticky !important;
}

.ml-img-col .plv-slides {
  position: absolute !important;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.ml-img-col .plv-slide {
  position: absolute !important;
  inset: 0;
  min-width: unset !important;
  width: 100% !important;
  height: 100% !important;
  display: none;
  align-items: center;
  justify-content: center;
}
.ml-img-col .plv-slide.active { display: flex !important; }

.ml-product-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 20px;
  display: block;
}

/* ✅ NEW — 제품 이미지+사양 상단 레이아웃도 스냅 단락으로 지정
   (.pl-inner는 다른 제품 서브패널에서도 재사용되는 공용 클래스이므로
    #subpanel-mag-lab 범위로 한정하여 다른 제품에 영향이 가지 않도록 함) */
#subpanel-mag-lab .pl-inner {
  scroll-snap-align: start;
}

/* ════════════════════════════════════════════════════════════
   주요 기능 섹션
════════════════════════════════════════════════════════════ */
.ml-feature-section {
  background: linear-gradient(160deg, var(--bg-maglab) 0%, var(--bg-maglab-end) 100%);
  border-radius: 24px;
  margin: 0 0 48px;
  padding: 56px 52px;
  display: flex; flex-direction: column; gap: 40px;

  /* ✅ NEW — 이 섹션 상단에서 스크롤이 자연스럽게 멈추도록 지정 */
  scroll-snap-align: start;
}

.ml-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.ml-feat-card {
  background: var(--white);
  border: 1px solid #dde6f5;
  border-radius: 16px;
  padding: 26px 22px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.ml-feat-card:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 28px rgba(21,101,192,.12);
  transform: translateY(-3px);
}

.ml-feat-icon {
  width: 50px; height: 50px;
  border-radius: 13px;
  background: linear-gradient(135deg, #e8f0fe 0%, #dde6f5 100%);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.ml-feat-body  { display: flex; flex-direction: column; gap: 7px; }
.ml-feat-title { font-size: 0.95rem; font-weight: 700; color: var(--text-navy); margin: 0; line-height: 1.35; }
.ml-feat-desc  { font-size: 0.83rem; color: var(--text-purple-lt); line-height: 1.65; margin: 0; }

/* ════════════════════════════════════════════════════════════
   장비 구성 섹션 (이미지 카드 3열)
════════════════════════════════════════════════════════════ */
.ml-system-section {
  background: var(--white);
  border: 1.5px solid #dde6f5;
  border-radius: 24px;
  margin: 0 0 48px;
  padding: 56px 52px;
  display: flex; flex-direction: column; gap: 40px;

  /* ✅ NEW */
  scroll-snap-align: start;
}

.ml-sys-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.ml-sys-card {
  background: #f8faff;
  border: 1px solid #e2eaf6;
  border-radius: 18px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .22s, box-shadow .22s, transform .22s;
  position: relative;
}
.ml-sys-card:hover {
  border-color: var(--primary);
  box-shadow: 0 10px 36px rgba(21,101,192,.13);
  transform: translateY(-4px);
}

.ml-sys-num {
  position: absolute; top: 14px; left: 14px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--white);
  font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: .01em; z-index: 2;
  box-shadow: 0 2px 8px rgba(21,101,192,.25);
}

.ml-sys-img-wrap {
  width: 100%; height: 180px;
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid #e2eaf6;
  overflow: hidden;
}
.ml-sys-img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 18px;
  display: block;
}

.ml-sys-img--ecb { object-fit: contain; object-position: center; padding: 16px; }

.ml-sys-img-wrap--sw { background: #1a1f2e; }
.ml-sys-img--sw { object-fit: cover; object-position: center top; padding: 0; }

.ml-sys-body {
  padding: 20px 22px 24px;
  display: flex; flex-direction: column; gap: 6px;
  flex: 1;
}
.ml-sys-title { font-size: 0.97rem; font-weight: 700; color: var(--text-navy); margin: 0; line-height: 1.35; }
.ml-sys-desc  { font-size: 0.83rem; color: var(--primary); font-weight: 600; margin: 0; letter-spacing: .01em; }

/* ════════════════════════════════════════════════════════════
   적용 범위 섹션
════════════════════════════════════════════════════════════ */
.ml-app-section {
  background: linear-gradient(160deg, var(--bg-maglab) 0%, var(--bg-maglab-end) 100%);
  border-radius: 24px;
  margin: 0 0 48px;
  padding: 56px 52px;
  display: flex; flex-direction: column; gap: 40px;

  /* ✅ NEW */
  scroll-snap-align: start;
}

.ml-app-img-wrap {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(21,101,192,.13);
  line-height: 0;
  cursor: zoom-in;
  transition: box-shadow .22s, transform .22s;
}
.ml-app-img-wrap:hover {
  box-shadow: 0 16px 48px rgba(21,101,192,.2);
  transform: translateY(-2px);
}
.ml-app-img { width: 100%; height: auto; display: block; }

.ml-app-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.ml-app-card {
  background: var(--white);
  border: 1px solid #dde6f5;
  border-radius: 16px;
  padding: 24px 20px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.ml-app-card:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 28px rgba(21,101,192,.12);
  transform: translateY(-3px);
}

.ml-app-card-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #e8f0fe, #dde6f5);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.ml-app-card-body   { display: flex; flex-direction: column; gap: 7px; }
.ml-app-card-title  { font-size: 0.97rem; font-weight: 700; color: var(--text-navy); margin: 0; line-height: 1.35; }
.ml-app-card-desc   { font-size: 0.82rem; color: var(--text-purple-lt); line-height: 1.65; margin: 0; }

/* ════════════════════════════════════════════════════════════
   2026.10 소개서 기준 개편: 별도 구성 요소(옵션) · 연구성과
════════════════════════════════════════════════════════════ */
.ml-opt {
  margin-top: 24px;
  padding: 20px 24px;
  border: 1px dashed var(--blue-100, #c9dcf5);
  border-radius: 14px;
  background: var(--blue-50, #f0f6ff);
}
.ml-opt-title { margin: 0 0 12px; font-size: 1rem; font-weight: 700; color: var(--text-dark, #1a2340); }
.ml-opt-list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.ml-opt-list li {
  font-size: .88rem; color: var(--text-mid, #4a5a78);
  background: #fff; border: 1px solid var(--blue-100, #c9dcf5);
  border-radius: 999px; padding: 6px 14px;
}
.ml-pub-section {
  background: var(--white, #fff);
  border: 1.5px solid #dde6f5;
  border-radius: 24px;
  margin: 0 0 48px;
  padding: 48px 52px;
}
.ml-pub-strip { margin-top: 24px; overflow-x: auto; }
.ml-pub-img { display: block; width: 100%; height: auto; min-width: 640px; }
@media (max-width: 640px) {
  .ml-pub-section { padding: 32px 16px; }
  .ml-opt { padding: 16px; }
  .ml-pub-strip { padding-bottom: 6px; }
}

/* 영문 화면: 제목과 같은 설명은 비워 두고 숨김 */
.ml-feat-desc:empty { display: none; }

/* 이미지 보호 스크립트(image-protect.js)가 이미지를 <div class="img-protect-wrap">로 한 번 더 감싸서
   이미지가 카드 높이를 무시하고 커져 잘리던 문제 수정 — 감싼 상자가 카드 이미지 칸을 꽉 채우게 함 */
.ml-sys-img-wrap > .img-protect-wrap { width: 100%; height: 100%; }
/* 소프트웨어 화면도 잘리지 않게 전체가 보이도록 */
.ml-sys-img--sw { object-fit: contain; object-position: center; padding: 8px; }
@media (max-width: 768px) {
  .ml-sys-card .ml-sys-img-wrap { height: 120px; }
}
@media (max-width: 480px) {
  .ml-sys-card .ml-sys-img-wrap { height: 140px; }
}

/* 제품 사진 슬라이드(맨 위 큰 사진): 이미지 보호 스크립트가 감싼 상자가 원래 사진 비율대로 커져
   위·아래가 잘리던 문제 수정 — 감싼 상자가 슬라이드 칸을 꽉 채우게 해서 사진 전체가 보이게 함 */
.plv-slide > .img-protect-wrap { width: 100%; height: 100%; }

/* ==================== product-vasculix.css ==================== */
/* ============================================================
   css/product-vasculix.css
   ============================================================ */

.cat-teal {
  background: rgba(236,72,153,.08);
  color: #ec4863;
  border: 1px solid rgba(236,72,153,.22);
}

.ptag-teal {
  background: rgba(236,72,153,.08);
  color: #ec4863;
  border: 1px solid rgba(236,72,153,.22);
}

.btn-brochure-teal {
  color: #ec4863;
  border-color: rgba(236,72,153,.3);
}

.btn-brochure-teal:hover {
  background: rgba(236,72,153,.08);
  border-color: #ec4863;
}

.vc-badge {
  display: inline-block;
  background: linear-gradient(135deg, #ec4863 0%, #f472b6 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;
}

.vc-slide-wrap { margin: 16px 0 20px; }

.vc-slide-tabs {
  display: flex; gap: 0;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--gray-100);
}

.vc-slide-tab {
  padding: 10px 22px;
  font-size: 0.88rem; font-weight: 600;
  color: #8a96a8;
  background: transparent; border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  letter-spacing: .01em; white-space: nowrap;
  transition: color .18s, border-color .18s, background .18s;
}
.vc-slide-tab:hover {
  color: #ec4863;
  background: rgba(236,72,153,.04);
}
.vc-slide-tab.active {
  color: #ec4863;
  border-bottom-color: #ec4863;
  background: rgba(236,72,153,.04);
}

.vc-slide-panel        { display: none; animation: fadeIn .22s ease; }
.vc-slide-panel.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.vc-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 4px;
}

.vc-feat-card {
  background: #f8fbff;
  border: 1px solid #e8eef8;
  border-radius: 12px;
  padding: 18px 16px 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow .2s, transform .2s;
}
.vc-feat-card:hover {
  box-shadow: 0 6px 24px rgba(236,72,153,.12);
  transform: translateY(-2px);
}

.vc-feat-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(236,72,153,.12), rgba(236,72,153,.06));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.vc-feat-icon svg { width: 24px; height: 24px; }

.vc-feat-title {
  font-size: 0.88rem; font-weight: 700;
  color: var(--primary); line-height: 1.35; letter-spacing: -.01em;
}

.vc-feat-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.vc-feat-list li {
  font-size: 0.78rem; color: #5a6a7e;
  line-height: 1.5; padding-left: 14px; position: relative;
}
.vc-feat-list li::before {
  content: '';
  position: absolute; left: 0; top: 7px;
  width: 5px; height: 5px;
  border-radius: 50%; background: #ec4863; opacity: .7;
}

.vc-feat-img-wrap {
  margin-bottom: 18px;
  border-radius: 12px; overflow: hidden;
  border: 1px solid #e8eef8;
  background: #f8fbff;
}
.vc-feat-img { width: 100%; height: auto; display: block; object-fit: cover; }

.vc-feat-img-caps {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 14px 12px;
  background: #fdf2f8;
  border-top: 1px solid #fbcfe8;
}
.vc-feat-img-caps span {
  font-size: 0.74rem; font-weight: 600;
  color: #ec4863;
  background: rgba(236,72,153,.08);
  border: 1px solid rgba(236,72,153,.22);
  border-radius: 20px;
  padding: 3px 11px;
  white-space: nowrap; letter-spacing: .01em;
}

/* ════════════════════════════════════════════════════════════
   작동 원리 섹션 — Pro/Neuro/Cardio 3개 서브패널 모두 이 클래스를
   재사용하므로, 여기 한 번만 스냅을 걸면 3개 모두 적용됩니다.
════════════════════════════════════════════════════════════ */
.vc-principle-section {
  background: #fdf2f8;
  border-radius: 24px;
  margin: 32px 0 48px;
  padding: 56px 52px;
  display: flex; flex-direction: column; gap: 44px;

  /* ✅ NEW */
  scroll-snap-align: start;
}

.vc-principle-img-wrap {
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 48px rgba(236,72,153,.13);
  background: var(--white);
}
.vc-principle-img { width: 100%; height: auto; display: block; }

.vc-img-caption {
  background: rgba(236,72,153,.06);
  border-top: 1px solid rgba(236,72,153,.14);
  text-align: center;
  padding: 10px 20px;
  font-size: 0.78rem; color: #ec4863;
  font-weight: 600; letter-spacing: .03em;
}

.vc-steps { display: flex; flex-direction: column; gap: 0; }

.vc-step {
  display: flex; flex-direction: column; gap: 0;
  padding: 28px 0;
  border-bottom: 1px solid rgba(236,72,153,.12);
}
.vc-step:last-child  { border-bottom: none; padding-bottom: 0; }
.vc-step:first-child { padding-top: 0; }

.vc-step-num {
  font-size: 0.68rem; font-weight: 800;
  letter-spacing: .14em;
  color: rgba(236,72,153,.45);
  margin-bottom: 10px; line-height: 1;
}

.vc-step-body { display: flex; gap: 16px; align-items: flex-start; }

.vc-step-icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: rgba(236,72,153,.1);
  display: flex; align-items: center; justify-content: center;
}
.vc-step-icon svg { width: 24px; height: 24px; }

.vc-step-text { flex: 1; min-width: 0; }
.vc-step-title {
  font-size: 1.02rem; font-weight: 700;
  color: #9d174d; margin: 0 0 8px;
  letter-spacing: -.01em; line-height: 1.4;
}
.vc-step-desc {
  font-size: 0.88rem; color: #475569;   /* 본문은 읽기 편한 회색 (분홍은 제목·포인트에만) */
  line-height: 1.8; margin: 0 0 12px;
}

.vc-step-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.vc-step-list li {
  font-size: 0.82rem; color: #475569;
  font-weight: 500; padding-left: 16px;
  position: relative; line-height: 1.55;
}
.vc-step-list li::before {
  content: '';
  position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ec4863; opacity: .65;
}

/* ════════════════════════════════════════════════════════════
   내부 윤활 코팅 비교 블록
════════════════════════════════════════════════════════════ */
.vc-coating-block {
  border-top: 1px solid rgba(236,72,153,.15);
  padding-top: 32px;
  display: flex; flex-direction: column; gap: 20px;
}

.vc-coating-title-row { display: flex; align-items: center; gap: 14px; }
.vc-coating-title {
  font-size: 1.02rem; font-weight: 700;
  color: #9d174d; margin: 0 0 4px;
  letter-spacing: -.01em; line-height: 1.3;
}
.vc-coating-sub { font-size: 0.82rem; color: #be185d; margin: 0; font-weight: 500; }

.vc-coating-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px; align-items: center;
}

.vc-coating-img-wrap {
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 6px 24px rgba(236,72,153,.10);
  background: var(--white);
  border: 1px solid rgba(236,72,153,.12);
}
.vc-coating-img { width: 100%; height: auto; display: block; }

.vc-coating-desc { display: flex; flex-direction: column; justify-content: center; }

/* ════════════════════════════════════════════════════════════
   VasculiX 서브탭 분홍색 테마 변형
════════════════════════════════════════════════════════════ */
.prod-sub-tab-bar--teal {
  border-bottom-color: rgba(236, 72, 153, .25);
}

.prod-sub-tab-btn--teal.active {
  border-color: #ec4863;
  border-bottom: 2px solid var(--white);
}
.prod-sub-tab-btn--teal.active .pstb-name {
  color: #ec4863;
}
.prod-sub-tab-btn--teal.active .pstb-sub {
  color: #ec4863;
  opacity: .65;
}

.prod-sub-tab-btn--teal:hover .pstb-name {
  color: #ec4863;
}

/* ════════════════════════════════════════════════════════════
   병렬 2열 레이아웃 반응형 처리
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .vc-principle-section > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .vc-principle-section .vc-coating-block[style*="border-top:none"] {
    border-top: 1px solid rgba(236,72,153,.15) !important;
    padding-top: 24px !important;
  }
  .vc-principle-section .vc-coating-block[style*="border-top:none"]:first-child {
    border-top: none !important;
    padding-top: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════
   아크릴 패키징 블록
════════════════════════════════════════════════════════════ */
.vc-acrylic-layout {
  display: grid;
  grid-template-columns: 2fr 1.2fr;
  gap: 32px;
  align-items: center;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;

  /* ✅ NEW (선택 사항) — .vc-principle-section 내부에 있는 하위
     블록이지만, Neuro/Cardio는 이 섹션 하나가 매우 길기 때문에
     스크롤 도중 이 블록에서도 한 번 더 자연스럽게 멈추도록
     추가 스냅 지점을 걸어줍니다. 부담스러우면 이 줄만 삭제해도
     됩니다(제거해도 .vc-principle-section 스냅은 그대로 동작). */
  scroll-snap-align: start;
}

.vc-acrylic-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.vc-acrylic-card {
  background: rgba(236,72,153,.04);
  border: 1px solid rgba(236,72,153,.18);
  border-radius: 14px;
  padding: 22px 20px;
  transition: box-shadow .2s, transform .2s;
}

.vc-acrylic-card:hover {
  box-shadow: 0 6px 24px rgba(236,72,153,.12);
  transform: translateY(-2px);
}

.vc-acrylic-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.vc-acrylic-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ec4863;
  flex-shrink: 0;
}

.vc-acrylic-icon svg {
  fill: #fff;
}

.vc-acrylic-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #9d174d;
  line-height: 1.3;
}

.vc-acrylic-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.vc-acrylic-badge--primary {
  color: #ec4863;
  background: rgba(236,72,153,.12);
}

.vc-acrylic-badge--secondary {
  color: #be185d;
  background: rgba(190,24,93,.08);
  border: 1px solid rgba(190,24,93,.15);
}

.vc-acrylic-desc {
  margin: 0;
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.75;
  word-break: keep-all;
}

.vc-acrylic-text {
  display: flex;
  align-items: center;
}

.vc-acrylic-main {
  margin: 0;
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.8;
  word-break: keep-all;
  font-weight: 500;
}

.vc-coating-block .vc-step-icon svg path {
  fill: #ec4863 !important;
}

@media (max-width: 900px) {
  .vc-acrylic-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .vc-acrylic-text {
    order: -1;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .vc-acrylic-cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.vc-principle-section .vc-step-icon svg path,
.vc-principle-section .vc-step-icon svg circle {
  fill: #ec4863 !important;
}

.vc-principle-section .vc-step-icon svg line {
  stroke: #ec4863 !important;
}

#subpanel-vasculix-pro .btn-primary,
#subpanel-vasculix-neuro .btn-primary,
#subpanel-vasculix-cardio .btn-primary {
  background: #ec4863 !important;
  box-shadow: 0 4px 14px rgba(236, 72, 99, .3) !important;
  border-color: #ec4863 !important;
}

#subpanel-vasculix-pro .btn-primary:hover,
#subpanel-vasculix-neuro .btn-primary:hover,
#subpanel-vasculix-cardio .btn-primary:hover {
  background: #d63651 !important;
  box-shadow: 0 6px 20px rgba(236, 72, 99, .4) !important;
  transform: translateY(-1px);
}

.btn-brochure-teal {
  color: #ec4863 !important;
  border-color: rgba(236, 72, 99, .3) !important;
}

.btn-brochure-teal:hover {
  background: rgba(236, 72, 99, .08) !important;
  border-color: #ec4863 !important;
  color: #d63651 !important;
}

.btn-brochure-teal svg path {
  fill: #ec4863 !important;
}

.cat-teal {
  background: rgba(236, 72, 153, .08) !important;
  color: #ec4863 !important;
  border: 1px solid rgba(236, 72, 99, .22) !important;
}

.ptag-teal {
  background: rgba(236, 72, 153, .08) !important;
  color: #ec4863 !important;
  border: 1px solid rgba(236, 72, 99, .22) !important;
}

/* ════════════════════════════════════════════════════════════
   내부 윤활 코팅 비교 영상 (기존 비교 이미지 자리)
════════════════════════════════════════════════════════════ */
.vc-coating-video {
  aspect-ratio: 1144 / 680;   /* 영상이 뜨기 전에도 자리를 잡아 화면이 덜컹이지 않게 */
  object-fit: cover;
  background: #0b0d14;
  cursor: pointer;
}

/* ==================== 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; }
}