:root {
  --max-w: 1200px;
  --accent: #06b6d4;
  --muted: #6b7280;
  --font-size: 16px;
  --background: #ffffff;
  --foreground: oklch(0.145 0 0);
  --card: #ffffff;
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: #030213;
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.95 0.0058 264.53);
  --secondary-foreground: #030213;
  --muted: #ececf0;
  --muted-foreground: #717182;
  --accent: #e9ebef;
  --accent-foreground: #030213;
  --destructive: #d4183d;
  --destructive-foreground: #ffffff;
  --border: rgba(0, 0, 0, 0.1);
  --input: transparent;
  --input-background: #f3f3f5;
  --switch-background: #cbced4;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: oklch(0.708 0 0);
}

/* Base Styles */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Noto Sans KR', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin: 0;
  color: #0b1220;
  background: #fff;
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 20px;
}

/* Header Styles */
header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  z-index: 50;
}

/* Navigation */
.nav-links a {
  color: #374151;
  text-decoration: none;
}

/* Hero Section */
.hero {
  min-height: 520px;
  position: relative;
  background-size: cover;
  background-position: center;
  color: white;
}

/* Cards and Grids */
.grid {
  display: grid;
  gap: 20px;
}

.card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

/* Badges and Pills */
.badge {
  display: inline-block;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.client-pill {
  /* Remove box background so only the logo shows */
  padding: 6px 8px;
  border-radius: 0;
  background: transparent;
  border: none;
  color: inherit;
  min-width: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* for pseudo background */
}

/* Footer */
footer {
  /* make footer visually continue the page-wide gradient by being transparent
     and add a subtle backdrop blur + faint top border for separation */
  background: transparent;
  color: #e6eef8;
  padding: 48px 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255, 255, 255, 0.03);
}

/* Animations */
@keyframes gridMove {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(50px);
  }
}

/* Responsive */
@media (max-width: 767px) {
  .nav-links {
    display: none;
  }

  .mobile-toggle {
    display: block;
  }
}

/* Utilities */
.muted {
  color: var(--muted);
}

/* Custom Components */
.btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  color: #fff;
  text-decoration: none;
}

/* 비전 섹션 스타일 */
.vision-section {
  position: relative;
  overflow: hidden;
  /* soften local ornaments so the page-wide gradient reads as the single background */
  background: radial-gradient(1200px 600px at 10% 0%, rgba(34, 197, 253, 0.06), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(59, 130, 246, 0.05), transparent 60%),
    /* very-light linear tint to preserve legibility while letting body::before show through */
    linear-gradient(180deg, rgba(5, 26, 51, 0.08), rgba(6, 44, 73, 0.06) 60%, rgba(7, 27, 47, 0.08));
  color: #fff;
  text-align: center;
  padding: 80px 20px;
}

.vision-title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 8px;
  /* shift accent from green to blue/navy tones */
  background: linear-gradient(90deg, #7dd3fc 0%, #60a5fa 45%, #0b3d91 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.vision-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 18px;
}

.neon-divider {
  width: 120px;
  height: 3px;
  margin: 0 auto 28px auto;
  border-radius: 999px;
  /* use blue tones instead of green */
  background: linear-gradient(90deg, rgba(125, 211, 252, 1), rgba(96, 165, 250, 1));
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.6), 0 0 28px rgba(96, 165, 250, 0.28);
}

.vision-section .lead {
  font-size: 1.3rem;
  margin-bottom: 40px;
  opacity: 0.85;
}

.vision-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  margin-bottom: 36px;
}


/* Glassmorphism cards */
.vision-card {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  backdrop-filter: blur(10px);
}

.vision-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  background: radial-gradient(600px 200px at -10% -10%, rgba(56, 189, 248, 0.18), transparent 40%),
    /* replace greenish tint with blue tint */
    radial-gradient(400px 200px at 110% 120%, rgba(59, 130, 246, 0.14), transparent 45%);
  pointer-events: none;
}

.vision-card-inner {
  position: relative;
  padding: 26px 22px;
  z-index: 1;
}

