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

/* ==================== about.css ==================== */
/* ============================================================
   css/about.css
   ─────────────────────────────────────────────────────────────
   목적: About 페이지의 모든 컴포넌트(미션, 가치, 연혁,
         팀, 조직도)와 탭 네비게이션을 정의합니다.
   포함: .about-tab-bar (About 카테고리 탭),
         .mission-grid / .mission-card (미션 카드),
         .values-grid / .val-card (핵심 가치),
         .timeline / .tl-item (기존 양방향 타임라인),
         .hist-tabs / .tl-year-group (연혁 탭 + 연도 그룹),
         .team-grid / .team-card (팀 카드),
         .org-chart-wrap (SVG 조직도)
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   About 페이지 카테고리 탭 바 (스티키)
════════════════════════════════════════════════════════════ */
.about-tab-bar {
  position: sticky;
  top: 72px; /* 네비바 68px + 여유 */
  z-index: 200;
  background: var(--white);
  border-bottom: 2px solid #eef0f5;
  box-shadow: 0 4px 20px rgba(21,101,192,.06);
}

/* 탭 버튼 행 */
.about-tab-inner {
  display: flex; align-items: stretch; justify-content: center;
  gap: 0; overflow-x: auto; scrollbar-width: none;
}
.about-tab-inner::-webkit-scrollbar { display: none; }

/* 개별 탭 버튼 */
.about-tab-btn {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  padding: 16px 40px;
  border: none; background: transparent;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap; flex-shrink: 0;
  transition: color .2s, border-color .2s, background .2s;
}

/* 번호 레이블 */
.atb-num {
  font-size: 0.68rem; font-weight: 800;
  letter-spacing: .12em; color: #c2cad8;
  transition: color .2s; line-height: 1;
}

/* 탭 라벨 */
.atb-label {
  font-size: 0.92rem; font-weight: 700;
  color: #8a96a8; letter-spacing: .01em;
  transition: color .2s; line-height: 1.2;
}