.vision-card h3 {
  margin: 10px 0 8px 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.vision-card p {
  font-size: 0.95rem;
  color: #d1e8ff;
  opacity: 0.9;
}

.vision-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(125, 211, 252, 0.2) inset;
  border-color: rgba(125, 211, 252, 0.5);
}

.vision-tagline {
  font-size: 1.3rem;
  font-style: italic;
  /* blue/navy tagline gradient */
  background: linear-gradient(90deg, #7dd3fc 0%, #60a5fa 50%, #0b3d91 100%);
  background-clip: text;
  /* 표준 속성 */
  -webkit-background-clip: text;
  /* Chrome, Safari 등 WebKit용 */

  -webkit-text-fill-color: transparent;
  /* Chrome, Safari용 */
  color: transparent;
  /* fallback */

  margin-top: 10px;
}

/* ===== Yearly strategy emphasis ===== */
#yearly-strategy {
  /* keep the section layered so we can add a soft background-image behind content */
  position: relative;
  overflow: hidden;
  /* ensure enough breathing room and blend with vision: use a very subtle
     transparent overlay so the body::before gradient reads continuously */
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  background: linear-gradient(180deg, rgba(7, 27, 47, 0.06), rgba(7, 27, 47, 0.06));
}

/* translucent photograph behind the yearly strategy section; sits between
   the global body background (body::before) and the section content */
#yearly-strategy::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('../img/vision.jpg');
  background-size: cover;
  background-position: center center;
  opacity: 0.16;
  /* tweakable: 0.08 - 0.18 depending on desired strength */
  filter: brightness(0.86) saturate(0.95);
}

/* make sure the section inner content sits above the photo */
#yearly-strategy .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {

  /* reduce image strength on small screens for readability */
  #yearly-strategy::before {
    opacity: 0.08;
  }
}

/* Make the Company Intro section visually match the site-wide background
   by using a very light transparent overlay so body::before shows through. */
#company {
  /* Remove the heavier Tailwind gradient and rely on the global background
     while keeping a tiny tint for legibility of white text/ornaments. */
  background: linear-gradient(180deg, rgba(5, 26, 51, 0.06), rgba(6, 44, 73, 0.06));
  color: inherit;
}

/* Slightly tone down the decorative orbs/grid inside company so they blend */
#company .absolute[inset-0].opacity-20,
#company .particle-container::before,
#company .particle-container::after {
  opacity: 0.14;
  /* make animated grid/particles more subtle */
}

/* === Override green accents inside the Company section to blue/navy tones === */
/* Replace the per-card decorative overlay (inline bg-gradient-to-*) with a blue tint */
#company .group>.absolute {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.18), rgba(11, 61, 145, 0.12)) !important;
}

/* Make the small icon chips use blue/navy instead of green/teal */
#company .w-12.h-12 {
  background: linear-gradient(135deg, #3b82f6, #0b3d91) !important;
  box-shadow: 0 10px 20px rgba(11, 61, 145, 0.12) !important;
}

/* Convert any green-tinted text inside #company to blue-ish tones for contrast */
#company .text-green-100,
#company .text-green-100 * {
  color: rgba(125, 211, 252, 0.9) !important;
  /* soft cyan-blue */
}

/* If any elements used explicit green gradients, force a blue/navy fallback */
#company [class*="from-green"],
#company [class*="from-teal"],
#company [class*="to-emerald"],
#company [class*="to-emerald"] * {
  background-image: linear-gradient(90deg, #7dd3fc, #0b3d91) !important;
}

/* Slightly adjust orb colors within the company section to lean bluer */
#company .orb-1 {
  background: radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.6), transparent 60%);
}

#company .orb-2 {
  background: radial-gradient(circle at 70% 70%, rgba(59, 130, 246, 0.45), transparent 60%);
}

/* Ensure bullet markers and small accent dots in lists use blue */
#company .w-2.h-2.rounded-full {
  background: linear-gradient(90deg, #60a5fa, #0b3d91) !important;
}

@media (max-width: 767px) {

  /* Keep the blue accents softer on mobile */
  #company .group>.absolute {
    opacity: 0.14 !important;
  }

  #company .w-12.h-12 {
    box-shadow: 0 8px 18px rgba(11, 61, 145, 0.10) !important;
  }
}

#yearly-strategy .yearly-title {
  font-size: 3.0rem;
  /* slightly reduced to keep focus on content */
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
  /* force a blue gradient for the section title */
  background: linear-gradient(90deg, #7dd3fc 0%, #3b82f6 60%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@media (max-width: 767px) {
  #yearly-strategy .yearly-title {
    font-size: 2rem;
  }
}

/* Revenue counter styles removed per request */


/* Slightly increase the card titles in the yearly section for clarity */
#yearly-strategy .card h3 {
  font-size: 1.2rem;
  color: #0b1220;
  /* dark title on white card */
}

/* Increase body text inside yearly cards for readability and contrast */
#yearly-strategy .card p,
#yearly-strategy .card ul li,
#yearly-strategy .card .lead {
  font-size: 1.06rem;
  color: #0b1220;
  /* dark, high-contrast on white background */
  line-height: 1.6;
}

@media (max-width: 767px) {

  #yearly-strategy .card p,
  #yearly-strategy .card ul li,
  #yearly-strategy .card .lead {
    font-size: 0.97rem;
  }
}

/* If desired, add a subtle accent when counting finishes (keeps minimal by default) */
/* finishFlash animation removed (revenue counter not used) */

/* Icon chip */
.vision-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* move accent from green to blue */
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.35), rgba(59, 130, 246, 0.26));
  box-shadow: 0 10px 20px rgba(56, 189, 248, 0.15);
}

.vision-icon svg {
  width: 24px;
  height: 24px;
  color: #e6faff;
}

/* Background ornaments */
.bg-ornaments {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.orb {
  position: absolute;
  filter: blur(30px);
  opacity: 0.35;
  animation: float 10s ease-in-out infinite;
}

.orb-1 {
  width: 380px;
  height: 380px;
  left: -80px;
  top: -60px;
  background: radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.6), transparent 60%);
}

.orb-2 {
  width: 300px;
  height: 300px;
  right: -60px;
  top: 20%;
  background: radial-gradient(circle at 70% 70%, rgba(59, 130, 246, 0.45), transparent 60%);
  animation-delay: 1s;
}

.grid-lines {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.25;
  animation: gridMove 22s linear infinite;
}

/* Page-wide smooth background to remove harsh section boundaries
   We place a fixed pseudo-element behind the page and force any inline
   per-section linear-gradients to be transparent so the global gradient shows through. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
      #021022 0%,
      /* hero/top */
      #05233a 12%,
      #0a3650 28%,
      /* business-ish */
      #113a57 42%,
      #15364f 56%,
      /* certificates/recruit transition */
      #0f2b43 72%,
      #071a2b 90%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Override inline per-section gradients so boundaries fade into the global background */
section[style*="linear-gradient"] {
  background: transparent !important;
}

/* ===== Vision carousel ===== */
.vision-carousel {
  position: relative;
  max-width: 980px;
  margin: 0 auto 18px;
}

.v-viewport {
  overflow: hidden;
  padding: 10px 0 20px;
}

.v-track {
  display: flex;
  gap: 24px;
  will-change: transform;
  transition: transform 400ms ease;
}

.v-slide {
  flex: 0 0 80%;
  transition: transform 400ms ease, opacity 400ms ease;
  opacity: 0.6;
}

@media (min-width: 640px) {
  .v-slide {
    flex-basis: 70%;
  }
}

@media (min-width: 1024px) {
  .v-slide {
    flex-basis: 60%;
  }
}

.v-slide .vision-card {
  transform: scale(0.92);
  transition: transform 400ms ease, box-shadow 300ms ease;
}

.v-slide.is-active {
  opacity: 1;
}

.v-slide.is-active .vision-card {
  transform: scale(1);
}