/* 호버 상태 */
.about-tab-btn:hover .atb-num   { color: #90aad4; }
.about-tab-btn:hover .atb-label { color: var(--primary); }
.about-tab-btn:hover             { background: rgba(21,101,192,.04); }

/* 활성 탭 */
.about-tab-btn.active { border-bottom-color: var(--primary); background: rgba(21,101,192,.04); }
.about-tab-btn.active .atb-num   { color: #90aad4; }
.about-tab-btn.active .atb-label { color: var(--primary); }

/* 탭 패널 */
.about-panel        { display: none; }
.about-panel.active { display: block; }

/* ════════════════════════════════════════════════════════════
   미션 카드 (모던 2열)
════════════════════════════════════════════════════════════ */
.mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 48px;
}

.mission-card {
  position: relative;
  border-radius: 20px;
  padding: 44px 40px 36px;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.mission-card:hover { transform: translateY(-4px); }

/* 미션/비전 카드 배경 */
.mc-mission {
  background: linear-gradient(140deg, #EBF4FF 0%, #dceeff 100%);
  border: 1px solid rgba(21,101,192,.12);
  box-shadow: 0 4px 24px rgba(21,101,192,.08);
}
.mc-vision {
  background: linear-gradient(140deg, #f0f7ff 0%, #e8f4fd 100%);
  border: 1px solid rgba(0,150,199,.12);
  box-shadow: 0 4px 24px rgba(0,150,199,.08);
}

/* 영문 키커 */
.mc-kicker {
  position: absolute; top: 28px; right: 32px;
  font-size: 2.4rem; font-weight: 900;
  letter-spacing: -.04em;
  color: rgba(21,101,192,.07);
  line-height: 1; pointer-events: none; user-select: none;
}
.mc-vision .mc-kicker { color: rgba(0,150,199,.07); }

/* 아이콘 래퍼 */
.mc-icon-wrap {
  width: 60px; height: 60px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 2px 12px rgba(21,101,192,.12);
}
.mc-icon-wrap svg { width: 28px; height: 28px; fill: var(--primary); }
.mc-vision .mc-icon-wrap svg { fill: #0096C7; }

.mission-card h3 {
  font-size: 1.45rem; font-weight: 900;
  color: var(--gray-900); margin-bottom: 12px;
  letter-spacing: -.02em;
}
.mission-card p {
  font-size: .9rem; color: var(--gray-600);
  line-height: 1.8; margin-bottom: 24px;
}

/* 키 포인트 리스트 */
.mc-points {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.mc-points li {
  display: flex; align-items: center; gap: 10px;
  font-size: .82rem; font-weight: 600; color: var(--gray-700);
}
.mc-points li::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); flex-shrink: 0;
}
.mc-vision .mc-points li::before { background: #0096C7; }

/* 핵심 지표 바 */
.mission-stat-bar {
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-900);
  border-radius: 20px;
  padding: 36px 48px;
}
.msb-item { flex: 1; text-align: center; }
.msb-num {
  font-size: 2.6rem; font-weight: 900;
  color: var(--white); letter-spacing: -.04em; line-height: 1;
  margin-bottom: 6px;
}
.msb-num span { font-size: 1.6rem; font-weight: 700; color: var(--accent); }
.msb-label {
  font-size: .78rem; font-weight: 500;
  color: rgba(255,255,255,.55); letter-spacing: .04em;
}
.msb-divider {
  width: 1px; height: 56px;
  background: rgba(255,255,255,.1);
  flex-shrink: 0; margin: 0 12px;
}

/* ════════════════════════════════════════════════════════════
   핵심 가치 카드 (모던 리뉴얼 — 4열)
   ─────────────────────────────────────────────────────────────
   구조: .values-grid > .val-card
         └ .vc-glow / .vc-num / .vc-head(.val-icon + .vc-kicker)
           / .vc-body(h4 + p) / .vc-bar
   ※ 레이아웃 규칙은 #atab-panel-values 로 스코프 →
     나중에 로드되는 responsive.css 에 눌리지 않습니다.
════════════════════════════════════════════════════════════ */

/* 섹션 배경 (은은한 컬러 그라디언트) */
.sec-values {
  position: relative;
  background:
    radial-gradient(760px 420px at 10% -12%, rgba(21,101,192,.07), transparent 62%),
    radial-gradient(660px 400px at 92% 6%,  rgba(0,137,123,.055), transparent 62%),
    var(--white);
}

/* ── 그리드 ─────────────────────────────────────────────── */
#atab-panel-values .values-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 44px;
}

/* ── 카드 본체 ──────────────────────────────────────────── */
.val-card {
  /* 카드별 액센트 토큰 (아래에서 재정의) */
  --vc:        #1565C0;
  --vc-soft:   rgba(21,101,192,.12);
  --vc-line:   rgba(21,101,192,.35);
  --vc-border: rgba(21,101,192,.28);
  --vc-shadow: rgba(21,101,192,.28);

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 272px;
  padding: 28px 26px 30px;
  background: var(--white);
  border: 1px solid rgba(15,23,42,.07);
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 32px -20px rgba(15,23,42,.24);
  text-align: left;
  overflow: hidden;
  transition: transform .45s cubic-bezier(.22,1,.36,1),
              box-shadow .45s cubic-bezier(.22,1,.36,1),
              border-color .3s ease;
}

/* 상단 액센트 라인 (호버 시 좌→우 확장) */
.val-card::before {
  content: '';
  position: absolute; inset: 0 0 auto 0;
  height: 4px; z-index: 2;
  background: linear-gradient(90deg, var(--vc), var(--vc-line));
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}

/* 우상단 컬러 글로우 */
.vc-glow {
  position: absolute; top: -72px; right: -72px;
  width: 196px; height: 196px; border-radius: 50%;
  background: radial-gradient(circle, var(--vc-soft), transparent 70%);
  opacity: .85; z-index: 0; pointer-events: none;
  transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .4s ease;
}

/* 고스트 넘버 (우하단 대형 숫자) */
.val-card .vc-num {
  position: absolute; right: 18px; bottom: 4px;
  z-index: 0;
  font-family: 'Inter', sans-serif;
  font-size: 4.6rem; font-weight: 800; line-height: 1;
  letter-spacing: -.05em;
  color: var(--vc); opacity: .08;
  pointer-events: none; user-select: none;
  transition: opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1);
}

/* ── 헤드 : 아이콘 + 영문 키커 ──────────────────────────── */
.vc-head {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
}

.val-card .val-icon {
  flex: 0 0 auto;
  width: 54px; height: 54px; margin: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px;
  background: var(--vc-soft);
  border: 1px solid var(--vc-border);
  transition: transform .45s cubic-bezier(.22,1,.36,1),
              background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.val-card .val-icon svg { width: 26px; height: 26px; fill: var(--vc); transition: fill .3s ease; }

.vc-kicker {
  font-family: 'Inter', sans-serif;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--vc); opacity: .72;
}

/* ── 본문 ───────────────────────────────────────────────── */
.vc-body { position: relative; z-index: 1; margin-top: auto; }

.val-card h4 {
  font-size: 1.32rem; font-weight: 800;
  color: var(--gray-900); letter-spacing: -.02em;
  margin: 0 0 10px;
}
.val-card p {
  font-size: .86rem; color: var(--gray-600);
  line-height: 1.75; margin: 0;
}

/* 하단 확장 바 */
.vc-bar {
  position: relative; z-index: 1;
  display: block; width: 34px; height: 3px;
  border-radius: 100px; background: var(--vc); opacity: .45;
  transition: width .5s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}

/* ── 호버 / 포커스 ──────────────────────────────────────── */
.val-card:hover,
.val-card:focus-within {
  transform: translateY(-8px);
  border-color: var(--vc-border);
  box-shadow: 0 2px 4px rgba(15,23,42,.04), 0 28px 52px -24px var(--vc-shadow);
}
.val-card:hover::before,
.val-card:focus-within::before { transform: scaleX(1); }

.val-card:hover .vc-glow  { transform: scale(1.28); opacity: 1; }
.val-card:hover .vc-num   { opacity: .14; transform: translateY(-4px); }
.val-card:hover .val-icon {
  transform: translateY(-3px) rotate(-6deg);
  background: var(--vc); border-color: var(--vc);
  box-shadow: 0 10px 22px -10px var(--vc-shadow);
}
.val-card:hover .val-icon svg { fill: var(--white); }
.val-card:hover .vc-bar { width: 66px; opacity: 1; }

/* ── 카드별 액센트 컬러 ─────────────────────────────────── */
.vc-innovation {
  --vc:#1565C0; --vc-soft:rgba(21,101,192,.12); --vc-line:rgba(21,101,192,.34);
  --vc-border:rgba(21,101,192,.30); --vc-shadow:rgba(21,101,192,.30);
}
.vc-safety {
  --vc:#E53935; --vc-soft:rgba(229,57,53,.12); --vc-line:rgba(229,57,53,.34);
  --vc-border:rgba(229,57,53,.28); --vc-shadow:rgba(229,57,53,.28);
}
.vc-collab {
  --vc:#00897B; --vc-soft:rgba(0,137,123,.12); --vc-line:rgba(0,137,123,.34);
  --vc-border:rgba(0,137,123,.28); --vc-shadow:rgba(0,137,123,.28);
}
.vc-trust {
  --vc:#6A1B9A; --vc-soft:rgba(106,27,154,.12); --vc-line:rgba(106,27,154,.34);
  --vc-border:rgba(106,27,154,.28); --vc-shadow:rgba(106,27,154,.28);
}

/* ── 순차 등장 (utilities.css 의 .fade-up/.visible 활용) ── */
#atab-panel-values .values-grid .val-card { transition-delay: var(--vc-delay, 0ms); }
/* 호버 시엔 지연 없이 즉시 반응 */
#atab-panel-values .values-grid .val-card:hover { transition-delay: 0ms; }

/* ── 반응형 ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  #atab-panel-values .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 600px) {
  #atab-panel-values .values-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 30px; }
  .val-card { min-height: 0; padding: 24px 22px 26px; border-radius: 20px; }
  .val-card .vc-num { font-size: 3.5rem; right: 14px; }
  .val-card h4 { font-size: 1.18rem; }
}

/* ── 모션 최소화 선호 ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .val-card, .val-card * { transition: none !important; animation: none !important; }
  .val-card:hover { transform: none; }
  .val-card::before { transform: scaleX(1); }
}

/* 역할별 계열색 */
.vc-innovation { border-top-color: #1565C0; }
.vc-innovation:hover { box-shadow: 0 12px 40px rgba(21,101,192,.12); }
.vc-innovation .val-icon { background: #EBF4FF; }
.vc-innovation .val-icon svg { fill: #1565C0; }

.vc-safety { border-top-color: #e53935; }
.vc-safety:hover { box-shadow: 0 12px 40px rgba(229,57,53,.12); }
.vc-safety .val-icon { background: #FFEBEE; }
.vc-safety .val-icon svg { fill: #e53935; }

.vc-collab { border-top-color: #00897B; }
.vc-collab:hover { box-shadow: 0 12px 40px rgba(0,137,123,.12); }
.vc-collab .val-icon { background: #E0F2F1; }
.vc-collab .val-icon svg { fill: #00897B; }

.vc-trust { border-top-color: #6A1B9A; }
.vc-trust:hover { box-shadow: 0 12px 40px rgba(106,27,154,.12); }
.vc-trust .val-icon { background: #F3E5F5; }
.vc-trust .val-icon svg { fill: #6A1B9A; }

/* 수서 번호 */
.vc-num {
  position: absolute; top: 18px; right: 20px;
  font-size: 1.8rem; font-weight: 900;
  color: rgba(0,0,0,.04); line-height: 1;
  letter-spacing: -.04em; pointer-events: none; user-select: none;
}

/* 아이콘 래퍼 */
.val-icon {
  width: 64px; height: 64px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  transition: transform .25s;
}
.val-card:hover .val-icon { transform: scale(1.1) rotate(-4deg); }
.val-icon svg { width: 28px; height: 28px; }

.val-card h4 {
  font-size: 1.05rem; font-weight: 800;
  color: var(--gray-900); margin-bottom: 8px; letter-spacing: -.01em;
}
.val-card p  { font-size: .82rem; color: var(--gray-500); line-height: 1.65; }

/* ════════════════════════════════════════════════════════════
   타임라인 (양방향, 구 스타일)
════════════════════════════════════════════════════════════ */
.timeline { max-width: 800px; margin: 0 auto; position: relative; }

/* 중앙 세로선 */
.timeline::before {
  content: '';
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--primary), var(--accent));
  transform: translateX(-50%);
}

.tl-item { display: grid; grid-template-columns: 1fr 56px 1fr; margin-bottom: 36px; }

.tl-content {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-xs);
}
.tl-content.left  { grid-column: 1; text-align: right; margin-right: 28px; }
.tl-content.right { grid-column: 3; margin-left: 28px; }

/* 말풍선 화살표 (left) */
.tl-content.left::after {
  content: '';
  position: absolute; right: -9px; top: 18px;
  width: 0; height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 9px solid var(--gray-100);
}
/* 말풍선 화살표 (right) */
.tl-content.right::before {
  content: '';
  position: absolute; left: -9px; top: 18px;
  width: 0; height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 9px solid var(--gray-100);
}
.tl-content { position: relative; }

/* 중앙 점 */
.tl-dot { grid-column: 2; display: flex; align-items: flex-start; justify-content: center; padding-top: 18px; z-index: 1; }
.tl-dot-inner {
  width: 14px; height: 14px;
  background: var(--primary); border-radius: 50%;
  border: 3px solid var(--white);
  box-shadow: 0 0 0 3px var(--primary);
}

.tl-year  { font-size: .7rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 5px; }
.tl-title { font-size: .93rem; font-weight: 700; color: var(--gray-800); margin-bottom: 4px; }
.tl-desc  { font-size: .79rem; color: var(--gray-500); line-height: 1.6; }

/* ════════════════════════════════════════════════════════════
   연혁 탭 (최신 탭 UI)
════════════════════════════════════════════════════════════ */

/* 탭 바 */
.hist-tabs {
  display: flex;
  gap: 8px;
  margin: 40px 0 36px;
  border-bottom: 2px solid var(--gray-100);
  overflow-x: auto;              /* 탭 증가 시 스크롤 */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hist-tabs::-webkit-scrollbar { display: none; }

.hist-tab {
  padding: 10px 22px;            /* 28px → 22px, 탭 늘어날 여유 확보 */
  white-space: nowrap;
  flex-shrink: 0;                /* 압축 방지 */
  font-size: .95rem; font-weight: 700;
  color: var(--gray-400);
  background: none; border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px; cursor: pointer;
  border-radius: 6px 6px 0 0;
  transition: color .2s, border-color .2s, background .2s;
}

.hist-tab:hover { color: var(--primary); background: var(--blue-50); }
.hist-tab.active { color: var(--primary); border-bottom-color: var(--primary); background: none; }

/* 패널 */
.hist-panel        { display: none; }
.hist-panel.active { display: block; }

/* ── 연도 그룹 ──────────────────────────────────────────────── */
.tl-year-group {
  --tl-label-w: 80px;
  --tl-gap: 32px;
  display: grid;
  grid-template-columns: var(--tl-label-w) 1fr;
  gap: 0 var(--tl-gap);
  margin-bottom: 40px;
  position: relative;
}
.tl-year-group::before {
  left: calc(var(--tl-label-w) + 12px);   /* 기존 92px과 동일 */
}


/* 연도 레이블 */
.tl-year-label {
  position: sticky;
  top: 148px;        /* 네비바 68 + 탭바 약 62 + 여유 */
  align-self: start;
}


/* 항목 리스트 */
.tl-list { list-style: none; margin: 0; padding: 0; }
.tl-list-item {
  display: flex; align-items: baseline; gap: 16px;
  padding: 12px 16px 12px 24px;
  border-left: 2px solid var(--gray-100);
  margin-bottom: 4px;
  border-radius: 0 8px 8px 0;
  transition: background .2s, border-color .2s;
  position: relative;
}

/* 리스트 항목 왼쪽 원형 점 */
.tl-list-item::before {
  content: '';
  position: absolute; left: -6px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px;
  background: var(--white); border: 2px solid var(--gray-200);
  border-radius: 50%;
  transition: border-color .2s, background .2s;
}
.tl-list-item:hover { background: var(--blue-50); border-left-color: var(--primary); }
.tl-list-item:hover::before { border-color: var(--primary); background: var(--primary); }

.tl-month {
  flex-shrink: 0;
  font-size: .78rem; font-weight: 700;
  color: var(--primary); letter-spacing: .02em;
  min-width: 52px;
}
.tl-text { font-size: .875rem; color: var(--gray-700); line-height: 1.6; }
.tl-text em {
  font-style: normal; display: inline-block; margin-top: 2px;
  font-size: .78rem; font-weight: 600; color: var(--accent);
}

/* ════════════════════════════════════════════════════════════
   팀 카드 (4열)
════════════════════════════════════════════════════════════ */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.team-card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  text-align: center; overflow: hidden;
  transition: var(--transition);
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* 아바타 배경 영역 */
.team-avatar {
  height: 200px;
  background: linear-gradient(145deg, var(--blue-50) 0%, #C8E6FF 100%);
  display: flex; align-items: center; justify-content: center;
}

/* 아이콘 원형 래퍼 */
.ta-icon {
  width: 80px; height: 80px;
  border-radius: 50%; background: var(--white);
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
}
.ta-icon svg { width: 36px; height: 36px; fill: var(--primary); }

.team-body { padding: 16px 18px 20px; }
.team-name { font-size: .95rem; font-weight: 700; color: var(--gray-900); margin-bottom: 4px; }
.team-role { font-size: .72rem; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.team-bio  { font-size: .78rem; color: var(--gray-500); line-height: 1.65; }

/* CEO 카드 — 실제 사진 */
.team-avatar-photo { height: 240px; background: #f4f5f7; overflow: hidden; padding: 0; }
.ta-photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

/* CEO bio 리스트 */
.team-bio-list { list-style: none; padding: 0; margin: 0; text-align: left; }
.team-bio-list li {
  font-size: .74rem; color: var(--gray-600); line-height: 1.55;
  padding: 4px 0 4px 14px; position: relative;
  border-bottom: 1px solid var(--gray-100);
}
.team-bio-list li:last-child { border-bottom: none; }
.team-bio-list li::before {
  content: ''; position: absolute; left: 0; top: 11px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--primary);
}

/* CEO 카드 텍스트 왼쪽 정렬 */
.team-card-ceo { text-align: left; }
.team-card-ceo .team-name { font-size: 1rem; }
.team-card-ceo .team-body { padding: 14px 16px 18px; }

/* 기술고문 아바타 */
.ta-advisor { background: linear-gradient(145deg, #E8F5E9, #C8E6C9); }
.ta-icon-advisor {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--white); box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
}
.ta-icon-advisor svg { width: 36px; height: 36px; fill: #2E7D32; }

/* 배지 변형 */
.team-badge-ceo {
  display: inline-block; font-size: .68rem; font-weight: 700;
  padding: 3px 10px; border-radius: 100px;
  background: #E3F2FD; color: var(--primary);
  border: 1px solid #90CAF9; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 6px;
}
.team-badge-advisor {
  display: inline-block; font-size: .68rem; font-weight: 700;
  padding: 3px 10px; border-radius: 100px;
  background: #E8F5E9; color: #2E7D32;
  border: 1px solid #A5D6A7; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 6px;
}

/* bio 서브리스트 (수상 이력) */
.team-bio-sublist { list-style: none; padding: 4px 0 0 10px; margin: 4px 0 0; }
.team-bio-sublist li {
  font-size: .76rem; color: var(--gray-500); line-height: 1.6;
  padding: 2px 0 2px 14px; position: relative; border-bottom: none;
}
.team-bio-sublist li::before {
  content: '';
  position: absolute; left: 2px; top: 10px;
  width: 4px; height: 4px; border-radius: 50%;
  background: #2E7D32; opacity: .6;
}

/* ════════════════════════════════════════════════════════════
   HTML 기반 모던 조직도
════════════════════════════════════════════════════════════ */
.org-chart-wrap { padding: 20px 0 60px; overflow-x: auto; }

/* 각 레벨 행 */
.org-level {
  display: flex; justify-content: center;
  gap: 40px; position: relative;
}
.org-lv0 { margin-bottom: 0; }

/* 노드 공통 */
.org-node {
  display: flex; align-items: center; gap: 14px;
  border-radius: 16px; padding: 14px 24px;
  transition: transform .2s, box-shadow .2s;
}
.org-node:hover { transform: translateY(-2px); }

/* CEO 노드 */
.org-node-ceo {
  background: linear-gradient(135deg, #1565C0, #1976D2);
  box-shadow: 0 8px 32px rgba(21,101,192,.3);
  color: var(--white); padding: 16px 36px;
}
.org-node-ceo .org-node-icon {
  width: 48px; height: 48px; background: rgba(255,255,255,.2);
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.org-node-ceo .org-node-icon svg { width: 24px; height: 24px; fill: var(--white); }
.org-node-ceo .org-node-body { display: flex; flex-direction: column; gap: 3px; }
.org-node-role {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; opacity: .75;
}
.org-node-name { font-size: 1rem; font-weight: 800; }

/* 수직 연결선 */
.org-connector-v    { width: 2px; height: 36px; background: linear-gradient(to bottom, #90CAF9, #BBDEFB); margin: 0 auto; }
.org-connector-v-sm { width: 2px; height: 24px; background: #BBDEFB; margin: 0 auto; }
.org-connector-v-xs { width: 2px; height: 16px; background: #E3F2FD; margin: 0 auto; }

/* 수평 분기선 */
.org-branch-h    { width: 40%; height: 2px; background: linear-gradient(to right, transparent, #90CAF9, transparent); margin: 0 auto; }
.org-branch-h-sm { width: 70%; height: 1px; background: linear-gradient(to right, transparent, #BBDEFB, transparent); margin: 0 auto; }

/* Lv1 분기 컬럼 */
.org-branch-col { display: flex; flex-direction: column; align-items: center; flex: 1; max-width: 340px; }

/* 부서 노드 */
.org-node-dept {
  background: var(--white); border: 1.5px solid #90CAF9;
  box-shadow: 0 4px 16px rgba(21,101,192,.08);
  width: 100%; justify-content: center;
}
.org-dept-rd { border-color: #80DEEA; }
.org-node-dept .org-node-icon {
  width: 40px; height: 40px; background: #EBF4FF;
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.org-node-dept .org-node-icon svg { width: 20px; height: 20px; fill: var(--primary); }
.org-dept-rd .org-node-icon { background: #E0F7FA; }
.org-dept-rd .org-node-icon svg { fill: #00838F; }
.org-node-label { font-size: .95rem; font-weight: 800; color: var(--gray-900); letter-spacing: -.01em; }

/* Lv2 하위 */
.org-lv2 { gap: 12px; flex-wrap: wrap; justify-content: center; }
.org-leaf-col { display: flex; flex-direction: column; align-items: center; }
.org-node-leaf {
  flex-direction: column; background: #F8FBFF;
  border: 1px solid #E3EFF9; border-radius: 14px;
  padding: 14px 12px; gap: 8px; text-align: center;
  width: auto; min-width: 90px; max-width: 106px;   /* 글자 길이에 맞게 칸이 늘어남 (영어는 2줄로) */
  word-break: keep-all;                             /* '전략기획팀' 같은 단어를 중간에서 자르지 않음 */
  font-size: .78rem; font-weight: 700; color: var(--gray-700);
  box-shadow: 0 2px 8px rgba(21,101,192,.04);
}
.org-node-leaf:hover {
  background: #EBF4FF; border-color: #90CAF9;
  transform: translateY(-3px); box-shadow: 0 6px 20px rgba(21,101,192,.1);
}
.org-leaf-icon {
  width: 36px; height: 36px; border-radius: 10px; background: #EBF4FF;
  display: flex; align-items: center; justify-content: center; margin: 0 auto;
}
.org-leaf-icon svg { width: 18px; height: 18px; fill: var(--primary); }

/* 하위 노드 역할별 액센트 */
.org-leaf-acc .org-leaf-icon { background: #E3F2FD; }
.org-leaf-acc .org-leaf-icon svg { fill: #1E88E5; }
.org-leaf-mkt .org-leaf-icon { background: #F3E5F5; }
.org-leaf-mkt .org-leaf-icon svg { fill: #8E24AA; }
.org-leaf-hr  .org-leaf-icon { background: #E8F5E9; }
.org-leaf-hr  .org-leaf-icon svg { fill: #00897B; }
.org-leaf-rnd .org-leaf-icon { background: #FFEBEE; }
.org-leaf-rnd .org-leaf-icon svg { fill: #E53935; }
.org-leaf-sw  .org-leaf-icon { background: #E8EAF6; }
.org-leaf-sw  .org-leaf-icon svg { fill: #3949AB; }
.org-leaf-reg .org-leaf-icon { background: #E8F5E9; }
.org-leaf-reg .org-leaf-icon svg { fill: #2E7D32; }
@media (max-width: 640px) {
  .hist-tabs { margin: 28px 0 24px; }
  .hist-tab  { padding: 9px 16px; font-size: .88rem; }

  .tl-year-group { grid-template-columns: 1fr; gap: 10px; margin-bottom: 28px; }
  .tl-year-group::before { display: none; }
  .tl-year-label {
    position: static; text-align: left;
    font-size: 1.35rem; padding-bottom: 4px;
  }
  .tl-list-item { flex-direction: column; gap: 2px; padding: 10px 12px 10px 18px; }
  .tl-month { min-width: 0; }
}
/* about.css 맨 아래에 추가 — 찾아오는 길 탭 전용 보정 */
#atab-panel-location .contact-info {
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

/* ==================== contact.css ==================== */
/* ============================================================
   css/contact.css
   ─────────────────────────────────────────────────────────────
   목적: Contact 페이지의 문의 폼, 연락처 정보, 지도 탭,
         개인정보 동의 체크박스, 빠른 링크 컴포넌트를
         정의합니다.
   포함: .contact-layout (2열 레이아웃),
         .contact-form-card / .form-group / .form-input 등 (폼),
         .ci-cards / .ci-card (연락처 정보 카드),
         .map-tabs / .map-box (지도 탭),
         .privacy-check (개인정보 체크박스),
         .success-msg (제출 성공 메시지),
         .quick-links / .ql-item (빠른 링크)
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   Contact 페이지 기본 레이아웃 (좌: 폼 / 우: 정보)
════════════════════════════════════════════════════════════ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

/* ════════════════════════════════════════════════════════════
   문의 폼 카드
════════════════════════════════════════════════════════════ */
.contact-form-card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xl);
  padding: 44px;
  box-shadow: var(--shadow-md);
}

.cf-title { font-size: 1.4rem; font-weight: 800; color: var(--gray-900); margin-bottom: 6px; }
.cf-sub   { font-size: .88rem; color: var(--gray-400); margin-bottom: 28px; }

/* ── 폼 그룹 ────────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }

.form-label {
  display: block; font-size: .83rem; font-weight: 600;
  color: var(--gray-700); margin-bottom: 7px;
}
/* 필수 필드 표시 */
.form-label .req { color: var(--primary); margin-left: 2px; }

/* 입력 요소 공통 스타일 */
.form-input,
.form-select,
.form-textarea {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: .88rem; color: var(--gray-800);
  background: var(--off-white);
  transition: var(--transition);
  outline: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--primary);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(21,101,192,.1);
}
.form-textarea { min-height: 130px; resize: vertical; }

/* 2열 폼 행 */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* 제출 버튼 */
.form-submit {
  width: 100%; padding: 14px;
  background: var(--primary); color: var(--white);
  border: none; border-radius: var(--radius-sm);
  font-size: .97rem; font-weight: 600; cursor: pointer;
  transition: var(--transition);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.form-submit:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.form-submit svg   { width: 18px; height: 18px; fill: var(--white); }

/* ── 성공 메시지 ────────────────────────────────────────────── */
/* display: none → display: flex 으로 JS에서 토글 */
.success-msg {
  display: none;
  background: #E8F5E9;
  border: 1px solid #A5D6A7;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: #2E7D32; font-weight: 500;
  margin-top: 14px;
  align-items: center; gap: 10px;
}

/* ── 오류 메시지 ─────────────────────────────────────────────── */
.error-msg {
  display: none;
  background: #FFEBEE;
  border: 1px solid #EF9A9A;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: #C62828; font-weight: 500;
  margin-top: 14px;
  align-items: center; gap: 10px;
  line-height: 1.5;
}
.error-msg a {
  color: #C62828;
  font-weight: 600;
  text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════
   개인정보 동의 체크박스
════════════════════════════════════════════════════════════ */
.privacy-check { margin-bottom: 20px; }

/* 커스텀 체크박스 래퍼 */
.check-label {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer; user-select: none;
}

/* 실제 input 숨김 */
.check-label input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }

/* 커스텀 체크박스 박스 */
.check-custom {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px;
  border: 2px solid var(--gray-300); border-radius: 4px;
  background: var(--white); transition: var(--transition);
  display: flex; align-items: center; justify-content: center;
}

/* 체크된 상태 */
.check-label input:checked ~ .check-custom {
  background: var(--primary);
  border-color: var(--primary);
}

/* 체크 표시 (체크마크 SVG 대신 CSS로 그림) */
.check-label input:checked ~ .check-custom::after {
  content: '';
  width: 10px; height: 6px;
  border-left: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(-45deg) translateY(-1px);
  display: block;
}

.check-text   { font-size: .82rem; color: var(--gray-600); line-height: 1.5; }
.privacy-link { color: var(--primary); margin-left: 4px; text-decoration: underline; font-size: .8rem; }

/* ════════════════════════════════════════════════════════════
   연락처 정보 영역 (우측 컬럼)
════════════════════════════════════════════════════════════ */
.contact-info h3   { font-size: 1.3rem; font-weight: 800; color: var(--gray-900); margin-bottom: 8px; }
.contact-info .ci-desc { font-size: .88rem; color: var(--gray-400); line-height: 1.75; margin-bottom: 28px; }

/* 연락처 카드 목록 */
.ci-cards { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }

.ci-card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-xs);
  display: flex; gap: 14px; align-items: flex-start;
  transition: var(--transition);
}
.ci-card:hover { border-color: rgba(21,101,192,.25); box-shadow: var(--shadow); }

/* 카드 아이콘 */
.ci-card-icon {
  width: 40px; height: 40px;
  border-radius: 10px; background: var(--blue-50);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ci-card-icon svg { width: 20px; height: 20px; fill: var(--primary); }

/* 카드 텍스트 */
.cci-label { font-size: .68rem; color: var(--gray-400); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 3px; }
.cci-val   { font-size: .88rem; font-weight: 600; color: var(--gray-800); margin-bottom: 1px; }
.cci-sub   { font-size: .76rem; color: var(--gray-400); }

/* ════════════════════════════════════════════════════════════
   지도 탭
════════════════════════════════════════════════════════════ */
.map-tabs { display: flex; gap: 8px; margin-bottom: 10px; }

.map-tab {
  padding: 6px 14px; border-radius: 100px;
  font-size: .79rem; font-weight: 600;
  background: var(--off-white); color: var(--gray-500);
  border: 1.5px solid var(--gray-100);
  cursor: pointer; transition: var(--transition);
}
.map-tab.active { background: var(--primary); color: var(--white); border-color: var(--primary); }

/* 지도 iframe 래퍼 */
.map-box {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  height: 280px;
}
.map-box iframe { width: 100%; height: 100%; border: none; display: block; }

/* ════════════════════════════════════════════════════════════
   빠른 링크 목록
════════════════════════════════════════════════════════════ */
.quick-links { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

.ql-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
  cursor: pointer;
}
.ql-item:hover { border-color: rgba(21,101,192,.25); box-shadow: var(--shadow); transform: translateX(4px); }

.ql-icon {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--blue-50);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ql-icon svg { width: 18px; height: 18px; fill: var(--primary); }

.ql-title { font-size: .9rem; font-weight: 700; color: var(--gray-800); margin-bottom: 2px; }
.ql-sub   { font-size: .76rem; color: var(--gray-400); }

/* 빠른 링크 화살표 */
.ql-arrow { width: 16px; height: 16px; fill: var(--gray-300); margin-left: auto; flex-shrink: 0; transition: var(--transition); }
.ql-item:hover .ql-arrow { fill: var(--primary); }
/* 허니팟 — 시각적으로 완전히 숨기되 봇에게는 보이게 */
.hp-field{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* 동의 안내 박스 */
.privacy-consent .pc-box{background:#f7f9fb;border:1px solid #e3e8ee;border-radius:8px;padding:14px 16px;margin-bottom:10px}
.privacy-consent .pc-title{font-weight:600;font-size:.92rem;margin:0 0 8px;color:#1a2b3c}
.privacy-consent .pc-list{margin:0 0 8px;padding-left:18px}
.privacy-consent .pc-list li{font-size:.85rem;line-height:1.7;color:#4a5866}
.privacy-consent .pc-note{margin:0;font-size:.8rem;color:#78838f}

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