.v-slide.is-prev .vision-card,
.v-slide.is-next .vision-card {
  transform: scale(0.96);
  opacity: 0.9;
}

.vc-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(52, 211, 153, 0.25));
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #e6faff;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.vc-btn:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 10px 24px rgba(56, 189, 248, 0.3);
}

.vc-btn i,
.vc-btn svg {
  width: 22px;
  height: 22px;
}

.vc-prev {
  left: -8px;
}

.vc-next {
  right: -8px;
}

@media (min-width: 768px) {
  .vc-prev {
    left: -22px;
  }

  .vc-next {
    right: -22px;
  }
}

.vc-dots {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 6px;
}

.vc-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.4);
  transition: transform .2s ease, background .2s ease;
}

.vc-dot.is-active {
  background: linear-gradient(135deg, #7dd3fc, #34d399);
  transform: scale(1.2);
}


/* 인재채용, 오시는길 섹션 간 여백 추가 */
#recruit+section {
  margin-top: 6rem;
  /* 필요에 따라 5rem ~ 8rem 조정 가능 */
}

/* 인재 채용 & 오시는 길 섹션 내부 여백 조절 */
#recruit,
#recruit+section {
  padding-top: 4rem;
  /* 상단 여백 */
  padding-bottom: 4rem;
  /* 하단 여백 */
}

#recruit .container,
#recruit+section .container {
  padding-left: 1.5rem;
  /* 좌측 여백 */
  padding-right: 1.5rem;
  /* 우측 여백 */
}

/* Sticky header로 가려지는 문제 방지: 앵커 스크롤 오프셋 */
#recruit {
  scroll-margin-top: 100px;
}

@media (max-width: 767px) {
  #recruit {
    scroll-margin-top: 120px;
  }
}

/* ===== Recruitment section styles ===== */
.recruit-steps .step {
  position: relative;
  padding-left: 28px;
  margin-bottom: 14px;
}

.recruit-steps .step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #38bdf8, #34d399);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

.recruit-steps .step::after {
  content: '';
  position: absolute;
  left: 5.5px;
  top: 22px;
  width: 1px;
  height: calc(100% - 6px);
  background: rgba(148, 163, 184, 0.45);
}

.recruit-steps .step:last-child::after {
  display: none;
}

.benefit-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(52, 211, 153, 0.12));
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #e6faff;
  font-weight: 500;
}

.benefit-badge svg {
  width: 18px;
  height: 18px;
}

/* 오시는 길 섹션 제목 스타일 */
section:last-of-type h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 16px;
}

/* 카드 내부 글씨 색상을 항상 어둡게 */
.card {
  color: #0b1220;
  /* 진한 검은색 */
}

/* 카드 제목(h3) 스타일 */
.card h3 {
  margin-top: 12px;
  font-size: 1.1rem;
  color: inherit;
  /* 부모 카드 색상을 그대로 상속 */
  font-weight: 600;
}

/* ===== Make Business cards match Company (기업선언문) visual style ===== */
#business .card {
  /* glass effect like company cards */
  background: rgba(255, 255, 255, 0.08) !important;
  /* white/10 feel */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 1rem !important;
  /* rounded-3xl feel */
  padding: 2rem !important;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.12) !important;
  color: #e6faff !important;
  /* white-ish text like company cards */
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

/* Business card image styling */
.business-card-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 0.75rem;
  margin-bottom: 12px;
  display: block;
}

@media (max-width: 767px) {
  .business-card-img {
    height: 110px;
  }
}

#business .card {
  /* softer glass effect to match surrounding sections */
  background: rgba(255, 255, 255, 0.04) !important;
  /* lighter white tint */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 1rem !important;
  padding: 1.6rem !important;
  box-shadow: 0 6px 12px rgba(2, 6, 23, 0.06) !important;
  color: rgba(230, 250, 255, 0.95) !important;
  /* slightly muted white */
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

#business .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.24) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Titles and body text inside business cards should match company styling */
#business .card h3 {
  /* reduce size to avoid wrapping on most viewports and keep one-line titles */
  font-size: 1.25rem;
  /* ~20px */
  color: #ffffff !important;
  margin-bottom: 0.5rem;
  font-weight: 700;
  white-space: nowrap;
  /* prevent line breaks */
  overflow: hidden;
  /* ensure it doesn't overflow layout */
  text-overflow: ellipsis;
  /* show ellipsis if too long */
}

#business .card p,
#business .card ul li {
  color: rgba(230, 250, 255, 0.95) !important;
  /* cyan/white tone */
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Badges inside business cards: ensure icon color remains white */
#business .badge {
  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.12);
  /* force blue/navy gradient for badges in business */
  background: linear-gradient(90deg, #2563eb 0%, #06b6d4 100%) !important;
  color: #fff !important;
}

#business .badge {
  box-shadow: 0 6px 18px rgba(56, 189, 248, 0.08);
  /* subtler blue gradient for badges */
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.16), rgba(6, 182, 212, 0.10)) !important;
  color: #fff !important;
}

/* For smaller screens reduce title size a bit to avoid wrapping */
@media (max-width: 767px) {
  #business .card h3 {
    font-size: 1.375rem;
  }

  #business .card {
    padding: 1.25rem !important;
  }
}

/* soften the business section tint so it blends with the page */
#business {
  background: linear-gradient(180deg, rgba(5, 26, 51, 0.04), rgba(6, 44, 73, 0.04)) !important;
  color: inherit;
}

/* more subtle hover/border for cards */
#business .card:hover {
  border-color: rgba(96, 165, 250, 0.10) !important;
  box-shadow: 0 12px 28px rgba(11, 61, 145, 0.08) !important;
}

/* Ensure icons remain readable */
#business .badge i,
#business .badge svg {
  color: #fff !important;
}

/* list accents: softer blue */
#business .card ul li .text-blue-500,
#business .card ul li span {
  color: rgba(125, 211, 252, 0.72) !important;
}


/* 협력사/고객사 로고 무한 가로 스크롤 애니메이션 (사이드 진입/퇴장) */
/* Seamless marquee with duplicated content: animate half-length for perfect loop */
@keyframes marqueeLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes marqueeRight {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}


.client-row {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  margin: 0 auto 2rem auto;
  /* 흰색 스트립 배경: 로고가 지나가는 트랙만 밝게 보이도록 함 (조금 약하게)
    - 가로 패딩을 제거하고 컨테이너 패딩을 상쇄해서 스트립이 더 넓게 보이도록 함 */
  /* increase opacity so the strip reads as bright white while still blending slightly */
  background: rgba(255, 255, 255, 0.92);
  /* Make all client rows share the same height and vertically center the track */
  display: flex;
  align-items: center;
  padding: 12px 0;
  min-height: 144px;
  /* accommodates .logo-xlarge (120px) + vertical padding */
  border-radius: 12px;
  /* Make the strip span the full viewport and remain centered regardless of container padding.
    Use the full-bleed centering trick so the element aligns to the viewport center while
    living inside a centered container. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 20px;
  /* preserve some inner padding so logos don't touch edges */
  padding-right: 20px;
  /* 좌우 가장자리에서 자연스럽게 사라지도록 마스크 (페이드 영역을 살짝 줄임) */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
}

.client-row .client-track {
  display: flex;
  gap: 1.5rem;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  animation: marqueeLeft 30s linear infinite;
  align-items: center;
  /* vertical center within the white strip */
}

/* 줄별 방향/속도 다르게 (기차 느낌) */
.client-row.row-1 .client-track {
  animation-name: marqueeLeft;
  animation-duration: 35s;
}

.client-row.row-2 .client-track {
  animation-name: marqueeRight;
  animation-duration: 38s;
}

/* 호버 시 일시정지 (선택 기능) */
.client-row:hover .client-track {
  animation-play-state: paused;
}

/* ===== 고객사 애니메이션 전용 스타일 ===== */

.client-pill {
  padding: 6px 8px;
  font-size: 1rem;
  background: transparent;

  .business-section {
    position: relative;
    overflow: hidden;
    /* make business background semi-transparent to blend with page gradient */
    background: radial-gradient(600px 300px at 10% 10%, rgba(125, 211, 252, 0.04), transparent 30%),
      radial-gradient(500px 240px at 90% 30%, rgba(52, 211, 153, 0.03), transparent 35%),
      linear-gradient(180deg, rgba(6, 32, 56, 0.6) 0%, rgba(7, 43, 70, 0.56) 60%);
    color: inherit;
    padding: 80px 20px;
  }
}

/* 로고 이미지 규격 */
.client-logo {
  /* 통일된 시각을 위해 고정 높이 사용 (비율 유지) */
  height: 56px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 2;
  /* make sure logo sits above backdrop */
}

/* 일부 로고(한국관광대학, 구주제약 등) 크기 보정: 더 크게 보이게 함 */
.logo-large {
  /* further reduced per design request */
  height: 80px;
  width: auto;
  max-width: 220px;
}

/* Slightly bigger variant for selected logos when a subtle emphasis is desired */
.logo-large-plus {
  height: 88px;
  width: auto;
  max-width: 240px;
}

/* Extra-large for emphasis on particular logos */
.logo-xlarge {
  height: 120px;
  width: auto;
  max-width: 320px;
}

/* Medium size for slight emphasis without dominating the row */
.logo-medium {
  height: 72px;
  width: auto;
  max-width: 200px;
}

/* 작은 로고 전용(필요시 사용) */
.logo-small {
  /* further reduced so large-looking logos don't dominate the row */
  height: 48px;
  width: auto;
  max-width: 140px;
}

/* Slight size tweak for 대신정보통신 logo (slightly smaller than .logo-large) */
.client-logo.logo-daesin {
  height: 56px;
  /* slightly smaller */
  width: auto;
  max-width: 140px;
}

/* Subtle circular light backdrop behind logos to improve contrast on dark backgrounds */
/* Note: per-logo circular backdrops removed — logos will sit directly on the section background for a cleaner look. */

/* === 인증서 이미지 모달 === */
.image-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
}

.image-modal img {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 80vh;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  animation: fadeIn 0.3s ease;
}

.image-modal #caption {
  margin: 15px auto;
  text-align: center;
  color: #fff;
  font-size: 1.1rem;
}

.image-modal .close {
  position: absolute;
  top: 30px;
  right: 45px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.image-modal .close:hover {
  color: #bbb;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.cert-card {
  text-align: center;
  height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: black;
  /* 인증서용만 검정 글씨 */
}

.card.bg-white\/10 {
  color: white !important;
}

/* ===== Certificates hover animation ===== */
.cert-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cert-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.cert-card img {
  transition: transform 0.35s ease;
}

.cert-card:hover img {
  transform: scale(1.03);
}

/* ===== Hero banner layout stabilization ===== */
/* 두 줄 제목 타이핑 중에도 일정 높이를 확보하여 CTA가 튀지 않도록 고정 공간 확보 */
.banner-heading {
  min-height: 6rem;
  /* base: 약 두 줄 공간 */
}

@media (min-width: 640px) {

  /* sm */
  .banner-heading {
    min-height: 7.5rem;
  }
}

@media (min-width: 1024px) {

  /* lg */
  .banner-heading {
    min-height: 9rem;
  }
}

/* 작은 문단도 살짝 여유 공간을 두어 타이핑 후 등장 시 레이아웃 변동 최소화 */
.banner-sub {
  min-height: 3rem;
}

/* ===== Section spacing: increase gap between consecutive sections ===== */
section+section {
  margin-top: 4.5rem;
  /* ~72px between sections for better breathing room */
}

@media (max-width: 767px) {
  section+section {
    margin-top: 2.5rem;
    /* smaller gap on mobile */
  }
}

/* Exception: do not add extra gap between the hero/banner and the company declaration
   The company section directly follows the hero; keep them touching per user request */
section+#company {
  margin-top: 0 !important;
}

@media (max-width: 767px) {
  section+#company {
    margin-top: 0 !important;
  }
}

/* Count target styling for revenue numbers (removed) */

/* Certificates grid: control columns responsively so mobile shows 2 items
   (or 3 where space allows) instead of one-by-one. Inline styles removed
   from the HTML so these rules take effect. */
.cert-grid {
  display: grid;
  gap: 24px;
  justify-items: center;
  /* Desktop: show 5 items per row as requested */
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1200px) {

  /* Large tablets / small desktops: fall back to 4 columns */
  .cert-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1024px) {

  /* Tablet: show 3 columns */
  .cert-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {

  /* Mobile: show 2 columns */
  .cert-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 420px) {

  /* Small phones: 2 columns with smaller gap */
  .cert-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* 조직도 섹션: 뒤에 전체 배경 이미지를 깔아 자연스러운 배경 연속성 제공 */
.org-chart-wrap {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.org-chart-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('../img/jb.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.10;
  /* 필요 시 0.07 ~ 0.14로 조정 (투명 배경이라 좀 더 낮춤) */
  filter: grayscale(100%) contrast(90%) brightness(1.02);
}

.org-chart-image {
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .org-chart-wrap::before {
    opacity: 0.08;
    background-size: cover;
  }
}

/* 조직도 섹션 전체에 배경 이미지를 적용하고 상하단을 페이드하여 자연스럽게 연결 */
#organization {
  position: relative;
  color: #fff;
  /* 섹션 내부 텍스트 기본 색상 */
  overflow: hidden;
  /* ensure pseudo elements don't overflow */
}

/* 배경 이미지를 ::before에 두어 불투명도 조절이 가능하도록 함 */
#organization::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('../img/jb.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.08;
  /* softened overall image strength for natural transition */
  filter: brightness(0.95) saturate(0.95);
}

/* 위아래로 자연스럽게 연결되는 페이드 그라데이션을 ::after로 추가 (이미지 위에) */
#organization::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* much gentler fade: transparent edges -> light tint through center */
  background: linear-gradient(to bottom,
      rgba(5, 10, 20, 0.0) 0%,
      rgba(5, 10, 20, 0.06) 12%,
      rgba(5, 10, 20, 0.10) 30%,
      rgba(5, 10, 20, 0.10) 70%,
      rgba(5, 10, 20, 0.06) 88%,
      rgba(5, 10, 20, 0.0) 100%);
}

/* 컨텐츠가 오버레이 위에 표시되도록 컨테이너 z-index를 높임 */
#organization .container {
  position: relative;
  z-index: 2;
}

/* 워터마크용 wrapper ::before는 비활성화하여 배경이 두 번 적용되지 않게 함 */
.org-chart-wrap::before {
  display: none !important;
}

@media (max-width: 640px) {

  /* 모바일에서 배경 강도를 약간 낮춰 가독성 확보 */
  #organization::before {
    opacity: 0.07;
  }

  #organization::after {
    background: linear-gradient(to bottom, rgba(5, 10, 20, 0.0) 0%, rgba(5, 10, 20, 0.14) 10%, rgba(5, 10, 20, 0.28) 50%, rgba(5, 10, 20, 0.14) 90%, rgba(5, 10, 20, 0.0) 100%);
  }
}

/* =============================================
   1. 헤더 (Header) - 스크롤 토글 CSS
============================================== */

/* 기본 상태: 헤더를 위로 숨김 */
#siteHeader {
  transform: translateY(-100%);
  transition: transform 0.4s ease-in-out;
}

/* JS가 .show 클래스를 추가한 상태: 헤더를 아래로 내림 */
#siteHeader.show {
  transform: translateY(0);
}

/* 모바일 메뉴가 열렸을 때(.nav-links가 absolute일 때) 
  부모(header)에 overflow:hidden이 있으면 메뉴가 잘릴 수 있습니다.
  이 코드는 헤더의 overflow를 강제로 visible로 만듭니다.
*/
#siteHeader {
  overflow: visible !important;
}