/* ============================================
   NOVA STUDIO — Design System
   Black Background + Deep Blue Accent
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Colors */
  --black:       #000000;
  --black-2:     #080808;
  --black-3:     #0d0d0d;
  --black-4:     #111111;
  --black-5:     #161616;

  /* Deep Blue - Main Accent */
  --blue:        #1a6bff;
  --blue-bright: #2979ff;
  --blue-deep:   #0d47d6;
  --blue-light:  #4d94ff;
  --blue-glow:   rgba(26, 107, 255, 0.35);
  --blue-glow-s: rgba(26, 107, 255, 0.15);

  /* Text */
  --white:   #ffffff;
  --gray-1:  #e8e8e8;
  --gray-2:  #b0b0b0;
  --gray-3:  #707070;
  --gray-4:  #404040;
  --gray-5:  #252525;

  /* Borders */
  --border:     rgba(255,255,255,0.07);
  --border-md:  rgba(255,255,255,0.12);
  --border-blue: rgba(26,107,255,0.3);

  /* Fonts */
  --font: 'Space Grotesk', 'Noto Sans KR', -apple-system, sans-serif;

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t:    0.3s;
}

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }

em {
  font-style: normal;
  color: var(--blue-bright);
}

/* ============================================
   LAYOUT
   ============================================ */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.section { padding: 120px 0; }

.section-head { margin-bottom: 64px; }
.section-head--row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.sec-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: 12px;
}

.sec-title {
  font-size: clamp(32px, 3.5vw, 52px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--white);
}

/* 섹션 서브카피 */
.sec-sub {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--gray-2);
  font-weight: 400;
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 22px 0;
  transition: background var(--t) var(--ease), padding var(--t) var(--ease), border-color var(--t) var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header.scrolled {
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 14px 0;
  border-bottom-color: var(--border);
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

/* 헤더/푸터: 로고 이미지 */
.logo-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  filter: none;
}

/* 헤더 워드마크 — IN AD COMPANY 텍스트 전용 */
.logo-wordmark {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--white);
  white-space: nowrap;
  line-height: 1;
  text-transform: uppercase;
  flex-shrink: 0;
}

.logo-mark {
  width: 34px; height: 34px;
  background: var(--blue);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1px;
  flex-shrink: 0;
}

.logo-text {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 1.25;
  color: var(--white);
}
.logo-sub { color: var(--gray-3); font-weight: 400; font-size: 11px; }

/* Nav */
.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link {
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-2);
  border-radius: var(--r-sm);
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
  letter-spacing: 0.3px;
}

.nav-link:hover { color: var(--white); background: rgba(255,255,255,0.05); }

.nav-cta {
  background: var(--blue) !important;
  color: var(--white) !important;
  padding: 9px 22px;
  font-weight: 600;
  border-radius: var(--r-sm);
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease) !important;
}
.nav-cta:hover {
  background: var(--blue-bright) !important;
  box-shadow: 0 0 24px var(--blue-glow);
  transform: translateY(-1px);
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  z-index: 300;
  position: relative;
}
.menu-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ============================================
   BUTTONS
   ============================================ */
.hero-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all var(--t) var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.hero-cta-btn svg { width: 18px; height: 18px; transition: transform var(--t) var(--ease); }
.hero-cta-btn:hover svg { transform: translateX(4px); }

.hero-cta-btn.primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 0 30px var(--blue-glow);
}
.hero-cta-btn.primary:hover {
  background: var(--blue-bright);
  box-shadow: 0 0 50px var(--blue-glow);
  transform: translateY(-2px);
}

.hero-cta-btn.ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--border-md);
}
.hero-cta-btn.ghost:hover {
  border-color: var(--blue);
  color: var(--blue-light);
  background: var(--blue-glow-s);
}

.all-works-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-light);
  transition: color var(--t) var(--ease), letter-spacing var(--t) var(--ease);
  white-space: nowrap;
}
.all-works-link:hover { color: var(--white); letter-spacing: 0.5px; }


/* ============================================
   HERO SLIDER
   ============================================ */
.hero-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: var(--black);
}

/* --- YouTube Slides 컨테이너 --- */
.yt-slides {
  position: absolute;
  inset: 0;
}

/* ── 크로스페이드 Dissolve ──
   기본 상태:  opacity 0, z-index 1  → 투명하게 대기
   .active  :  opacity 1, z-index 2  → 보임 (enter)
   .leaving :  opacity 0, z-index 3  → 위에서 fade-out (leave)

   leave 슬라이드가 z-index 3으로 active(2) 위에서
   1.0s 동안 opacity 0으로 사라지므로 두 영상이
   겹치며 자연스럽게 녹아드는 dissolve 효과를 만들어냄. */

.yt-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.5s ease;
  pointer-events: none;
  will-change: opacity;
}

/* enter 슬라이드 */
.yt-slide.active {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
}

/* leave 슬라이드: z-index 3으로 올린 뒤 fade-out → dissolve 완성 */
.yt-slide.leaving {
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* YouTube iframe wrapper */
.yt-iframe-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* 16:9 영상을 화면에 항상 꽉 채우기 */
.yt-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 177.78vh;   /* 화면 높이 기준 16:9 */
  height: 56.25vw;   /* 화면 너비 기준 16:9 */
  min-width: 100%;
  min-height: 100%;
  border: none;
  pointer-events: none;
}

/* 텍스트 가독성을 위한 어두운 그라디언트 오버레이 */
.yt-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,  rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.08) 65%),
    linear-gradient(to top,    rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.00) 55%);
}

/* --- Hero Text Layer --- */
.hero-text-layer {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.hero-text-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  width: 100%;
  padding-top: 80px;
  pointer-events: auto;
}

/* Eyebrow */
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.hero-eyebrow.show { opacity: 1; transform: translateY(0); }

.eyebrow-line {
  display: block;
  width: 32px; height: 2px;
  background: var(--blue);
  box-shadow: 0 0 8px var(--blue-glow);
  flex-shrink: 0;
}
.eyebrow-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--blue-light);
  text-transform: uppercase;
}

/* Headline */
.hero-headline-wrap {
  margin-bottom: 28px;
}

.hero-headline {
  display: block;
  font-size: clamp(52px, 7vw, 100px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -3px;
}

/* 각 텍스트 줄 — 초기 숨김, 개별 fade-up */
.hl-line {
  display: block;
  color: var(--white);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  /* 최소 높이로 레이아웃 점프 방지 */
  min-height: 1.1em;
}
.hl-line.show {
  opacity: 1;
  transform: translateY(0);
}
.hl-line.hl-accent {
  color: var(--blue-bright);
  text-shadow: 0 0 50px rgba(41,121,255,0.3);
}

/* 커서 — 현재 미사용, 호환성 유지 */
.typing-cursor {
  display: inline-block;
  width: 3px;
  height: 0.82em;
  background: var(--blue);
  margin-left: 5px;
  vertical-align: middle;
  border-radius: 2px;
}
/* cursorBlink 제거 — 더 이상 타이핑 방식 미사용 */

/* Sub copy */
.hero-sub {
  font-size: 18px;
  color: var(--gray-2);
  margin-bottom: 48px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  max-width: 500px;
  line-height: 1.6;
  min-height: 1.6em;
}
.hero-sub.show { opacity: 1; transform: translateY(0); }

/* CTA group */
.hero-cta-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.hero-cta-group.show { opacity: 1; transform: translateY(0); }


/* ============================================
   BLACK CURTAIN + LOGO LAYER
   히어로 섹션 내부에 absolute로 겹쳐 놓음.
   휠 다운 시 커튼 fade-in → 로고 등장.
   ============================================ */

/* 검은 커튼 — 초기 투명, .show 시 fade-in */
.black-curtain {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 30;
  transition: opacity 0.6s ease;
}
.black-curtain.show {
  opacity: 1;
  pointer-events: auto;
}

/* 로고 레이어 — 커튼 위에 표시 */
.logo-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.logo-layer.show {
  opacity: 1;
  pointer-events: auto;
}

/* 미세 글로우 배경 */
.logo-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 50% at 50% 50%,
    rgba(26,107,255,0.08) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* 로고 마크 — 이미지 박스 */
.ll-mark {
  position: relative;
  z-index: 1;
  width: 120px; height: 120px;
  background: #fff;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 1px rgba(26,107,255,0.35),
    0 0 70px rgba(26,107,255,0.55);
  padding: 14px;
  opacity: 0;
  transform: scale(0.7) translateY(20px);
  transition:
    opacity  0.7s cubic-bezier(0.34, 1.4, 0.64, 1) 0.1s,
    transform 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) 0.1s;
}
.ll-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.logo-layer.show .ll-mark {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* 이름 + 서브 */
.ll-name-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  0.6s ease 0.35s,
    transform 0.6s ease 0.35s;
}
.logo-layer.show .ll-name-wrap {
  opacity: 1;
  transform: translateY(0);
}
.ll-name {
  font-size: clamp(32px, 4.5vw, 68px);
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--white);
  line-height: 1;
}
.ll-sub {
  font-size: 12px;
  color: var(--blue-light);
  letter-spacing: 2.5px;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
}

/* CTA 버튼 — 아래서 올라오며 등장 */
.ll-cta {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity  0.6s ease 0.55s,
    transform 0.6s ease 0.55s;
}
.logo-layer.show .ll-cta {
  opacity: 1;
  transform: translateY(0);
}

/* 텍스트 레이어 숨김 (로고 상태일 때) */
.hero-text-layer.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}


/* --- Scroll Cue --- */
.hero-scroll-cue {
  position: absolute;
  right: 36px;
  bottom: 40px;
  z-index: 20;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.hero-scroll-cue.hide {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}
.hero-scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.scroll-cue-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, var(--blue), transparent);
  animation: scrollCueAnim 1.8s ease-in-out infinite;
}
@keyframes scrollCueAnim {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
.hero-scroll-cue span {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--gray-3);
  text-transform: uppercase;
  writing-mode: vertical-rl;
}


/* ============================================
   MARQUEE BAND
   ============================================ */
/* ── Marquee Band ── */
.marquee-band {
  overflow: hidden;
  position: relative;
  background: rgba(10,10,18,0.95);
  border-top: 1px solid rgba(26,107,255,0.18);
  border-bottom: 1px solid rgba(26,107,255,0.18);
  padding: 0;
  /* 양끝 페이드 마스크 */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}
/* 배경 글로우 라인 */
.marquee-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(26,107,255,0.04) 50%,
    transparent 100%
  );
  pointer-events: none;
}

/* 각 트랙 행 */
.marquee-track {
  display: flex;
  white-space: nowrap;
  padding: 13px 0;
}
.marquee-track--fwd {
  animation: marqueeRunFwd 32s linear infinite;
}
/* 호버 시 일시정지 */
.marquee-band:hover .marquee-track { animation-play-state: paused; }

/* 개별 아이템 */
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 24px;
  cursor: default;
  transition: transform 0.25s ease;
}
.marquee-item:hover { transform: translateY(-2px); }

/* 한글 메인 텍스트 */
.marquee-ko {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.75);
  transition: color 0.25s ease;
}
.marquee-item:hover .marquee-ko { color: #fff; }

/* 영문 서브 텍스트 */
.marquee-en {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  transition: color 0.25s ease;
}
.marquee-item:hover .marquee-en { color: rgba(255,255,255,0.5); }

/* 강조 아이템 */
.marquee-item--accent .marquee-ko {
  color: rgba(26,107,255,0.9);
}
.marquee-item--accent:hover .marquee-ko {
  color: #4d8eff;
  text-shadow: 0 0 12px rgba(26,107,255,0.6);
}

/* 구분자 */
.marquee-sep {
  font-size: 8px;
  color: rgba(26,107,255,0.45);
  margin-left: 4px;
  transition: color 0.25s ease, transform 0.25s ease;
}
.marquee-item:hover .marquee-sep {
  color: rgba(26,107,255,0.9);
  transform: rotate(45deg);
}

@keyframes marqueeRunFwd {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marqueeRunRev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}


/* ============================================
   SERVICES SECTION — 인터랙티브 리스트 + 비주얼
   ============================================ */
.services-section { background: var(--black); }

/* 좌우 2열 레이아웃 */
.svc-interactive {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 60px;
  align-items: stretch;   /* 양쪽 같은 높이 */
  min-height: 580px;
}

/* ── 왼쪽: 키워드 리스트 ── */
.svc-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 홈 인터랙티브 리스트 - 행 레이아웃 */
.svc-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding-right: 4px;
}
.svc-list-item:last-child .svc-list-row { border-bottom: none; }

/* 버튼 형태의 상품명 */
.svc-list-btn {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 14px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: gap 0.3s ease;
}
.svc-list-btn:hover .svc-list-name {
  color: rgba(100,160,255,0.7);
}
.svc-list-btn:hover .svc-list-num {
  color: var(--blue);
}
.svc-list-item.active .svc-list-btn .svc-list-name {
  color: var(--blue-bright);
  text-shadow: 0 0 30px rgba(41,121,255,0.6), 0 0 60px rgba(26,107,255,0.25);
}
.svc-list-item.active .svc-list-btn .svc-list-num {
  color: var(--blue);
}
.svc-list-item.active .svc-list-btn {
  gap: 24px;
}

/* 보러가기 버튼 */
.svc-goto-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: none;
  color: rgba(100,160,255,0.85);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s ease, gap 0.2s ease;
}
.svc-goto-btn:hover {
  color: #ffffff;
  gap: 10px;
}
/* 깜빡임 */
@keyframes gotoBlink {
  0%   { color: rgba(100,160,255,0.85); }
  40%  { color: #ffffff; }
  70%  { color: rgba(100,160,255,0.85); }
  100% { color: #ffffff; }
}
.svc-goto-btn.blink {
  animation: gotoBlink 0.8s ease forwards;
}

.svc-list-item a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 14px 0;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: gap 0.3s ease;
  cursor: pointer;
}
.svc-list-item:last-child a { border-bottom: none; }

.svc-list-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--gray-4);
  font-family: 'Space Grotesk', sans-serif;
  transition: color 0.3s ease;
  min-width: 24px;
}

.svc-list-name {
  font-size: clamp(28px, 3.8vw, 52px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--gray-4);
  font-family: 'Space Grotesk', sans-serif;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* 호버 */
.svc-list-item a:hover .svc-list-name {
  color: rgba(100,160,255,0.7);
}
.svc-list-item a:hover .svc-list-num {
  color: var(--blue);
}

/* 활성 상태 — 파란 강조색 */
.svc-list-item.active .svc-list-name {
  color: var(--blue-bright);
  text-shadow: 0 0 30px rgba(41,121,255,0.6), 0 0 60px rgba(26,107,255,0.25);
}
.svc-list-item.active .svc-list-num {
  color: var(--blue);
}
.svc-list-item.active a {
  gap: 24px;
}

/* ── 오른쪽: 비주얼 패널 ── */
.svc-visual {
  position: relative;
  min-height: 520px;         /* 힌트가 보이려면 높이 확보 필수 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── 클릭 유도 힌트 — absolute로 오른쪽 영역 중앙에 떠 있음 ── */
@keyframes hintPulse {
  0%   { opacity: 0.4; transform: translateY(0); }
  50%  { opacity: 1;   transform: translateY(-8px); }
  100% { opacity: 0.4; transform: translateY(0); }
}
@keyframes hintArrow {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}
@keyframes hintFadeOut {
  to { opacity: 0; pointer-events: none; }
}
.svc-click-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
}
.svc-hint-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  animation: hintPulse 2.2s ease-in-out infinite;
}
.svc-hint-arrow {
  animation: hintArrow 1.6s ease-in-out infinite;
}
.svc-hint-text {
  font-size: 17px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  text-align: center;
  line-height: 1.65;
  letter-spacing: -0.2px;
  white-space: nowrap;
}
.svc-hint-text strong {
  display: block;
  color: rgba(100,160,255,0.8);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.svc-hint-cursor {
  font-size: 36px;
}
/* 클릭 후 페이드아웃 */
.svc-click-hint.svc-hint--hidden {
  animation: hintFadeOut 0.3s ease forwards;
}

.svc-panel {
  display: none;          /* JS가 직접 style.display로 제어 */
  flex-direction: column;
  gap: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
}
.svc-panel.active {
  display: flex !important;
  flex-direction: column;
}

/* 이미지 영역 */
.svc-panel-img {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* img 태그 방식 이미지 래퍼 */
.sdng-img-wrap {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
  background-color: #0a0d1a;
  line-height: 0;
  flex-shrink: 0;
}

/* 실제 이미지 — 고정 높이, cover로 잘림 */
.sdng-panel-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 노이즈 오버레이 — 반투명 효과 */
.svc-panel-noise {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1;
}

/* SVG 차트 */
.svc-panel-chart {
  position: absolute;
  inset: 16px;
  z-index: 2;
  opacity: 0.85;
}
.svc-panel-chart svg {
  width: 100%; height: 100%;
}

/* 정보 영역 */
.svc-panel-info {
  background: rgba(10,12,24,0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(26,107,255,0.2);
  padding: 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 3;
}

.svc-panel-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--blue-light);
  background: rgba(26,107,255,0.12);
  border: 1px solid rgba(26,107,255,0.25);
  padding: 4px 10px;
  border-radius: 20px;
  width: fit-content;
}

.svc-panel-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray-2);
  margin: 0;
}
.svc-panel-desc strong {
  color: #fff;
  font-weight: 700;
}

.svc-panel-kpi {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.svc-panel-kpi span {
  font-size: 11px;
  color: var(--gray-3);
  letter-spacing: 0.5px;
}
.svc-panel-kpi strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--white);
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.5px;
}

/* 서비스 패널 상품 태그 */
.svc-panel-tags {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* "SERVICE KEYWORDS" / "KEY STRATEGY" 레이블 */
.svc-ptag-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(26,107,255,0.25);
  margin: 0;
}
/* 2열 그리드 */
.svc-ptag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.svc-ptag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.svc-ptag:hover {
  background: rgba(26,107,255,0.14);
  border-color: rgba(26,107,255,0.4);
  color: #fff;
}

/* 3열 그리드 */
.svc-ptag-grid--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

/* 카드형 태그 (아이콘 + 한글명 + 영문 서브) */
.svc-ptag--card {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  white-space: normal;
}
.svc-ptag-icon {
  font-size: 20px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26,107,255,0.15);
  border: 1px solid rgba(26,107,255,0.3);
  border-radius: 50%;
  line-height: 1;
}
.svc-ptag-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.svc-ptag-text strong {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.svc-ptag-text em {
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  color: rgba(255,255,255,0.42);
  letter-spacing: 0.02em;
}
.svc-ptag--card:hover .svc-ptag-icon {
  background: rgba(26,107,255,0.28);
  border-color: rgba(26,107,255,0.6);
}

/* 모바일 — 세로 스택 */
@media (max-width: 768px) {
  .svc-interactive {
    grid-template-columns: 1fr;
    gap: 48px;
    min-height: auto;
  }
  .svc-visual { min-height: 320px; }
  .svc-list-name { font-size: 26px; }
}

/* ============================================
   STATS SECTION
   ============================================ */
.stats-section {
  padding: 80px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--black-2);
}
.stats-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.stat-block {
  flex: 1;
  text-align: center;
  padding: 20px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.stat-num-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}
.stat-num-big {
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 900;
  color: var(--white);
  font-family: 'Space Grotesk', sans-serif;
  line-height: 1;
  display: inline;
}
.stat-unit-big {
  display: inline;
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 700;
  color: var(--blue);
}
.stat-desc {
  font-size: 13px;
  color: var(--gray-3);
  letter-spacing: 0.5px;
  margin-top: 4px;
}
.stat-divider-v {
  width: 1px;
  height: 72px;
  background: var(--border);
  flex-shrink: 0;
}

/* ============================================
   HISTORY SECTION — 호버 노드 타임라인
   ============================================ */
.history-section {
  background: var(--black);
  overflow: hidden;
  position: relative;
  padding-bottom: 80px;
}

.history-section::before {
  content: '';
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgba(26,107,255,0.06) 0%, transparent 65%);
  pointer-events: none;
}

/* ── 헤더 ── */
.hist-head {
  margin-bottom: 60px;
}
.hist-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 8px;
}
.hist-title em {
  font-style: normal;
  color: var(--blue);
}
.hist-subtitle {
  font-size: 13px;
  color: var(--gray-3);
  letter-spacing: 1px;
}

/* ── 트랙 전체 래퍼 ── */
.hist-track-wrap {
  position: relative;
  width: 100%;
  height: 340px;
  user-select: none;
}

/* ── SVG 곡선 ── */
.hist-curve-svg {
  position: absolute;
  left: 0;
  bottom: 40px;
  width: 100%;
  height: 260px;
  pointer-events: none;
}
.hist-curve-glow {
  stroke: rgba(26,107,255,0.18);
  stroke-width: 12;
  filter: blur(6px);
}
.hist-curve-line {
  stroke: rgba(26,107,255,0.7);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 4;
}

/* ── 각 노드 ── */
.hn-node {
  position: absolute;
  bottom: 40px;          /* SVG bottom 기준으로 맞춤 */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  z-index: 10;
}

/* 연도별 y 오프셋 — SVG 곡선에 맞춤 */
.hn-node[data-year="2019"] { bottom: calc(40px + 40px); }
.hn-node[data-year="2020"] { bottom: calc(40px + 68px); }
.hn-node[data-year="2021"] { bottom: calc(40px + 96px); }
.hn-node[data-year="2022"] { bottom: calc(40px + 120px); }
.hn-node[data-year="2023"] { bottom: calc(40px + 145px); }
.hn-node[data-year="2024"] { bottom: calc(40px + 168px); }
.hn-node[data-year="2025"] { bottom: calc(40px + 188px); }
.hn-node[data-year="2026"] { bottom: calc(40px + 207px); }

/* ── 동그라미 ── */
.hn-circle {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--black-2);
  border: 2px solid rgba(26,107,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.35s cubic-bezier(0.34,1.56,0.64,1),
              height 0.35s cubic-bezier(0.34,1.56,0.64,1),
              border-color 0.3s,
              background 0.3s,
              box-shadow 0.3s;
  z-index: 2;
}
.hn-circle-inner {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(26,107,255,0.6);
  transition: width 0.3s, height 0.3s, background 0.3s;
}

/* 파동 링 */
.hn-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(26,107,255,0.25);
  opacity: 0;
  transition: opacity 0.3s;
}

/* 2026(예정) 노드 */
.hn-node--future .hn-circle {
  border-color: rgba(26,107,255,0.3);
  border-style: dashed;
}
.hn-node--future .hn-circle-inner {
  background: rgba(26,107,255,0.3);
}

/* 연도 라벨 */
.hn-year-label {
  margin-top: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.35);
  transition: color 0.3s, opacity 0.3s;
  white-space: nowrap;
}

/* ── 호버 상태 ── */
.hn-node:hover .hn-circle,
.hn-node.active .hn-circle {
  width: 36px;
  height: 36px;
  border-color: var(--blue);
  background: rgba(26,107,255,0.15);
  box-shadow: 0 0 0 8px rgba(26,107,255,0.1), 0 0 24px rgba(26,107,255,0.3);
}
.hn-node:hover .hn-circle-inner,
.hn-node.active .hn-circle-inner {
  width: 12px;
  height: 12px;
  background: var(--blue);
}
.hn-node:hover .hn-pulse,
.hn-node.active .hn-pulse {
  opacity: 1;
  animation: hnPulse 1.4s ease-out infinite;
}
.hn-node:hover .hn-year-label,
.hn-node.active .hn-year-label {
  color: var(--blue-light);
}

@keyframes hnPulse {
  0%   { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ── 툴팁 카드 ── */
.hn-card {
  position: absolute;
  bottom: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 220px;
  background: rgba(8, 18, 42, 0.98);
  border: 1px solid rgba(41,121,255,0.6);
  border-top: 2px solid rgba(41,121,255,0.9);
  border-radius: 14px;
  padding: 18px 20px 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  backdrop-filter: blur(20px);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.7),
    0 0 0 1px rgba(41,121,255,0.15),
    0 0 24px rgba(41,121,255,0.12);
  z-index: 100;
}
/* 화살표 */
.hn-card::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: rgba(41,121,255,0.6);
}

/* 카드 노출 */
.hn-node:hover .hn-card,
.hn-node.active .hn-card {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 카드 내용 */
.hn-card-year {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 26px;
  font-weight: 900;
  color: #4d9fff;
  line-height: 1;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.5px;
}
.hn-future-badge {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: rgba(41,121,255,0.55);
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 1px;
  border: 1px solid rgba(41,121,255,0.5);
  font-family: 'Noto Sans KR', sans-serif;
}
.hn-card-title {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 12px;
  line-height: 1.4;
  border-bottom: 1px solid rgba(41,121,255,0.25);
  padding-bottom: 10px;
}
.hn-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.hn-card-list li {
  font-size: 13px;
  color: rgba(200, 220, 255, 0.92);
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
  font-weight: 500;
}
.hn-card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4d9fff;
  box-shadow: 0 0 6px rgba(41,121,255,0.7);
}

/* 화면 끝 노드 카드 위치 보정 */
.hn-node[data-year="2019"] .hn-card { left: 0; transform: translateX(0) translateY(8px); }
.hn-node[data-year="2019"]:hover .hn-card,
.hn-node[data-year="2019"].active .hn-card { transform: translateX(0) translateY(0); }
.hn-node[data-year="2019"] .hn-card::after { left: 20%; }

.hn-node[data-year="2026"] .hn-card { left: auto; right: 0; transform: translateX(0) translateY(8px); }
.hn-node[data-year="2026"]:hover .hn-card,
.hn-node[data-year="2026"].active .hn-card { transform: translateX(0) translateY(0); }
.hn-node[data-year="2026"] .hn-card::after { left: 80%; }


/* ============================================
   FEATURED WORKS
   ============================================ */
.works-section { background: var(--black); }

.works-showcase {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 24px;
}

.work-feat { display: flex; flex-direction: column; }

/* Thumb */
.wf-thumb {
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  flex: 1;
  min-height: 320px;
  transition: transform var(--t) var(--ease);
}

.wf-thumb--sm { min-height: 160px; flex: none; height: 160px; }

.work-feat:hover .wf-thumb { transform: scale(0.99); }

.wf-thumb-tag {
  position: absolute;
  top: 20px; left: 20px;
  z-index: 2;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 100px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.wf-thumb-deco {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wf-circle {
  width: 120px; height: 120px;
  border: 1.5px solid rgba(26,107,255,0.3);
  border-radius: 50%;
  position: relative;
}
.wf-circle::after {
  content: '';
  position: absolute;
  inset: 16px;
  background: radial-gradient(circle, rgba(26,107,255,0.4) 0%, transparent 70%);
  border-radius: 50%;
}

.wf-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26,107,255,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--t) var(--ease);
  z-index: 3;
}
.wf-overlay span {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.work-feat:hover .wf-overlay { opacity: 1; }

/* Info */
.wf-info { padding: 20px 0 0; }

.wf-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blue-light);
  display: block;
  margin-bottom: 8px;
}

.wf-info h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
  line-height: 1.3;
}

.wf-info p {
  font-size: 13px;
  color: var(--gray-2);
  margin-bottom: 14px;
}

.wf-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.wf-result {
  font-size: 22px;
  font-weight: 900;
  color: var(--blue-bright);
  font-family: 'Space Grotesk', sans-serif;
}

.wf-period {
  font-size: 12px;
  color: var(--gray-3);
  border-left: 1px solid var(--border);
  padding-left: 16px;
}

/* Side works */
.works-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
}


/* ============================================
   TESTIMONIALS  –  두 줄 무한 슬라이드
   ============================================ */
.testimonials-section {
  background: var(--black-2);
  padding: 100px 0 0;
  overflow: hidden;
}

/* 헤더 */
.testi-head {
  text-align: center;
  margin-bottom: 64px;
}

/* 각 행 래퍼 – 좌우 페이드 마스크 */
.testi-row-wrap {
  overflow: hidden;
  padding: 10px 0;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

.testi-row-wrap:first-of-type  { margin-bottom: 20px; }
.testi-row-wrap:last-of-type   { margin-bottom: 100px; }

/* 무한 흐르는 트랙 */
.testi-row {
  display: flex;
  gap: 20px;
  width: max-content;
  will-change: transform;
}

/* 1행: 왼쪽 방향 */
@keyframes testi-scroll-ltr {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.testi-row--ltr {
  animation: testi-scroll-ltr 40s linear infinite;
}
.testi-row--ltr:hover {
  animation-play-state: paused;
}

/* 2행: 오른쪽 방향 (역방향) */
@keyframes testi-scroll-rtl {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
.testi-row--rtl {
  animation: testi-scroll-rtl 38s linear infinite;
}
.testi-row--rtl:hover {
  animation-play-state: paused;
}

/* 카드 */
.testi-card {
  flex: 0 0 340px;
  background: var(--black-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 28px 28px 24px;
  position: relative;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.testi-card:hover {
  border-color: var(--blue);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(26,107,255,0.18);
}

/* 2행 카드 – 약간 다른 배경 톤 */
.testi-card--alt {
  background: rgba(255,255,255,0.03);
}

/* 카드 상단 – 별점 + 태그 */
.testi-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.testi-stars {
  display: flex;
  gap: 2px;
  color: #f5c518;
  font-size: 13px;
}

.testi-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--blue-light);
  background: rgba(26,107,255,0.1);
  border: 1px solid rgba(26,107,255,0.25);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}

.testi-body {
  font-size: 13.5px;
  color: var(--gray-1);
  line-height: 1.75;
  margin-bottom: 20px;
  font-style: italic;
}

.testi-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.testi-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-deep), var(--blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.testi-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testi-info strong {
  font-size: 13px;
  color: var(--white);
  font-weight: 600;
}

.testi-info span {
  font-size: 11px;
  color: var(--gray-3);
}

/* 구 .testi-quote, .testi-card p, .testi-card footer 등 레거시 – 제거됨 */


/* ============================================
   HOME CTA
   ============================================ */
.home-cta {
  position: relative;
  padding: 140px 0;
  text-align: center;
  overflow: hidden;
  background: var(--black);
}

.home-cta-bg { position: absolute; inset: 0; pointer-events: none; }

.hcta-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 400px;
  background: radial-gradient(ellipse, rgba(26,107,255,0.18) 0%, transparent 65%);
  border-radius: 50%;
}

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

.home-cta-inner h2 {
  font-size: clamp(32px, 4vw, 58px);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 20px;
}

.home-cta-inner p {
  font-size: 17px;
  color: var(--gray-2);
  margin-bottom: 44px;
}


/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background: var(--black-2);
  border-top: 1px solid var(--border);
  padding-top: 80px;
}

.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px 64px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 80px;
  align-items: start;
}

.footer-brand .logo { margin-bottom: 18px; }

.footer-desc {
  font-size: 13px;
  color: var(--gray-3);
  line-height: 1.8;
}

.footer-links { display: flex; gap: 64px; }

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gray-3);
  margin-bottom: 4px;
}

.footer-col a {
  font-size: 14px;
  color: var(--gray-3);
  transition: color var(--t) var(--ease);
}
.footer-col a:hover { color: var(--white); }

.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 32px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-bottom p { font-size: 12px; color: var(--gray-4); }


/* ============================================
   SCROLL REVEAL
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .works-showcase { grid-template-columns: 1fr; }
  .works-side { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .footer-inner { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  .section { padding: 80px 0; }
  .container { padding: 0 20px; }

  /* Header */
  .menu-toggle { display: flex; }
  .main-nav {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.97);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 199;
  }
  .main-nav.open { display: flex; }
  .nav-link { font-size: 22px; padding: 14px 32px; }

  /* Hero */
  .hero-text-inner { padding: 0 20px; padding-top: 80px; }
  .hero-headline { letter-spacing: -1px; }
  .slide-indicators { right: 16px; }
  .slide-counter { left: 20px; bottom: 32px; }
  .hero-scroll-cue { display: none; }
  .hero-cta-group { flex-direction: column; gap: 12px; }
  .hero-cta-btn { justify-content: center; }

  /* Sections */
  .services-grid { grid-template-columns: 1fr; }
  .stats-grid { flex-wrap: wrap; justify-content: center; gap: 0; }
  .stat-block { min-width: 45%; }
  .stat-divider-v { display: none; }
  .testi-grid { grid-template-columns: 1fr; }
  .works-side { grid-template-columns: 1fr; }
  .section-head--row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { flex-wrap: wrap; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* History */
  .hist-track-wrap { height: 260px; }
  .hn-card { width: 160px; }
  .hn-card-year { font-size: 18px; }

  .brand-logo-mark { width: 72px; height: 72px; font-size: 36px; border-radius: 16px; }
  .brand-name-main { font-size: 36px; }
}

@media (max-width: 480px) {
  .hero-headline { font-size: 42px; letter-spacing: -1px; }
  .hist-track-wrap { height: 200px; overflow-x: auto; }
  .hn-card { width: 140px; font-size: 11px; }
  .hn-card-year { font-size: 16px; }
}

/* ============================================
   MOUSE FOG CURSOR — 3레이어 물결 안개
   core  : 작고 밝은 중심점
   fog   : 중간 안개 (물결로 흔들림)
   aura  : 크고 느린 후광 번짐
   ============================================ */

/* ── core : 가장 밝고 선명한 중심 ── */
#fogCore {
  position: fixed;
  top: 0; left: 0;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(80, 160, 255, 0.65) 0%,
    rgba(41, 121, 255, 0.30) 45%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 10001;
  will-change: transform;
  transition: opacity 0.35s ease;
  mix-blend-mode: screen;
  filter: blur(4px);
}

/* ── fog : 중간 크기, 물결로 흔들림 ── */
#fogCursor {
  position: fixed;
  top: 0; left: 0;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(41, 121, 255, 0.40) 0%,
    rgba(26, 107, 255, 0.18) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 10000;
  will-change: transform;
  transition: opacity 0.35s ease;
  mix-blend-mode: screen;
  filter: blur(10px);
}

/* ── aura : 가장 크고 느린 후광 번짐 ── */
#fogAura {
  position: fixed;
  top: 0; left: 0;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(26, 107, 255, 0.20) 0%,
    rgba(13,  71, 214, 0.08) 45%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
  transition: opacity 0.35s ease;
  mix-blend-mode: screen;
  filter: blur(32px);
}

/* 모바일에서는 숨김 */
@media (hover: none) {
  #fogCore, #fogCursor, #fogAura { display: none; }
}

/* ============================================
   ABOUT PAGE
   ============================================ */

/* ══════════════════════════════════════════════
   ABOUT — 회사 소개 섹션 (리뉴얼)
══════════════════════════════════════════════ */
.about-intro-section {
  position: relative;
  padding: 120px 0 100px;
  overflow: hidden;
  background: var(--black-1);
}

/* 배경 장식 레이어 */
.ai-section-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.ai-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(41,121,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41,121,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%);
}
.ai-bg-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}
.ai-bg-glow--left {
  background: rgba(41,121,255,0.07);
  top: -100px;
  left: -200px;
}
.ai-bg-glow--right {
  background: rgba(100,60,220,0.05);
  bottom: -100px;
  right: -200px;
}

/* 섹션 레이블 행 */
.ai-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 56px;
}
.ai-eyebrow-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(41,121,255,0.3), transparent);
}
.ai-eyebrow-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  color: rgba(41,121,255,0.7);
  white-space: nowrap;
}

/* 2컬럼 그리드 */
.about-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* 왼쪽 타이틀 */
.about-intro-title {
  margin-bottom: 28px;
}
.ai-title-ko {
  display: block;
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 900;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.ai-title-en {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 500;
  letter-spacing: 3px;
  color: rgba(41,121,255,0.75);
}

/* 본문 */
.ai-desc-block {
  margin-bottom: 32px;
}
.ai-desc-block p {
  font-size: 15px;
  color: var(--gray-2);
  line-height: 1.9;
  margin-bottom: 14px;
}

/* 서비스 그리드 태그 */
.ai-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 36px;
}
.ai-svc-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(41,121,255,0.05);
  border: 1px solid rgba(41,121,255,0.15);
  border-radius: 8px;
  transition: background .2s, border-color .2s;
}
.ai-svc-item:hover {
  background: rgba(41,121,255,0.1);
  border-color: rgba(41,121,255,0.35);
}
.ai-svc-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1a6bff;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(26,107,255,0.7);
}
.ai-svc-name {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(140,190,255,0.85);
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* CTA 링크 */
.ai-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(100,160,255,0.9);
  text-decoration: none;
  padding: 12px 24px;
  border: 1px solid rgba(41,121,255,0.35);
  border-radius: 6px;
  background: rgba(41,121,255,0.07);
  transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.ai-cta-link:hover {
  background: rgba(41,121,255,0.18);
  border-color: rgba(41,121,255,0.65);
  color: #fff;
  transform: translateY(-2px);
}
.ai-cta-link svg { transition: transform .25s; }
.ai-cta-link:hover svg { transform: translateX(3px); }

/* ── 스탯 카드 ── */
.about-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.astat-card {
  position: relative;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  padding: 32px 28px 28px;
  overflow: hidden;
  transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
  opacity: 0;
  transform: translateY(22px);
}
.astat-card--visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .55s ease, transform .55s ease, border-color .35s ease;
}
.astat-card--highlight {
  background: rgba(41,121,255,0.08);
  border-color: rgba(41,121,255,0.3);
}
.astat-card:hover {
  border-color: rgba(41,121,255,0.45);
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(41,121,255,0.12);
}
/* 글로우 레이어 */
.astat-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(41,121,255,0.14) 0%, transparent 65%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.astat-card:hover .astat-glow { opacity: 1; }
/* 스캔 라인 */
.astat-scan {
  position: absolute;
  top: 0; left: -100%; right: 0; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(41,121,255,0.06), transparent);
  transition: left .6s ease;
  pointer-events: none;
}
.astat-card:hover .astat-scan { left: 100%; }
/* 하단 블루 라인 */
.astat-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(41,121,255,0.7), transparent);
  opacity: 0;
  transition: opacity .35s ease;
}
.astat-card--highlight::after { opacity: 0.6; }
.astat-card:hover::after { opacity: 1; }
/* 상단 레이블 */
.astat-label-top {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: rgba(41,121,255,0.6);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.astat-inner { position: relative; z-index: 1; }
.astat-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 46px;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.astat-unit { font-size: 20px; color: rgba(41,121,255,0.9); }
/* 진행 바 */
.astat-bar {
  height: 2px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  overflow: hidden;
}
.astat-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(41,121,255,0.5), rgba(100,160,255,0.9));
  border-radius: 2px;
  transition: width 1.4s ease;
}
.astat-card--visible .astat-bar-fill { width: 100%; }

/* ══════════════════════════════════════════════
   ABOUT — 비즈니스 파트너 섹션 (플로우 리뉴얼)
══════════════════════════════════════════════ */
.about-partner-section {
  position: relative;
  background: #03020d;
  overflow: hidden;
  padding: 120px 0 110px;
}

/* 배경 */
.aptn-canvas {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.aptn-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none; z-index: 0;
}
.aptn-bg-orb--a {
  width: 600px; height: 600px;
  background: rgba(41,121,255,0.07);
  top: -150px; left: -150px;
  animation: aptnOrbFloat 18s ease-in-out infinite;
}
.aptn-bg-orb--b {
  width: 450px; height: 450px;
  background: rgba(100,60,220,0.06);
  bottom: -100px; right: -100px;
  animation: aptnOrbFloat 22s ease-in-out infinite reverse;
}
@keyframes aptnOrbFloat {
  0%,100% { transform: translate(0,0); }
  50%      { transform: translate(50px,40px); }
}

/* 섹션 헤더 */
.aptn-header {
  text-align: center;
  margin-bottom: 80px;
  position: relative; z-index: 1;
}
.aptn-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 3.5px;
  color: rgba(41,121,255,0.7);
  margin-bottom: 18px;
}
.aptn-main-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  background: linear-gradient(135deg, #4d9fff 0%, #ffffff 55%, #7b5cff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  line-height: 1.1;
}
.aptn-main-sub {
  font-size: 15px;
  color: var(--gray-3);
  line-height: 1.8;
  max-width: 520px;
  margin: 0 auto;
}

/* ════════════════════════════════
   플로우 다이어그램
════════════════════════════════ */
/* ════════════════════════════════
   플로우 다이어그램 (가독성 개선)
════════════════════════════════ */
/* ══ 수렴 플로우 레이아웃 ══ */
.aptn-converge {
  position: relative;
  z-index: 1;
  margin-bottom: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 상단 영역: 스텝 카드 + Canvas (선이 이 안에서 그려짐) */
.aptn-converge-top {
  position: relative;
  width: 100%;
  padding-bottom: 80px; /* 선이 하단까지 내려올 공간 */
}

/* ── 상단 3개 스텝 행 ── */
.aptn-converge-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

/* 각 스텝 컬럼 — 스크롤 진입 전 초기 위치 (JS로 .is-visible 부여) */
.aptn-converge-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
/* 왼쪽 카드: 왼쪽 아래에서 진입 */
.aptn-converge-step--left  { transform: translate(-60px, 30px); }
/* 중앙 카드: 위에서 진입 */
.aptn-converge-step--center { transform: translateY(-40px); }
/* 오른쪽 카드: 오른쪽 아래에서 진입 */
.aptn-converge-step--right { transform: translate(60px, 30px); }

/* 진입 후 */
.aptn-converge-step.is-visible {
  opacity: 1;
  transform: translate(0,0);
}
.aptn-converge-step--left.is-visible  { transition-delay: 0.0s; }
.aptn-converge-step--center.is-visible { transition-delay: 0.15s; }
.aptn-converge-step--right.is-visible { transition-delay: 0.0s; }

/* 카드 하단 커넥터 점 */
.aptn-step-connector-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(80,140,255,0.9);
  box-shadow: 0 0 10px rgba(80,140,255,0.8);
  opacity: 0;
  transition: opacity 0.4s ease 0.7s;
}
.aptn-converge-step.is-visible .aptn-step-connector-dot { opacity: 1; }
.aptn-step-connector-dot--accent {
  background: rgba(41,200,130,0.9);
  box-shadow: 0 0 10px rgba(41,200,130,0.8);
}

/* STEP 배지 */
.aptn-step-badge {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: rgba(140,190,255,1);
  padding: 5px 16px;
  border: 1px solid rgba(80,140,255,0.6);
  border-radius: 20px;
  background: rgba(41,121,255,0.18);
  box-shadow: 0 0 12px rgba(41,121,255,0.2);
}
.aptn-step-badge--accent {
  color: rgba(80,230,165,1);
  border-color: rgba(41,200,130,0.6);
  background: rgba(41,200,130,0.15);
  box-shadow: 0 0 12px rgba(41,200,130,0.2);
}

/* 카드 */
.aptn-step-card {
  width: 100%;
  flex: 1;
  background: rgba(16,26,60,0.92);
  border: 1px solid rgba(80,140,255,0.35);
  border-radius: 18px;
  padding: 28px 24px 26px;
  text-align: center;
  transition: border-color .3s, transform .3s, box-shadow .3s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.aptn-step-card::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(80,140,255,0.9), transparent);
}
.aptn-step-card--accent {
  background: rgba(16,26,60,0.92);
  border-color: rgba(41,200,130,0.45);
  box-shadow: 0 6px 28px rgba(0,0,0,0.45), 0 0 16px rgba(41,200,130,0.08), inset 0 1px 0 rgba(255,255,255,0.06);
}
.aptn-step-card--accent::before {
  background: linear-gradient(90deg, transparent, rgba(41,200,130,0.9), transparent);
}
.aptn-step-card:hover {
  border-color: rgba(80,140,255,0.85);
  transform: translateY(-6px);
  box-shadow: 0 24px 56px rgba(41,121,255,0.22);
}
.aptn-step-card--accent:hover {
  border-color: rgba(41,200,130,0.85);
  box-shadow: 0 24px 56px rgba(41,200,130,0.18);
}

/* 아이콘 */
.aptn-step-icon-wrap {
  width: 62px; height: 62px;
  border: 1.5px solid rgba(80,140,255,0.6);
  border-radius: 16px;
  background: rgba(41,121,255,0.18);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  transition: border-color .3s, background .3s, box-shadow .3s;
  box-shadow: 0 0 18px rgba(41,121,255,0.18);
}
.aptn-step-card:hover .aptn-step-icon-wrap {
  border-color: rgba(80,140,255,0.9);
  background: rgba(41,121,255,0.28);
  box-shadow: 0 0 24px rgba(41,121,255,0.35);
}
.aptn-step-icon-wrap--accent {
  border-color: rgba(41,200,130,0.6);
  background: rgba(41,200,130,0.16);
  box-shadow: 0 0 18px rgba(41,200,130,0.18);
}
.aptn-step-card--accent:hover .aptn-step-icon-wrap {
  border-color: rgba(41,200,130,0.9);
  background: rgba(41,200,130,0.26);
  box-shadow: 0 0 24px rgba(41,200,130,0.3);
}

/* 타이틀 */
.aptn-step-title {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 14px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 12px rgba(80,140,255,0.25);
}

/* 설명 */
.aptn-step-desc {
  font-size: 13.5px;
  color: rgba(210,225,255,0.92);
  line-height: 1.85;
  margin-bottom: 20px;
  word-break: keep-all;
  text-align: center;
}

/* 리스트 */
.aptn-step-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  border-top: 1px solid rgba(80,140,255,0.15);
  padding-top: 16px;
}
.aptn-step-list li {
  font-size: 13px;
  color: rgba(185,210,255,0.95);
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 500;
}
.aptn-step-list li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(80,140,255,0.95);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(80,140,255,0.6);
}
.aptn-step-card--accent .aptn-step-list { border-top-color: rgba(41,200,130,0.2); }
.aptn-step-card--accent .aptn-step-list li { color: rgba(130,240,190,0.95); }
.aptn-step-card--accent .aptn-step-list li::before {
  background: rgba(41,200,130,0.95);
  box-shadow: 0 0 8px rgba(41,200,130,0.6);
}

/* ── 수렴 Canvas 라인 — convergeEl 전체를 덮는 절대 오버레이 ── */
.aptn-cvg-canvas {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 0;
  /* 크기는 JS에서 convergeEl 기준으로 설정 */
}


/* ── 하단 수렴 결과: 비즈니스 파트너 카드 ── */
.aptn-converge-result {
  position: relative;
  z-index: 1;          /* canvas(z-index:0) 위에 표시 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 48px;    /* 스텝 카드와 충분한 간격 — 선이 지나는 공간 */
  /* 초기: 숨김 — JS가 .is-visible 부여 시 등장 */
  opacity: 0;
  transform: translateY(32px) scale(0.88);
  transition: opacity 0.65s cubic-bezier(0.34,1.56,0.64,1),
              transform 0.65s cubic-bezier(0.34,1.56,0.64,1);
}
.aptn-converge-result.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 외부 펄스 링 3개 */
.aptn-result-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.aptn-result-ring--outer {
  width: 240px; height: 240px;
  border: 1px solid rgba(41,121,255,0.18);
  animation: aptnRingPulse 3.5s ease-in-out infinite;
}
.aptn-result-ring--mid {
  width: 200px; height: 200px;
  border: 1px solid rgba(41,121,255,0.28);
  animation: aptnRingPulse 3.5s ease-in-out infinite;
  animation-delay: 0.6s;
}
.aptn-result-ring--inner {
  width: 168px; height: 168px;
  border: 1.5px solid rgba(41,121,255,0.4);
  animation: aptnRingPulse 3.5s ease-in-out infinite;
  animation-delay: 1.2s;
}
@keyframes aptnRingPulse {
  0%,100% { transform: scale(1);    opacity: 0.8; }
  50%     { transform: scale(1.08); opacity: 0.3; }
}

/* 메인 결과 카드 */
.aptn-result-card {
  position: relative; z-index: 1;
  width: 280px;
  background: linear-gradient(135deg, rgba(16,26,70,0.98) 0%, rgba(22,36,88,0.96) 100%);
  border: 1.5px solid rgba(60,120,255,0.55);
  border-radius: 24px;
  box-shadow:
    0 0 60px rgba(41,121,255,0.3),
    0 20px 60px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
}
.aptn-result-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(80,160,255,1), rgba(180,100,255,0.8), transparent);
}
.aptn-result-card-inner {
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

/* 아이콘 원형 */
.aptn-result-icon-wrap {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41,121,255,0.35) 0%, rgba(41,121,255,0.08) 70%);
  border: 1.5px solid rgba(80,150,255,0.6);
  box-shadow: 0 0 32px rgba(41,121,255,0.4), inset 0 0 16px rgba(41,121,255,0.12);
  display: flex; align-items: center; justify-content: center;
  animation: aptnIconFloat 3s ease-in-out infinite;
}
@keyframes aptnIconFloat {
  0%,100% { transform: translateY(0);   box-shadow: 0 0 32px rgba(41,121,255,0.4); }
  50%     { transform: translateY(-5px); box-shadow: 0 8px 40px rgba(41,121,255,0.55); }
}
.aptn-result-icon { font-size: 32px; line-height: 1; }

/* 타이틀 */
.aptn-result-label {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-shadow: 0 0 20px rgba(80,140,255,0.4);
}

/* 태그라인 (STRATEGY · GROWTH · IDENTITY) */
.aptn-result-tagline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: rgba(100,160,255,0.75);
  margin: -4px 0 0;
}

/* 서브 텍스트 */
.aptn-result-sub {
  font-size: 13px;
  color: rgba(180,210,255,0.75);
  line-height: 1.7;
  margin: 0;
  word-break: keep-all;
}

/* 구분선 */
.aptn-result-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(80,140,255,0.35), transparent);
  margin: 4px 0;
}

/* 지표 행 */
.aptn-result-metrics {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  margin-top: 2px;
}
.aptn-result-metric {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.aptn-result-metric-val {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  text-shadow: 0 0 16px rgba(80,140,255,0.5);
}
.aptn-result-metric-val em {
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  color: rgba(100,165,255,0.9);
  margin-left: 1px;
}
.aptn-result-metric-key {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: rgba(120,170,255,0.65);
  text-transform: uppercase;
}
.aptn-result-metric-sep {
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, transparent, rgba(80,140,255,0.3), transparent);
  flex-shrink: 0;
}

/* 반응형 */
@media (max-width: 860px) {
  .aptn-converge-steps { grid-template-columns: 1fr; gap: 16px; }
  .aptn-cvg-canvas { display: none; }
  .aptn-converge-result { margin-top: 32px; transition-delay: 0.3s; }
  .aptn-converge-step--left,
  .aptn-converge-step--center,
  .aptn-converge-step--right { transform: translateY(30px); }
  .aptn-result-card { width: 260px; }
  .aptn-step-connector-dot { display: none; }
}

/* ════════════════════════════════
   VISION / MISSION (가독성 개선)
════════════════════════════════ */
.aptn-vm-section {
  position: relative; z-index: 1;
}
.aptn-vm-divider {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 36px;
}
.aptn-vm-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
}
.aptn-vm-divider-badge {
  font-size: 10px; font-weight: 700;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.45);
  padding: 5px 18px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  white-space: nowrap;
  background: rgba(255,255,255,0.03);
}

/* 나란히 배치 */
.aptn-vm-row {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
  background: rgba(10,16,40,0.9);       /* 더 불투명하게 */
  border: 1px solid rgba(60,110,220,0.3);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(0,0,0,0.3);
}
.aptn-vm-sep-v {
  background: linear-gradient(to bottom, transparent, rgba(80,120,255,0.2), transparent);
}
.aptn-vm-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  padding: 44px 44px;
  text-align: center;
  transition: background .3s;
}
.aptn-vm-item:hover {
  background: rgba(41,121,255,0.06);
}
.aptn-vm-item--mission:hover {
  background: rgba(140,80,255,0.06);
}

/* 아이콘 박스 */
.aptn-vm-item-icon {
  width: 48px; height: 48px;
  border: 1px solid rgba(41,121,255,0.45);
  border-radius: 13px;
  background: rgba(41,121,255,0.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(41,121,255,0.12);
}
.aptn-vm-item-icon--mission {
  border-color: rgba(140,80,255,0.45);
  background: rgba(140,80,255,0.12);
  box-shadow: 0 0 12px rgba(140,80,255,0.12);
}

/* 내용 */
.aptn-vm-item-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aptn-vm-item-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: rgba(80,150,255,0.95);
}
.aptn-vm-item-label--mission {
  color: rgba(180,120,255,0.95);
}
.aptn-vm-item-text {
  font-size: 16px;           /* 키움 */
  color: rgba(210,225,255,0.9);   /* 밝게 */
  line-height: 1.9;
  font-weight: 400;
}
.aptn-vm-item-text strong {
  color: #ffffff;
  font-weight: 700;
}

/* Values (기존 호환) */
.about-values-section { background: var(--black-2); }
.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; margin-top: 48px; }
.value-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 32px;
}
.value-card h3 { font-size: 18px; font-weight: 600; line-height: 1.5; margin-bottom: 16px; }
.value-card h3 em { color: rgba(26,107,255,0.9); font-style: normal; display: block; font-size: 14px; font-weight: 400; margin-top: 4px; }
.value-card p { font-size: 14px; color: var(--gray-3); line-height: 1.8; }


/* ── About Clients / 클라이언트 ── */
/* ═══════════════════════════════════════════════
   상담 CTA 배너
   ═══════════════════════════════════════════════ */
.about-cta-section {
  background: linear-gradient(135deg, #03020d 0%, #080e24 50%, #03020d 100%);
  border-top: 1px solid rgba(41,121,255,0.2);
  border-bottom: 1px solid rgba(41,121,255,0.2);
  padding: 60px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.about-cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(41,121,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.about-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
/* 깜빡이는 텍스트 */
@keyframes ctaTextBlink {
  0%, 100% { opacity: 1; text-shadow: 0 0 20px rgba(41,121,255,0.6); }
  50%       { opacity: 0.55; text-shadow: 0 0 6px rgba(41,121,255,0.2); }
}
.about-cta-text {
  font-size: clamp(16px, 2.5vw, 22px);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.5;
  animation: ctaTextBlink 2s ease-in-out infinite;
}
/* 버튼 */
.about-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  border-radius: 50px;
  background: linear-gradient(135deg, rgba(41,121,255,0.9), rgba(80,160,255,0.8));
  border: 1px solid rgba(41,121,255,0.6);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
  box-shadow: 0 4px 24px rgba(41,121,255,0.35);
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
}
.about-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 40px rgba(41,121,255,0.55);
  background: linear-gradient(135deg, rgba(60,140,255,1), rgba(100,180,255,0.9));
}
.about-cta-arrow {
  font-size: 18px;
  transition: transform 0.25s;
}
.about-cta-btn:hover .about-cta-arrow {
  transform: translateX(5px);
}

/* ═══════════════════════════════════════════════
   클라이언트 섹션 — 흰 배경 + 로고 마퀴 (레뷰 스타일)
   ═══════════════════════════════════════════════ */
.acl-section {
  background: #ffffff;
  padding: 80px 0 72px;
  overflow: hidden;
}

/* 헤더 */
.acl-header {
  text-align: center;
  margin-bottom: 56px;
  padding: 0 24px;
}
.acl-eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #1a6bff;
  margin: 0 0 14px;
  text-transform: uppercase;
}
.acl-heading {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 900;
  color: #0a0a14;
  margin: 0 0 14px;
  letter-spacing: -1px;
  line-height: 1.15;
}
.acl-sub {
  font-size: 15px;
  color: #666;
  margin: 0;
  line-height: 1.6;
}

/* 마퀴 래퍼 */
.acl-marquee-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

/* 각 행 */
.acl-row {
  overflow: hidden;
  border-top: 1px solid #ebebeb;
}
.acl-row:last-child {
  border-bottom: 1px solid #ebebeb;
}

/* 스크롤 트랙 */
.acl-track {
  display: flex;
  width: max-content;
  align-items: center;
}
.acl-track--fwd {
  animation: aclFwd 30s linear infinite;
}
.acl-track--rev {
  animation: aclFwd 35s linear infinite reverse;
}

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

/* 로고 박스 */
.acl-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 44px;
  border-right: 1px solid #ebebeb;
  flex-shrink: 0;
  transition: background 0.2s;
}
.acl-logo-box:hover {
  background: #f5f7ff;
}

/* 로고 이미지 — 원본 색상 그대로 */
.acl-logo-img {
  width: auto;
  max-width: 130px;
  height: 48px;
  object-fit: contain;
  filter: none;
  opacity: 0.88;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.acl-logo-box:hover .acl-logo-img {
  filter: none;
  opacity: 1;
  transform: scale(1.06);
}

/* 호버 시 마퀴 일시 정지 */
.acl-marquee-wrap:hover .acl-track {
  animation-play-state: paused;
}

@media (max-width: 768px) {
  .acl-section { padding: 60px 0 56px; }
  .acl-logo-img { height: 36px; max-width: 90px; }
  .acl-logo-box { padding: 20px 28px; }
  .acl-header { margin-bottom: 40px; }
}

/* Location */
.location-layout { display: grid; grid-template-columns: 1fr 440px; gap: 60px; align-items: start; }
.location-map-wrap {
  height: 420px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}
.location-map-wrap iframe { width: 100%; height: 100%; display: block; }
.location-company { margin-bottom: 28px; }
.lc-logo-row { display: flex; align-items: center; gap: 14px; }
.lc-logo { width: 40px; height: 40px; object-fit: contain; }
.lc-name { display: block; font-size: 18px; font-weight: 700; color: var(--white); }
.lc-sub { font-size: 11px; color: var(--gray-3); letter-spacing: 2px; }
.location-detail-list { list-style: none; display: flex; flex-direction: column; gap: 20px; margin-bottom: 32px; }
.ldl-item { display: flex; gap: 14px; align-items: flex-start; }
.ldl-icon { width: 36px; height: 36px; background: rgba(26,107,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ldl-icon svg { width: 16px; height: 16px; color: rgba(26,107,255,0.8); fill: rgba(26,107,255,0.8); }
.ldl-label { display: block; font-size: 11px; color: var(--gray-3); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.ldl-value { font-size: 14px; color: var(--gray-2); line-height: 1.6; }
.ldl-note { font-size: 12px; color: var(--gray-3); }
.ldl-link { color: var(--white); text-decoration: none; font-weight: 500; }
.ldl-link:hover { color: rgba(26,107,255,0.9); }
.location-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================
   WORKS GALLERY PAGE
   ============================================ */
.works-container { max-width: 1280px; }
.works-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 48px; }
.wf-btn {
  padding: 8px 18px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: transparent;
  color: var(--gray-3);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--t) var(--ease);
}
.wf-btn:hover, .wf-btn.active {
  background: rgba(26,107,255,0.1);
  border-color: rgba(26,107,255,0.5);
  color: var(--white);
}
.wg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.wg-card { cursor: pointer; }
.wg-thumb {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card-bg);
}
.wg-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.wg-card:hover .wg-thumb img { transform: scale(1.07); }

/* 호버 오버레이 */
.wg-hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  border-radius: 16px;
}
.wg-card:hover .wg-hover-overlay { opacity: 1; }
.wg-hover-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(8px) scale(0.92);
  transition: transform 0.35s var(--ease);
}
.wg-card:hover .wg-hover-logo { transform: translateY(0) scale(1); }
.wg-logo-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 700;
  color: #fff;
  letter-spacing: 2px;
  text-align: center;
  line-height: 1.2;
  text-shadow: 0 0 40px rgba(26,107,255,0.8), 0 2px 12px rgba(0,0,0,0.5);
}
.wg-meta { padding: 14px 4px 0; }
.wg-brand { font-size: 13px; font-weight: 600; color: var(--white); display: block; margin-bottom: 4px; }
.wg-tags-text { font-size: 12px; color: var(--gray-3); line-height: 1.5; }

/* hidden card */
.wg-card.hidden { display: none; }

/* ============================================
   INSIGHT PAGE
   ============================================ */
.insight-message-section { padding-top: 80px; }
.insight-message-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 60px 0;
  border-bottom: 1px solid var(--border);
}
.insight-big-quote p {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--white);
}
.insight-big-quote p em { color: rgba(26,107,255,0.9); font-style: normal; }
.insight-message-body p { font-size: 15px; color: var(--gray-2); line-height: 1.9; margin-bottom: 14px; }
.insight-message-body p strong { color: var(--white); }

/* Featured card */
.insight-featured-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 48px;
  margin-bottom: 48px;
  transition: border-color var(--t) var(--ease);
}
.insight-featured-card:hover { border-color: rgba(26,107,255,0.4); }
.ifc-visual { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.ifc-icon-wrap svg { width: 120px; height: 120px; }
.ifc-category-tag {
  padding: 6px 16px;
  background: rgba(26,107,255,0.1);
  border: 1px solid rgba(26,107,255,0.3);
  border-radius: 20px;
  font-size: 12px;
  color: rgba(26,107,255,0.9);
}
.ifc-content h3 { font-size: 24px; font-weight: 700; line-height: 1.4; margin-bottom: 16px; }
.ifc-content p { font-size: 14px; color: var(--gray-2); line-height: 1.8; margin-bottom: 28px; }
.ifc-kpi-row { display: flex; gap: 32px; }
.ifc-kpi { display: flex; flex-direction: column; gap: 4px; }
.ifc-kpi strong { font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 700; color: rgba(26,107,255,0.9); }
.ifc-kpi span { font-size: 12px; color: var(--gray-3); }

/* Insight card grid */
.insight-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.insight-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 24px;
  transition: all var(--t) var(--ease);
}
.insight-card:hover { border-color: rgba(26,107,255,0.4); transform: translateY(-4px); }
.ic-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.ic-tag {
  font-size: 11px;
  color: rgba(26,107,255,0.8);
  background: rgba(26,107,255,0.08);
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 500;
}
.ic-icon svg { width: 40px; height: 40px; }
.insight-card h3 { font-size: 16px; font-weight: 600; line-height: 1.5; margin-bottom: 12px; }
.insight-card p { font-size: 13px; color: var(--gray-3); line-height: 1.75; margin-bottom: 16px; }
.ic-footer { border-top: 1px solid var(--border); padding-top: 12px; }
.ic-platform { font-size: 11px; color: rgba(26,107,255,0.6); }

/* Funnel */
.insight-funnel-section { background: var(--black-2); }
.insight-funnel-grid {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 48px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}
.ifg-step {
  flex: 1;
  padding: 36px 24px;
  border-right: 1px solid var(--border);
  text-align: center;
}
.ifg-step:last-child { border-right: none; }
.ifg-step--accent { background: rgba(26,107,255,0.07); }
.ifg-arrow {
  display: flex;
  align-items: center;
  padding: 0 4px;
  color: rgba(26,107,255,0.5);
  font-size: 20px;
}
.ifg-num { font-size: 11px; color: rgba(26,107,255,0.6); letter-spacing: 2px; margin-bottom: 10px; }
.ifg-label { font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 12px; }
.ifg-step p { font-size: 13px; color: var(--gray-3); line-height: 1.7; }

/* ============================================
   MARKETING (VIRAL) PAGE
   ============================================ */
.mkt-intro-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.mkt-intro-text .sec-title { margin: 12px 0 20px; }
.mkt-intro-text p { font-size: 15px; color: var(--gray-2); line-height: 1.8; margin-bottom: 12px; }
.mkt-intro-stats { display: flex; flex-direction: column; gap: 24px; }
.mis-item { padding: 24px 28px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; }
.mis-item strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: rgba(26,107,255,0.9);
  display: block;
  line-height: 1;
}
.mis-item strong span { font-size: 20px; }
.mis-item p { font-size: 13px; color: var(--gray-3); margin-top: 6px; }

/* Service blocks */
.mkt-svc-block { padding: 60px 0; }
.msb-header { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 36px; }
.msb-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: rgba(26,107,255,0.15);
  line-height: 1;
  flex-shrink: 0;
  width: 64px;
}
.msb-title { font-size: 28px; font-weight: 700; color: var(--white); }
.msb-en { font-size: 13px; color: var(--gray-3); letter-spacing: 1px; }
.msb-body { display: grid; grid-template-columns: 1fr 320px; gap: 60px; align-items: start; margin-left: 84px; }
.msb-desc p { font-size: 15px; color: var(--gray-2); line-height: 1.8; margin-bottom: 16px; }
.msb-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.msb-list li {
  font-size: 14px;
  color: var(--gray-2);
  padding-left: 16px;
  position: relative;
}
.msb-list li::before { content: '—'; position: absolute; left: 0; color: rgba(26,107,255,0.5); }
.msb-kpi-cards { display: flex; flex-direction: column; gap: 16px; }
.mkc {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  border-left: 3px solid rgba(26,107,255,0.5);
}
.mkc-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: rgba(26,107,255,0.9);
  display: block;
  line-height: 1;
  margin-bottom: 6px;
}
.mkc-num small { font-size: 18px; }
.mkc-label { font-size: 12px; color: var(--gray-3); }
.msb-divider { border: none; border-top: 1px solid var(--border); }

/* ============================================
   CONTACT PAGE
   ============================================ */
.contact-quick-section { padding: 60px 0 0; }
.cq-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cq-btn {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 32px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--t) var(--ease);
  text-align: left;
  color: inherit;
}
.cq-btn--primary { border-color: rgba(26,107,255,0.4); background: rgba(26,107,255,0.06); }
.cq-btn--primary:hover { background: rgba(26,107,255,0.12); border-color: rgba(26,107,255,0.7); }
.cq-btn--ghost:hover { border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.03); }
.cqb-icon {
  width: 48px; height: 48px;
  background: rgba(26,107,255,0.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cqb-icon svg { width: 20px; height: 20px; fill: rgba(26,107,255,0.9); }
.cq-btn--ghost .cqb-icon { background: rgba(255,255,255,0.08); }
.cq-btn--ghost .cqb-icon svg { fill: var(--white); }
.cqb-text { flex: 1; }
.cqb-text strong { display: block; font-size: 18px; font-weight: 600; color: var(--white); margin-bottom: 4px; }
.cqb-text span { font-size: 13px; color: var(--gray-3); }
.cqb-arrow { font-size: 20px; color: var(--gray-3); transition: transform var(--t) var(--ease); }
.cq-btn:hover .cqb-arrow { transform: translateX(4px); color: var(--white); }

/* 빠른 상담 모달 */
.quick-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.quick-modal.active { opacity: 1; pointer-events: all; }
.qm-card {
  background: var(--black-2);
  border: 1px solid rgba(26,107,255,0.3);
  border-radius: 28px;
  padding: 48px 40px;
  text-align: center;
  max-width: 380px;
  width: 90%;
  position: relative;
  transform: translateY(16px);
  transition: transform 0.3s ease;
}
.quick-modal.active .qm-card { transform: translateY(0); }
.qm-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: var(--gray-3);
  font-size: 18px;
  cursor: pointer;
}
.qm-icon { margin-bottom: 20px; }
.qm-icon svg { width: 64px; height: 64px; display: block; margin: 0 auto; }
.qm-card h3 { font-size: 24px; font-weight: 700; color: var(--white); margin-bottom: 10px; }
.qm-card > p { font-size: 15px; color: var(--gray-2); line-height: 1.7; margin-bottom: 28px; }
.qm-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(26,107,255,0.9);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
  padding: 16px 32px;
  border-radius: 60px;
  text-decoration: none;
  transition: background var(--t) var(--ease);
  letter-spacing: 1px;
  margin-bottom: 16px;
}
.qm-call-btn svg { width: 20px; height: 20px; fill: #fff; }
.qm-call-btn:hover { background: rgba(26,107,255,1); }
.qm-hours { font-size: 12px; color: var(--gray-3); }

/* Contact Form */
.contact-form-section { padding-top: 60px; }
.contact-layout { display: grid; grid-template-columns: 1fr 400px; gap: 60px; align-items: start; }
.cfw-head { margin-bottom: 36px; }
.cfw-head h2 { font-size: 28px; font-weight: 700; margin: 12px 0 10px; }
.cfw-head p { font-size: 14px; color: var(--gray-3); line-height: 1.7; }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.cf-row { display: flex; gap: 16px; }
.cf-row--2 > * { flex: 1; }
.cf-group { display: flex; flex-direction: column; gap: 8px; }
.cf-group label { font-size: 13px; color: var(--gray-2); font-weight: 500; }
.cf-required { color: rgba(26,107,255,0.8); }
.cf-group input, .cf-group textarea, .cf-group select {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--white);
  font-size: 14px;
  font-family: 'Noto Sans KR', sans-serif;
  transition: border-color var(--t) var(--ease);
  width: 100%;
  outline: none;
}
.cf-group input:focus, .cf-group textarea:focus, .cf-group select:focus {
  border-color: rgba(26,107,255,0.5);
  background: rgba(26,107,255,0.04);
}
.cf-group textarea { resize: vertical; min-height: 120px; }
.cf-checkbox-group { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-2);
  cursor: pointer;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  transition: all var(--t) var(--ease);
}
.cf-check-item:hover { border-color: rgba(26,107,255,0.4); }
.cf-check-item input[type="checkbox"] { width: 14px; height: 14px; accent-color: rgba(26,107,255,0.9); }
.cf-check-item input:checked + span { color: var(--white); }
.cf-check-item:has(input:checked) { border-color: rgba(26,107,255,0.5); background: rgba(26,107,255,0.07); }
.cf-select-wrap { position: relative; }
.cf-select-wrap select { appearance: none; padding-right: 40px; cursor: pointer; }
.cf-select-wrap select option { background: #0a0a14; }
.cf-select-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-3);
  pointer-events: none;
  font-size: 12px;
}
.cf-privacy .cf-check-item { border: none; padding: 0; font-size: 12px; color: var(--gray-3); }
.cf-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(26,107,255,0.9);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 18px 32px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t) var(--ease);
  width: 100%;
}
.cf-submit-btn svg { width: 18px; height: 18px; }
.cf-submit-btn:hover { background: rgba(26,107,255,1); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(26,107,255,0.35); }

/* Contact success */
/* ── 상담 완료 화면 ── */
@keyframes csNotifyBlink {
  0%,100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
@keyframes csBrochureGlow {
  0%,100% { box-shadow: 0 0 0 1px rgba(41,121,255,0.3), 0 0 10px rgba(41,121,255,0.1); }
  50%     { box-shadow: 0 0 0 1px rgba(41,121,255,0.8), 0 0 22px rgba(41,121,255,0.45); }
}
.contact-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 60px 0;
  text-align: center;
}
/* 위 문구 — 깜빡임 */
.cs-notify {
  font-size: 13px;
  color: rgba(120,160,255,0.75);
  line-height: 1.8;
  margin-bottom: 28px;
  animation: csNotifyBlink 2s ease-in-out infinite;
}
/* 체크 + 타이틀 한 줄 */
.cs-main {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}
.cs-check { width: 48px; height: 48px; flex-shrink: 0; }
.cs-check svg { width: 48px; height: 48px; display: block; }
.contact-success h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
}
/* 회사소개서 버튼 — 글로우 깜빡임 */
.cs-brochure-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 32px;
  background: rgba(41,121,255,0.14);
  border: 1px solid rgba(41,121,255,0.4);
  color: rgba(160,200,255,0.95);
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  animation: csBrochureGlow 1.8s ease-in-out infinite;
  transition: background 0.2s ease, color 0.2s ease;
}
.cs-brochure-btn:hover {
  background: rgba(41,121,255,0.28);
  color: #ffffff;
  animation: none;
  box-shadow: 0 0 0 1px rgba(41,121,255,0.8), 0 0 24px rgba(41,121,255,0.4);
}

/* 상담 완료 후 킥오프 유도 요소 */
.cs-contact-info {
  font-size: 14px;
  color: rgba(180,200,255,0.7);
  margin-top: -16px;
  margin-bottom: 8px;
}
.cs-contact-info a {
  color: rgba(160,200,255,0.9);
  text-decoration: none;
  font-weight: 600;
}
.cs-contact-info a:hover { color: #fff; }
.cs-divider {
  width: 100%;
  max-width: 320px;
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 24px auto;
}
.cs-kickoff-label {
  font-size: 12px;
  color: rgba(160,120,255,0.7);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.cs-kickoff-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 28px;
  background: rgba(160,120,255,0.12);
  border: 1px solid rgba(160,120,255,0.4);
  color: rgba(200,175,255,0.95);
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  animation: csKickoffGlow 2s ease-in-out infinite;
}
.cs-kickoff-btn:hover {
  background: rgba(160,120,255,0.25);
  border-color: rgba(160,120,255,0.7);
  color: #fff;
  animation: none;
  box-shadow: 0 0 24px rgba(160,120,255,0.25);
}
.cs-kickoff-desc {
  font-size: 11.5px;
  color: rgba(255,255,255,0.3);
  margin-top: 10px;
}
@keyframes csKickoffGlow {
  0%,100% { box-shadow: 0 0 0 rgba(160,120,255,0); }
  50%      { box-shadow: 0 0 18px rgba(160,120,255,0.22); }
}

/* Contact Info */
.contact-info-wrap { display: flex; flex-direction: column; gap: 20px; }
.ci-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 24px;
}
.ci-card h3 { font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 20px; letter-spacing: 0.5px; }
.ci-list { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.ci-list li { display: flex; gap: 14px; align-items: flex-start; }
.ci-icon { font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.ci-label { display: block; font-size: 11px; color: var(--gray-3); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.ci-value { font-size: 14px; color: var(--gray-2); line-height: 1.6; text-decoration: none; }
a.ci-value { color: var(--white); font-weight: 500; }
a.ci-value:hover { color: rgba(26,107,255,0.9); }

/* FAQ */
.ci-faq { display: flex; flex-direction: column; gap: 0; }
.cif-item { border-bottom: 1px solid var(--border); }
.cif-item:last-child { border-bottom: none; }
.cif-q {
  width: 100%;
  background: none;
  border: none;
  color: var(--gray-2);
  font-size: 13px;
  padding: 14px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: color var(--t) var(--ease);
  font-family: 'Noto Sans KR', sans-serif;
}
.cif-q:hover { color: var(--white); }
.cif-arr { font-size: 18px; flex-shrink: 0; transition: transform var(--t) var(--ease); color: rgba(26,107,255,0.7); }
.cif-item.open .cif-arr { transform: rotate(45deg); }
.cif-a {
  font-size: 13px;
  color: var(--gray-3);
  line-height: 1.7;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0;
}
.cif-item.open .cif-a { max-height: 200px; padding-bottom: 14px; }


/* ============================================
   WORKS — 새 오버레이 스타일 (wg-overlay)
   ============================================ */
.wg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1);
  border-radius: 16px;
}
.wg-card:hover .wg-overlay { opacity: 1; }

.wg-overlay-logo {
  transform: translateY(10px) scale(0.9);
  transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1);
}
.wg-card:hover .wg-overlay-logo { transform: translateY(0) scale(1); }

.wg-overlay-logo span {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(22px, 3.5vw, 36px);
  font-weight: 800;
  color: #fff;
  letter-spacing: 2px;
  text-align: center;
  line-height: 1;
  text-shadow:
    0 0 60px rgba(26,107,255,0.9),
    0 0 20px rgba(26,107,255,0.6),
    0 2px 16px rgba(0,0,0,0.6);
}

/* ============================================
   INSIGHT — 신규 스타일 (kimnlee 벤치마킹)
   ============================================ */

/* Featured section */
.insight-featured-section { padding-bottom: 0; }
.ins-featured {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 28px;
  overflow: hidden;
  transition: border-color var(--t) var(--ease);
}
.ins-featured:hover { border-color: rgba(26,107,255,0.35); }

.ins-featured-label {
  padding: 24px 40px 0;
}
.ins-featured-inner {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
}
.ins-featured-visual {
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border-right: 1px solid var(--border);
  background: rgba(26,107,255,0.03);
}
.ins-featured-icon-bg {
  width: 160px; height: 160px;
  display: flex; align-items: center; justify-content: center;
}
.ins-featured-icon-bg svg { width: 100%; height: 100%; }
.ins-featured-content {
  padding: 40px;
}
.ins-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.ins-date { font-size: 12px; color: var(--gray-3); }
.ins-read-time { font-size: 11px; color: rgba(26,107,255,0.7); background: rgba(26,107,255,0.08); padding: 3px 10px; border-radius: 10px; }

.ins-featured-title {
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 800;
  line-height: 1.35;
  color: var(--white);
  margin-bottom: 20px;
}
.ins-featured-desc {
  font-size: 15px;
  color: var(--gray-2);
  line-height: 1.8;
  margin-bottom: 32px;
}
.ins-kpi-row {
  display: flex;
  gap: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.ins-kpi-item { display: flex; flex-direction: column; gap: 4px; }
.ins-kpi-item strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: rgba(26,107,255,0.9);
}
.ins-kpi-item span { font-size: 11px; color: var(--gray-3); }

/* 카테고리 태그 색상 */
.ins-cat-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 12px;
  letter-spacing: 0.3px;
}
.ins-cat-tag--blue { background: rgba(26,107,255,0.1); color: rgba(26,107,255,0.9); border: 1px solid rgba(26,107,255,0.2); }
.ins-cat-tag--purple { background: rgba(139,92,246,0.1); color: rgba(139,92,246,0.9); border: 1px solid rgba(139,92,246,0.2); }
.ins-cat-tag--green { background: rgba(16,185,129,0.1); color: rgba(16,185,129,0.9); border: 1px solid rgba(16,185,129,0.2); }
.ins-cat-tag--orange { background: rgba(245,158,11,0.1); color: rgba(245,158,11,0.9); border: 1px solid rgba(245,158,11,0.2); }

/* 필터 바 */
.insight-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.inf-btn {
  padding: 8px 20px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--gray-3);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--t) var(--ease);
}
.inf-btn:hover, .inf-btn.active {
  background: rgba(26,107,255,0.1);
  border-color: rgba(26,107,255,0.5);
  color: var(--white);
}

/* 아티클 그리드 */
.insight-articles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.ins-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.ins-card:hover { border-color: rgba(26,107,255,0.4); transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
.ins-card.hidden { display: none; }

.ins-card-visual {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.ins-visual--01 { background: linear-gradient(135deg, rgba(26,107,255,0.12) 0%, rgba(26,107,255,0.04) 100%); }
.ins-visual--02 { background: linear-gradient(135deg, rgba(139,92,246,0.12) 0%, rgba(139,92,246,0.04) 100%); }
.ins-visual--03 { background: linear-gradient(135deg, rgba(16,185,129,0.12) 0%, rgba(16,185,129,0.04) 100%); }
.ins-visual--04 { background: linear-gradient(135deg, rgba(245,158,11,0.12) 0%, rgba(245,158,11,0.04) 100%); }
.ins-visual--05 { background: linear-gradient(135deg, rgba(16,185,129,0.1) 0%, rgba(26,107,255,0.06) 100%); }
.ins-visual--06 { background: linear-gradient(135deg, rgba(139,92,246,0.1) 0%, rgba(26,107,255,0.06) 100%); }

.ins-card-icon svg { width: 56px; height: 56px; }
.ins-card-body { padding: 20px; }
.ins-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}
.ins-card-title { font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--white); margin-bottom: 10px; }
.ins-card-desc { font-size: 12px; color: var(--gray-3); line-height: 1.7; margin-bottom: 14px; }
.ins-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.ins-platform { font-size: 11px; color: rgba(26,107,255,0.6); }

/* Load More */
.insight-load-more { text-align: center; }
.ins-load-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--gray-2);
  padding: 14px 32px;
  border-radius: 32px;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--t) var(--ease);
}
.ins-load-btn svg { width: 16px; height: 16px; }
.ins-load-btn:hover { border-color: rgba(26,107,255,0.5); color: var(--white); background: rgba(26,107,255,0.06); }

/* Funnel Steps — 새 디자인 */
.ins-funnel-steps {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 56px;
}
.ins-funnel-step {
  flex: 1;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 28px;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.ins-funnel-step:hover { border-color: rgba(26,107,255,0.4); transform: translateY(-4px); }
.ins-funnel-step--accent { background: rgba(26,107,255,0.06); border-color: rgba(26,107,255,0.25); }
.ins-funnel-arrow {
  display: flex;
  align-items: center;
  padding: 0 8px;
  flex-shrink: 0;
}
.ins-funnel-arrow svg { width: 36px; height: 20px; }
.ifs-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  color: rgba(26,107,255,0.6);
  letter-spacing: 3px;
  margin-bottom: 12px;
}
.ifs-body h4 { font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 12px; }
.ifs-body p { font-size: 13px; color: var(--gray-3); line-height: 1.75; }

/* Newsletter */
.insight-newsletter-section { background: var(--black-2); }
.ins-newsletter-wrap {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 80px;
  align-items: center;
}
.ins-nl-text .sec-title { margin: 12px 0 16px; }
.ins-nl-text h2 { font-size: clamp(26px, 2.5vw, 36px); font-weight: 800; line-height: 1.3; margin: 12px 0 16px; }
.ins-nl-text h2 em { color: rgba(26,107,255,0.9); font-style: normal; }
.ins-nl-text > p { font-size: 15px; color: var(--gray-2); line-height: 1.8; margin-bottom: 20px; }
.ins-nl-count {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-3);
}
.ins-nl-count svg { width: 18px; height: 18px; flex-shrink: 0; }
.ins-nl-count strong { color: var(--white); }
.ins-nl-form { display: flex; flex-direction: column; gap: 12px; }
.ins-nl-input-wrap {
  display: flex;
  gap: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color var(--t) var(--ease);
}
.ins-nl-input-wrap:focus-within { border-color: rgba(26,107,255,0.5); }
.ins-nl-input-wrap input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 16px 20px;
  color: var(--white);
  font-size: 14px;
  font-family: 'Noto Sans KR', sans-serif;
  outline: none;
}
.ins-nl-input-wrap input::placeholder { color: var(--gray-4); }
.ins-nl-btn {
  padding: 0 28px;
  background: rgba(26,107,255,0.9);
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t) var(--ease);
  white-space: nowrap;
}
.ins-nl-btn:hover { background: rgba(26,107,255,1); }
.ins-nl-note { font-size: 11px; color: var(--gray-4); }
.ins-nl-success {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(26,107,255,0.9);
  background: rgba(26,107,255,0.08);
  border: 1px solid rgba(26,107,255,0.2);
  border-radius: 12px;
  padding: 12px 16px;
}
.ins-nl-success svg { width: 24px; height: 24px; flex-shrink: 0; }

/* ============================================
   CONTACT — 신규 스타일 (cct / csb / faq)
   ============================================ */
.contact-cta-top { padding: 60px 0 0; }
.cct-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.cct-btn {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 32px 36px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s var(--ease);
  text-align: left;
  color: inherit;
  width: 100%;
}
.cct-btn--primary {
  border-color: rgba(26,107,255,0.35);
  background: rgba(26,107,255,0.06);
}
.cct-btn--primary:hover {
  border-color: rgba(26,107,255,0.65);
  background: rgba(26,107,255,0.12);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(26,107,255,0.15);
}
.cct-btn--ghost:hover {
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.04);
  transform: translateY(-3px);
}
.cct-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(26,107,255,0.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--t) var(--ease);
}
.cct-icon svg { width: 22px; height: 22px; color: rgba(26,107,255,0.9); stroke: rgba(26,107,255,0.9); }
.cct-btn--ghost .cct-icon { background: rgba(255,255,255,0.08); }
.cct-btn--ghost .cct-icon svg { color: var(--white); stroke: var(--white); }
.cct-text { flex: 1; }
.cct-text strong {
  display: block;
  font-size: 19px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 5px;
}
.cct-text span { font-size: 13px; color: var(--gray-3); }
.cct-arrow {
  color: var(--gray-3);
  flex-shrink: 0;
  transition: transform var(--t) var(--ease), color var(--t) var(--ease);
}
.cct-arrow svg { width: 20px; height: 20px; }
.cct-btn:hover .cct-arrow { transform: translateX(5px); color: var(--white); }

/* 모달 개선 */
.qm-close {
  position: absolute;
  top: 16px; right: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--t) var(--ease);
  color: var(--gray-2);
}
.qm-close:hover { background: rgba(255,255,255,0.12); }
.qm-close svg { width: 14px; height: 14px; }
.qm-phone-icon { margin-bottom: 20px; }
.qm-phone-icon svg { width: 80px; height: 80px; display: block; margin: 0 auto; }
.qm-sub { font-size: 15px; color: var(--gray-2); line-height: 1.7; margin-bottom: 28px; }
.qm-hours {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--gray-3);
  margin-top: 12px;
}
.qm-hours svg { width: 14px; height: 14px; }

/* Contact main section */
.contact-main-section { padding-top: 60px; }
.contact-layout { display: grid; grid-template-columns: 1fr 400px; gap: 60px; align-items: start; }

/* Form elements 재사용 — cf-req */
.cf-req { color: rgba(26,107,255,0.8); }

/* Chips (체크박스 칩) */
.cf-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.cf-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  padding: 11px 8px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  transition: all 0.2s ease;
  user-select: none;
  white-space: nowrap;
  text-align: center;
}
.cf-chip:hover {
  border-color: rgba(26,107,255,0.4);
  background: rgba(26,107,255,0.06);
  color: rgba(255,255,255,0.85);
}
/* 체크박스 숨김 */
.cf-chip input[type="checkbox"] {
  display: none;
}
/* ::before 제거 — 중앙 텍스트만 표시 */
.cf-chip span::before {
  display: none;
}
/* 선택 상태 */
.cf-chip:has(input:checked) {
  border-color: #1a6bff;
  background: rgba(26,107,255,0.13);
  color: #fff;
  font-weight: 600;
}
/* 선택 시 우상단 체크 뱃지 */
.cf-chip:has(input:checked)::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1a6bff url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6l2.5 2.5 4.5-4.5' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/9px no-repeat;
}

/* Select */
.cf-select-wrap { position: relative; }
.cf-select-wrap select { appearance: none; padding-right: 40px; cursor: pointer; }
.cf-select-wrap select option { background: #0a0a14; }
.cf-sel-arrow {
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--gray-3);
  pointer-events: none; font-size: 12px;
}

/* Privacy */
.cf-privacy-group .cf-check-item,
.cf-privacy-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  width: 100%;
}
/* 기본 checkbox 완전히 숨김 */
.cf-privacy-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.cf-privacy-box {
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 5px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
  position: relative;
  transition: border-color 0.2s, background 0.2s;
}
/* 체크 시 스타일 */
.cf-privacy-check input[type="checkbox"]:checked ~ .cf-privacy-box {
  background: rgba(26,107,255,0.85);
  border-color: rgba(26,107,255,0.9);
}
.cf-privacy-check input[type="checkbox"]:checked ~ .cf-privacy-box::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 2px;
  width: 6px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
/* 텍스트 */
.cf-privacy-check > span:last-child {
  flex: 1;
  line-height: 1.5;
}

/* Submit button */
.cf-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(26,107,255,0.9);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 18px 36px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t) var(--ease);
  width: 100%;
  font-family: 'Noto Sans KR', sans-serif;
}
.cf-submit svg { width: 18px; height: 18px; }
.cf-submit:hover { background: rgba(26,107,255,1); transform: translateY(-2px); box-shadow: 0 10px 36px rgba(26,107,255,0.35); }

/* Contact success */

/* Sidebar */
.contact-sidebar { display: flex; flex-direction: column; gap: 20px; }
.csb-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 24px;
}
.csb-title { font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 22px; letter-spacing: 0.3px; }
.csb-list { list-style: none; display: flex; flex-direction: column; gap: 20px; }
.csb-item { display: flex; gap: 14px; align-items: flex-start; }
.csb-icon {
  width: 38px; height: 38px;
  background: rgba(26,107,255,0.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.csb-icon svg { width: 16px; height: 16px; fill: rgba(26,107,255,0.8); }
.csb-label { display: block; font-size: 10px; color: var(--gray-3); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 4px; }
.csb-value { font-size: 14px; color: var(--gray-2); line-height: 1.65; text-decoration: none; }
.csb-link { color: var(--white); font-weight: 600; }
.csb-link:hover { color: rgba(26,107,255,0.9); }
.csb-note { font-size: 12px; color: var(--gray-3); display: block; margin-top: 3px; }

/* FAQ 새 디자인 */
.csb-faq { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-q {
  width: 100%;
  background: none;
  border: none;
  color: var(--gray-2);
  font-size: 13px;
  padding: 14px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: color var(--t) var(--ease);
  font-family: 'Noto Sans KR', sans-serif;
}
.faq-q:hover { color: var(--white); }
.faq-arr { flex-shrink: 0; transition: transform 0.3s ease; }
.faq-arr svg { width: 16px; height: 16px; display: block; }
.faq-item.open .faq-arr { transform: rotate(180deg); }
.faq-a {
  font-size: 13px;
  color: var(--gray-3);
  line-height: 1.75;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0;
}
.faq-item.open .faq-a { max-height: 200px; padding-bottom: 14px; }

/* ============================================
   RESPONSIVE (추가 분기)
   ============================================ */
@media (max-width: 1200px) {
  .insight-articles-grid { grid-template-columns: repeat(3, 1fr); }
  .ins-newsletter-wrap { grid-template-columns: 1fr; gap: 40px; }
  .ins-featured-inner { grid-template-columns: 240px 1fr; }
}

@media (max-width: 1024px) {
  .ins-featured-inner { grid-template-columns: 1fr; }
  .ins-featured-visual { border-right: none; border-bottom: 1px solid var(--border); }
  .ins-funnel-steps { flex-direction: column; gap: 0; }
  .ins-funnel-step { border-radius: 0; }
  .ins-funnel-step:first-child { border-radius: 20px 20px 0 0; }
  .ins-funnel-step:last-child { border-radius: 0 0 20px 20px; }
  .ins-funnel-arrow { transform: rotate(90deg); justify-content: center; padding: 8px 0; display: none; }
  .contact-layout { grid-template-columns: 1fr; }
  .cct-wrap { grid-template-columns: 1fr; }
  .about-intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .ai-services-grid { grid-template-columns: repeat(3, 1fr); }
  .about-stats-grid { grid-template-columns: 1fr 1fr; }
  .location-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .insight-articles-grid { grid-template-columns: repeat(2, 1fr); }
  .wg-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .mkt-intro-wrap { grid-template-columns: 1fr; }
  .msb-body { grid-template-columns: 1fr; margin-left: 0; }
  .values-grid { grid-template-columns: 1fr; }
  /* About 소개 섹션 모바일 */
  .ai-services-grid { grid-template-columns: repeat(2, 1fr); }
  /* 비즈니스 파트너 섹션 모바일 */
  .aptn-flow { flex-direction: column; gap: 8px; align-items: stretch; }
  .aptn-flow-step { max-width: 100%; }
  .aptn-flow-arrow { flex-direction: row; margin-top: 0; transform: rotate(90deg); }
  .aptn-flow-result { margin: 0 auto; }
  .aptn-vm-row { grid-template-columns: 1fr; }
  .aptn-vm-sep-v { width: 100%; height: 1px; }
  .aptn-vm-item { padding: 28px 24px; }
  .aptn-vm-item-text { font-size: 14px; }
}

@media (max-width: 480px) {
  .insight-articles-grid { grid-template-columns: 1fr; }
  .wg-grid { grid-template-columns: 1fr; }
  .ins-kpi-row { flex-wrap: wrap; gap: 20px; }
  .cf-row--2 { flex-direction: column; }
  .cct-btn { padding: 20px 20px; }
}

/* ============================================
   PAGE HERO — 서브페이지 공통 히어로 섹션
   헤더(fixed, ~74px)와 겹치지 않도록
   padding-top으로 충분한 여백 확보
   ============================================ */
.page-hero {
  position: relative;
  padding: 160px 0 100px;
  overflow: hidden;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.page-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--white);
  margin: 16px 0 20px;
}

.page-title em {
  color: rgba(26,107,255,0.9);
  font-style: normal;
}

.page-desc {
  font-size: clamp(14px, 1.5vw, 17px);
  color: var(--gray-2);
  line-height: 1.75;
  max-width: 560px;
}

/* 모바일 */
@media (max-width: 768px) {
  .page-hero {
    padding: 130px 0 80px;
  }
}

@media (max-width: 480px) {
  .page-hero {
    padding: 110px 0 60px;
  }
}

/* ===== NAV DROPDOWN ===== */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.nav-arrow {
  width: 10px;
  height: 10px;
  transition: transform var(--t) var(--ease);
  opacity: 0.6;
}
.nav-dropdown.open .nav-arrow {
  transform: rotate(180deg);
  opacity: 1;
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 280px;
  background: rgba(12,12,20,0.97);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
  z-index: 200;
}
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* 드롭다운 위쪽 작은 화살표 */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: rgba(12,12,20,0.97);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  rotate: 45deg;
}
.ndm-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ndm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--gray-2);
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.ndm-item:hover {
  background: rgba(26,107,255,0.1);
  color: #fff;
}
.ndm-icon {
  font-size: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26,107,255,0.08);
  border-radius: 8px;
  flex-shrink: 0;
}
.ndm-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ndm-text strong {
  font-size: 13px;
  font-weight: 600;
  color: inherit;
  line-height: 1.3;
}
.ndm-text em {
  font-size: 11px;
  color: var(--gray-3);
  font-style: normal;
  line-height: 1.3;
}
.ndm-item:hover .ndm-text em {
  color: rgba(26,107,255,0.8);
}

/* ===== SERVICE PAGES (svc-*) COMMON STYLES ===== */
.svc-hero { position: relative; }
.svc-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-3);
  text-decoration: none;
  margin-bottom: 24px;
  transition: color var(--t) var(--ease);
}
.svc-back-link:hover { color: rgba(26,107,255,0.9); }
.svc-hero-kpi {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 40px;
  padding: 28px 36px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: fit-content;
}
.shk-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.shk-item strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
}
.shk-item span {
  font-size: 12px;
  color: var(--gray-3);
}
.shk-divider {
  width: 1px;
  height: 40px;
  background: var(--border);
}

/* Service Intro Grid */
.svc-intro-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 80px;
  align-items: center;
}
.svc-intro-text h2 { margin: 16px 0 24px; }

/* 본문 단락 — 밝기·크기·줄간격 개선 */
.svc-intro-text p {
  font-size: 16px;
  color: rgba(255,255,255,0.78);   /* #b0b0b0 → 더 밝은 흰색 계열 */
  line-height: 2.0;                /* 1.8 → 2.0 여유 있는 줄간격 */
  margin-bottom: 20px;
  letter-spacing: 0.01em;
}

/* 두 번째 단락 — 약간 강조 */
.svc-intro-text p:nth-of-type(2) {
  color: rgba(255,255,255,0.90);
  font-weight: 500;
  border-left: 2px solid rgba(26,107,255,0.6);
  padding-left: 14px;
}

/* 리스트 컨테이너 */
.svc-feature-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;                          /* gap 제거 → li 내부 패딩으로 통일 */
}

/* 리스트 아이템 — 패딩·크기·대비 개선 */
.svc-feature-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;                 /* 14px → 15px */
  color: rgba(255,255,255,0.82);   /* 더 밝게 */
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
}
.svc-feature-list li:last-child {
  border-bottom: none;
}
.svc-feature-list li:hover {
  color: #fff;
}

/* 불릿 점 — 크기·밝기 개선 */
.sfl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3b82f6;             /* 더 밝고 선명한 파란색 */
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(59,130,246,0.6);
}
.svc-intro-visual { display: flex; justify-content: center; align-items: flex-start; }

/* 이미지 비주얼 래퍼 */
.siv-img-wrap {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 8px 40px rgba(0,0,0,0.45);
  position: relative;
}
.siv-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 1px solid rgba(26,107,255,0.15);
  pointer-events: none;
}
.siv-photo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.siv-img-wrap:hover .siv-photo {
  transform: scale(1.03);
}

.siv-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px 32px;
  text-align: center;
  width: 100%;
}
.siv-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
}
.siv-icon svg { width: 100%; height: 100%; }
.siv-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.siv-card p {
  font-size: 13px;
  color: var(--gray-3);
  line-height: 1.7;
}

/* ══════════════════════════════════════
   vi- : 바이럴 서비스 소개 리디자인
══════════════════════════════════════ */
.vi-grid {
  grid-template-columns: 1fr 420px;
  gap: 80px;
  align-items: center;
}

/* ── 좌측 텍스트 ── */
.vi-text {
  /* 스크롤 진입 전 숨김 */
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.85s cubic-bezier(.22,1,.36,1),
              transform 0.85s cubic-bezier(.22,1,.36,1);
}
.vi-text.vi-in {
  opacity: 1;
  transform: translateX(0);
}

.vi-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(60,140,255,0.9);
  font-weight: 700;
  text-transform: uppercase;
}
.vi-title {
  margin: 14px 0 22px !important;
}
.vi-desc {
  font-size: 15.5px;
  color: rgba(255,255,255,0.72);
  line-height: 1.95;
  margin-bottom: 28px;
}

/* 강조 인용구 */
.vi-quote {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(26,107,255,0.07);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 0 0 32px;
}
.vi-quote-bar {
  flex-shrink: 0;
  width: 3px;
  align-self: stretch;
  border-radius: 4px;
  background: linear-gradient(180deg, #1a6bff 0%, #00d4a8 100%);
}
.vi-quote p {
  font-size: 15px;
  color: rgba(255,255,255,0.88);
  line-height: 1.8;
  margin: 0;
}
.vi-quote p strong {
  color: #5eb0ff;
  font-weight: 700;
}

/* 피처 리스트 */
.vi-feat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.vi-feat-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.2s;
}
.vi-feat-item:last-child { border-bottom: none; }
.vi-feat-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(26,107,255,0.15);
  border: 1px solid rgba(26,107,255,0.35);
  font-size: 11px;
  font-weight: 800;
  color: #5eb0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
}
.vi-feat-text {
  font-size: 14.5px;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.01em;
}
.vi-feat-item:hover .vi-feat-text { color: #fff; }
.vi-feat-item:hover .vi-feat-num {
  background: rgba(26,107,255,0.3);
  border-color: rgba(26,107,255,0.6);
}

/* ── 우측 비주얼 ── */
.vi-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.85s cubic-bezier(.22,1,.36,1) 0.18s,
              transform 0.85s cubic-bezier(.22,1,.36,1) 0.18s;
}
.vi-visual.vi-in {
  opacity: 1;
  transform: translateX(0);
}

/* 배경 글로우 */
.vi-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,107,255,0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* 이미지 프레임 */
.vi-img-frame {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(60,120,255,0.3);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 20px 60px rgba(0,0,0,0.55),
    0 0 40px rgba(26,107,255,0.12);
}
.vi-photo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.vi-img-frame:hover .vi-photo { transform: scale(1.04); }

/* 이미지 위 배지 */
.vi-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(8,14,40,0.82);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(60,120,255,0.35);
  border-radius: 30px;
  padding: 7px 14px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.9);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.vi-badge--tl { top: 14px; left: 14px; }
.vi-badge--br { bottom: 14px; right: 14px; }
.vi-badge-icon { font-size: 14px; }
.vi-badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.vi-badge-dot--live {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,0.8);
  animation: viLivePulse 1.6s ease-in-out infinite;
}
@keyframes viLivePulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.4); }
}

/* 하단 스탯 바 */
.vi-stat-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(14,22,60,0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(60,120,255,0.25);
  border-radius: 16px;
  padding: 18px 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
.vi-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.vi-stat strong {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #fff 30%, #5eb0ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.vi-stat span {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.vi-stat-div {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
  margin: 0 8px;
}

/* ── 반응형 ── */
@media (max-width: 860px) {
  .vi-grid { grid-template-columns: 1fr; gap: 40px; }
  .vi-visual { display: none; }
}

/* Process Steps */
.svc-process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sps-step {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}
.sps-step:hover {
  border-color: rgba(255,255,255,0.15);
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.4);
}
/* 이미지 영역 */
.sps-img-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}
.sps-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}
.sps-step:hover .sps-img {
  transform: scale(1.07);
}
.sps-img-dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
/* 텍스트 영역 */
.sps-content {
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
}
.sps-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 10px;
}
.sps-body h4 {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.sps-body p {
  font-size: 13px;
  color: var(--gray-3);
  line-height: 1.7;
  margin: 0;
}
.sps-accent-bar {
  width: 28px;
  height: 2px;
  border-radius: 2px;
  margin-top: 16px;
  opacity: 0.7;
}

/* Result Grid */
.svc-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}
.srg-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  transition: border-color var(--t) var(--ease);
}
.srg-card:hover { border-color: rgba(26,107,255,0.3); }
.srg-card--featured {
  grid-column: span 1;
  background: linear-gradient(135deg, rgba(26,107,255,0.08), rgba(26,107,255,0.02));
  border-color: rgba(26,107,255,0.2);
}
.srg-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(26,107,255,0.8);
  background: rgba(26,107,255,0.1);
  border-radius: 6px;
  padding: 4px 10px;
  margin-bottom: 16px;
}
.srg-metrics {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.srg-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.srg-metric strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}
.srg-metric span {
  font-size: 11px;
  color: var(--gray-3);
}
.srg-desc {
  font-size: 13px;
  color: var(--gray-3);
  line-height: 1.7;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 4px;
}

/* Platform Grid */
.svc-platform-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.spg-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 20px;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.spg-card:hover {
  border-color: rgba(26,107,255,0.3);
  transform: translateY(-4px);
}
.spg-icon {
  font-size: 28px;
  margin-bottom: 12px;
}
.spg-card h4 {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.spg-card p {
  font-size: 13px;
  color: var(--gray-3);
  line-height: 1.7;
  margin-bottom: 14px;
}
.spg-kpi {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(26,107,255,0.9);
  padding: 6px 12px;
  background: rgba(26,107,255,0.08);
  border-radius: 8px;
  display: inline-block;
}

/* 4-Step Grid */
.svc-4step-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.s4g-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.s4g-card:hover {
  border-color: rgba(26,107,255,0.3);
  transform: translateY(-4px);
}
.s4g-step {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: rgba(26,107,255,0.2);
  line-height: 1;
  margin-bottom: 8px;
}
.s4g-icon {
  font-size: 28px;
  margin-bottom: 12px;
}
.s4g-card h4 {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.s4g-card p {
  font-size: 13px;
  color: var(--gray-3);
  line-height: 1.7;
}

/* CTA Section */
.svc-cta-section {
  padding: 100px 0;
  background: linear-gradient(135deg, rgba(26,107,255,0.08) 0%, transparent 60%);
  border-top: 1px solid var(--border);
}
.svc-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}
.svc-cta-text h2 {
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 12px;
}
.svc-cta-text h2 em {
  color: rgba(26,107,255,0.9);
  font-style: normal;
}
.svc-cta-text p {
  font-size: 15px;
  color: var(--gray-2);
  line-height: 1.7;
}
.svc-cta-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

/* ===== MARKETING MAIN PAGE (서비스 목록) ===== */
.mkt-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mkt-svc-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 32px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), background var(--t) var(--ease);
  position: relative;
  overflow: hidden;
}
/* 반투명 배경 이미지 레이어 */
.msc-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.08;
  transition: opacity 0.35s ease;
  z-index: 0;
  pointer-events: none;
}
.mkt-svc-card:hover .msc-bg { opacity: 0.15; }
/* 카드 내용 z-index 올리기 */
.msc-icon, .msc-body, .msc-kpi, .msc-arrow { position: relative; z-index: 1; }
.mkt-svc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26,107,255,0.06), transparent);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.mkt-svc-card:hover {
  border-color: rgba(26,107,255,0.4);
  transform: translateY(-6px);
}
.mkt-svc-card:hover::after { opacity: 1; }
.msc-icon {
  font-size: 32px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26,107,255,0.08);
  border-radius: 14px;
}
.msc-body h3 {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.msc-body p {
  font-size: 13px;
  color: var(--gray-3);
  line-height: 1.7;
}
.msc-kpi {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.msc-kpi-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.msc-kpi-item strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: rgba(26,107,255,0.9);
}
.msc-kpi-item span {
  font-size: 11px;
  color: var(--gray-3);
}
.msc-arrow {
  margin-top: auto;
  color: rgba(26,107,255,0.5);
  font-size: 18px;
  transition: transform var(--t) var(--ease), color var(--t) var(--ease);
  align-self: flex-end;
}
.mkt-svc-card:hover .msc-arrow {
  transform: translateX(4px);
  color: rgba(26,107,255,0.9);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .svc-intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .svc-intro-visual { display: none; }
  .svc-process-steps { grid-template-columns: repeat(2, 1fr); }
  .svc-result-grid { grid-template-columns: 1fr; }
  .svc-platform-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-4step-grid { grid-template-columns: repeat(2, 1fr); }
  .mkt-services-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-cta-inner { flex-direction: column; text-align: center; }
  .svc-cta-btns { flex-direction: row; }
  .svc-hero-kpi { gap: 20px; padding: 20px 24px; flex-wrap: wrap; }
}
@media (max-width: 768px) {
  .nav-dropdown-menu { left: auto; right: 0; transform: translateY(-6px); }
  .nav-dropdown.open .nav-dropdown-menu { transform: translateY(0); }
  .nav-dropdown-menu::before { left: auto; right: 24px; transform: none; }
  .svc-process-steps { grid-template-columns: 1fr; }
  .svc-platform-grid { grid-template-columns: 1fr; }
  .svc-4step-grid { grid-template-columns: 1fr; }
  .mkt-services-grid { grid-template-columns: 1fr; }
  .svc-hero-kpi { flex-direction: column; gap: 16px; }
  .shk-divider { display: none; }
  .svc-cta-btns { flex-direction: column; }
  .svc-cta-text h2 { font-size: 26px; }
}

/* ===== CALL MODAL ===== */
.call-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.call-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.call-modal {
  position: relative;
  background: rgba(16, 18, 32, 0.96);
  border: 1px solid rgba(26, 107, 255, 0.25);
  border-radius: 24px;
  padding: 52px 48px 44px;
  text-align: center;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.05);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), opacity 0.28s ease;
  opacity: 0;
  margin: 16px;
}
.call-modal-overlay.open .call-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.call-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  color: var(--gray-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.call-modal-close:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}
.call-modal-close svg { width: 16px; height: 16px; }
.call-modal-icon {
  font-size: 42px;
  margin-bottom: 16px;
  display: block;
  animation: callPulse 1.8s ease-in-out infinite;
}
@keyframes callPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.08); }
}
.call-modal-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(26,107,255,0.8);
  margin-bottom: 8px;
}
.call-modal-name {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
  letter-spacing: -0.3px;
}
.call-modal-number {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
  text-decoration: none;
  margin-bottom: 8px;
  transition: color var(--t) var(--ease);
}
.call-modal-number:hover { color: rgba(26,107,255,0.9); }
.call-modal-hours {
  font-size: 12px;
  color: var(--gray-3);
  margin-bottom: 28px;
}
.call-modal-btn {
  display: block;
  width: 100%;
  padding: 14px 0;
  background: rgba(26,107,255,1);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.call-modal-btn:hover {
  background: rgba(50,125,255,1);
  transform: translateY(-2px);
}

/* ===== CLIENT LOGO MARQUEE SECTION ===== */
.client-marquee-section {
  padding: 100px 0 80px;
  overflow: hidden;
}
.cmarq-track-wrap {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
}

/* 행 공통 – 좌우 페이드 마스크 */
.cmarq-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.cmarq-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
}

/* 방향별 애니메이션 */
.cmarq-row--ltr .cmarq-inner {
  animation: marqLtr 32s linear infinite;
}
.cmarq-row--rtl .cmarq-inner {
  animation: marqRtl 36s linear infinite;
}
.cmarq-row--slow .cmarq-inner {
  animation: marqLtr 44s linear infinite;
}
/* 호버 시 일시정지 */
.cmarq-row:hover .cmarq-inner {
  animation-play-state: paused;
}
@keyframes marqLtr {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes marqRtl {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* 로고 아이템 카드 */
.clogo-item {
  flex-shrink: 0;
  width: 160px;
  height: 80px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  cursor: default;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.clogo-item:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-3px);
}
.clogo-item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* 다크 배경에서 흰색/투명 로고 처리 */
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.clogo-item:hover img {
  opacity: 1;
  filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(255,255,255,0.3));
}

@media (max-width: 768px) {
  .clogo-item { width: 120px; height: 60px; padding: 10px 14px; }
  .cmarq-inner { gap: 14px; }
}

/* ===== VIRAL STORY SCROLL INTRO ===== */
.viral-story {
  position: relative;
}

/* 각 씬: 풀스크린 + 스냅 */
.vs-scene {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 배경 오버레이 */
.vs-scene-bg {
  position: absolute;
  inset: 0;
  background: #050508;
  z-index: 0;
}
.vs-scene-bg--glow {
  background: radial-gradient(ellipse at 50% 60%, rgba(26,107,255,0.18) 0%, transparent 65%), #050508;
}

/* 텍스트 공통 */
.vs-text {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: clamp(28px, 4.5vw, 60px);
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  letter-spacing: -0.02em;
  padding: 0 24px;
  /* 초기 상태: 투명 + 살짝 아래 */
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.85s cubic-bezier(0.22,1,0.36,1), transform 0.85s cubic-bezier(0.22,1,0.36,1);
}
.vs-text.vs-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 크기 변형 */
.vs-text--large {
  font-size: clamp(32px, 5.5vw, 72px);
}
.vs-text--accent {
  font-size: clamp(48px, 9vw, 120px);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,0.12);
  text-shadow: 0 0 80px rgba(26,107,255,0.5);
}
.vs-text--em {
  font-size: clamp(28px, 4.2vw, 58px);
}
.vs-text em {
  color: var(--accent);
  font-style: normal;
}

/* 씬6 CTA */
.vs-scene--cta {
  flex-direction: column;
  gap: 0;
}
.vs-cta-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  /* 초기 상태 */
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.85s cubic-bezier(0.22,1,0.36,1), transform 0.85s cubic-bezier(0.22,1,0.36,1);
}
.vs-cta-wrap.vs-visible {
  opacity: 1;
  transform: translateY(0);
}
.vs-text--cta {
  /* 이 요소는 vs-cta-wrap 안에 있으므로 자체 opacity/transform 제거 */
  opacity: 1 !important;
  transform: none !important;
  font-size: clamp(30px, 5vw, 64px);
}
.vs-scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.45);
  font-size: 12px;
  letter-spacing: 0.08em;
  animation: vsHintBounce 2s ease-in-out infinite;
}
@keyframes vsHintBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* 헤더 숨기기 */
.header--hidden {
  /* about 스크롤 스토리에서 헤더를 숨기지 않음 - 항상 표시 */
  opacity: 1 !important;
  pointer-events: auto !important;
}
.site-header {
  transition: opacity 0.4s ease;
}

/* ===== VIRAL PRODUCTS GRID ===== */
.viral-products-section {
  background: rgba(255,255,255,0.015);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.vp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 56px;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.vp-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  cursor: pointer;
  user-select: none;
}
.vp-card:hover {
  background: rgba(26,107,255,0.06);
  border-color: rgba(26,107,255,0.2);
}
.vp-card--active {
  background: rgba(26,107,255,0.08);
  border-color: rgba(26,107,255,0.35);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(26,107,255,0.12);
}

/* 카드 상단 행 */
.vp-card-top {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.vp-icon {
  font-size: 28px;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26,107,255,0.12);
  border: 1px solid rgba(26,107,255,0.25);
  border-radius: 14px;
}
.vp-body {
  flex: 1;
}
.vp-body h3 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}
.vp-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}
.vp-body p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--gray-2);
  margin: 0;
}

/* 토글 화살표 버튼 */
.vp-toggle-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.4);
  transition: transform 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  margin-top: 2px;
}
.vp-toggle-btn--open {
  transform: rotate(180deg);
  border-color: rgba(26,107,255,0.5);
  color: #1a6bff;
}

/* KPI 패널 (접힌 상태) */
.vp-kpi-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease;
  opacity: 0;
}
.vp-kpi-panel--open {
  max-height: 220px;
  opacity: 1;
}
.vp-kpi-divider {
  margin: 20px 0 16px;
  height: 1px;
  background: rgba(26,107,255,0.2);
}
.vp-kpi-row {
  display: flex;
  gap: 32px;
}
.vp-kpi-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vp-kpi-val {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  color: #1a6bff;
  line-height: 1;
  letter-spacing: -0.5px;
}
.vp-kpi-label {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* 상품군 태그 */
.vp-tags-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
}
.vp-tags-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-top: 5px;
}
.vp-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vp-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  letter-spacing: 0.01em;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.vp-card--active .vp-tag:hover {
  background: rgba(26,107,255,0.18);
  border-color: rgba(26,107,255,0.45);
  color: #fff;
}

/* ── 자세히 보기 (회사소개서) 버튼 ── */
.vp-brochure-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 52px;
}

.vp-brochure-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 50px;
  background: rgba(26,107,255,0.10);
  border: 1px solid rgba(26,107,255,0.35);
  color: #93c5fd;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  font-family: 'Space Grotesk', sans-serif;
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  /* 깜빡임 애니메이션 */
  animation: vpBtnPulse 2.4s ease-in-out infinite;
}

@keyframes vpBtnPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(26,107,255,0);
    border-color: rgba(26,107,255,0.35);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(26,107,255,0.12), 0 0 24px rgba(26,107,255,0.25);
    border-color: rgba(26,107,255,0.7);
  }
}

.vp-brochure-btn:hover {
  background: rgba(26,107,255,0.22);
  border-color: rgba(26,107,255,0.75);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(26,107,255,0.12), 0 8px 32px rgba(26,107,255,0.3);
  animation: none;  /* hover 시엔 pulse 중단, 고정 강조 */
}

/* 왼쪽 깜빡이는 점 */
.vp-brochure-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3b82f6;
  flex-shrink: 0;
  animation: vpDotBlink 1.2s ease-in-out infinite;
}

@keyframes vpDotBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.25; transform: scale(0.6); }
}

.vp-brochure-btn:hover .vp-brochure-dot {
  background: #60a5fa;
  animation: none;
  opacity: 1;
}

.vp-brochure-text {
  font-size: 15px;
}

.vp-brochure-hint {
  font-size: 12px;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.03em;
  margin: 0;
}

@media (max-width: 768px) {
  .vp-grid { grid-template-columns: 1fr; }
  .vs-text--accent { font-size: clamp(48px, 16vw, 80px); }
  .vp-brochure-btn { font-size: 14px; padding: 12px 24px; }
}

/* ══════════════════════════════════════════════════
   INSIGHT v2 — 목록 페이지
══════════════════════════════════════════════════ */

/* ── 카테고리 탭 ── */
.ins2-tab-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 0;
}
.ins2-tab {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--gray-3);
  padding: 12px 20px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
  letter-spacing: -0.2px;
}
.ins2-tab:hover { color: var(--white); }
.ins2-tab.active {
  color: var(--white);
  border-bottom-color: #1a6bff;
  font-weight: 700;
}

/* ── 서브 탭 (콘텐츠 별 전략 세부 카테고리) ── */
.ins2-sub-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
  padding: 16px 20px;
  background: rgba(26,107,255,0.05);
  border: 1px solid rgba(26,107,255,0.12);
  border-radius: 12px;
}
.ins2-sub-tab {
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-3);
  padding: 7px 16px;
  border-radius: 20px;
  transition: all 0.2s;
  letter-spacing: -0.2px;
  white-space: nowrap;
}
.ins2-sub-tab:hover {
  color: var(--white);
  border-color: rgba(26,107,255,0.4);
  background: rgba(26,107,255,0.08);
}
.ins2-sub-tab.active {
  color: var(--white);
  background: rgba(26,107,255,0.2);
  border-color: rgba(26,107,255,0.6);
  font-weight: 600;
}

/* ── 카드 그리드 ── */
.ins2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.ins2-grid--related {
  margin-top: 0;
}

/* ── 카드 ── */
.ins2-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.ins2-card:hover {
  border-color: rgba(26,107,255,0.5);
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.35);
}

/* 썸네일 */
.ins2-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #0d1a2e 0%, #0a0f1e 100%);
  overflow: hidden;
}
.ins2-thumb--fallback {
  background: linear-gradient(135deg, rgba(26,107,255,0.12) 0%, rgba(0,0,0,0.3) 100%);
}
.ins2-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.ins2-card:hover .ins2-thumb-img { transform: scale(1.04); }

/* 태그 배지 */
.ins2-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(26,107,255,0.85);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.3px;
  backdrop-filter: blur(6px);
}
.ins2-tag--hero {
  position: static;
  display: inline-flex;
  background: rgba(26,107,255,0.85);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
}
.ins2-tag--ghost {
  position: static;
  display: inline-flex;
  background: rgba(255,255,255,0.08);
  color: var(--gray-2);
  font-size: 12px;
  padding: 5px 14px;
  border-radius: 20px;
  margin-left: 8px;
}

/* 카드 본문 */
.ins2-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.ins2-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--white);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ins2-summary {
  font-size: 13px;
  color: var(--gray-3);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.ins2-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.ins2-date {
  font-size: 12px;
  color: var(--gray-3);
}
.ins2-views {
  font-size: 12px;
  color: var(--gray-3);
}
.ins2-views::before {
  content: '👁 ';
}

/* 빈 상태 */
.ins2-empty {
  text-align: center;
  padding: 80px 0;
  color: var(--gray-3);
  font-size: 15px;
}

/* ── 로딩 스피너 ── */
.ins2-loading {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 80px 0;
  color: #666;
  font-size: 14px;
}
.ins2-spinner {
  width: 36px; height: 36px;
  border: 3px solid #2a2a2a;
  border-top-color: #1a6bff;
  border-radius: 50%;
  animation: ins2Spin 0.7s linear infinite;
}
@keyframes ins2Spin { to { transform: rotate(360deg); } }

/* ── 썸네일 없을 때 폴백 ── */
.ins2-thumb-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #1a1a2e;
  color: #333;
  font-size: 36px;
}

/* ── 목록 섹션 ── */
.insight-list-section {
  padding: 60px 0 80px;
}


/* ══════════════════════════════════════════════════
   INSIGHT v2 — 상세 페이지
══════════════════════════════════════════════════ */

.ins-detail-hero {
  position: relative;
  padding: 100px 0 60px;
  overflow: hidden;
}
.ins-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-3);
  text-decoration: none;
  margin-bottom: 24px;
  transition: color 0.2s;
}
.ins-detail-back:hover { color: var(--white); }
.ins-detail-meta-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}
.ins-detail-title {
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.35;
  color: var(--white);
  letter-spacing: -0.5px;
  max-width: 800px;
  margin-bottom: 20px;
}
.ins-detail-info {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: var(--gray-3);
}

/* 썸네일 */
.ins-detail-thumb-wrap {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.ins-detail-thumb {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid var(--border);
  display: block;
  opacity: 0.92;
}

/* 본문 */
.ins-detail-body {
  padding-top: 56px;
  padding-bottom: 80px;
  max-width: 780px;
}
.ins-detail-content {
  color: var(--gray-2);
  font-size: 16px;
  line-height: 1.85;
}
.ins-detail-content h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  margin: 48px 0 16px;
  line-height: 1.4;
}
.ins-detail-content h2:first-child { margin-top: 0; }
.ins-detail-content h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
  margin: 32px 0 12px;
}
.ins-detail-content p {
  margin: 0 0 20px;
}
.ins-detail-content ul,
.ins-detail-content ol {
  padding-left: 22px;
  margin: 0 0 24px;
}
.ins-detail-content li {
  margin-bottom: 8px;
}
.ins-detail-content strong {
  color: var(--white);
  font-weight: 700;
}
.ins-detail-content em {
  color: rgba(26,107,255,0.9);
  font-style: normal;
}
.ins-detail-content a {
  color: rgba(26,107,255,0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 관련 글 */
.ins-detail-related {
  background: var(--black-2);
  padding: 60px 0;
}
.ins-detail-related-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 32px;
}

/* ── 반응형 ── */
@media (max-width: 1024px) {
  .ins2-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ins2-grid { grid-template-columns: 1fr; gap: 20px; }
  .ins2-tab-bar { gap: 4px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0; }
  .ins2-tab { font-size: 13px; padding: 10px 14px; white-space: nowrap; }
  .ins2-sub-tab-bar { gap: 6px; padding: 12px 14px; }
  .ins2-sub-tab { font-size: 12px; padding: 6px 12px; }
  .ins-detail-body { padding-top: 36px; }
  .ins-detail-content { font-size: 15px; }
}

/* ══════════════════════════════════════════════════
   GALLERY — 인애드 일상
══════════════════════════════════════════════════ */

/* 갤러리 탭 강조 */
.ins2-tab--gallery {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ins2-tab-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4d9fff;
  box-shadow: 0 0 8px rgba(41,121,255,0.9);
  flex-shrink: 0;
  animation: galDotPulse 2s ease-in-out infinite;
}
@keyframes galDotPulse {
  0%,100% { box-shadow: 0 0 6px rgba(41,121,255,0.9); transform: scale(1); }
  50%      { box-shadow: 0 0 14px rgba(41,121,255,0.5); transform: scale(1.3); }
}
.ins2-tab--gallery.active .ins2-tab-dot {
  background: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,0.7);
}

/* 갤러리 필터 태그 바 */
.insgal-filter {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.insgal-ftag {
  padding: 8px 18px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--gray-3);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.3px;
}
.insgal-ftag:hover {
  border-color: rgba(41,121,255,0.4);
  color: #fff;
}
.insgal-ftag.active {
  background: rgba(41,121,255,0.15);
  border-color: rgba(41,121,255,0.6);
  color: #4d9fff;
}

/* 마소닉 그리드 */
.insgal-grid {
  columns: 3;
  column-gap: 14px;
}
.insgal-item {
  break-inside: avoid;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.3s, box-shadow 0.3s;
}
.insgal-item--tall { margin-bottom: 14px; }
.insgal-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.insgal-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.insgal-item--tall img {
  /* tall 카드는 가로 두 배 너비처럼 보이도록 높이만 늘림 */
  min-height: 320px;
  object-fit: cover;
}
.insgal-item:hover img {
  transform: scale(1.05);
}
.insgal-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  gap: 5px;
}
.insgal-item:hover .insgal-item-overlay { opacity: 1; }
.insgal-item-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #4d9fff;
  background: rgba(41,121,255,0.18);
  border: 1px solid rgba(41,121,255,0.4);
  border-radius: 20px;
  padding: 3px 10px;
  align-self: flex-start;
}
.insgal-item-caption {
  font-size: 13px;
  color: rgba(255,255,255,0.9);
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
}

/* 갤러리 empty */
#insGalEmpty {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 80px 0;
  color: var(--gray-3);
}

/* 라이트박스 */
.insgal-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.insgal-lightbox.insgal-lb--visible { opacity: 1; }
.insgal-lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,5,0.92);
  backdrop-filter: blur(10px);
}
.insgal-lb-content {
  position: relative;
  z-index: 1;
  width: min(88vw, 860px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
/* 이미지를 감싸는 고정 비율 컨테이너 — 항상 동일한 크기 유지 */
.insgal-lb-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background: #0a0a0a;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.insgal-lb-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.insgal-lb-close:hover { background: rgba(255,255,255,0.2); }
.insgal-lb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.insgal-lb-caption {
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  text-align: center;
}
.insgal-lb-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #4d9fff;
  background: rgba(41,121,255,0.15);
  border: 1px solid rgba(41,121,255,0.35);
  border-radius: 20px;
  padding: 4px 12px;
}

/* 반응형 */
@media (max-width: 1024px) {
  .insgal-grid { columns: 2; }
}
@media (max-width: 640px) {
  .insgal-grid { columns: 2; column-gap: 8px; }
  .insgal-item { margin-bottom: 8px; border-radius: 10px; }
  .insgal-item-overlay { opacity: 1; }
}
@media (max-width: 400px) {
  .insgal-grid { columns: 1; }
}

/* ══════════════════════════════════════════════════
   인애드 일상 갤러리 카드 (ins2-card 통일 스타일)
══════════════════════════════════════════════════ */

/* 갤러리 서브탭 — ins2-sub-tab-bar 와 동일하게 상단 여백만 조정 */
.insgal-sub-tabs {
  margin-bottom: 32px;
}

/* 갤러리 카드 그리드 — ins2-grid 와 동일한 3컬럼 */
#insGalGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ── 갤러리 카드 ── */
.insgal-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.insgal-card:hover {
  border-color: rgba(41,121,255,0.5);
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.35);
}

/* 썸네일 */
.insgal-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #0d1a2e 0%, #0a0f1e 100%);
  overflow: hidden;
}
.insgal-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.insgal-card:hover .insgal-card-thumb img {
  transform: scale(1.05);
}

/* 태그 배지 */
.insgal-card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border: 1px solid;
  border-radius: 20px;
  padding: 3px 10px;
  backdrop-filter: blur(6px);
}

/* 줌 아이콘 (호버 시) */
.insgal-card-zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.25s;
  color: #fff;
  font-size: 22px;
}
.insgal-card:hover .insgal-card-zoom { opacity: 1; }

/* 캡션 영역 */
.insgal-card-body {
  padding: 14px 16px;
  flex: 1;
}
.insgal-card-caption {
  font-size: 13px;
  color: var(--gray-2);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 라이트박스 개선 (태그+캡션 나란히) ── */
.insgal-lb-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.insgal-lb-caption {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  text-align: center;
}
/* 슬라이더 카운터 */
.insgal-lb-counter {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
  letter-spacing: .5px;
  min-width: 40px;
  text-align: center;
}
/* prev / next 버튼 — img-wrap 내부에 absolute */
.insgal-lb-prev,
.insgal-lb-next {
  position: absolute;
  top: 0;
  height: 100%;
  width: 56px;
  border: none;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  display: none;             /* JS에서 flex로 전환 */
  align-items: center;
  justify-content: center;
  transition: background .2s;
  z-index: 2;
  line-height: 1;
  padding: 0;
  user-select: none;
}
.insgal-lb-prev {
  left: 0;
  border-radius: 16px 0 0 16px;
  background: linear-gradient(to right, rgba(0,0,0,0.4), transparent);
}
.insgal-lb-next {
  right: 0;
  border-radius: 0 16px 16px 0;
  background: linear-gradient(to left, rgba(0,0,0,0.4), transparent);
}
.insgal-lb-prev:hover { background: linear-gradient(to right, rgba(0,0,0,0.6), transparent); }
.insgal-lb-next:hover { background: linear-gradient(to left, rgba(0,0,0,0.6), transparent); }
/* 이미지 페이드 트랜지션 */
.insgal-lb-img { transition: opacity 0.12s ease; }
@media (max-width: 640px) {
  .insgal-lb-content { width: 96vw; }
  .insgal-lb-prev, .insgal-lb-next { width: 40px; font-size: 22px; }
}

/* 갤러리 카드 — 이미지 장수 배지 */
.insgal-card-count {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  padding: 2px 7px;
  display: flex;
  align-items: center;
  gap: 3px;
  backdrop-filter: blur(4px);
  letter-spacing: .3px;
}

/* 반응형 */
@media (max-width: 1024px) {
  #insGalGrid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
  #insGalGrid { grid-template-columns: 1fr; gap: 16px; }
  .insgal-sub-tabs { flex-wrap: wrap; gap: 6px; }
}

/* ══════════════════════════════════════════════════
   WHY 인애드컴퍼니 섹션 (마케팅 서비스 페이지)
══════════════════════════════════════════════════ */

.why-inadco-section {
  background: var(--black-2);
  padding: 80px 0;
}

/* 헤더 영역 */
.why-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 48px;
}
.why-header-left { flex: 1; }
.why-title {
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.5px;
  margin: 8px 0 14px;
  line-height: 1.2;
}
.why-desc {
  font-size: 15px;
  color: var(--gray-3);
  line-height: 1.7;
}
.why-desc strong { color: var(--white); font-weight: 700; }

/* RISK → SYSTEM → STABILITY 트랙 */
.why-badge-track {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  padding-top: 28px;
}
.wbt-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.wbt-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.3);
}
.wbt-label--blue { color: #1a6bff; }
.wbt-item--active .wbt-label { color: rgba(255,255,255,0.7); }
.wbt-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
}
.wbt-dot--active { background: rgba(255,255,255,0.6); }
.wbt-dot--blue { background: #1a6bff; box-shadow: 0 0 8px rgba(26,107,255,0.6); }
.wbt-line {
  width: 48px;
  height: 1px;
  background: rgba(255,255,255,0.15);
  margin: 0 4px;
  margin-top: 18px;
}

/* 6개 카드 그리드 */
.why-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.why-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 22px 22px 24px;
  transition: border-color 0.2s, background 0.2s;
}
.why-card:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.15);
}
.why-card--highlight {
  border-color: rgba(26,107,255,0.5);
  background: rgba(26,107,255,0.06);
}
.why-card--highlight:hover {
  border-color: rgba(26,107,255,0.75);
  background: rgba(26,107,255,0.1);
}
.why-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.why-card-badge {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 3px 10px;
  letter-spacing: 0.3px;
}
.why-card-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-card-icon-wrap--blue {
  background: #1a6bff;
}
.why-card-icon { font-size: 16px; }
.why-card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.4;
}
.why-card-desc {
  font-size: 13px;
  color: var(--gray-3);
  line-height: 1.7;
  margin: 0;
}

/* OUTCOME 하단 바 */
.why-outcome-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  gap: 24px;
  flex-wrap: wrap;
}
.why-outcome-checks {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.woc-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-2);
  white-space: nowrap;
}
.why-outcome-result {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.why-outcome-badge {
  background: #1a6bff;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 5px 14px;
  border-radius: 20px;
  white-space: nowrap;
}
.why-outcome-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
}

/* 반응형 */
@media (max-width: 1024px) {
  .why-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .why-header { flex-direction: column; gap: 28px; }
  .why-badge-track { padding-top: 0; }
}
@media (max-width: 640px) {
  .why-cards-grid { grid-template-columns: 1fr; gap: 12px; }
  .why-outcome-bar { flex-direction: column; align-items: flex-start; gap: 16px; }
  .why-outcome-checks { gap: 14px; }
  .why-outcome-result { width: 100%; }
  .wbt-line { width: 28px; }
}

/* ══════════════════════════════════════════════════
   MARKETING PAGE v2 — 인애드컴퍼니 퍼널 마케팅
══════════════════════════════════════════════════ */

/* ── HERO ── */

/* ══════════════════════════════════════════════════════════════
   MARKETING HOME — HERO v3 (세련 리디자인)
══════════════════════════════════════════════════════════════ */

/* ── 기본 구조 ── */
.mkt-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #020814;
}

/* 전체 배경 3D 캔버스 */
.mkt-3d-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

/* 오버레이 */
.mkt-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 60% at 15% 50%, rgba(26,107,255,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 25%, rgba(139,92,246,0.11) 0%, transparent 55%),
    linear-gradient(180deg, rgba(2,8,20,0.30) 0%, rgba(2,8,20,0.60) 100%);
  pointer-events: none;
}

/* 그리드 패턴 */
.mkt-hero-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at center, black, transparent 90%);
  mask-image: radial-gradient(ellipse 90% 80% at center, black, transparent 90%);
  pointer-events: none;
}

/* 2단 레이아웃 */
.mkt-hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 56px;
  min-height: 100vh;
  padding-top: 100px;
  padding-bottom: 80px;
}
.mkt-hero-left { max-width: 600px; }

/* 뱃지 */
.mkt-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(26,107,255,0.10);
  border: 1px solid rgba(26,107,255,0.28);
  border-radius: 100px;
  padding: 7px 18px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: rgba(100,170,255,0.95);
  margin-bottom: 32px;
  backdrop-filter: blur(8px);
}
.mhb-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #1a6bff;
  box-shadow: 0 0 10px rgba(26,107,255,0.9);
  animation: mhbPulse 1.8s ease-in-out infinite;
}
@keyframes mhbPulse {
  0%,100% { transform: scale(1); opacity: 1; box-shadow: 0 0 10px rgba(26,107,255,0.9); }
  50% { transform: scale(1.6); opacity: 0.6; box-shadow: 0 0 18px rgba(26,107,255,0.5); }
}

/* 타이틀 */
.mkt-hero-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 22px;
}
.mht-line {
  display: block;
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -2px;
  color: var(--white);
  opacity: 0;
  transform: translateY(36px);
  animation: heroSlideIn 0.75s cubic-bezier(0.16,1,0.3,1) forwards;
}
.mht-line--1 { animation-delay: 0.05s; }
.mht-line--2 { animation-delay: 0.18s; }
.mht-line--3 { animation-delay: 0.31s; }

.mht-accent {
  font-style: normal;
  background: linear-gradient(120deg, #4da6ff 0%, #a78bfa 50%, #34d399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
@keyframes heroSlideIn {
  to { opacity: 1; transform: translateY(0); }
}

/* 타이핑 */
.mkt-hero-typing-wrap {
  font-size: clamp(17px, 2.2vw, 24px);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 22px;
  opacity: 0;
  animation: heroSlideIn 0.75s 0.46s cubic-bezier(0.16,1,0.3,1) forwards;
  min-height: 1.6em;
}
.mht-static { color: rgba(255,255,255,0.55); }
.mht-typing { color: #60b0ff; font-weight: 700; }
.mht-cursor {
  color: #1a6bff;
  animation: blink 0.85s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* 설명 */
.mkt-hero-desc {
  font-size: 15px;
  color: rgba(255,255,255,0.52);
  line-height: 1.9;
  margin-bottom: 38px;
  opacity: 0;
  animation: heroSlideIn 0.75s 0.56s cubic-bezier(0.16,1,0.3,1) forwards;
}
.mkt-hero-desc strong { color: rgba(255,255,255,0.88); font-weight: 600; }

/* 버튼 그룹 */
.mkt-hero-btns {
  display: flex;
  gap: 14px;
  align-items: center;
  opacity: 0;
  animation: heroSlideIn 0.75s 0.66s cubic-bezier(0.16,1,0.3,1) forwards;
}

.mkt-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  color: #000;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: 100px;
  text-decoration: none;
  transition: transform 0.22s, background 0.22s, box-shadow 0.22s;
  box-shadow: 0 4px 20px rgba(255,255,255,0.12);
}
.mkt-btn-primary:hover {
  transform: scale(1.04) translateY(-2px);
  background: #dff0ff;
  box-shadow: 0 8px 32px rgba(255,255,255,0.18);
}
.mkt-btn-primary svg { width: 16px; height: 16px; }

.mkt-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.88);
  font-size: 14px;
  font-weight: 600;
  padding: 14px 26px;
  border-radius: 100px;
  text-decoration: none;
  backdrop-filter: blur(10px);
  transition: background 0.22s, border-color 0.22s, transform 0.22s;
}
.mkt-btn-ghost:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-2px);
}

.mkt-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 26px;
  border-radius: 100px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background 0.22s, border-color 0.22s, transform 0.22s;
}
.mkt-btn-outline:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(56,189,248,0.32);
  transform: translateY(-2px);
}

/* 스탯 (히어로 하단) */
.mkt-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 44px;
  opacity: 0;
  animation: heroSlideIn 0.75s 0.80s cubic-bezier(0.16,1,0.3,1) forwards;
}
.mhs-item {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
  border-radius: 16px;
  padding: 14px 10px;
  text-align: center;
  backdrop-filter: blur(12px);
  transition: transform 0.26s, border-color 0.26s, background 0.26s;
}
.mhs-item:hover {
  transform: translateY(-4px);
  border-color: rgba(56,189,248,0.22);
  background: rgba(255,255,255,0.065);
}
.mhs-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.mhs-label {
  font-size: 10px;
  color: rgba(255,255,255,0.40);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

/* ── 우측 glassmorphism 카드 ── */
.mkt-hero-right {
  position: relative;
  height: 540px;
}

/* 배경 오브 */
.mhr-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(70px);
}
.mhr-orb--blue {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(26,107,255,0.25) 0%, transparent 70%);
  top: 60px; right: 20px;
  animation: orbDrift 9s ease-in-out infinite;
}
.mhr-orb--purple {
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(139,92,246,0.20) 0%, transparent 70%);
  bottom: 60px; left: 0;
  animation: orbDrift 11s ease-in-out infinite reverse;
}
@keyframes orbDrift {
  0%,100% { transform: translate(0,0); }
  50% { transform: translate(16px,-20px); }
}

/* 플로팅 카드 */
.mhr-card {
  position: absolute;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(8,16,36,0.72);
  border-radius: 24px;
  padding: 24px 26px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94),
              border-color 0.35s, box-shadow 0.35s;
  opacity: 0;
  animation: mhrIn 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
  z-index: 1;
}
.mhr-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  border-color: rgba(56,189,248,0.20);
  box-shadow: 0 20px 48px rgba(0,0,0,0.40);
}
.mhr-card--1 { top: 30px;  right: 10px;  width: 230px; animation-delay: 0.55s; }
.mhr-card--2 { top: 210px; left: -5px;   width: 248px; animation-delay: 0.70s; }
.mhr-card--3 { bottom: 30px; right: 20px; width: 218px; animation-delay: 0.88s; }

@keyframes mhrIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mhrc-icon-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.mhrc-icon { font-size: 18px; }
.mhrc-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.36);
  text-transform: uppercase;
}
.mhrc-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 38px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.05em;
  line-height: 1;
  margin-bottom: 10px;
}
.mhrc-value span {
  font-size: 20px;
  font-weight: 700;
  color: #38bdf8;
}
.mhrc-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.46);
  line-height: 1.7;
  margin-bottom: 12px;
}

/* 카드 내 프로그레스 바 */
.mhrc-bar {
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow: hidden;
}
.mhrc-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #1a6bff, #38bdf8);
  border-radius: 99px;
  transform-origin: left;
  animation: barGrow 1.2s cubic-bezier(0.25,0.46,0.45,0.94) 1.2s both;
}
@keyframes barGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* 스크롤 힌트 */
.mkt-hero-scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.mhsh-mouse {
  width: 22px; height: 36px;
  border: 1.5px solid rgba(255,255,255,0.20);
  border-radius: 11px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.mhsh-wheel {
  width: 3px; height: 7px;
  background: rgba(255,255,255,0.35);
  border-radius: 2px;
  animation: scrollWheel 1.9s ease-in-out infinite;
}
@keyframes scrollWheel {
  0%,100% { transform: translateY(0); opacity: 1; }
  80% { transform: translateY(9px); opacity: 0; }
}

/* ══ HERO RIGHT — floating stat cards ══ */
.mkt-hero-right--float {
  position: relative;
  height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* floating 스탯 카드 */
.mhf-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(8,16,40,0.68);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 24px;
  padding: 28px 32px;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  text-align: center;
  opacity: 0;
  animation: mhfIn 0.9s cubic-bezier(0.16,1,0.3,1) forwards;
  transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94),
              box-shadow 0.4s, border-color 0.4s;
  z-index: 1;
}
.mhf-card:hover {
  transform: translateY(-10px) scale(1.04) !important;
  box-shadow: 0 24px 56px rgba(0,0,0,0.45);
  border-color: rgba(56,189,248,0.30);
}

/* 위치 및 크기 — 각 카드별 */
.mhf-card--1 {
  top: 30px;
  right: 40px;
  width: 170px;
  animation-delay: 0.50s;
  animation-name: mhfIn, mhfFloat1;
  animation-duration: 0.9s, 6s;
  animation-timing-function: cubic-bezier(0.16,1,0.3,1), ease-in-out;
  animation-fill-mode: forwards, none;
  animation-delay: 0.50s, 0.50s;
  animation-iteration-count: 1, infinite;
}
.mhf-card--2 {
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  width: 174px;
  animation-delay: 0.68s;
  animation-name: mhfIn, mhfFloat2;
  animation-duration: 0.9s, 7s;
  animation-timing-function: cubic-bezier(0.16,1,0.3,1), ease-in-out;
  animation-fill-mode: forwards, none;
  animation-delay: 0.68s, 0.68s;
  animation-iteration-count: 1, infinite;
}
.mhf-card--3 {
  bottom: 30px;
  right: 30px;
  width: 166px;
  animation-delay: 0.86s;
  animation-name: mhfIn, mhfFloat3;
  animation-duration: 0.9s, 8s;
  animation-timing-function: cubic-bezier(0.16,1,0.3,1), ease-in-out;
  animation-fill-mode: forwards, none;
  animation-delay: 0.86s, 0.86s;
  animation-iteration-count: 1, infinite;
}

@keyframes mhfIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mhfFloat1 {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-14px); }
}
@keyframes mhfFloat2 {
  0%,100% { transform: translateY(-50%); }
  50%     { transform: translateY(calc(-50% - 12px)); }
}
@keyframes mhfFloat3 {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-10px); }
}

.mhf-icon {
  font-size: 28px;
  margin-bottom: 4px;
  filter: drop-shadow(0 0 8px rgba(56,189,248,0.4));
}
.mhf-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1;
}
.mhf-value span {
  font-size: 22px;
  font-weight: 700;
  color: #38bdf8;
}
.mhf-label {
  font-size: 12px;
  color: rgba(255,255,255,0.50);
  font-weight: 500;
  letter-spacing: 0.03em;
  margin-top: 2px;
}

/* 카드별 색상 강조 */
.mhf-card--1 { box-shadow: 0 8px 32px rgba(26,107,255,0.18), inset 0 1px 0 rgba(255,255,255,0.06); }
.mhf-card--2 { box-shadow: 0 8px 32px rgba(139,92,246,0.18), inset 0 1px 0 rgba(255,255,255,0.06); }
.mhf-card--3 { box-shadow: 0 8px 32px rgba(56,189,248,0.18), inset 0 1px 0 rgba(255,255,255,0.06); }

.mhf-card--1 .mhf-value span { color: #60a5fa; }
.mhf-card--2 .mhf-value span { color: #c084fc; }
.mhf-card--3 .mhf-value span { color: #38bdf8; }

/* 반응형 */
@media (max-width: 960px) {
  .mkt-hero-right--float { display: none; }
}

/* ══ MARQUEE TRUST BAR ══ */
.mkt-marquee-bar {
  background: rgba(255,255,255,0.025);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 16px 0;
  overflow: hidden;
  white-space: nowrap;
}
.mkt-marquee-track {
  display: inline-flex;
  gap: 0;
  animation: marqueeRun 28s linear infinite;
  will-change: transform;
}
.mkt-marquee-bar:hover .mkt-marquee-track { animation-play-state: paused; }
@keyframes marqueeRun {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.mkt-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.45);
  padding: 0 36px;
  text-transform: uppercase;
  transition: color 0.2s;
}
.mkt-marquee-item:hover { color: rgba(255,255,255,0.80); }
.mkt-marquee-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(26,107,255,0.70);
  flex-shrink: 0;
}
.mkt-marquee-emoji {
  font-size: 14px;
  line-height: 1;
  filter: saturate(0.7);
  transition: filter 0.2s;
}
.mkt-marquee-item:hover .mkt-marquee-emoji {
  filter: saturate(1.2);
}

/* ══ FEATURES 섹션 ══ */
.mkt-features-section {
  background: #05080f;
  padding: 112px 0;
  position: relative;
  overflow: hidden;
}
.mkt-features-section::before {
  content: '';
  position: absolute;
  top: -200px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 500px;
  background: radial-gradient(ellipse, rgba(26,107,255,0.06) 0%, transparent 65%);
  pointer-events: none;
}
.mkt-features-head {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 72px;
}
.mkt-feat-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #38bdf8;
  margin-bottom: 18px;
}
.mkt-feat-title {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800;
  color: #fff;
  line-height: 1.18;
  letter-spacing: -0.04em;
  margin-bottom: 20px;
}
.mkt-feat-accent {
  background: linear-gradient(90deg, #38bdf8, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mkt-feat-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.46);
  line-height: 1.80;
}
.mkt-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.mkt-feat-card {
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  border-radius: 28px;
  padding: 34px 30px;
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
  transition: transform 0.42s cubic-bezier(0.25,0.46,0.45,0.94),
              border-color 0.42s, background 0.42s, box-shadow 0.42s;
}
.mkt-feat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 28px;
  opacity: 0;
  transition: opacity 0.42s;
  background: radial-gradient(ellipse 60% 50% at 50% 120%, rgba(56,189,248,0.07) 0%, transparent 70%);
}
.mkt-feat-card:hover {
  transform: translateY(-10px);
  border-color: rgba(56,189,248,0.16);
  background: rgba(255,255,255,0.055);
  box-shadow: 0 24px 56px rgba(0,0,0,0.32);
}
.mkt-feat-card:hover::after { opacity: 1; }

.mfc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.mfc-icon-wrap {
  width: 52px; height: 52px;
  border-radius: 18px;
  border: 1px solid;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s;
}
.mkt-feat-card:hover .mfc-icon-wrap { transform: scale(1.10) rotate(4deg); }
.mfc-icon { font-size: 22px; }
.mfc-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 900;
  opacity: 0.22;
  letter-spacing: -0.05em;
  transition: opacity 0.3s;
}
.mkt-feat-card:hover .mfc-num { opacity: 0.55; }

.mfc-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
  transition: color 0.3s;
}
.mkt-feat-card:hover .mfc-title { color: #e0f2fe; }
.mfc-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.50);
  line-height: 1.80;
  margin-bottom: 24px;
}
.mfc-line {
  height: 2px;
  border-radius: 99px;
  opacity: 0.55;
  transform: scaleX(0.4);
  transform-origin: left;
  transition: transform 0.42s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.42s;
}
.mkt-feat-card:hover .mfc-line {
  transform: scaleX(1);
  opacity: 1;
}

/* ══ STATS BELT ══ */
.mkt-stats-belt {
  background: #060c1a;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 52px 0;
}
.mkt-stats-belt-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.msb-item {
  text-align: center;
  padding: 20px 24px;
  border-right: 1px solid rgba(255,255,255,0.06);
  transition: background 0.3s;
}
.msb-item:last-child { border-right: none; }
.msb-item:hover { background: rgba(255,255,255,0.025); }
.msb-icon { font-size: 24px; display: block; margin-bottom: 12px; }
.msb-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 8px;
}
.msb-suffix {
  font-size: 0.55em;
  font-weight: 700;
  color: #38bdf8;
  vertical-align: super;
  margin-left: 2px;
}
.msb-label {
  font-size: 12px;
  color: rgba(255,255,255,0.42);
  letter-spacing: 0.04em;
}

/* ══ CTA 섹션 v2 ══ */
.mkt-cta-section {
  position: relative;
  background: #020814;
  padding: 100px 0 120px;
  overflow: hidden;
  text-align: center;
}
.mkt-cta-bg-canvas-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.mkt-cta-glow {
  position: absolute;
  width: 500px; height: 400px;
  border-radius: 50%;
}
.mkt-cta-glow--left  {
  top: -100px; left: -80px;
  background: radial-gradient(circle, rgba(26,107,255,0.14) 0%, transparent 65%);
  filter: blur(60px);
  animation: ctaGlowL 8s ease-in-out infinite;
}
.mkt-cta-glow--right {
  bottom: -100px; right: -80px;
  background: radial-gradient(circle, rgba(139,92,246,0.12) 0%, transparent 65%);
  filter: blur(60px);
  animation: ctaGlowR 10s ease-in-out infinite;
}
@keyframes ctaGlowL {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(40px,-30px) scale(1.08); }
}
@keyframes ctaGlowR {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-30px,20px) scale(1.05); }
}
.mkt-cta-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at center, black, transparent 85%);
  mask-image: radial-gradient(ellipse 70% 80% at center, black, transparent 85%);
}

.mkt-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}
.mkt-cta-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #38bdf8;
  margin-bottom: 20px;
}
.mkt-cta-title {
  font-size: clamp(30px, 5vw, 54px);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.04em;
  margin-bottom: 22px;
}
.mkt-cta-grad {
  background: linear-gradient(120deg, #60b4ff, #a78bfa, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mkt-cta-desc {
  font-size: 16px;
  color: rgba(255,255,255,0.50);
  line-height: 1.85;
  margin-bottom: 30px;
}

/* 체크 필 태그 */
.mkt-cta-pills {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 38px;
}
.mkt-cta-pills span {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.60);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 100px;
  padding: 6px 16px;
  backdrop-filter: blur(8px);
}

.mkt-cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

/* ── 서비스 카드 accent glow ── */
.msig-accent-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.45s;
  pointer-events: none;
}
.msig-card:hover .msig-accent-glow { opacity: 1; }

/* KPI 색상 커스텀 */
.msig-kpi-item strong {
  color: var(--kpi-color, #5a9fff) !important;
  text-shadow: 0 0 12px color-mix(in srgb, var(--kpi-color, #5a9fff) 50%, transparent) !important;
}

/* ── 반응형 ── */
@media (max-width: 1024px) {
  .mkt-hero-layout { grid-template-columns: 1fr; padding-top: 120px; }
  .mkt-hero-right  { display: none; }
  .mkt-feat-grid   { grid-template-columns: 1fr; }
  .mkt-stats-belt-inner { grid-template-columns: repeat(2, 1fr); }
  .msb-item:nth-child(2) { border-right: none; }
  .msb-item:nth-child(3),
  .msb-item:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.06); }
}
@media (max-width: 640px) {
  .mkt-hero-stats  { grid-template-columns: repeat(2, 1fr); }
  .mkt-cta-btns    { flex-direction: column; width: 100%; }
  .mkt-btn-primary, .mkt-btn-outline { justify-content: center; }
  .mkt-stats-belt-inner { grid-template-columns: repeat(2, 1fr); }
  .mkt-cta-pills   { flex-direction: column; align-items: center; }
}


/* ══════════════════════════════════════════════════════════════
   기존 mkt-stats-strip (하위 호환 유지)
══════════════════════════════════════════════════════════════ */
.mkt-stats-strip {
  background: rgba(26,107,255,0.08);
  border-top: 1px solid rgba(26,107,255,0.15);
  border-bottom: 1px solid rgba(26,107,255,0.15);
  padding: 28px 0;
  overflow: hidden;
}
.mkt-stats-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.mss-item {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.mss-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: var(--white);
}
.mss-suffix {
  font-size: 18px;
  font-weight: 700;
  color: #1a6bff;
}
.mss-label {
  font-size: 12px;
  color: var(--gray-3);
  width: 100%;
  text-align: center;
  margin-top: 2px;
}

/* ── 퍼널 스토리 ── */
.mkt-funnel-story {
  padding: 100px 0;
  background: var(--black);
}
.mfs-header { text-align: center; margin-bottom: 72px; }

.mfs-steps {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 860px;
  margin: 0 auto;
}
.mfs-step {
  display: flex;
  align-items: center;
  gap: 24px;
}
.mfs-step:nth-child(even) { flex-direction: row-reverse; }
.mfs-step-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 64px;
  font-weight: 900;
  color: rgba(255,255,255,0.04);
  line-height: 1;
  flex-shrink: 0;
  width: 80px;
  text-align: center;
}
.mfs-step-card {
  flex: 1;
  border: 1px solid;
  border-radius: 20px;
  padding: 32px 36px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.mfs-step-icon { font-size: 32px; flex-shrink: 0; margin-top: 4px; }
.mfs-phase {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 8px;
}
.mfs-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.3;
}
.mfs-desc {
  font-size: 14px;
  color: var(--gray-3);
  line-height: 1.75;
  margin: 0;
}

/* ══════════════════════════════════════════
   mfs v2 — 프로세스 좌우 교차 이미지 레이아웃
══════════════════════════════════════════ */
.mfs-steps-v2 {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
}
.mfs-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
  min-height: 400px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mfs-item:last-child { border-bottom: none; }
.mfs-item--reverse { }
.mfs-item--reverse .mfs-img-panel { order: 2; }
.mfs-item--reverse .mfs-text-panel { order: 1; }

/* 이미지 패널 */
.mfs-img-panel {
  position: relative;
  overflow: hidden;
  height: 400px;
}
.mfs-img-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.mfs-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
  display: block;
}
.mfs-item:hover .mfs-img {
  transform: scale(1.05);
}
.mfs-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.1) 50%,
    color-mix(in srgb, var(--accent, #1a6bff) 20%, transparent) 100%
  );
  pointer-events: none;
}

/* 텍스트 패널 */
.mfs-text-panel {
  padding: 56px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
.mfs-step-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border: 1px solid;
  border-radius: 30px;
  margin-bottom: 18px;
  width: fit-content;
}
.mfs-step-badge-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
}
.mfs-phase-v2 {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 14px;
  opacity: 0.85;
}
.mfs-title-v2 {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.35;
  margin-bottom: 18px;
  letter-spacing: -0.5px;
}
.mfs-desc-v2 {
  font-size: 14.5px;
  color: rgba(255,255,255,0.6);
  line-height: 1.85;
  margin: 0 0 24px 0;
}
.mfs-divider {
  width: 36px;
  height: 3px;
  border-radius: 4px;
  opacity: 0.7;
}

/* 반응형 */
@media (max-width: 768px) {
  .mfs-item,
  .mfs-item--reverse {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .mfs-item--reverse .mfs-img-panel { order: 0; }
  .mfs-item--reverse .mfs-text-panel { order: 1; }
  .mfs-img-panel { height: 240px; }
  .mfs-text-panel { padding: 32px 24px; }
  .mfs-title-v2 { font-size: 18px; }
}

/* ── 서비스 섹션 ── */
.mkt-services-section { background: var(--black-2); }
.msc-tag {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(26,107,255,0.8);
  background: rgba(26,107,255,0.1);
  border: 1px solid rgba(26,107,255,0.2);
  border-radius: 4px;
  padding: 3px 8px;
  margin-bottom: 4px;
}

/* ── 스크롤 리빌 애니메이션 ── */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal-up.revealed { opacity: 1; transform: translateY(0); }

.reveal-side--left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal-side--left.revealed { opacity: 1; transform: translateX(0); }

.reveal-side--right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal-side--right.revealed { opacity: 1; transform: translateX(0); }

/* ── 반응형 ── */
@media (max-width: 1024px) {
  .mkt-hero-inner { max-width: 100%; }
  .mkt-hero { min-height: auto; padding: 140px 0 80px; }
  .mfs-step, .mfs-step:nth-child(even) { flex-direction: column; gap: 12px; }
  .mfs-step-num { display: none; }
}
@media (max-width: 640px) {
  .mkt-stats-inner { justify-content: center; gap: 32px; }
  .mss-item { min-width: 30%; }
  .mkt-hero-btns { flex-direction: column; align-items: flex-start; }
  .mkt-hero-inner { max-width: 100%; }
}

/* ══════════════════════════════════════════════════
   MARKETING PAGE — 이미지 풀커버 서비스 카드 (msig)
══════════════════════════════════════════════════ */

/* 7카드 그리드: 상단 4 + 하단 3 */
/* ══ 서비스 카드 그리드 ══ */
.mkt-svc-img-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 56px;
}
/* 하단 3개 중앙 배치 */
.msig-card:nth-child(5) { grid-column: 1 / 2; }
.msig-card:nth-child(6) { grid-column: 2 / 3; }
.msig-card:nth-child(7) { grid-column: 3 / 4; }

/* ── 카드 기본 ── */
.msig-card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 3 / 4.2;
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
  background: #080e1e;
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94);
}
.msig-card:hover {
  border-color: rgba(var(--accent-rgb, 26,107,255), 0.35);
  box-shadow: 0 24px 56px rgba(0,0,0,0.55), 0 0 0 1px rgba(var(--accent-rgb,26,107,255),0.12);
  transform: translateY(-6px);
}

/* ── 배경 이미지 ── */
.msig-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
  will-change: transform;
}
.msig-card:hover .msig-img {
  transform: scale(1.13);
}

/* ── 오버레이 레이어 ── */
/* 기본: 하단 2/3 진하게 덮어서 텍스트 가독성 확보 */
.msig-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.0)  0%,
    rgba(0,0,0,0.1) 35%,
    rgba(0,0,0,0.72) 62%,
    rgba(0,0,0,0.96) 100%
  );
  z-index: 1;
  transition: background 0.45s ease;
}
/* hover: 전체를 더 어둡게 → 서브 텍스트 가독성 */
.msig-card:hover .msig-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.30)  0%,
    rgba(0,0,0,0.45) 35%,
    rgba(0,0,0,0.82) 62%,
    rgba(0,0,0,0.97) 100%
  );
}

/* ── accent glow ── */
.msig-accent-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.msig-card:hover .msig-accent-glow { opacity: 1; }

/* ── 상단 태그 ── */
.msig-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 4;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.92);
  border-radius: 6px;
  padding: 4px 11px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.35s ease;
}
.msig-card:hover .msig-tag { opacity: 0.7; }

/* ── 하단 콘텐츠 블록 ── */
.msig-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 22px 22px 24px;
  z-index: 4;
  /* 기본 상태: hook만 올라와 있는 위치 */
  transform: translateY(0);
  transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94);
}
/* hover: 살짝 위로 올려 서브 문구 공간 확보 */
.msig-card:hover .msig-content {
  transform: translateY(-4px);
}

/* ── 아이콘 ── */
.msig-icon {
  font-size: 24px;
  margin-bottom: 10px;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.7));
  /* hover 시 작아지며 올라감 */
  transition: transform 0.4s ease, font-size 0.4s ease, opacity 0.4s ease;
}
.msig-card:hover .msig-icon {
  font-size: 18px;
  opacity: 0.8;
}

/* ── 서비스명 (소제목) ── */
.msig-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  margin-bottom: 7px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
  transition: color 0.35s ease;
}
.msig-card:hover .msig-title {
  color: rgba(255,255,255,0.5);
}

/* ── 메인 훅 문구 ── */
.msig-hook {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 0;
  white-space: nowrap;          /* 한 줄 강제 */
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 10px rgba(0,0,0,0.9);
  /* 기본 상태: 보임 */
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.msig-card:hover .msig-hook {
  transform: translateY(-2px);
}

/* ── 서브 문구 — 평소 숨김, hover 시 슬라이드 등장 ── */
.msig-sub {
  font-size: 12.5px;
  color: rgba(255,255,255,0.72);
  line-height: 1.65;
  margin-top: 0;
  margin-bottom: 14px;
  /* 기본: 완전 숨김 */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition:
    max-height  0.45s cubic-bezier(0.25,0.46,0.45,0.94) 0.04s,
    opacity     0.38s ease                               0.08s,
    transform   0.38s ease                               0.08s,
    margin-top  0.35s ease                               0.04s;
}
.msig-card:hover .msig-sub {
  max-height: 80px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 10px;
}

/* ── 자세히 보기 화살표 ── */
.msig-arrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.32s ease 0.14s, transform 0.32s ease 0.14s;
}
.msig-card:hover .msig-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ── 반응형 ── */
@media (max-width: 1200px) {
  .mkt-svc-img-grid { grid-template-columns: repeat(3, 1fr); }
  .msig-card:nth-child(5),
  .msig-card:nth-child(6),
  .msig-card:nth-child(7) { grid-column: auto; }
}
@media (max-width: 900px) {
  .msig-hook { font-size: 13.5px; white-space: normal; }
}
@media (max-width: 768px) {
  .mkt-svc-img-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .msig-card { aspect-ratio: 4 / 5; }
  .msig-hook { font-size: 13px; white-space: normal; }
}
@media (max-width: 480px) {
  .mkt-svc-img-grid { grid-template-columns: 1fr; }
  .msig-card { aspect-ratio: 16 / 9; }
}

/* ══════════════════════════════════════════════════
   HOME — 서비스 리스트 호버 글로우 이펙트
══════════════════════════════════════════════════ */

/* 리스트 아이템 — 호버/활성 글로우 바 */
.svc-list-item a {
  position: relative;
}
.svc-list-item a::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  background: #1a6bff;
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(26,107,255,0.8);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.svc-list-item.active a::before,
.svc-list-item a:hover::before {
  transform: translateY(-50%) scaleY(1);
}

/* 활성 아이템 배경 글로우 */
.svc-list-item.active a {
  background: linear-gradient(90deg, rgba(26,107,255,0.08) 0%, transparent 100%);
}

/* ══════════════════════════════════════════════════
   HOME — STATS 카운팅 섹션 강화
══════════════════════════════════════════════════ */

.stats-section {
  position: relative;
  overflow: hidden;
}
.stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26,107,255,0.03) 0%, transparent 60%);
  pointer-events: none;
}

/* 구분선 글로우 */
.stat-divider-v {
  position: relative;
}
.stat-divider-v::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(26,107,255,0.5), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}
.stats-section:hover .stat-divider-v::after {
  opacity: 1;
}

/* stat-block 호버 강조 */
.stat-block {
  cursor: default;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.stat-block:hover {
  transform: translateY(-4px);
}
.stat-block:hover .stat-num-big {
  color: #5a9fff;
  text-shadow: 0 0 20px rgba(26,107,255,0.5);
}

/* ══════════════════════════════════════════════════
   HOME — HISTORY 곡선 드로잉 이펙트
══════════════════════════════════════════════════ */

/* 메인 곡선 — 드로잉 준비 (JS로 strokeDasharray 세팅됨) */
.hist-curve-line {
  stroke: rgba(26,107,255,0.7);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(26,107,255,0.4));
}

/* 글로우 곡선 */
.hist-curve-glow {
  stroke: rgba(26,107,255,0.25);
  stroke-width: 8;
  stroke-linecap: round;
  filter: blur(3px);
}

/* 노드 서클 호버 펄스 강화 */
.hn-node:hover .hn-circle {
  box-shadow: 0 0 0 6px rgba(26,107,255,0.2), 0 0 20px rgba(26,107,255,0.4);
}

/* 히스토리 헤더 블루 글로우 */
.hist-title em {
  position: relative;
  display: inline-block;
}
.hist-title em::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #1a6bff, #5a9fff, transparent);
  border-radius: 2px;
  animation: slideRight 2.5s ease-in-out infinite;
}
@keyframes slideRight {
  0%   { transform: scaleX(0); transform-origin: left; }
  50%  { transform: scaleX(1); transform-origin: left; }
  51%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* ══════════════════════════════════════════════════
   HOME CTA — 리뉴얼 이펙트
══════════════════════════════════════════════════ */

.home-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background: #020814;
}

/* 파티클 캔버스 */
.hcta-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* 글로우 오브 */
.hcta-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.hcta-orb--1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(26,107,255,0.14) 0%, transparent 70%);
  top: -200px; left: -200px;
  animation: hctaOrb1 9s ease-in-out infinite;
}
.hcta-orb--2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(80,40,200,0.1) 0%, transparent 70%);
  bottom: -150px; right: -100px;
  animation: hctaOrb1 12s ease-in-out infinite reverse;
}
@keyframes hctaOrb1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(40px,-50px) scale(1.1); }
}

.home-cta-bg { position: absolute; inset: 0; z-index: 0; }
.hcta-glow {
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(26,107,255,0.12) 0%, transparent 65%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: hctaOrb1 7s ease-in-out infinite;
}

.home-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

/* 배지 */
.hcta-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(26,107,255,0.1);
  border: 1px solid rgba(26,107,255,0.3);
  border-radius: 30px;
  padding: 6px 18px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: rgba(100,170,255,0.9);
  margin-bottom: 32px;
  opacity: 1;
  transform: translateY(0);
}
.hcta-badge.visible { opacity: 1; transform: translateY(0); }
.hcta-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #1a6bff;
  box-shadow: 0 0 8px rgba(26,107,255,0.9);
  animation: pulse 1.6s ease-in-out infinite;
}

/* 타이틀 */
.hcta-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 24px;
}
.hcta-line {
  display: block;
  font-size: clamp(32px, 5vw, 62px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -1.5px;
  color: var(--white);
  opacity: 1;
  transform: translateY(0);
}
.hcta-line--1 { transition-delay: 0.1s; }
.hcta-line--2 {
  transition-delay: 0.22s;
  background: linear-gradient(120deg, #1a6bff 0%, #5a9fff 50%, #00d4a8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: normal;
}
.hcta-line.visible { opacity: 1; transform: translateY(0); }

/* 설명 */
.hcta-desc {
  font-size: 16px;
  color: var(--gray-3);
  line-height: 1.8;
  margin-bottom: 40px;
  opacity: 1;
  transform: translateY(0);
}
.hcta-desc.visible { opacity: 1; transform: translateY(0); }
.hcta-desc-sub {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  margin-top: 6px;
  letter-spacing: 0.3px;
}

/* KPI 수치 */
.hcta-kpi {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 44px;
  opacity: 1;
  transform: translateY(0);
}
.hcta-kpi.visible { opacity: 1; transform: translateY(0); }
.hcta-kpi-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 36px;
}
.hcta-kpi-item strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--white);
}
.hcta-kpi-item span {
  font-size: 11px;
  color: var(--gray-3);
  letter-spacing: 0.5px;
}
.hcta-kpi-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.1);
}

/* 버튼 그룹 */
.hcta-btns {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 1;
  transform: translateY(0);
}
.hcta-btns.visible { opacity: 1; transform: translateY(0); }

/* 메인 버튼 강조 */
.hcta-btn-main {
  font-size: 15px;
  padding: 16px 32px;
  box-shadow: 0 0 32px rgba(26,107,255,0.35);
}
.hcta-btn-main:hover {
  box-shadow: 0 0 48px rgba(26,107,255,0.55);
}

.hcta-btn-call {
  font-size: 14px;
  padding: 14px 28px;
}

/* 반응형 */
@media (max-width: 768px) {
  .home-cta { padding: 80px 0; }
  .hcta-kpi { gap: 0; flex-wrap: wrap; }
  .hcta-kpi-item { padding: 0 20px; }
  .hcta-btns { flex-direction: column; width: 100%; max-width: 320px; }
  .hcta-btn-main, .hcta-btn-call { width: 100%; justify-content: center; }
}

/* =============================================
   CONTACT PAGE v2 — 2단계 유형 선택 플로우
   ============================================= */

/* 단계 전환 애니메이션 */
@keyframes stepFadeIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes stepFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-12px); }
}

/* ── 유형 선택 카드 그리드 ── */
.type-select-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 36px 0 24px;
}

.type-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 32px 28px 28px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
  text-align: left;
  overflow: hidden;
}
.type-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26,107,255,0.08) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 16px;
}
.type-card:hover {
  border-color: rgba(26,107,255,0.5);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(26,107,255,0.15);
}
.type-card:hover::before { opacity: 1; }

.type-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(26,107,255,0.12);
  border: 1px solid rgba(26,107,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(26,107,255,0.9);
  transition: background 0.3s, border-color 0.3s;
}
.type-card:hover .type-card-icon {
  background: rgba(26,107,255,0.2);
  border-color: rgba(26,107,255,0.4);
}
.type-card-icon svg { width: 28px; height: 28px; }

.type-card-body { flex: 1; }
.type-card-body strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.type-card-body span {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}

.type-card-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  align-self: flex-end;
  transition: all 0.3s ease;
}
.type-card:hover .type-card-arrow {
  border-color: rgba(26,107,255,0.6);
  color: rgba(26,107,255,0.9);
  transform: translateX(4px);
}
.type-card-arrow svg { width: 16px; height: 16px; }

.type-card-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(26,107,255,0.8);
  background: rgba(26,107,255,0.1);
  border: 1px solid rgba(26,107,255,0.2);
  border-radius: 20px;
  padding: 4px 10px;
}

.type-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  margin-top: 8px;
}
.type-hint svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── 뒤로 가기 버튼 ── */
.step-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 16px;
  transition: color 0.2s;
}
.step-back-btn:hover { color: rgba(255,255,255,0.9); }
.step-back-btn svg { width: 16px; height: 16px; }

/* ── 유형 배지 ── */
.step-type-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 5px 14px;
  margin-bottom: 12px;
}
.step-type-badge.agency {
  color: rgba(26,107,255,0.9);
  background: rgba(26,107,255,0.1);
  border: 1px solid rgba(26,107,255,0.25);
}
.step-type-badge.brand {
  color: rgba(100,210,140,0.9);
  background: rgba(100,210,140,0.08);
  border: 1px solid rgba(100,210,140,0.2);
}

/* ── 예산 + 직접 입력 ── */
.cf-budget-wrap { display: flex; flex-direction: column; gap: 10px; }
.cf-custom-budget input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 12px 16px;
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.25s;
}
.cf-custom-budget input:focus {
  border-color: rgba(26,107,255,0.5);
  background: rgba(26,107,255,0.05);
}
.cf-custom-budget input::placeholder { color: rgba(255,255,255,0.3); }

/* 애니메이션 초기 상태 */
.contact-step { animation: stepFadeIn 0.4s ease forwards; }

/* 반응형 */
@media (max-width: 640px) {
  .type-select-grid { grid-template-columns: 1fr; }
  .type-card { flex-direction: row; align-items: center; padding: 22px 20px; }
  .type-card-icon { width: 46px; height: 46px; flex-shrink: 0; }
  .type-card-body strong { font-size: 17px; }
  .type-card-badge { display: none; }
}

/* =============================================
   CONTACT SPLIT SCREEN v3
   ============================================= */

/* 네비게이션 바 숨김용 — 스플릿 화면에선 헤더 아래부터 꽉 채움 */
.ct-split-screen {
  display: flex;
  width: 100%;
  /* 헤더 높이(64px) 제외하고 뷰포트 꽉 채움 */
  min-height: calc(100vh - 64px);
  overflow: hidden;
  position: relative;
}

/* ── 각 패널 ── */
.ct-split-panel {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: flex 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 호버 시 60:40으로 확장 */
.ct-split-panel.ct-active  { flex: 1.4; }
.ct-split-panel.ct-shrink  { flex: 0.6; }

/* ── 배경 레이어 ── */
.ct-panel-bg {
  position: absolute;
  inset: 0;
  transition: transform 0.6s ease, opacity 0.4s ease;
}
.ct-panel--agency .ct-panel-bg {
  background:
    radial-gradient(ellipse 80% 60% at 30% 50%, rgba(26,107,255,0.35) 0%, transparent 70%),
    linear-gradient(135deg, #040d1f 0%, #071230 50%, #050a1a 100%);
}
.ct-panel--brand .ct-panel-bg {
  background:
    radial-gradient(ellipse 80% 60% at 70% 50%, rgba(100,210,140,0.25) 0%, transparent 70%),
    linear-gradient(135deg, #050a1a 0%, #071a10 50%, #040d1f 100%);
}
.ct-split-panel.ct-active .ct-panel-bg {
  transform: scale(1.04);
}

/* ── 콘텐츠 ── */
.ct-panel-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 48px 40px;
  transition: transform 0.4s ease, opacity 0.3s ease;
}
.ct-split-panel.ct-shrink .ct-panel-content {
  opacity: 0.5;
  transform: scale(0.95);
}

.ct-panel-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.4);
  margin-bottom: 20px;
}
.ct-panel--agency.ct-active .ct-panel-label { color: rgba(26,107,255,0.8); }
.ct-panel--brand.ct-active  .ct-panel-label { color: rgba(100,210,140,0.8); }

.ct-panel-title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

.ct-panel-desc {
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  line-height: 1.7;
  margin-bottom: 36px;
}
.ct-split-panel.ct-active .ct-panel-desc {
  color: rgba(255,255,255,0.7);
}

/* CTA 버튼 */
.ct-panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.6);
  transition: all 0.35s ease;
  opacity: 0;
  transform: translateY(10px);
}
.ct-split-panel.ct-active .ct-panel-cta {
  opacity: 1;
  transform: translateY(0);
}
.ct-panel--agency.ct-active .ct-panel-cta {
  background: rgba(26,107,255,0.15);
  border-color: rgba(26,107,255,0.5);
  color: #fff;
  box-shadow: 0 0 24px rgba(26,107,255,0.3);
}
.ct-panel--brand.ct-active .ct-panel-cta {
  background: rgba(100,210,140,0.12);
  border-color: rgba(100,210,140,0.45);
  color: #fff;
  box-shadow: 0 0 24px rgba(100,210,140,0.2);
}
.ct-panel-cta svg { width: 18px; height: 18px; }

/* 큰 배경 숫자 */
.ct-panel-num {
  position: absolute;
  bottom: 32px;
  right: 40px;
  font-size: clamp(80px, 12vw, 160px);
  font-weight: 900;
  color: rgba(255,255,255,0.04);
  line-height: 1;
  z-index: 1;
  pointer-events: none;
  transition: color 0.4s ease;
  user-select: none;
}
.ct-split-panel.ct-active .ct-panel-num {
  color: rgba(255,255,255,0.07);
}

/* ── 가운데 구분선 + OR ── */
.ct-split-divider {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.ct-split-divider span {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.4);
  backdrop-filter: blur(8px);
}
/* 세로 구분선 */
.ct-split-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 100vh;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.1) 80%, transparent);
  z-index: -1;
}

/* ── 전환 애니메이션 ── */
@keyframes ctSplitOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.03); }
}
@keyframes ctFormIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 3분할 레이아웃: 구분선 위치 ── */
.ct-split-divider.ct-divider--left {
  left: 33.33%;
}
.ct-split-divider.ct-divider--right {
  left: 66.66%;
}

/* ── 회사소개서 패널 배경 ── */
.ct-panel--brochure .ct-panel-bg {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255,180,50,0.2) 0%, transparent 70%),
    linear-gradient(135deg, #0a0d1f 0%, #12100a 50%, #080a18 100%);
}
.ct-panel--brochure.ct-active .ct-panel-cta {
  background: rgba(255,180,50,0.12);
  border-color: rgba(255,180,50,0.45);
  color: #fff;
  box-shadow: 0 0 24px rgba(255,180,50,0.2);
}
.ct-panel--brochure.ct-active .ct-panel-label { color: rgba(255,180,50,0.8); }

/* 소개서 배지 */
.ct-badge--brochure {
  background: rgba(255,180,50,0.15);
  border: 1px solid rgba(255,180,50,0.4);
  color: rgba(255,180,50,0.9);
}

/* ── 킥오프 패널 배경 ── */
.ct-panel--kickoff .ct-panel-bg {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(160,120,255,0.22) 0%, transparent 70%),
    linear-gradient(135deg, #0a0d1f 0%, #0e0b20 50%, #080a18 100%);
}
.ct-panel--kickoff.ct-active .ct-panel-cta {
  background: rgba(160,120,255,0.12);
  border-color: rgba(160,120,255,0.45);
  color: #fff;
  box-shadow: 0 0 24px rgba(160,120,255,0.2);
}
.ct-panel--kickoff.ct-active .ct-panel-label { color: rgba(160,120,255,0.8); }

/* 킥오프 divider */
.ct-split-divider.ct-divider--kickoff {
  left: 75%;
}

/* 킥오프 배지 */
.ct-badge--kickoff {
  background: rgba(160,120,255,0.15);
  border: 1px solid rgba(160,120,255,0.4);
  color: rgba(160,120,255,0.9);
}

/* 킥오프 submit 버튼 색상 오버라이드 */
.cf-submit--kickoff {
  background: linear-gradient(135deg, rgba(160,120,255,0.18) 0%, rgba(120,80,220,0.22) 100%);
  border-color: rgba(160,120,255,0.4);
}
.cf-submit--kickoff:hover {
  background: linear-gradient(135deg, rgba(160,120,255,0.3) 0%, rgba(120,80,220,0.35) 100%);
  border-color: rgba(160,120,255,0.7);
  box-shadow: 0 0 24px rgba(160,120,255,0.25);
}

/* ── 회사소개서 신청 화면 레이아웃 ── */
.ct-brochure-wrap {
  display: flex;
  gap: 64px;
  align-items: flex-start;
  max-width: 960px;
  margin: 0 auto;
}

/* 왼쪽 소개서 카드 미리보기 */
.ct-brochure-preview {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.ct-brochure-card {
  width: 200px;
  height: 280px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(255,180,50,0.08);
  border: 1px solid rgba(255,180,50,0.2);
  position: relative;
  transform: rotate(-3deg);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.ct-brochure-card:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 60px rgba(255,180,50,0.15);
}
.ct-brochure-card-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #080d20 0%, #0d1530 40%, #060a18 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 16px;
  position: relative;
}
.ct-brochure-card-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255,180,50,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.ct-bc-logo {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: rgba(255,180,50,0.7);
  text-align: center;
  line-height: 1.3;
}
.ct-bc-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.ct-bc-year {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  font-weight: 600;
}
.ct-bc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-top: 8px;
}
.ct-bc-tags span {
  font-size: 9px;
  padding: 3px 7px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.4);
}
.ct-bc-footer {
  position: absolute;
  bottom: 14px;
  font-size: 8px;
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.05em;
}
.ct-brochure-preview-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  line-height: 1.7;
  text-align: center;
}

/* 오른쪽 신청 폼 */
.ct-brochure-form-wrap {
  flex: 1;
}
.ct-brochure-form-head {
  margin-bottom: 36px;
}
.ct-brochure-form-head h2 {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin: 8px 0 12px;
}
.ct-brochure-form-head p {
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
}

/* 이메일 수신 동의 그룹 */
.ct-brochure-agree-group {
  background: rgba(255,180,50,0.05);
  border: 1px solid rgba(255,180,50,0.15);
  border-radius: 10px;
  padding: 16px 18px;
}
.ct-brochure-agree-note {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  line-height: 1.6;
  margin-top: 8px;
  margin-left: 28px;
}

/* 소개서 신청 버튼 */
.ct-brochure-submit {
  background: linear-gradient(135deg, rgba(255,180,50,0.9) 0%, rgba(255,140,30,0.9) 100%) !important;
  box-shadow: 0 8px 24px rgba(255,160,40,0.3) !important;
}
.ct-brochure-submit:hover {
  box-shadow: 0 12px 32px rgba(255,160,40,0.5) !important;
  transform: translateY(-2px) !important;
}

/* 반응형 */
@media (max-width: 768px) {
  .ct-brochure-wrap {
    flex-direction: column;
    gap: 40px;
  }
  .ct-brochure-preview {
    flex: none;
    width: 100%;
  }
}


  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 7px 16px;
  cursor: pointer;
  margin-bottom: 20px;
  transition: all 0.2s ease;
}
.ct-form-hero .step-back-btn:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.25);
}
.ct-form-hero .step-back-btn svg { width: 15px; height: 15px; }

.ct-form-type-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 5px 14px;
  margin-bottom: 12px;
}
.ct-badge--agency {
  color: rgba(26,107,255,0.9);
  background: rgba(26,107,255,0.1);
  border: 1px solid rgba(26,107,255,0.25);
}
.ct-badge--brand {
  color: rgba(100,210,140,0.9);
  background: rgba(100,210,140,0.08);
  border: 1px solid rgba(100,210,140,0.2);
}

/* 예산 직접입력 */
.cf-budget-wrap { display: flex; flex-direction: column; gap: 10px; }
.cf-custom-budget input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 12px 16px;
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.25s;
}
.cf-custom-budget input:focus {
  border-color: rgba(26,107,255,0.5);
  background: rgba(26,107,255,0.05);
}
.cf-custom-budget input::placeholder { color: rgba(255,255,255,0.3); }

/* ── 반응형 ── */
@media (max-width: 768px) {
  .ct-split-screen { flex-direction: column; min-height: calc(100vh - 64px); }
  .ct-split-panel  { flex: 1; min-height: 50%; }
  .ct-split-panel.ct-active  { flex: 1.3; }
  .ct-split-panel.ct-shrink  { flex: 0.7; }
  .ct-split-divider::before  { width: 100vw; height: 1px; }
  .ct-panel-title { font-size: 32px; }
  .ct-panel-num   { font-size: 80px; }
}

/* =============================================
   CONTACT — FAQ 풀너비 섹션 (폼 아래)
   ============================================= */

/* 폼 화면의 contact-layout은 1컬럼으로 */
.ct-form-screen .contact-layout {
  grid-template-columns: 1fr !important;
  max-width: 100%;
}

/* FAQ 섹션 */
.ct-faq-section {
  max-width: 100%;
  margin: 56px 0 0;
  padding-top: 48px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.ct-faq-head {
  margin-bottom: 28px;
}
.ct-faq-head h3 {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-top: 8px;
}

/* FAQ 리스트 — 1열 세로 */
.ct-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ct-faq-list .faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.07);
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: -1px;
}

.ct-faq-list .faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  gap: 16px;
  transition: color 0.2s ease;
}
.ct-faq-list .faq-q:hover { color: #fff; }

.ct-faq-list .faq-q span { flex: 1; }

.ct-faq-list .faq-arr {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, border-color 0.2s ease, background 0.2s ease;
}
.ct-faq-list .faq-arr svg { width: 10px; height: 10px; display: block; }
.ct-faq-list .faq-item.open .faq-arr {
  transform: rotate(180deg);
  border-color: rgba(26,107,255,0.5);
  background: rgba(26,107,255,0.1);
}
.ct-faq-list .faq-item.open .faq-q { color: #fff; }

.ct-faq-list .faq-a {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.8;
  padding: 0 4px;
  word-break: keep-all;
  transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.35s ease;
}
.ct-faq-list .faq-item.open .faq-a {
  max-height: 400px;
  opacity: 1;
  padding: 0 4px 20px;
}

/* ── Contact 폼 영역 + FAQ 너비/정렬 통일 ── */
.ct-form-screen .contact-layout {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.ct-form-screen .contact-form-wrap {
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
/* contact-form 내 모든 input/select/textarea 너비 100% */
.ct-form-screen .cf-group input,
.ct-form-screen .cf-group select,
.ct-form-screen .cf-group textarea {
  width: 100%;
  box-sizing: border-box;
}
/* 개인정보 동의 줄 정렬 */
.cf-privacy-group {
  width: 100%;
}

/* ── Contact 폼 화면: 히어로·폼·FAQ 모두 풀너비 ── */
.ct-form-screen .page-hero .container,
.ct-form-screen .contact-main-section .container {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}
.ct-form-screen .contact-layout {
  grid-template-columns: 1fr !important;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  gap: 0;
}
.ct-form-screen .contact-form-wrap,
.ct-faq-section {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
/* 히어로 패딩 줄임 (너무 넓지 않게) */
.ct-form-screen .page-hero {
  padding: 80px 0 60px;
}

/* ════════════════════════════════════════════════
   개인정보 처리방침 모달
   ════════════════════════════════════════════════ */
.prv-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.26s ease;
}
.prv-modal-overlay.prv-open {
  opacity: 1;
}
.prv-modal-box {
  background: #131720;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  width: 100%;
  max-width: 680px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px);
  transition: transform 0.26s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.prv-modal-overlay.prv-open .prv-modal-box {
  transform: translateY(0);
}
.prv-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.prv-modal-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.prv-modal-close {
  background: rgba(255,255,255,0.06);
  border: none;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,0.6);
  transition: background 0.2s, color 0.2s;
}
.prv-modal-close:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.prv-modal-close svg { width: 18px; height: 18px; }
.prv-modal-body {
  overflow-y: auto;
  padding: 24px 28px;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.prv-modal-body::-webkit-scrollbar { width: 5px; }
.prv-modal-body::-webkit-scrollbar-track { background: transparent; }
.prv-modal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

.prv-section {
  margin-bottom: 24px;
}
.prv-section h3 {
  font-size: 13px;
  font-weight: 700;
  color: rgba(26,107,255,0.9);
  letter-spacing: 0.03em;
  margin: 0 0 10px;
  text-transform: none;
}
.prv-section p,
.prv-section li {
  font-size: 13px;
  line-height: 1.75;
  color: rgba(255,255,255,0.7);
  margin: 0 0 4px;
}
.prv-section ul {
  padding-left: 18px;
  margin: 0;
}
.prv-section ul li { list-style: disc; }
.prv-section strong { color: rgba(255,255,255,0.9); font-weight: 600; }
.prv-section a { color: rgba(26,107,255,0.85); text-decoration: none; }
.prv-section a:hover { text-decoration: underline; }

.prv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}
.prv-table th,
.prv-table td {
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.1);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}
.prv-table th {
  background: rgba(26,107,255,0.12);
  color: rgba(255,255,255,0.9);
  font-weight: 600;
}
.prv-section--foot {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 16px;
}
.prv-section--foot p {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
}

.prv-modal-footer {
  padding: 16px 28px 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}
.prv-agree-btn {
  background: rgba(26,107,255,0.9);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 32px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.prv-agree-btn:hover {
  background: rgb(26,107,255);
  transform: translateY(-1px);
}

/* 내용 확인 버튼 */
.cf-privacy-view-btn {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(26,107,255,0.5);
  border-radius: 6px;
  color: rgba(26,107,255,0.85);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  margin-left: 10px;
}
.cf-privacy-view-btn:hover {
  background: rgba(26,107,255,0.12);
  border-color: rgba(26,107,255,0.9);
  color: rgba(26,107,255,1);
}

/* privacy group flex 정렬 */
.cf-privacy-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
}
.cf-privacy-check {
  flex: 1;
  min-width: 0;
}

@media (max-width: 480px) {
  .prv-modal-header { padding: 18px 18px 14px; }
  .prv-modal-body { padding: 18px 18px; }
  .prv-modal-footer { padding: 14px 18px 18px; }
  .prv-modal-box { border-radius: 12px; }
}

/* ── svc-panel 실사 이미지 오버레이 ── */
.svc-real-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(5,5,20,0.25) 0%,
    rgba(5,5,20,0.10) 40%,
    rgba(5,5,20,0.45) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════
   SVC 상세 페이지 공통 배경 이펙트
═══════════════════════════════════════════════════ */

/* ── Hero 글로우 orb ── */
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.glow-1 {
  width: 480px; height: 480px;
  background: rgba(26,107,255,0.18);
  top: -120px; left: -80px;
  animation: orbFloat 8s ease-in-out infinite;
}
.glow-2 {
  width: 340px; height: 340px;
  background: rgba(90,159,255,0.1);
  top: 60px; right: -60px;
  animation: orbFloat 11s ease-in-out infinite reverse;
}
@keyframes orbFloat {
  0%,100% { transform: translateY(0px) scale(1); }
  50%      { transform: translateY(-28px) scale(1.06); }
}

/* ── 섹션 공통 배경 데코 컨테이너 ── */
.svc-bg-deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* ── 그리드 라인 오버레이 ── */
.svc-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0.5) 80%, transparent 100%);
}

/* ── 떠다니는 원형 점들 ── */
.svc-float-dots {
  position: absolute;
  inset: 0;
}
.svc-float-dots::before,
.svc-float-dots::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(26,107,255,0.12);
  animation: dotFloat 14s ease-in-out infinite;
}
.svc-float-dots::before {
  width: 220px; height: 220px;
  top: 10%; right: 8%;
  animation-duration: 14s;
}
.svc-float-dots::after {
  width: 140px; height: 140px;
  bottom: 15%; left: 5%;
  background: rgba(0,212,168,0.08);
  animation-duration: 18s;
  animation-delay: -6s;
}
@keyframes dotFloat {
  0%,100% { transform: translateY(0) scale(1); opacity: 0.7; }
  33%      { transform: translateY(-20px) scale(1.08); opacity: 1; }
  66%      { transform: translateY(12px) scale(0.95); opacity: 0.5; }
}

/* ── 우측 하단 블루 accent orb ── */
.svc-orb-right {
  position: absolute;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,107,255,0.14) 0%, transparent 70%);
  right: -80px; top: 50%;
  transform: translateY(-50%);
  animation: orbFloat 10s ease-in-out infinite;
  pointer-events: none;
}
.svc-orb-left {
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,168,0.09) 0%, transparent 70%);
  left: -60px; bottom: 10%;
  animation: orbFloat 13s ease-in-out infinite reverse;
  pointer-events: none;
}

/* ── 섹션 상단 글로우 라인 ── */
.svc-section-glow-top {
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(26,107,255,0.4), transparent);
  pointer-events: none;
}

/* ── 점선 도트 패턴 (프로세스 섹션용) ── */
.svc-dot-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.6) 70%, transparent);
}

/* ── 섹션 z-index 보정 ── */
.svc-intro-section,
.viral-products-section,
.svc-process-section,
.svc-results-section,
.svc-features-section,
.svc-cta-section {
  position: relative;
}
.svc-intro-section .container,
.viral-products-section .container,
.svc-process-section .container,
.svc-results-section .container,
.svc-features-section .container,
.svc-cta-section .container {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
   VH — VIRAL HERO (시네마틱 풀스크린 히어로)
══════════════════════════════════════════════════════════════ */

/* ── 기반 섹션 ── */
.vh-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #020408;
}

/* ── 파티클 캔버스 ── */
.vh-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ── 배경 레이어 ── */
.vh-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* 메인 그라디언트 오버레이 */
.vh-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(26,107,255,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 30%, rgba(0,212,168,0.10) 0%, transparent 55%),
    linear-gradient(180deg, rgba(2,4,8,0) 0%, rgba(2,4,8,0.85) 100%);
}

/* 스캔라인 (subtle CRT 느낌) */
.vh-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.06) 3px,
    rgba(0,0,0,0.06) 4px
  );
  pointer-events: none;
  opacity: 0.4;
}

/* ── Glow Orbs ── */
.vh-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
}
.vh-orb--1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(26,107,255,0.28) 0%, transparent 70%);
  top: -100px; left: -100px;
  animation: vhOrbDrift 18s ease-in-out infinite;
}
.vh-orb--2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,212,168,0.20) 0%, transparent 70%);
  bottom: -60px; right: -80px;
  animation: vhOrbDrift 14s ease-in-out infinite reverse;
  animation-delay: -5s;
}
.vh-orb--3 {
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(100,60,255,0.22) 0%, transparent 70%);
  top: 40%; right: 25%;
  animation: vhOrbDrift 20s ease-in-out infinite;
  animation-delay: -9s;
}
@keyframes vhOrbDrift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(30px,-20px) scale(1.06); }
  66%      { transform: translate(-20px,15px) scale(0.96); }
}

/* ── 그리드 라인 ── */
.vh-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 15%, rgba(0,0,0,0.6) 85%, transparent 100%);
}

/* ── 노이즈 텍스처 ── */
.vh-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.5;
}

/* ── 콘텐츠 래퍼 ── */
.vh-inner {
  position: relative;
  z-index: 2;
  padding-top: 140px;
  padding-bottom: 120px;
  max-width: 900px;
}

/* ── 뒤로 가기 링크 ── */
.vh-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  margin-bottom: 36px;
  letter-spacing: 0.04em;
  transition: color 0.25s;
}
.vh-back:hover { color: rgba(26,107,255,0.9); }

/* ── 배지 ── */
.vh-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(26,107,255,0.9);
  text-transform: uppercase;
  padding: 6px 16px;
  border: 1px solid rgba(26,107,255,0.35);
  border-radius: 40px;
  background: rgba(26,107,255,0.08);
  margin-bottom: 28px;
  animation: vhBadgePulse 3s ease-in-out infinite;
}
@keyframes vhBadgePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(26,107,255,0); }
  50%      { box-shadow: 0 0 18px 4px rgba(26,107,255,0.18); }
}
.vh-badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(26,107,255,1);
  box-shadow: 0 0 8px rgba(26,107,255,0.9);
  animation: vhDotBlink 1.8s ease-in-out infinite;
}
@keyframes vhDotBlink {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

/* ── 메인 타이틀 ── */
.vh-title {
  font-family: 'Space Grotesk', 'Noto Sans KR', sans-serif;
  font-size: clamp(28px, 4.2vw, 56px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -1.5px;
  color: var(--white, #fff);
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.vh-tline {
  display: block;
  opacity: 0;
  transform: translateX(-36px);
}
.vh-tline--accent {
  background: linear-gradient(135deg, #fff 30%, rgba(26,107,255,0.9) 70%, rgba(0,212,168,0.85) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* shimmer는 아래 @keyframes vhShimmer 에서 적용 */
}

/* ── 타이핑 커서 ── */
.vh-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: rgba(26,107,255,0.9);
  margin-left: 4px;
  vertical-align: middle;
  border-radius: 2px;
  animation: vhCursorBlink 1s step-end infinite;
}
@keyframes vhCursorBlink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ── 서브 카피 ── */
.vh-sub-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 36px;
  opacity: 0;
  transform: translateY(20px);
}
.vh-sub {
  font-size: clamp(14px, 1.6vw, 17px);
  color: rgba(255,255,255,0.60);
  line-height: 1.8;
  margin: 0;
  font-weight: 400;
}
.vh-sub--em {
  color: rgba(255,255,255,0.85);
  font-weight: 600;
}
.vh-sub--highlight {
  color: rgba(0,212,168,0.90);
  font-weight: 600;
  position: relative;
  display: inline-block;
}
.vh-sub--highlight::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 1px;
  background: rgba(0,212,168,0.5);
  transform: scaleX(0);
  transform-origin: left;
  animation: vhUnderline 0.8s 2s forwards;
}
@keyframes vhUnderline {
  to { transform: scaleX(1); }
}

/* ── KPI 스트립 ── */
.vh-kpi-strip {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 44px;
  opacity: 0;
  transform: translateY(20px);
  flex-wrap: wrap;
  row-gap: 12px;
}
.vh-kpi-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 28px;
}
.vh-kpi-item:first-child { padding-left: 0; }
.vh-kpi-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 800;
  color: var(--white, #fff);
  letter-spacing: -0.5px;
  line-height: 1;
}
.vh-kpi-label {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.vh-kpi-sep {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}

/* ── CTA 버튼 그룹 ── */
.vh-btns {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
}
.vh-scroll-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  padding: 12px 0;
  transition: color 0.25s;
}
.vh-scroll-btn:hover { color: rgba(255,255,255,0.9); }
.vh-scroll-btn svg { transition: transform 0.3s; }
.vh-scroll-btn:hover svg { transform: translateY(3px); }

/* ── 스크롤 힌트 ── */
.vh-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.5;
}
.vh-scroll-mouse {
  width: 22px; height: 36px;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 11px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.vh-scroll-wheel {
  width: 4px; height: 8px;
  background: rgba(255,255,255,0.7);
  border-radius: 2px;
  animation: vhScrollWheel 2s ease-in-out infinite;
}
@keyframes vhScrollWheel {
  0%,100% { transform: translateY(0); opacity: 1; }
  60%      { transform: translateY(10px); opacity: 0; }
}

/* ── 반응형 ── */
@media (max-width: 768px) {
  .vh-inner { padding-top: 110px; padding-bottom: 90px; }
  .vh-title { letter-spacing: -0.5px; font-size: clamp(24px, 6.5vw, 42px); }
  .vh-kpi-item { padding: 0 16px; }
  .vh-kpi-sep { height: 28px; }
}
@media (max-width: 480px) {
  .vh-inner { padding-top: 100px; padding-bottom: 80px; }
  .vh-kpi-strip { gap: 12px; }
  .vh-kpi-sep { display: none; }
  .vh-kpi-item { padding: 0; }
  .vh-btns { flex-direction: column; align-items: flex-start; }
}

/* ── 액센트 타이틀 미세 shimmer 깜빡임 ── */
@keyframes vhShimmer {
  0%,100% { opacity: 1; filter: brightness(1); }
  48%     { opacity: 1; filter: brightness(1); }
  50%     { opacity: 0.82; filter: brightness(1.15); }
  52%     { opacity: 1; filter: brightness(1); }
  78%     { opacity: 1; filter: brightness(1); }
  80%     { opacity: 0.88; filter: brightness(1.12); }
  82%     { opacity: 1; filter: brightness(1); }
}
.vh-tline--accent {
  animation: vhShimmer 6s ease-in-out infinite;
  animation-delay: 2s;
}

/* ── 카운터 업 숫자 하이라이트 ── */
.vh-kpi-num.counting {
  color: rgba(26,107,255,1);
  text-shadow: 0 0 20px rgba(26,107,255,0.5);
}


/* ══════════════════════════════════════════════════════════════
   IFL — 인플루언서 서비스 라인업 그리드
══════════════════════════════════════════════════════════════ */

.ifl-section {
  position: relative;
  padding: 100px 0;
  background: var(--black-2, #0d0d0d);
}

/* ── 배경 데코 ── */
.ifl-section .svc-bg-deco { pointer-events: none; }

/* ── 그리드 ── */
.ifl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 56px;
}

/* ── 카드 ── */
.ifl-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 28px 24px 32px;
  position: relative;
  overflow: hidden;
  transition: background .3s, border-color .3s, transform .3s;
  cursor: default;
}
.ifl-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(168,85,247,0.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .3s;
}
.ifl-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(168,85,247,0.30);
  transform: translateY(-4px);
}
.ifl-card:hover::before { opacity: 1; }

/* ── 아이콘 영역 ── */
.ifl-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(168,85,247,0.12);
  border: 1px solid rgba(168,85,247,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: 18px;
  transition: background .3s, border-color .3s;
  flex-shrink: 0;
}
.ifl-card:hover .ifl-icon {
  background: rgba(168,85,247,0.22);
  border-color: rgba(168,85,247,0.5);
}

/* ── 카드 제목 ── */
.ifl-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--white, #fff);
  margin: 0 0 12px;
  line-height: 1.3;
  letter-spacing: -0.2px;
}

/* ── 서비스 목록 태그 ── */
.ifl-tags {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ifl-tags li {
  font-size: 12.5px;
  color: rgba(255,255,255,0.52);
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.5;
  transition: color .2s;
}
.ifl-tags li::before {
  content: '•';
  color: rgba(168,85,247,0.6);
  flex-shrink: 0;
  margin-top: 1px;
}
.ifl-card:hover .ifl-tags li { color: rgba(255,255,255,0.70); }

/* ── 구분선 accent ── */
.ifl-card-accent {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(168,85,247,0.5), transparent);
  transform: scaleX(0);
  transition: transform .4s cubic-bezier(.25,.46,.45,.94);
}
.ifl-card:hover .ifl-card-accent { transform: scaleX(1); }

/* ── More Services 카드 ── */
.ifl-card--more {
  border-style: dashed;
  border-color: rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 160px;
  text-align: center;
  background: transparent;
}
.ifl-card--more:hover {
  border-color: rgba(168,85,247,0.35);
  background: rgba(168,85,247,0.04);
  transform: translateY(-4px);
}
.ifl-card--more .ifl-more-icon {
  font-size: 22px;
  color: rgba(255,255,255,0.25);
  transition: color .3s;
}
.ifl-card--more:hover .ifl-more-icon { color: rgba(168,85,247,0.7); }
.ifl-card--more span {
  font-size: 12px;
  color: rgba(255,255,255,0.30);
  letter-spacing: 0.06em;
  transition: color .3s;
}
.ifl-card--more:hover span { color: rgba(168,85,247,0.8); }

/* ── 반응형 ── */
@media (max-width: 1024px) {
  .ifl-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .ifl-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ifl-section { padding: 72px 0; }
}
@media (max-width: 480px) {
  .ifl-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ifl-card { padding: 20px 16px 24px; }
}


/* ══════════════════════════════════════════════════════════════
   IFL-SVC — 인플루언서 서비스 섹션 (풀 리디자인)
══════════════════════════════════════════════════════════════ */

/* ── 공통 섹션 베이스 ── */
.ifl-svc-section {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  background: #08090e;
}
.ifl-svc-section--dark { background: #040508; }

/* ── 배경 레이어 ── */
.ifl-svc-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.ifl-svc-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.ifl-svc-orb--a {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(168,85,247,0.15) 0%, transparent 70%);
  top: -100px; right: -100px;
  animation: vhOrbDrift 16s ease-in-out infinite;
}
.ifl-svc-orb--b {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(26,107,255,0.14) 0%, transparent 70%);
  bottom: -80px; left: -80px;
  animation: vhOrbDrift 20s ease-in-out infinite reverse;
}
.ifl-svc-orb--c {
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(239,68,68,0.12) 0%, transparent 70%);
  top: -60px; left: 40%;
  animation: vhOrbDrift 14s ease-in-out infinite;
}
.ifl-svc-orb--d {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(168,85,247,0.14) 0%, transparent 70%);
  bottom: -60px; right: 10%;
  animation: vhOrbDrift 18s ease-in-out infinite reverse;
}
.ifl-svc-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0.5) 80%, transparent);
}
.ifl-svc-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.6) 70%, transparent);
}

/* ── 섹션 내부 컨테이너 ── */
.ifl-svc-inner { position: relative; z-index: 1; }

/* ── 섹션 헤더 ── */
.ifl-svc-header {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin-bottom: 56px;
}
.ifl-svc-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 72px;
  font-weight: 800;
  color: rgba(255,255,255,0.06);
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: -3px;
  user-select: none;
}
.ifl-svc-title {
  font-family: 'Space Grotesk', 'Noto Sans KR', sans-serif;
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  margin: 8px 0 12px;
  letter-spacing: -0.5px;
}
.ifl-svc-title em {
  font-style: normal;
  background: linear-gradient(135deg, rgba(168,85,247,0.95), rgba(236,72,153,0.8));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ifl-svc-lead {
  font-size: 15px;
  color: rgba(255,255,255,0.55);
  line-height: 1.75;
  max-width: 520px;
}
.ifl-svc-lead strong { color: rgba(255,255,255,0.9); }

/* ════════════════════════════
   TRIO GRID (섭외/협찬 3카드)
════════════════════════════ */
.ifl-trio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ifl-trio-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 32px 28px 36px;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(.25,.46,.45,.94), border-color 0.35s, background 0.35s;
}
.ifl-trio-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(.25,.46,.45,.94);
}
.ifl-trio-card--celebrity::after { background: linear-gradient(90deg, transparent, rgba(255,200,50,0.7), transparent); }
.ifl-trio-card--influencer::after { background: linear-gradient(90deg, transparent, rgba(168,85,247,0.7), transparent); }
.ifl-trio-card--insta::after { background: linear-gradient(90deg, transparent, rgba(236,72,153,0.7), transparent); }
.ifl-trio-card:hover { transform: translateY(-6px); background: rgba(255,255,255,0.06); border-color: rgba(168,85,247,0.25); }
.ifl-trio-card:hover::after { transform: scaleX(1); }

.ifl-trio-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.ifl-trio-badge {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(168,85,247,0.18);
  border: 1px solid rgba(168,85,247,0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  color: rgba(168,85,247,0.9);
  font-family: 'Space Grotesk', sans-serif;
}
.ifl-trio-icon {
  width: 22px; height: 22px;
  color: rgba(255,255,255,0.25);
  transition: color 0.3s;
}
.ifl-trio-card:hover .ifl-trio-icon { color: rgba(168,85,247,0.6); }

.ifl-trio-card h3 {
  font-size: 22px; font-weight: 800;
  line-height: 1.25; color: #fff;
  margin: 0 0 16px;
  letter-spacing: -0.3px;
}
.ifl-trio-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 16px;
}
.ifl-trio-tags span {
  font-size: 11px;
  color: rgba(168,85,247,0.8);
  background: rgba(168,85,247,0.1);
  border: 1px solid rgba(168,85,247,0.2);
  border-radius: 20px;
  padding: 3px 10px;
  letter-spacing: 0.04em;
}
.ifl-trio-card p {
  font-size: 13.5px;
  color: rgba(255,255,255,0.52);
  line-height: 1.75;
  margin: 0;
}
.ifl-trio-card p strong { color: rgba(255,255,255,0.85); }
.ifl-trio-glow {
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168,85,247,0.3), transparent);
  pointer-events: none;
}

/* ════════════════════════════
   SPLIT CARD (브랜디드 + PPL)
════════════════════════════ */
.ifl-split-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.ifl-split-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 24px;
  padding: 44px 40px 48px;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s, border-color 0.35s, background 0.35s;
}
.ifl-split-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(26,107,255,0.4), transparent);
  transition: opacity 0.35s;
}
.ifl-split-card:hover { transform: translateY(-5px); background: rgba(255,255,255,0.055); border-color: rgba(26,107,255,0.22); }

.ifl-split-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 80px; font-weight: 800;
  color: rgba(255,255,255,0.04);
  line-height: 1; margin-bottom: -20px;
  letter-spacing: -4px;
}
.ifl-split-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(26,107,255,0.8); margin-bottom: 12px;
}
.ifl-split-title {
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 800; line-height: 1.2;
  color: #fff; margin: 0 0 20px;
  letter-spacing: -0.5px;
}
.ifl-split-desc {
  font-size: 14px; color: rgba(255,255,255,0.52);
  line-height: 1.8; margin: 0 0 24px;
}
.ifl-split-desc strong { color: rgba(255,255,255,0.88); }
.ifl-split-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ifl-split-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; color: rgba(255,255,255,0.58); line-height: 1.6;
}
.ifl-check {
  color: rgba(26,107,255,0.85);
  font-weight: 700; flex-shrink: 0;
  margin-top: 1px;
}
.ifl-split-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(26,107,255,0.5), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s cubic-bezier(.25,.46,.45,.94);
}
.ifl-split-card:hover .ifl-split-bar { transform: scaleX(1); }

/* ════════════════════════════
   YT GRID (유튜브 콘텐츠 2×2)
════════════════════════════ */
.ifl-yt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.ifl-yt-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 30px 28px 34px;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s, border-color 0.35s, background 0.35s;
}
.ifl-yt-card:hover { transform: translateY(-5px); background: rgba(255,255,255,0.06); border-color: rgba(239,68,68,0.22); }
.ifl-yt-badge {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 4px;
  padding: 3px 8px;
  margin-bottom: 14px;
}
.ifl-yt-badge--premium { background: rgba(255,200,50,0.12); color: rgba(255,200,50,0.9); border: 1px solid rgba(255,200,50,0.25); }
.ifl-yt-badge--ai { background: rgba(0,212,168,0.12); color: rgba(0,212,168,0.9); border: 1px solid rgba(0,212,168,0.25); }
.ifl-yt-badge--trend { background: rgba(239,68,68,0.12); color: rgba(239,68,68,0.9); border: 1px solid rgba(239,68,68,0.25); }
.ifl-yt-icon { font-size: 26px; margin-bottom: 12px; display: block; }
.ifl-yt-card h4 { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 10px; letter-spacing: -0.2px; }
.ifl-yt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ifl-yt-chips span {
  font-size: 11px; color: rgba(239,68,68,0.75);
  background: rgba(239,68,68,0.09);
  border: 1px solid rgba(239,68,68,0.18);
  border-radius: 4px; padding: 2px 8px;
}
.ifl-yt-card p { font-size: 13px; color: rgba(255,255,255,0.50); line-height: 1.75; margin: 0; }
.ifl-yt-card p strong { color: rgba(255,255,255,0.85); }

/* ════════════════════════════
   MODEL GRID (모델 3카드)
════════════════════════════ */
.ifl-model-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ifl-model-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 32px 28px 36px;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s, border-color 0.35s, background 0.35s;
}
.ifl-model-card--featured {
  background: rgba(168,85,247,0.06);
  border-color: rgba(168,85,247,0.2);
}
.ifl-model-card--featured::before {
  content: 'PREMIUM';
  position: absolute;
  top: 20px; right: 20px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.15em;
  color: rgba(168,85,247,0.8);
  background: rgba(168,85,247,0.12);
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: 4px; padding: 3px 7px;
}
.ifl-model-card:hover { transform: translateY(-5px); background: rgba(255,255,255,0.06); border-color: rgba(168,85,247,0.25); }
.ifl-model-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.ifl-model-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 700;
  color: rgba(168,85,247,0.7);
  background: rgba(168,85,247,0.12);
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: 6px; padding: 3px 9px;
}
.ifl-model-card h4 { font-size: 20px; font-weight: 800; color: #fff; margin: 0 0 18px; }
.ifl-model-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ifl-model-list li {
  font-size: 13px; color: rgba(255,255,255,0.52);
  line-height: 1.65; padding-left: 14px; position: relative;
}
.ifl-model-list li::before {
  content: '';
  position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(168,85,247,0.55);
}
.ifl-model-list li strong { color: rgba(255,255,255,0.85); }

/* ════════════════════════════
   CONFIDENTIAL 섹션
════════════════════════════ */
.ifl-confidential-section {
  background: #020306;
  padding: 120px 0;
}
.ifl-conf-canvas {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
  opacity: 0.5;
}
.ifl-conf-wrap {
  max-width: 680px; margin: 0 auto; text-align: center;
}
.ifl-conf-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  color: rgba(168,85,247,0.6); text-transform: uppercase;
  margin-bottom: 8px;
}
.ifl-conf-label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.3); margin-bottom: 24px;
}
.ifl-conf-title {
  font-family: 'Space Grotesk', 'Noto Sans KR', sans-serif;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 900; line-height: 1.15;
  color: #fff; margin: 0 0 36px;
  letter-spacing: -1px;
}
.ifl-conf-title em {
  font-style: normal;
  background: linear-gradient(135deg, rgba(168,85,247,0.95), rgba(236,72,153,0.8));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* 도장 */
.ifl-conf-stamp {
  display: inline-block;
  margin-bottom: 32px;
  animation: confStampIn 0.6s 0.5s both cubic-bezier(.25,.46,.45,.94);
}
@keyframes confStampIn {
  from { opacity: 0; transform: scale(1.3) rotate(-12deg); }
  to   { opacity: 1; transform: scale(1) rotate(-8deg); }
}
.ifl-conf-stamp-inner {
  border: 3px solid rgba(168,85,247,0.65);
  border-radius: 8px;
  padding: 8px 24px;
  transform: rotate(-8deg);
  box-shadow: 0 0 20px rgba(168,85,247,0.2), inset 0 0 20px rgba(168,85,247,0.04);
  animation: confStampPulse 3s ease-in-out infinite;
}
@keyframes confStampPulse {
  0%,100% { box-shadow: 0 0 20px rgba(168,85,247,0.2); }
  50%      { box-shadow: 0 0 35px rgba(168,85,247,0.4); }
}
.ifl-conf-stamp-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(18px, 3vw, 28px); font-weight: 900;
  letter-spacing: 0.18em; color: rgba(168,85,247,0.8);
  text-transform: uppercase;
}

.ifl-conf-note {
  font-size: 14px; color: rgba(255,255,255,0.40);
  margin-bottom: 32px; letter-spacing: 0.02em;
}
.ifl-conf-box {
  background: rgba(168,85,247,0.05);
  border: 1px solid rgba(168,85,247,0.18);
  border-radius: 20px;
  padding: 36px 40px 32px;
  margin-bottom: 40px;
  text-align: center;
}
.ifl-conf-box-icon { font-size: 32px; margin-bottom: 16px; display: block; }
.ifl-conf-box p {
  font-size: 15px; color: rgba(255,255,255,0.60);
  line-height: 1.85; margin: 0 0 8px;
}
.ifl-conf-box p:last-of-type { margin: 0; }
.ifl-conf-box strong { color: rgba(255,255,255,0.92); }
.ifl-conf-security {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 20px;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.20); font-family: 'Space Grotesk', monospace;
}
.ifl-conf-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(168,85,247,0.5);
  animation: vhDotBlink 2s ease-in-out infinite;
}
.ifl-conf-cta { display: inline-flex; margin: 0 auto; }

/* ── 반응형 ── */
@media (max-width: 1024px) {
  .ifl-trio-grid { grid-template-columns: repeat(2, 1fr); }
  .ifl-model-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .ifl-svc-section { padding: 72px 0; }
  .ifl-svc-header { flex-direction: column; gap: 12px; }
  .ifl-svc-num { font-size: 48px; }
  .ifl-trio-grid,
  .ifl-split-wrap,
  .ifl-yt-grid,
  .ifl-model-grid { grid-template-columns: 1fr; }
  .ifl-split-card { padding: 32px 24px 36px; }
  .ifl-conf-box { padding: 28px 24px; }
}


/* ══════════════════════════════════════════════════════════════
   IFL2 — 인플루언서 서비스 섹션 v2 (리디자인)
══════════════════════════════════════════════════════════════ */

/* ── 공통 섹션 베이스 ── */
/* ════════════════════════════════════════════
   DATA & FILTERING SECTION  —  ifl-data-section
════════════════════════════════════════════ */

/* ── 섹션 베이스 ── */
.ifl-data-section {
  position: relative;
  padding: 120px 0 130px;
  background: #050710;
  overflow: hidden;
}
.ifl-data-section .container { position: relative; z-index: 2; }

/* ── 배경 레이어 ── */
.ifl-data-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* 그리드 라인 */
.ifl-data-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(26,107,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,107,255,0.055) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%);
}

/* 오브 */
.ifl-data-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}
.ifl-data-orb--blue {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(26,107,255,0.22) 0%, transparent 65%);
  top: -200px; left: -180px;
  animation: ifl-orb-drift 14s ease-in-out infinite alternate;
}
.ifl-data-orb--purple {
  width: 550px; height: 550px;
  background: radial-gradient(circle, rgba(124,58,237,0.18) 0%, transparent 65%);
  bottom: -150px; right: -100px;
  animation: ifl-orb-drift 18s ease-in-out infinite alternate-reverse;
}
.ifl-data-orb--cyan {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(6,182,212,0.1) 0%, transparent 65%);
  top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  animation: ifl-orb-drift 22s ease-in-out infinite alternate;
}
@keyframes ifl-orb-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, 20px) scale(1.08); }
}

/* 글로우 라인 */
.ifl-data-glow-line {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(26,107,255,0.35) 30%,
    rgba(124,58,237,0.35) 60%,
    transparent 100%);
}
.ifl-data-glow-line--top    { top: 0; }
.ifl-data-glow-line--bottom { bottom: 0; }

/* 파티클 */
.ifl-data-particles { position: absolute; inset: 0; }
.ifl-dp {
  position: absolute;
  border-radius: 50%;
  background: var(--blue, #1a6bff);
  opacity: 0;
  animation: ifl-particle-float 6s ease-in-out infinite;
}
.dp1  { width:3px;height:3px; top:15%; left:8%;  animation-delay:0s;   animation-duration:7s; }
.dp2  { width:2px;height:2px; top:30%; left:20%; animation-delay:1.2s; animation-duration:9s; }
.dp3  { width:4px;height:4px; top:60%; left:5%;  animation-delay:0.5s; animation-duration:8s; }
.dp4  { width:2px;height:2px; top:80%; left:25%; animation-delay:2s;   animation-duration:6s; }
.dp5  { width:3px;height:3px; top:10%; left:80%; animation-delay:0.8s; animation-duration:10s; background:#7c3aed; }
.dp6  { width:2px;height:2px; top:45%; left:90%; animation-delay:1.8s; animation-duration:7s; background:#06b6d4; }
.dp7  { width:4px;height:4px; top:70%; left:75%; animation-delay:3s;   animation-duration:9s; }
.dp8  { width:2px;height:2px; top:25%; left:65%; animation-delay:0.3s; animation-duration:8s; background:#7c3aed; }
@keyframes ifl-particle-float {
  0%,100% { opacity:0; transform: translateY(0); }
  20%,80% { opacity:0.55; }
  50%     { opacity:0.8; transform: translateY(-18px); }
}

/* ── 섹션 헤드 ── */
.ifl-data-head {
  text-align: center;
  margin-bottom: 90px;
}
.ifl-data-eyebrow {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue, #1a6bff);
  background: rgba(26,107,255,0.08);
  border: 1px solid rgba(26,107,255,0.22);
  padding: 6px 18px;
  border-radius: 20px;
  margin-bottom: 24px;
}
.ifl-data-heading {
  font-size: clamp(30px, 3.8vw, 50px);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.035em;
  margin-bottom: 22px;
}
.ifl-data-heading em {
  font-style: normal;
  background: linear-gradient(135deg, #1a6bff 0%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ifl-data-subhead {
  font-size: 16px;
  color: rgba(255,255,255,0.46);
  line-height: 1.85;
  max-width: 580px;
  margin: 0 auto 52px;
}
.ifl-data-subhead strong { color: rgba(255,255,255,0.78); font-weight: 600; }

/* ── 3단계 플로우 ── */
.ifl-data-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 52px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* 플로우 카드 */
.ifl-data-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  flex: 1;
  min-width: 200px;
  max-width: 290px;
  position: relative;
  transition: transform 0.3s cubic-bezier(.25,.46,.45,.94);
  cursor: default;
}
.ifl-data-flow-step:hover { transform: translateY(-6px); }

/* 스텝 번호 뱃지 — 이미지 좌상단 */
.ifl-data-flow-step::before {
  content: attr(data-step);
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  width: 28px;
  height: 28px;
  background: rgba(26,107,255,0.85);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(26,107,255,0.5);
}

/* 이미지 래퍼 */
.ifl-data-flow-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 12px 36px rgba(0,0,0,0.55);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.ifl-data-flow-step:hover .ifl-data-flow-img-wrap {
  border-color: rgba(26,107,255,0.5);
  box-shadow: 0 16px 48px rgba(0,0,0,0.65), 0 0 0 1px rgba(26,107,255,0.3), 0 0 24px rgba(26,107,255,0.15);
}
.ifl-data-flow-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(.25,.46,.45,.94);
  filter: brightness(0.82) saturate(0.9);
}
.ifl-data-flow-step:hover .ifl-data-flow-img-wrap img {
  transform: scale(1.06);
  filter: brightness(0.95) saturate(1.05);
}

/* 오버레이 — 기본: 하단에서 위로 올라오는 그라디언트 */
.ifl-data-flow-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(5,7,16,0.0) 30%,
    rgba(5,7,16,0.75) 100%
  );
  border-radius: inherit;
  transition: opacity 0.3s;
}
/* 오버레이 — accent (합리적 제안) */
.ifl-data-flow-img-overlay--accent {
  background: linear-gradient(
    to bottom,
    rgba(26,107,255,0.05) 20%,
    rgba(5,7,16,0.78) 100%
  );
}

/* 이미지 위에 호버 시 나타나는 라벨 오버레이 */
.ifl-data-flow-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(26,107,255,0.08);
  opacity: 0;
  transition: opacity 0.3s;
}
.ifl-data-flow-step:hover .ifl-data-flow-img-wrap::after {
  opacity: 1;
}

/* accent 카드 테두리 강조 */
.ifl-data-flow-step--accent .ifl-data-flow-img-wrap {
  border-color: rgba(26,107,255,0.4);
  box-shadow: 0 12px 36px rgba(0,0,0,0.55), 0 0 0 1px rgba(26,107,255,0.25);
}
.ifl-data-flow-step--accent::before {
  background: rgba(26,107,255,1);
  box-shadow: 0 2px 12px rgba(26,107,255,0.7);
}

/* 라벨 영역 — 이미지 하단 안쪽에 겹침 */
.ifl-data-flow-label-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 16px 14px;
  z-index: 5;
  pointer-events: none;
}
.ifl-data-flow-label {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
  margin-bottom: 4px;
}
.ifl-data-flow-step--accent .ifl-data-flow-label {
  color: #fff;
}
.ifl-data-flow-sub {
  font-size: 11.5px;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
  transition: color 0.3s;
}
.ifl-data-flow-step:hover .ifl-data-flow-sub {
  color: rgba(255,255,255,0.85);
}

/* 화살표 */
.ifl-data-flow-arrow {
  padding: 0 12px;
  color: rgba(26,107,255,0.5);
  flex-shrink: 0;
  transition: color 0.3s;
  margin-bottom: 32px; /* 라벨이 이미지 아래로 내려간 공간 보정 */
}
.ifl-data-flow-arrow svg { width: 40px; height: 12px; }

/* ── 카운터 배지 바 ── */
.ifl-data-counter-bar {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 0 8px;
  backdrop-filter: blur(16px);
  box-shadow: 0 0 40px rgba(26,107,255,0.08), inset 0 1px 0 rgba(255,255,255,0.05);
}
.ifl-data-counter-item {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 18px 32px;
}
.ifl-data-counter-item--live {
  align-items: center;
  gap: 10px;
}
.ifl-data-counter-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 34px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1;
}
.ifl-data-counter-unit {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--blue, #1a6bff);
}
.ifl-data-counter-label {
  font-size: 12px;
  color: rgba(255,255,255,0.36);
  letter-spacing: 0.04em;
  align-self: center;
  padding-left: 4px;
  white-space: nowrap;
}
.ifl-data-counter-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.ifl-data-live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.6);
  animation: ifl-live-ping 1.8s ease-out infinite;
  flex-shrink: 0;
}
@keyframes ifl-live-ping {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* ── 행 레이아웃 ── */
.ifl-data-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 110px;
}
.ifl-data-row:last-child { margin-bottom: 0; }
.ifl-data-row--rev .ifl-data-img-wrap { order: -1; }

/* ── 번호 뱃지 ── */
.ifl-data-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--blue, #1a6bff);
  background: rgba(26,107,255,0.1);
  border: 1px solid rgba(26,107,255,0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  margin-bottom: 20px;
}

/* ── 텍스트 ── */
.ifl-data-title {
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 600;
  color: #fff;
  line-height: 1.38;
  margin: 0 0 14px;
  letter-spacing: -0.025em;
}
.ifl-data-title strong {
  display: block;
  font-weight: 800;
  background: linear-gradient(135deg, #fff 40%, rgba(255,255,255,0.72));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ifl-data-desc {
  font-size: 14.5px;
  color: rgba(255,255,255,0.46);
  line-height: 1.9;
  margin: 0 0 24px;
}
.ifl-data-desc strong { color: rgba(255,255,255,0.78); font-weight: 600; }

/* ── 포인트 리스트 ── */
.ifl-data-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 24px;
  padding: 0;
}
.ifl-data-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.58);
}
.ifl-data-dot {
  flex-shrink: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue, #1a6bff);
  box-shadow: 0 0 7px rgba(26,107,255,0.7);
}

/* ── 인사이트 바 ── */
.ifl-data-insight-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(26,107,255,0.07);
  border: 1px solid rgba(26,107,255,0.18);
  border-radius: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}
.ifl-data-insight-bar strong { color: #fff; font-weight: 600; }

/* ── 필터 태그 칩 ── */
.ifl-data-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.ifl-data-tag {
  display: inline-block;
  font-size: 12.5px;
  color: rgba(255,255,255,0.58);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 40px;
  padding: 7px 15px;
  transition: all 0.22s ease;
  cursor: default;
}
.ifl-data-tag:hover {
  background: rgba(26,107,255,0.12);
  border-color: rgba(26,107,255,0.35);
  color: rgba(255,255,255,0.9);
}
.ifl-data-tag--more {
  background: rgba(26,107,255,0.07);
  border-color: rgba(26,107,255,0.22);
  color: rgba(255,255,255,0.72);
}

/* ── LIVE DB 배지 ── */
.ifl-data-db-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 18px 24px;
  background: rgba(26,107,255,0.06);
  border: 1px solid rgba(26,107,255,0.18);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.ifl-data-db-badge::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(26,107,255,0.5), transparent);
}
.ifl-data-db-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ifl-data-db-live-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #22c55e;
}
.ifl-data-db-right {
  display: flex;
  align-items: baseline;
  gap: 3px;
  flex: 1;
}
.ifl-data-db-right .ifl-data-counter-num { font-size: 28px; }
.ifl-data-db-plus {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--blue, #1a6bff);
}
.ifl-data-db-label {
  font-size: 12px;
  color: rgba(255,255,255,0.36);
  letter-spacing: 0.05em;
  padding-left: 4px;
  align-self: center;
}
.ifl-data-db-sub {
  width: 100%;
  font-size: 12px;
  color: rgba(255,255,255,0.32);
  padding-top: 2px;
}

/* ── 이미지 래퍼 ── */
.ifl-data-img-wrap {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  aspect-ratio: 16 / 10;
  position: relative;
}
.ifl-data-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 리포트 이미지: 흰 배경 차트 */
.ifl-data-img-wrap--report {
  background: #fff;
  border-color: rgba(255,255,255,0.15);
  aspect-ratio: 16 / 7;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.ifl-data-img-wrap--report img {
  object-fit: contain;
  padding: 16px;
  background: #fff;
}
/* 필터 이미지: 2장 상하 스택 */
.ifl-data-img-wrap--filter {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: transparent;
  border: none;
  overflow: visible;
}
.ifl-filter-img {
  width: 100%;
  border-radius: 14px;
  display: block;
  border: 1px solid rgba(255,255,255,0.08);
  object-fit: cover;
  object-position: top;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
.ifl-filter-img--top    { height: 240px; }
.ifl-filter-img--bottom { height: 200px; }

/* ── 반응형 ── */
@media (max-width: 1024px) {
  .ifl-data-section { padding: 80px 0 90px; }
  .ifl-data-row { grid-template-columns: 1fr; gap: 48px; margin-bottom: 80px; }
  .ifl-data-row--rev .ifl-data-img-wrap { order: 0; }
  .ifl-data-head { margin-bottom: 64px; }
  .ifl-data-counter-bar { flex-wrap: wrap; justify-content: center; }
  .ifl-data-flow { gap: 8px; flex-wrap: wrap; justify-content: center; }
  .ifl-data-flow-step { min-width: 140px; max-width: 200px; }
  .ifl-data-flow-arrow { padding: 0 6px; }
  .ifl-filter-img--top    { height: 200px; }
  .ifl-filter-img--bottom { height: 160px; }
}
@media (max-width: 768px) {
  .ifl-data-flow-arrow { display: none; }
  .ifl-data-flow { gap: 10px; }
}
@media (max-width: 640px) {
  .ifl-data-section { padding: 64px 0 72px; }
  .ifl-data-heading { font-size: 26px; }
  .ifl-data-title { font-size: 20px; }
  .ifl-data-counter-item { padding: 14px 20px; }
  .ifl-data-counter-num { font-size: 26px; }
  .ifl-filter-img--top    { height: 160px; }
  .ifl-filter-img--bottom { height: 130px; }
}


.ifl2-section {
  position: relative;
  padding: 100px 0 110px;
  overflow: hidden;
  background: var(--dark, #04060f);
}
.ifl2-section--casting  { background: linear-gradient(180deg,#07091a 0%,#04060f 100%); }
.ifl2-section--content  { background: linear-gradient(180deg,#030810 0%,#07091a 100%); }
.ifl2-section--youtube  { background: linear-gradient(180deg,#0a0508 0%,#04060f 100%); }
.ifl2-section--model    { background: linear-gradient(180deg,#050812 0%,#0a0508 100%); }
/* ════════════════════════════════════════════
   SERVICE TAB SECTION  (대분류 탭 + 중분류 아코디언)
════════════════════════════════════════════ */
.svctab-section {
  position: relative;
  padding: 100px 0 120px;
  background: linear-gradient(180deg, #04060f 0%, #07091a 50%, #04060f 100%);
  overflow: hidden;
}

/* 배경 오브 + 그리드 */
.svctab-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.svctab-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.18;
}
.svctab-orb--a {
  width: 600px; height: 600px;
  top: -160px; left: -120px;
  background: radial-gradient(circle, #1a6bff 0%, transparent 70%);
}
.svctab-orb--b {
  width: 500px; height: 500px;
  bottom: -100px; right: -80px;
  background: radial-gradient(circle, #7c3aed 0%, transparent 70%);
}
.svctab-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}

/* ── 대분류 탭 네비 ── */
.svctab-nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
  margin-bottom: 64px;
}
.svctab-divider {
  width: 1px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.svctab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 28px 36px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.3s;
}
.svctab-btn::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1a6bff, #7c3aed);
  border-radius: 0;
  opacity: 0;
  transform: scaleX(0.3);
  transition: opacity 0.3s, transform 0.3s;
}
.svctab-btn:hover { background: rgba(255,255,255,0.03); }
.svctab-btn.active { background: rgba(26,107,255,0.06); }
.svctab-btn.active::after { opacity: 1; transform: scaleX(1); }
.svctab-btn-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.25);
  transition: color 0.3s;
}
.svctab-btn.active .svctab-btn-num { color: #3b82f6; }
.svctab-btn-label {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 800;
  letter-spacing: -0.3px;
  color: rgba(255,255,255,0.3);
  font-family: 'Pretendard', sans-serif;
  transition: color 0.3s;
  line-height: 1.1;
}
.svctab-btn.active .svctab-btn-label,
.svctab-btn:hover .svctab-btn-label { color: #fff; }
.svctab-btn-sub {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.18);
  letter-spacing: 0.06em;
  transition: color 0.3s;
}
.svctab-btn.active .svctab-btn-sub { color: rgba(255,255,255,0.38); }

/* ── 탭 패널 ── */
.svctab-panel {
  display: none;
  animation: svctabFadeIn 0.4s cubic-bezier(0.16,1,0.3,1);
}
.svctab-panel.active { display: block; }
@keyframes svctabFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 패널 헤더 */
.svctab-panel-head {
  margin-bottom: 48px;
}
.svctab-panel-eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: #3b82f6;
  margin-bottom: 12px;
}
.svctab-panel-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}
.svctab-panel-title em {
  font-style: normal;
  background: linear-gradient(135deg, #c084fc, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.svctab-panel-lead {
  font-size: 15px;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
}
.svctab-panel-lead strong { color: rgba(255,255,255,0.82); font-weight: 600; }

/* ── 중분류 아코디언 ── */
.svctab-acc {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}
.svctab-item {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.svctab-item:last-child { border-bottom: none; }

/* 트리거 버튼 */
.svctab-item-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.25s;
  gap: 16px;
}
.svctab-item-trigger:hover { background: rgba(255,255,255,0.03); }
.svctab-item-trigger.active { background: rgba(26,107,255,0.05); }
.svctab-item-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.svctab-item-idx {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.2);
  min-width: 26px;
  transition: color 0.25s;
}
.svctab-item-trigger.active .svctab-item-idx { color: #3b82f6; }
.svctab-item-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}
.svctab-item-name {
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  letter-spacing: -0.2px;
  font-family: 'Pretendard', sans-serif;
  transition: color 0.25s;
}
.svctab-item-trigger.active .svctab-item-name,
.svctab-item-trigger:hover .svctab-item-name { color: #fff; }
.svctab-item-en {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.18);
  letter-spacing: 0.06em;
  transition: color 0.25s;
}
.svctab-item-trigger.active .svctab-item-en { color: rgba(255,255,255,0.38); }
.svctab-item-arrow {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.3);
  transition: transform 0.3s, background 0.25s, color 0.25s;
}
.svctab-item-arrow svg { width: 14px; height: 14px; }
.svctab-item-trigger.active .svctab-item-arrow {
  transform: rotate(180deg);
  background: rgba(26,107,255,0.15);
  border-color: rgba(26,107,255,0.3);
  color: #3b82f6;
}

/* 아코디언 바디 — max-height 트랜지션 */
.svctab-item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.16,1,0.3,1);
}
.svctab-item-body.open { /* max-height set by JS */ }

/* 내부 콘텐츠 레이아웃 — 이미지 좌 + 설명 우 */
.svctab-item-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 32px 32px 40px;
  align-items: start;
}

/* 이미지 영역 */
.svctab-item-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  position: relative;
}
.svctab-item-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s ease;
}
.svctab-item-img-wrap:hover img { transform: scale(1.03); }
.svctab-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(255,255,255,0.2);
}
.svctab-img-placeholder svg { width: 48px; height: 48px; }
.svctab-img-placeholder span {
  font-size: 11px;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: 0.1em;
}

/* ── 텍스트 인포카드 (이미지 대체) ── */
.svctab-infocard {
  --sic-color: #60a5fa;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 24px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-top: 2px solid var(--sic-color, #60a5fa);
  border-radius: 10px;
  min-width: 0;
  flex-shrink: 0;
  width: 100%;
}
.svctab-infocard[data-color] { border-top-color: attr(data-color); }
.sic-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sic-icon { font-size: 22px; line-height: 1; }
.sic-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  font-family: 'Space Grotesk', sans-serif;
}
.sic-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.sic-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  text-align: center;
}
.sic-num {
  font-size: 18px;
  font-weight: 800;
  font-family: 'Space Grotesk', sans-serif;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.5px;
}
.sic-unit { font-size: 13px; font-weight: 600; opacity: 0.7; }
.sic-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
}
.sic-quote {
  font-size: 12px;
  font-style: italic;
  color: rgba(255,255,255,0.3);
  border-left: 2px solid rgba(255,255,255,0.1);
  padding-left: 12px;
  line-height: 1.6;
  margin-top: auto;
}
.svctab-item-desc {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 4px;
}
.svctab-desc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.svctab-desc-tags span {
  font-size: 12px;
  padding: 5px 14px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--tc, #3b82f6) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tc, #3b82f6) 25%, transparent);
  color: var(--tc, #3b82f6);
  font-weight: 500;
  white-space: nowrap;
}
.svctab-desc-text {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.8;
}
.svctab-desc-text strong { color: rgba(255,255,255,0.88); font-weight: 600; }
.svctab-desc-points {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.svctab-desc-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
}
.svctab-desc-dot {
  flex-shrink: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dc, #3b82f6);
  box-shadow: 0 0 6px var(--dc, #3b82f6);
}

/* ── 반응형 ── */
@media (max-width: 1024px) {
  .svctab-btn { padding: 22px 24px; }
  .svctab-item-content { grid-template-columns: 1fr; gap: 24px; padding: 24px 24px 32px; }
}
@media (max-width: 640px) {
  .svctab-section { padding: 64px 0 80px; }
  .svctab-nav { flex-direction: column; border-radius: 16px; }
  .svctab-divider { width: 100%; height: 1px; }
  .svctab-btn { flex-direction: row; align-items: center; padding: 18px 20px; gap: 12px; }
  .svctab-btn::after { bottom: auto; left: 0; top: 0; height: 100%; width: 3px; transform: scaleY(0.3); }
  .svctab-btn.active::after { transform: scaleY(1); }
  .svctab-btn-sub { display: none; }
  .svctab-panel-head { margin-bottom: 32px; }
  .svctab-nav { margin-bottom: 40px; }
  .svctab-item-trigger { padding: 18px 20px; }
  .svctab-item-content { padding: 20px 20px 28px; }
  .svctab-inline-cta { flex-direction: column; gap: 16px; text-align: center; }
}

/* ── 섭외/협찬 하단 인라인 CTA ── */
@keyframes svctabMsgBlink {
  0%,100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.svctab-inline-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 36px;
  padding: 24px 32px;
  background: rgba(41,121,255,0.06);
  border: 1px solid rgba(41,121,255,0.18);
  border-radius: 8px;
}
.svctab-cta-msg {
  font-size: 15px;
  color: rgba(180,210,255,0.75);
  line-height: 1.6;
  animation: svctabMsgBlink 2.2s ease-in-out infinite;
}
.svctab-cta-msg strong {
  color: rgba(120,170,255,1);
  font-weight: 700;
}
.svctab-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 26px;
  background: rgba(41,121,255,0.15);
  border: 1px solid rgba(41,121,255,0.4);
  color: rgba(160,200,255,0.95);
  font-size: 13px;
  font-weight: 700;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.svctab-cta-btn:hover {
  background: rgba(41,121,255,0.28);
  border-color: rgba(41,121,255,0.7);
  color: #ffffff;
}

/* ────────────────────────────────── */
.ifl2-section--confidential { background: linear-gradient(180deg,#04020e 0%,#060210 100%); min-height: 640px; display:flex; align-items:center; }

/* ── 배경 레이어 ── */
.ifl2-bg { position:absolute; inset:0; pointer-events:none; z-index:0; }
.ifl2-orb {
  position:absolute; border-radius:50%; filter:blur(90px);
  animation: ifl2OrbFloat 14s ease-in-out infinite;
}
.ifl2-orb--purple { width:520px; height:520px; top:-100px; right:-120px;
  background:radial-gradient(circle, rgba(168,85,247,0.12) 0%, transparent 70%); animation-delay:0s; }
.ifl2-orb--pink   { width:380px; height:380px; bottom:-60px; left:-80px;
  background:radial-gradient(circle, rgba(236,72,153,0.10) 0%, transparent 70%); animation-delay:-5s; }
.ifl2-orb--blue   { width:460px; height:460px; top:-80px; left:-100px;
  background:radial-gradient(circle, rgba(26,107,255,0.10) 0%, transparent 70%); animation-delay:-3s; }
.ifl2-orb--cyan   { width:360px; height:360px; bottom:-50px; right:-60px;
  background:radial-gradient(circle, rgba(0,212,255,0.08) 0%, transparent 70%); animation-delay:-8s; }
.ifl2-orb--red    { width:500px; height:500px; top:-80px; right:-100px;
  background:radial-gradient(circle, rgba(239,68,68,0.09) 0%, transparent 70%); animation-delay:-2s; }
.ifl2-orb--orange { width:340px; height:340px; bottom:-50px; left:-70px;
  background:radial-gradient(circle, rgba(251,146,60,0.08) 0%, transparent 70%); animation-delay:-7s; }
.ifl2-orb--violet { width:480px; height:480px; top:-60px; right:-80px;
  background:radial-gradient(circle, rgba(139,92,246,0.10) 0%, transparent 70%); animation-delay:-1s; }
.ifl2-orb--teal   { width:340px; height:340px; bottom:-60px; left:-60px;
  background:radial-gradient(circle, rgba(20,184,166,0.08) 0%, transparent 70%); animation-delay:-6s; }
@keyframes ifl2OrbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(20px,-18px) scale(1.04); }
  66%      { transform: translate(-14px,12px) scale(0.97); }
}
.ifl2-grid-lines {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}
.ifl2-dot-field {
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
}

/* ── 섹션 헤더 ── */
.ifl2-section-head {
  display: flex;
  align-items: flex-start;
  gap: 36px;
  margin-bottom: 64px;
}
.ifl2-snum {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(56px,7vw,96px);
  font-weight: 900;
  color: rgba(255,255,255,0.04);
  line-height: 1;
  letter-spacing: -4px;
  flex-shrink: 0;
  margin-top: 4px;
  user-select: none;
}
.ifl2-stitle-wrap { position:relative; z-index:1; }
.ifl2-slabel {
  display:inline-block;
  font-size: 11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color: rgba(168,85,247,0.8);
  border: 1px solid rgba(168,85,247,0.25);
  background: rgba(168,85,247,0.07);
  padding: 5px 12px; border-radius: 20px;
  margin-bottom: 14px;
}
.ifl2-stitle {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(26px,3.5vw,42px);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 0 0 14px;
}
.ifl2-stitle em {
  font-style: normal;
  background: linear-gradient(135deg, rgba(168,85,247,0.95) 0%, rgba(236,72,153,0.85) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ifl2-slead {
  font-size:15px; color: rgba(255,255,255,0.5); line-height:1.7; margin:0;
}
.ifl2-slead strong { color: rgba(255,255,255,0.82); }

/* ═══════════════════════════════════════
   01 — CASTING GRID
═══════════════════════════════════════ */
.ifl2-casting-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative; z-index:1;
}
.ifl2-casting-card {
  position: relative;
  border-radius: 20px;
  padding: 36px 32px 40px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.025);
  backdrop-filter: blur(12px);
  transition: transform .4s cubic-bezier(.25,.46,.45,.94), border-color .4s, box-shadow .4s;
}
.ifl2-casting-card:hover {
  transform: translateY(-8px);
  border-color: rgba(168,85,247,0.3);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 40px rgba(168,85,247,0.08);
}
.ifl2-casting-card--star  .ifl2-cc-glow { background: radial-gradient(circle at 80% 20%, rgba(255,200,50,0.10) 0%, transparent 60%); }
.ifl2-casting-card--infl  .ifl2-cc-glow { background: radial-gradient(circle at 80% 20%, rgba(168,85,247,0.10) 0%, transparent 60%); }
.ifl2-casting-card--insta .ifl2-cc-glow { background: radial-gradient(circle at 80% 20%, rgba(236,72,153,0.10) 0%, transparent 60%); }
.ifl2-cc-glow { position:absolute; inset:0; pointer-events:none; z-index:0; }

.ifl2-casting-card--star  { --cc-accent: rgba(255,200,50,0.85); }
.ifl2-casting-card--infl  { --cc-accent: rgba(168,85,247,0.9); }
.ifl2-casting-card--insta { --cc-accent: rgba(236,72,153,0.9); }

.ifl2-cc-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; position:relative; z-index:1;
}
.ifl2-cc-index {
  font-family: 'Space Grotesk', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  color: var(--cc-accent, rgba(168,85,247,0.85));
  opacity: .7;
}
.ifl2-cc-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  display: flex; align-items:center; justify-content:center;
  color: var(--cc-accent, rgba(168,85,247,0.85));
}
.ifl2-cc-icon svg { width:20px; height:20px; }

.ifl2-cc-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(18px,2vw,22px); font-weight:800;
  color: #fff; line-height:1.25; margin:0 0 16px;
  position:relative; z-index:1;
}
.ifl2-cc-desc {
  font-size: 14px; color: rgba(255,255,255,0.5);
  line-height: 1.8; margin: 0 0 20px;
  position:relative; z-index:1;
}
.ifl2-cc-desc strong { color: rgba(255,255,255,0.82); }
.ifl2-cc-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  position:relative; z-index:1;
}
.ifl2-cc-tags span {
  font-size: 11px; font-weight:600; letter-spacing:.04em;
  padding: 4px 10px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.45);
  transition: border-color .3s, color .3s;
}
.ifl2-casting-card:hover .ifl2-cc-tags span {
  border-color: rgba(168,85,247,0.25);
  color: rgba(255,255,255,0.65);
}
.ifl2-cc-line {
  position:absolute; bottom:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--cc-accent, rgba(168,85,247,0.6)), transparent);
  opacity:0; transition: opacity .4s;
}
.ifl2-casting-card:hover .ifl2-cc-line { opacity:1; }

/* ═══════════════════════════════════════
   02+03 — PAIR CARDS (브랜디드 / PPL)
═══════════════════════════════════════ */
.ifl2-content-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  position:relative; z-index:1;
}
.ifl2-pair-card {
  position: relative;
  border-radius: 24px;
  padding: 48px 44px 52px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform .4s cubic-bezier(.25,.46,.45,.94), border-color .4s, box-shadow .4s;
}
.ifl2-pair-card--branded {
  background: linear-gradient(145deg, rgba(26,107,255,0.08) 0%, rgba(0,0,0,0.4) 100%);
}
.ifl2-pair-card--ppl {
  background: linear-gradient(145deg, rgba(0,212,168,0.07) 0%, rgba(0,0,0,0.4) 100%);
}
.ifl2-pair-card--branded { --pair-accent: rgba(26,107,255,0.85); }
.ifl2-pair-card--ppl     { --pair-accent: rgba(0,212,168,0.85); }
.ifl2-pair-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 28px 70px rgba(0,0,0,0.55);
}
.ifl2-pair-shimmer {
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255,255,255,0.04) 0%, transparent 70%);
}
.ifl2-pair-num {
  font-family: 'Space Grotesk', monospace;
  font-size: 11px; font-weight:800; letter-spacing:.18em;
  color: var(--pair-accent);
  margin-bottom: 8px; opacity:.8;
}
.ifl2-pair-category {
  font-size: 11px; letter-spacing:.14em; text-transform:uppercase;
  color: rgba(255,255,255,0.3); margin-bottom: 18px; font-weight:600;
}
.ifl2-pair-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(22px,2.5vw,30px); font-weight:800;
  color: #fff; line-height:1.2; margin:0 0 20px;
}
.ifl2-pair-desc {
  font-size: 14.5px; color: rgba(255,255,255,0.48);
  line-height: 1.85; margin:0 0 28px;
}
.ifl2-pair-desc strong { color: rgba(255,255,255,0.82); }
.ifl2-pair-list {
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:14px;
}
.ifl2-pair-list li {
  display:flex; align-items:center; gap:12px;
  font-size:14px; color: rgba(255,255,255,0.55); line-height:1.5;
}
.ifl2-pair-icon {
  flex-shrink:0; width:22px; height:22px; border-radius:6px;
  background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center;
  color: var(--pair-accent);
}
.ifl2-pair-icon svg { width:11px; height:11px; }

/* ═══════════════════════════════════════
   04+05 — YOUTUBE GRID
═══════════════════════════════════════ */
.ifl2-yt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position:relative; z-index:1;
}
.ifl2-yt-card {
  position: relative;
  border-radius: 20px;
  padding: 28px 24px 32px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.025);
  transition: transform .4s cubic-bezier(.25,.46,.45,.94), border-color .4s, box-shadow .4s;
  display:flex; flex-direction:column; gap:0;
}
.ifl2-yt-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.ifl2-yt-top {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;
}
.ifl2-yt-badge {
  font-size: 10px; font-weight:700; letter-spacing:.12em;
  padding: 3px 9px; border-radius:20px;
}
.ifl2-yt-badge--premium { background:rgba(251,191,36,0.12); color:rgba(251,191,36,0.9); border:1px solid rgba(251,191,36,0.2); }
.ifl2-yt-badge--ai      { background:rgba(0,212,168,0.10); color:rgba(0,212,168,0.9);   border:1px solid rgba(0,212,168,0.2); }
.ifl2-yt-badge--trend   { background:rgba(239,68,68,0.10);  color:rgba(239,68,68,0.9);   border:1px solid rgba(239,68,68,0.2); }
.ifl2-yt-type {
  font-size:10px; font-weight:600; letter-spacing:.1em;
  color: rgba(255,255,255,0.25); text-transform:uppercase;
}
.ifl2-yt-visual {
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 20px; height:56px;
  color: rgba(255,255,255,0.25);
  transition: color .4s;
}
.ifl2-yt-card:hover .ifl2-yt-visual { color: rgba(168,85,247,0.6); }
.ifl2-yt-visual svg { width:48px; height:48px; }
.ifl2-yt-card h4 {
  font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:700;
  color:#fff; margin:0 0 10px; line-height:1.3;
}
.ifl2-yt-card p {
  font-size:13px; color: rgba(255,255,255,0.42); line-height:1.75; margin:0 0 16px; flex:1;
}
.ifl2-yt-card p strong { color: rgba(255,255,255,0.78); }
.ifl2-yt-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.ifl2-yt-chips span {
  font-size:11px; color:rgba(255,255,255,0.35); padding:3px 8px; border-radius:20px;
  border:1px solid rgba(255,255,255,0.07); letter-spacing:.02em;
}

/* ═══════════════════════════════════════
   06 — MODEL ROW
═══════════════════════════════════════ */
.ifl2-model-row {
  display:grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 24px;
  position:relative; z-index:1;
  align-items: start;
}
.ifl2-model-card {
  position: relative;
  border-radius: 20px;
  padding: 32px 28px 36px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.022);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.25,.46,.45,.94), border-color .4s, box-shadow .4s;
}
.ifl2-model-card--featured {
  border-color: rgba(168,85,247,0.22);
  background: linear-gradient(160deg, rgba(168,85,247,0.07) 0%, rgba(0,0,0,0.4) 100%);
  box-shadow: 0 0 40px rgba(168,85,247,0.06);
}
.ifl2-model-card:hover {
  transform: translateY(-7px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 22px 55px rgba(0,0,0,0.5);
}
.ifl2-model-card--featured:hover {
  border-color: rgba(168,85,247,0.4);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 50px rgba(168,85,247,0.10);
}
.ifl2-mc-featured-tag {
  position:absolute; top:18px; right:18px;
  font-size:9px; font-weight:800; letter-spacing:.18em;
  color: rgba(168,85,247,0.85); background:rgba(168,85,247,0.10);
  border:1px solid rgba(168,85,247,0.22); border-radius:20px; padding:3px 9px;
}
.ifl2-mc-top {
  display:flex; align-items:center; gap:12px; margin-bottom:18px;
}
.ifl2-mc-num {
  font-family:'Space Grotesk',monospace; font-size:11px; font-weight:800;
  letter-spacing:.15em; color:rgba(255,255,255,0.2);
}
.ifl2-mc-icon {
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,0.07);
}
.ifl2-mc-icon--red    { background:rgba(239,68,68,0.08);    color:rgba(239,68,68,0.75); }
.ifl2-mc-icon--purple { background:rgba(168,85,247,0.10);   color:rgba(168,85,247,0.85); }
.ifl2-mc-icon--teal   { background:rgba(20,184,166,0.08);   color:rgba(20,184,166,0.75); }
.ifl2-mc-icon svg { width:18px; height:18px; }
.ifl2-model-card h4 {
  font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:800;
  color:#fff; margin:0 0 16px;
}
.ifl2-mc-list {
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:10px;
}
.ifl2-mc-list li {
  font-size:13.5px; color:rgba(255,255,255,0.48); line-height:1.6;
  padding-left:14px; position:relative;
}
.ifl2-mc-list li::before {
  content:''; position:absolute; left:0; top:.6em;
  width:4px; height:4px; border-radius:50%;
  background: rgba(168,85,247,0.5);
}
.ifl2-mc-list li strong { color:rgba(255,255,255,0.82); }
.ifl2-mc-glow {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 80% 10%, rgba(168,85,247,0.06) 0%, transparent 65%);
}

/* ═══════════════════════════════════════
   07 — CONFIDENTIAL
═══════════════════════════════════════ */
.ifl2-conf-canvas {
  position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
}
.ifl2-conf-inner {
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  padding-top: 80px; padding-bottom: 80px;
}
.ifl2-conf-body {
  max-width: 560px; width:100%; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.ifl2-conf-snum {
  font-family:'Space Grotesk',monospace; font-size:80px; font-weight:900;
  color:rgba(255,255,255,0.03); letter-spacing:-4px; line-height:1;
  user-select:none; margin-bottom:4px;
}
.ifl2-conf-label {
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(168,85,247,0.65); font-weight:700; margin-bottom:20px;
}
.ifl2-conf-title {
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(28px,4vw,48px); font-weight:900;
  color:#fff; line-height:1.15; letter-spacing:-0.5px; margin:0 0 24px;
}
.ifl2-conf-title em {
  font-style:normal;
  background:linear-gradient(135deg,rgba(168,85,247,0.9) 0%,rgba(236,72,153,0.85) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.ifl2-conf-stamp {
  display:inline-flex; align-items:center; justify-content:center;
  border: 2px solid rgba(168,85,247,0.4);
  border-radius: 4px;
  padding: 6px 20px;
  margin-bottom: 20px;
  transform: rotate(-2deg);
  animation: ifl2StampPulse 3s ease-in-out infinite;
}
.ifl2-conf-stamp span {
  font-family:'Space Grotesk',monospace; font-size:14px; font-weight:900;
  letter-spacing:.25em; color:rgba(168,85,247,0.75); text-transform:uppercase;
}
@keyframes ifl2StampPulse {
  0%,100% { opacity:1; border-color:rgba(168,85,247,0.4); }
  50%      { opacity:.6; border-color:rgba(168,85,247,0.15); }
}
.ifl2-conf-sub {
  font-size:13px; color:rgba(255,255,255,0.32);
  margin-bottom:32px; letter-spacing:.02em;
}
.ifl2-conf-box {
  background: rgba(168,85,247,0.05);
  border: 1px solid rgba(168,85,247,0.15);
  border-radius:20px; padding:36px 40px;
  margin-bottom:36px; text-align:center; width:100%;
}
.ifl2-conf-lock {
  width:52px; height:52px; border-radius:14px;
  background:rgba(168,85,247,0.08); border:1px solid rgba(168,85,247,0.18);
  display:flex; align-items:center; justify-content:center;
  color:rgba(168,85,247,0.75); margin:0 auto 18px;
}
.ifl2-conf-box-main {
  font-size:15px; color:rgba(255,255,255,0.6); line-height:1.75; margin:0 0 10px;
}
.ifl2-conf-box-main strong { color:rgba(255,255,255,0.9); }
.ifl2-conf-box-sub {
  font-size:14px; color:rgba(255,255,255,0.42); line-height:1.85; margin:0;
}
.ifl2-conf-box-sub strong { color:rgba(255,255,255,0.75); }
.ifl2-conf-security {
  display:flex; align-items:center; justify-content:center;
  gap:8px; margin-top:20px;
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,0.18); font-family:'Space Grotesk',monospace;
}
.ifl2-conf-dot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(168,85,247,0.6);
  animation: vhDotBlink 2s ease-in-out infinite;
}
.ifl2-conf-cta { display:inline-flex; }

/* ── 반응형 ── */
@media (max-width: 1100px) {
  .ifl2-yt-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .ifl2-casting-grid   { grid-template-columns: 1fr; gap:16px; }
  .ifl2-content-pair   { grid-template-columns: 1fr; gap:20px; }
  .ifl2-model-row      { grid-template-columns: 1fr; gap:16px; }
  .ifl2-section-head   { flex-direction:column; gap:16px; }
  .ifl2-snum           { font-size:40px; }
  .ifl2-pair-card      { padding:36px 28px 40px; }
}
@media (max-width: 600px) {
  .ifl2-section        { padding:72px 0 80px; }
  .ifl2-yt-grid        { grid-template-columns: 1fr; }
  .ifl2-pair-card      { padding:28px 20px 32px; }
  .ifl2-conf-box       { padding:28px 20px; }
  .ifl2-conf-snum      { font-size:52px; }
}

/* ══════════════════════════════════════════════════════════════
   IFL2 — DIFFERENTIATOR 섹션 (제안 크리에이터)
══════════════════════════════════════════════════════════════ */
.ifl2-diff-section {
  position: relative;
  padding: 110px 0 120px;
  overflow: hidden;
  background: linear-gradient(180deg, #030812 0%, #060b1a 100%);
}
.ifl2-diff-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ifl2-diff-orb {
  position: absolute; border-radius: 50%; filter: blur(100px);
  animation: ifl2OrbFloat 16s ease-in-out infinite;
}
.ifl2-diff-orb--blue   { width: 600px; height: 600px; top: -140px; left: -180px;
  background: radial-gradient(circle, rgba(26,107,255,0.09) 0%, transparent 70%); animation-delay: 0s; }
.ifl2-diff-orb--purple { width: 440px; height: 440px; bottom: -80px; right: -100px;
  background: radial-gradient(circle, rgba(168,85,247,0.08) 0%, transparent 70%); animation-delay: -6s; }
.ifl2-diff-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(26,107,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,107,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 30%, transparent 100%);
}

/* ── 레이아웃 ── */
.ifl2-diff-layout {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1px 1.4fr;
  gap: 0 56px;
  align-items: start;
}
.ifl2-diff-divider {
  background: linear-gradient(180deg, transparent, rgba(26,107,255,0.25) 30%, rgba(26,107,255,0.25) 70%, transparent);
  align-self: stretch;
  min-height: 420px;
}

/* ── 왼쪽 ── */
.ifl2-diff-sup {
  display: block;
  font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(26,107,255,0.65); margin-bottom: 18px;
}
.ifl2-diff-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 0 0 28px;
}
.ifl2-diff-title em {
  font-style: normal;
  background: linear-gradient(135deg, rgba(26,107,255,0.95) 0%, rgba(0,200,255,0.85) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ifl2-diff-quote {
  margin: 0 0 36px;
  padding: 0 0 0 18px;
  border-left: 2px solid rgba(26,107,255,0.35);
  font-size: clamp(14px,1.4vw,16px);
  color: rgba(255,255,255,0.48);
  line-height: 2.0;
  font-style: normal;
}
.ifl2-diff-quote strong { color: rgba(255,255,255,0.88); font-weight: 700; }

.ifl2-diff-criteria {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.ifl2-diff-criteria li {
  display: flex; align-items: center; gap: 14px;
  font-size: 14.5px; color: rgba(255,255,255,0.58); font-weight: 500;
}
.ifl2-diff-cicon {
  flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.07);
}
.ifl2-diff-cicon svg { width: 18px; height: 18px; }
.ifl2-diff-cicon--ban    { background: rgba(239,68,68,0.08);   color: rgba(239,68,68,0.75); }
.ifl2-diff-cicon--search { background: rgba(26,107,255,0.08);  color: rgba(26,107,255,0.8); }
.ifl2-diff-cicon--growth { background: rgba(0,212,168,0.08);   color: rgba(0,212,168,0.75); }

/* ── 오른쪽 케이스 카드 ── */
.ifl2-diff-right {
  display: flex; flex-direction: column; gap: 16px;
}

.ifl2-case-card {
  position: relative;
  border-radius: 16px;
  padding: 24px 28px 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  transition: transform .35s cubic-bezier(.25,.46,.45,.94), box-shadow .35s;
}
.ifl2-case-card:hover { transform: translateY(-4px); }

.ifl2-case-card--good {
  background: linear-gradient(145deg, rgba(26,107,255,0.07) 0%, rgba(0,0,0,0.45) 100%);
  border-color: rgba(26,107,255,0.18);
  box-shadow: 0 0 40px rgba(26,107,255,0.05);
}
.ifl2-case-card--good:hover {
  border-color: rgba(26,107,255,0.35);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 40px rgba(26,107,255,0.08);
}
.ifl2-case-card--bad {
  background: rgba(255,255,255,0.018);
  border-color: rgba(255,255,255,0.05);
  opacity: .82;
}
.ifl2-case-card--bad:hover { opacity: 1; }

.ifl2-case-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(26,107,255,0.07) 0%, transparent 70%);
}

/* 케이스 헤더 */
.ifl2-case-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.ifl2-case-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  padding: 3px 10px 3px 7px; border-radius: 20px;
  flex-shrink: 0;
}
.ifl2-case-badge--good {
  background: rgba(26,107,255,0.12); color: rgba(26,107,255,0.9);
  border: 1px solid rgba(26,107,255,0.22);
}
.ifl2-case-badge--bad {
  background: rgba(100,100,120,0.12); color: rgba(140,140,160,0.8);
  border: 1px solid rgba(100,100,130,0.18);
}
.ifl2-case-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px; font-weight: 700;
  color: rgba(255,255,255,0.88); flex: 1;
}
.ifl2-case-title--bad { color: rgba(255,255,255,0.38); }
.ifl2-case-check { margin-left: auto; flex-shrink: 0; }
.ifl2-case-check--bad { opacity: .5; }

/* 가격 비교 */
.ifl2-case-price {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 14px 18px; margin-bottom: 18px;
}
.ifl2-case-price--bad { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.04); }
.ifl2-case-price-from, .ifl2-case-price-to {
  display: flex; flex-direction: column; gap: 4px;
}
.ifl2-case-price-to { flex: 1; }
.ifl2-case-price-label {
  font-size: 10.5px; color: rgba(255,255,255,0.32);
  letter-spacing: .05em; font-weight: 500;
}
.ifl2-case-price-label--em { color: rgba(26,107,255,0.7); }
.ifl2-case-price-val {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.55);
  font-family: 'Space Grotesk', sans-serif;
}
.ifl2-case-price-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px; font-weight: 800; letter-spacing: -0.5px;
  line-height: 1;
}
.ifl2-case-price-num--good { color: rgba(26,107,255,0.95); }
.ifl2-case-price-num--bad  { color: rgba(180,180,200,0.5); }
.ifl2-case-arrow { flex-shrink: 0; opacity: .6; }

/* 포인트 리스트 */
.ifl2-case-points {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.ifl2-case-points li {
  font-size: 12.5px; line-height: 1.65; padding-left: 14px; position: relative;
}
.ifl2-case-points li::before {
  content: '+'; position: absolute; left: 0; top: 0;
  font-weight: 700; font-size: 12px;
}
.ifl2-case-points--good li { color: rgba(255,255,255,0.5); }
.ifl2-case-points--good li::before { color: rgba(26,107,255,0.7); }
.ifl2-case-points--good li strong { color: rgba(0,200,255,0.85); }
.ifl2-case-points--bad li { color: rgba(255,255,255,0.28); }
.ifl2-case-points--bad li::before { content: '−'; color: rgba(180,80,80,0.5); }
.ifl2-case-points--bad li strong { color: rgba(200,100,100,0.6); }

/* ── 반응형 ── */
@media (max-width: 960px) {
  .ifl2-diff-layout {
    grid-template-columns: 1fr;
    gap: 48px 0;
  }
  .ifl2-diff-divider {
    display: none;
  }
}
@media (max-width: 600px) {
  .ifl2-diff-section { padding: 80px 0 90px; }
  .ifl2-case-card { padding: 20px 20px 24px; }
  .ifl2-case-price { flex-wrap: wrap; gap: 10px; }
}

/* ══════════════════════════════════════════════════════════════
   IFL2 — PROCESS 섹션 (7단계 타임라인)
══════════════════════════════════════════════════════════════ */
.ifl2-proc-section {
  position: relative;
  padding: 110px 0 130px;
  overflow: hidden;
  background: linear-gradient(180deg, #04060f 0%, #07091a 50%, #04060f 100%);
}
.ifl2-proc-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ifl2-proc-orb {
  position: absolute; border-radius: 50%; filter: blur(110px);
  animation: ifl2OrbFloat 18s ease-in-out infinite;
}
.ifl2-proc-orb--a { width: 560px; height: 560px; top: -100px; left: -140px;
  background: radial-gradient(circle, rgba(168,85,247,0.08) 0%, transparent 70%); animation-delay: 0s; }
.ifl2-proc-orb--b { width: 480px; height: 480px; bottom: -80px; right: -120px;
  background: radial-gradient(circle, rgba(26,107,255,0.07) 0%, transparent 70%); animation-delay: -7s; }
.ifl2-proc-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 30%, transparent 100%);
}

/* ── 헤더 ── */
.ifl2-proc-head {
  text-align: center;
  margin-bottom: 80px;
  position: relative; z-index: 1;
}
.ifl2-proc-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 14px 0 16px;
}
.ifl2-proc-title em {
  font-style: normal;
  background: linear-gradient(135deg, rgba(168,85,247,0.95) 0%, rgba(236,72,153,0.85) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ifl2-proc-sub {
  font-size: 15px; color: rgba(255,255,255,0.42); line-height: 1.7; margin: 0;
}

/* ── 트랙 컨테이너 ── */
.ifl2-proc-track {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  align-items: end;
  padding-top: 220px; /* top 카드 공간 */
}

/* 중앙 연결선 */
.ifl2-proc-line {
  position: absolute;
  top: 220px; /* 카드 높이만큼 */
  left: calc(100% / 14);
  right: calc(100% / 14);
  height: 2px;
  background: linear-gradient(90deg,
    rgba(26,107,255,0.4) 0%,
    rgba(124,58,237,0.4) 20%,
    rgba(5,150,105,0.4) 35%,
    rgba(8,145,178,0.4) 50%,
    rgba(217,119,6,0.4) 65%,
    rgba(220,38,38,0.4) 80%,
    rgba(168,85,247,0.4) 100%
  );
  z-index: 0;
}

/* ── 각 스텝 ── */
.ifl2-proc-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 홀수(top): 카드가 위, 노드가 아래 */
.ifl2-proc-step--top {
  flex-direction: column;
  justify-content: flex-end;
}
/* 짝수(bot): 노드가 위, 카드가 아래 */
.ifl2-proc-step--bot {
  flex-direction: column-reverse;
  justify-content: flex-end;
  margin-top: 0;
  position: relative;
  top: 0;
}

/* top 스텝은 트랙 상단에 카드 위치 */
.ifl2-proc-step--top .ifl2-proc-card {
  position: absolute;
  bottom: calc(100% + 24px); /* 노드 위로 올림 */
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
}
/* bot 스텝은 트랙 아래에 카드 위치 */
.ifl2-proc-step--bot .ifl2-proc-card {
  position: absolute;
  top: calc(100% + 24px); /* 노드 아래로 내림 */
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
}

/* ── 노드 ── */
.ifl2-proc-node {
  position: relative;
  z-index: 2;
  width: 44px; height: 44px;
  flex-shrink: 0;
}
.ifl2-proc-node-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--step-accent, rgba(168,85,247,0.6));
  background: rgba(255,255,255,0.03);
  animation: ifl2NodePulse 3s ease-in-out infinite;
}
.ifl2-proc-node-dot {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--step-accent, rgba(168,85,247,0.8));
  box-shadow: 0 0 12px var(--step-accent, rgba(168,85,247,0.5));
}
@keyframes ifl2NodePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.15); opacity: .65; }
}

/* ── 카드 ── */
.ifl2-proc-card {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 18px 16px 20px;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.25,.46,.45,.94), border-color .4s, box-shadow .4s;
  cursor: default;
}
.ifl2-proc-card:hover {
  transform: translateX(-50%) translateY(-6px) !important;
  border-color: var(--step-accent, rgba(168,85,247,0.4));
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 24px color-mix(in srgb, var(--step-accent, #a855f7) 15%, transparent);
}
.ifl2-proc-card-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 50% at 50% 0%,
    color-mix(in srgb, var(--step-accent, #a855f7) 10%, transparent) 0%,
    transparent 70%);
}
.ifl2-proc-card-top {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.ifl2-proc-icon {
  width: 28px; height: 28px;
  color: var(--step-accent, rgba(168,85,247,0.8));
  opacity: .85;
}
.ifl2-proc-icon svg { width: 100%; height: 100%; }
.ifl2-proc-num {
  font-family: 'Space Grotesk', monospace;
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  color: var(--step-accent, rgba(168,85,247,0.7));
  opacity: .7;
}
.ifl2-proc-card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 700;
  color: rgba(255,255,255,0.9);
  line-height: 1.3; margin: 0 0 8px;
}
.ifl2-proc-card-desc {
  font-size: 11.5px; color: rgba(255,255,255,0.38);
  line-height: 1.7; margin: 0 0 12px;
}
.ifl2-proc-card-bar {
  height: 2px; width: 24px; border-radius: 2px;
  background: var(--step-accent, rgba(168,85,247,0.7));
  opacity: .6;
}

/* ── 반응형: 세로 리스트로 전환 ── */
@media (max-width: 1100px) {
  .ifl2-proc-track {
    grid-template-columns: 1fr;
    padding-top: 0;
    gap: 0;
  }
  .ifl2-proc-line { display: none; }

  .ifl2-proc-step {
    flex-direction: row !important;
    align-items: flex-start;
    gap: 20px;
    padding: 0 0 36px 0;
    position: static !important;
    top: auto !important;
  }
  .ifl2-proc-step--top .ifl2-proc-card,
  .ifl2-proc-step--bot .ifl2-proc-card {
    position: static;
    transform: none !important;
    width: auto; flex: 1;
  }
  .ifl2-proc-card:hover {
    transform: translateY(-4px) !important;
  }
  .ifl2-proc-node {
    margin-top: 2px;
    flex-shrink: 0;
  }
  /* 세로 연결선 */
  .ifl2-proc-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 21px;
    top: 44px;
    bottom: 0;
    width: 1.5px;
    background: linear-gradient(180deg, rgba(168,85,247,0.3), transparent);
  }
}
@media (max-width: 600px) {
  .ifl2-proc-section { padding: 80px 0 90px; }
  .ifl2-proc-head { margin-bottom: 52px; }
}

/* ══════════════════════════════════════════════════════════════
   IFL2 — PROCESS 카드 그리드 v2 (4+3 레이아웃)
══════════════════════════════════════════════════════════════ */

/* ── 행 레이아웃 ── */
.ifl2-proc-row {
  display: grid;
  gap: 20px;
  position: relative; z-index: 1;
}
.ifl2-proc-row--4 { grid-template-columns: repeat(4, 1fr); }
.ifl2-proc-row--3 { grid-template-columns: repeat(3, 1fr); }

/* ── 행 사이 연결 화살표 ── */
.ifl2-proc-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 0 14px;
  position: relative; z-index: 1;
}
.ifl2-proc-connector-line {
  width: 1.5px;
  height: 20px;
  background: linear-gradient(180deg, rgba(168,85,247,0.4), rgba(168,85,247,0.1));
}

/* ── 카드 ── */
.ifl2-ps-card {
  position: relative;
  background: var(--card-bg, rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 28px 24px 24px;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.25,.46,.45,.94),
              border-color .35s, box-shadow .35s;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ifl2-ps-card:hover {
  transform: translateY(-6px);
  border-color: var(--ps-accent, rgba(168,85,247,0.4));
  box-shadow: 0 20px 48px rgba(0,0,0,0.45),
              0 0 28px color-mix(in srgb, var(--ps-accent,#a855f7) 12%, transparent);
}

/* 상단 아이콘 + 번호 */
.ifl2-ps-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.ifl2-ps-icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--ps-accent,#a855f7) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ps-accent,#a855f7) 22%, transparent);
  display: flex; align-items: center; justify-content: center;
  color: var(--ps-accent, rgba(168,85,247,0.85));
  flex-shrink: 0;
}
.ifl2-ps-icon svg { width: 18px; height: 18px; }
.ifl2-ps-num {
  font-family: 'Space Grotesk', monospace;
  font-size: 28px; font-weight: 900;
  color: rgba(255,255,255,0.04);
  letter-spacing: -1px;
  line-height: 1;
  user-select: none;
}

/* 제목 */
.ifl2-ps-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px; font-weight: 700;
  color: rgba(255,255,255,0.92);
  line-height: 1.3;
  margin: 0 0 10px;
}

/* 설명 */
.ifl2-ps-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.42);
  line-height: 1.75;
  margin: 0 0 20px;
  flex: 1;
}

/* 하단 컬러 바 */
.ifl2-ps-bar {
  width: 28px; height: 2px;
  border-radius: 2px;
  background: var(--ps-accent, rgba(168,85,247,0.7));
  opacity: .65;
  margin-top: auto;
  transition: width .35s;
}
.ifl2-ps-card:hover .ifl2-ps-bar { width: 48px; }

/* 배경 글로우 */
.ifl2-ps-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 40% at 50% 0%,
    color-mix(in srgb, var(--ps-accent,#a855f7) 8%, transparent) 0%,
    transparent 70%);
  transition: opacity .35s;
  opacity: 0;
}
.ifl2-ps-card:hover .ifl2-ps-glow { opacity: 1; }

/* wide 카드 (3열 행) - 좀 더 여유있게 */
.ifl2-ps-card--wide {
  padding: 32px 28px 28px;
}
.ifl2-ps-card--wide .ifl2-ps-title { font-size: 16px; }
.ifl2-ps-card--wide .ifl2-ps-desc  { font-size: 13.5px; }

/* ── 반응형 ── */
@media (max-width: 1024px) {
  .ifl2-proc-row--4 { grid-template-columns: repeat(2, 1fr); }
  .ifl2-proc-row--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ifl2-proc-row--4,
  .ifl2-proc-row--3 { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════
   IFLP — 인플루언서 7단계 프로세스 (v3 카드 그리드)
════════════════════════════════════════════ */
.iflp-section {
  position: relative;
  padding: 120px 0 130px;
  overflow: hidden;
  background: #06060f;
}

/* 배경 */
.iflp-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.iflp-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}
.iflp-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  animation: iflpOrb 8s ease-in-out infinite alternate;
}
.iflp-bg-orb--a {
  width: 600px; height: 600px;
  top: -150px; left: -180px;
  background: radial-gradient(circle, rgba(37,99,235,0.12) 0%, transparent 70%);
  animation-delay: 0s;
}
.iflp-bg-orb--b {
  width: 500px; height: 500px;
  bottom: -120px; right: -150px;
  background: radial-gradient(circle, rgba(168,85,247,0.12) 0%, transparent 70%);
  animation-delay: 3s;
}
.iflp-bg-orb--c {
  width: 400px; height: 400px;
  top: 40%; left: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(5,150,105,0.07) 0%, transparent 70%);
  animation-delay: 6s;
}
@keyframes iflpOrb {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 1;   transform: scale(1.15); }
}

/* 헤더 */
.iflp-head {
  text-align: center;
  margin-bottom: 72px;
}
.iflp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 24px;
}
.iflp-eyebrow-dot {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(168,85,247,0.7);
}
.iflp-title {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.iflp-title em {
  font-style: normal;
  background: linear-gradient(90deg, #60a5fa, #a78bfa, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.iflp-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.45);
  line-height: 1.8;
  max-width: 600px;
  margin: 0 auto;
}

/* 카드 그리드 — 4열 → 줄바꿈 */
.iflp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}

/* 카드 */
.iflp-card {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 28px 24px 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  cursor: default;
  transition: border-color 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease;
  animation: iflpCardIn 0.6s ease both;
  animation-delay: calc(var(--i) * 0.07s);
}
@keyframes iflpCardIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.iflp-card:hover {
  border-color: var(--ac, #2563eb);
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 0 1px var(--ac, #2563eb);
}

/* 상단 아이콘 + 번호 */
.iflp-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.iflp-card-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ac, #2563eb);
  flex-shrink: 0;
  transition: background 0.3s, border-color 0.3s;
}
.iflp-card:hover .iflp-card-icon {
  background: color-mix(in srgb, var(--ac, #2563eb) 15%, transparent);
  border-color: color-mix(in srgb, var(--ac, #2563eb) 40%, transparent);
}
.iflp-card-icon svg { width: 20px; height: 20px; }
.iflp-card-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255,255,255,0.06);
  letter-spacing: -0.04em;
  transition: color 0.3s;
}
.iflp-card:hover .iflp-card-num {
  color: color-mix(in srgb, var(--ac, #2563eb) 25%, transparent);
}

/* 제목 블록 */
.iflp-card-titles {
  margin-bottom: 12px;
}
.iflp-card-title {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  line-height: 1.3;
  margin-bottom: 4px;
}
.iflp-card-sub {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ac, #2563eb);
  opacity: 0.7;
}

/* 설명 */
.iflp-card-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  line-height: 1.75;
  margin: 0 0 16px;
  flex: 1;
}

/* 태그 */
.iflp-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.iflp-card-tag {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--ac, #2563eb) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ac, #2563eb) 25%, transparent);
  color: color-mix(in srgb, var(--ac, #2563eb) 90%, white);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background 0.3s, border-color 0.3s;
}
.iflp-card:hover .iflp-card-tag {
  background: color-mix(in srgb, var(--ac, #2563eb) 18%, transparent);
  border-color: color-mix(in srgb, var(--ac, #2563eb) 40%, transparent);
}

/* 하단 컬러 바 */
.iflp-card-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ac, #2563eb), transparent);
  border-radius: 0 0 20px 20px;
  opacity: 0;
  transition: opacity 0.35s;
}
.iflp-card:hover .iflp-card-bar { opacity: 1; }

/* 호버 글로우 */
.iflp-card-glow {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 0%, var(--glow, rgba(37,99,235,0.18)) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.iflp-card:hover .iflp-card-glow { opacity: 1; }

/* shimmer */
.iflp-card-shimmer {
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  transform: skewX(-15deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.iflp-card:hover .iflp-card-shimmer { left: 150%; }

/* 하단 진행 바 */
.iflp-footer {
  text-align: center;
}
.iflp-footer-line {
  max-width: 640px;
  margin: 0 auto 18px;
  height: 2px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.iflp-footer-progress-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #2563eb, #7c3aed, #059669, #0891b2, #d97706, #dc2626, #a855f7);
  animation: iflpFill 2s ease both;
  animation-delay: 0.8s;
  transform-origin: left;
}
@keyframes iflpFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.iflp-footer-hint {
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.04em;
  font-family: 'Space Grotesk', sans-serif;
}

/* 4번째 카드 (리스트업 및 매칭) 는 span 없이 자연스럽게 4열 */

/* 반응형 */
@media (max-width: 1200px) {
  .iflp-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .iflp-card { padding: 24px 20px 28px; }
}
@media (max-width: 1024px) {
  .iflp-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .iflp-card-num { font-size: 28px; }
}
@media (max-width: 640px) {
  .iflp-section { padding: 80px 0 90px; }
  .iflp-grid { grid-template-columns: 1fr; gap: 14px; }
  .iflp-head { margin-bottom: 48px; }
  .iflp-title { font-size: 28px; }
  .iflp-sub { font-size: 14px; }
  .iflp-card { padding: 22px 18px 26px; }
}

/* ════════════════════════════════════════════
   IFLP2 — 인플루언서 프로세스 인터랙티브 (홈 서비스 스타일)
════════════════════════════════════════════ */
.iflp2-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
  align-items: start;
}

/* ── 왼쪽 리스트 ── */
.iflp2-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
}
.iflp2-item button {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  text-align: left;
  transition: gap 0.3s ease;
}
.iflp2-item:last-child button { border-bottom: none; }
.iflp2-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.2);
  font-family: 'Space Grotesk', sans-serif;
  min-width: 24px;
  transition: color 0.3s;
}
.iflp2-name {
  font-size: clamp(22px, 2.8vw, 42px);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
  color: rgba(255,255,255,0.2);
  font-family: 'Space Grotesk', sans-serif;
  transition: color 0.3s, text-shadow 0.3s;
}
.iflp2-en {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.15);
  font-family: 'Space Grotesk', sans-serif;
  margin-left: auto;
  white-space: nowrap;
  transition: color 0.3s;
  align-self: center;
}

/* hover */
.iflp2-item button:hover .iflp2-name { color: rgba(100,160,255,0.6); }
.iflp2-item button:hover .iflp2-num  { color: rgba(100,160,255,0.8); }

/* active */
.iflp2-item.active button { gap: 22px; }
.iflp2-item.active .iflp2-name {
  color: #fff;
  text-shadow: 0 0 28px rgba(41,121,255,0.55), 0 0 56px rgba(26,107,255,0.2);
}
.iflp2-item.active .iflp2-num  { color: #3b82f6; }
.iflp2-item.active .iflp2-en   { color: rgba(255,255,255,0.35); }

/* ── 오른쪽 패널 ── */
.iflp2-panels {
  position: relative;
}
.iflp2-panel {
  display: none;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  overflow: hidden;
  flex-direction: column;
  gap: 0;
  animation: panelFadeIn 0.35s cubic-bezier(0.16,1,0.3,1);
}
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.iflp2-panel.active {
  display: flex;
}
/* 이미지 영역 — 위쪽 */
.iflp2-panel-img {
  flex: 0 0 58%;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.iflp2-panel-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.5s ease;
}
.iflp2-panel.active .iflp2-panel-img img {
  transform: scale(1.03);
}
/* 본문 영역 — 아래쪽 */
.iflp2-panel-body {
  flex: 1;
  padding: 24px 32px 28px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0 0 20px 20px;
}
.iflp2-panel-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--pc, #3b82f6) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc, #3b82f6) 28%, transparent);
  display: flex; align-items: center; justify-content: center;
  color: var(--pc, #3b82f6);
  margin-bottom: 12px;
}
.iflp2-panel-icon svg { width: 18px; height: 18px; }
.iflp2-panel-tag {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pc, #3b82f6);
  background: color-mix(in srgb, var(--pc, #3b82f6) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc, #3b82f6) 25%, transparent);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.iflp2-panel-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
  margin: 0 0 16px;
  flex: 1;
}
.iflp2-ptag-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  font-family: 'Space Grotesk', sans-serif;
  margin-bottom: 12px;
}
.iflp2-ptag-grid {
  display: flex;
  flex-wrap: nowrap;         /* 항상 한 줄 */
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;     /* Firefox */
  -ms-overflow-style: none;  /* IE/Edge */
}
.iflp2-ptag-grid::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.iflp2-ptag {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  white-space: nowrap;       /* 태그 내 줄바꿈 없음 */
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.iflp2-ptag:hover {
  background: color-mix(in srgb, var(--pc, #3b82f6) 14%, transparent);
  border-color: color-mix(in srgb, var(--pc, #3b82f6) 35%, transparent);
  color: #fff;
}

/* 반응형 */
@media (max-width: 1024px) {
  .iflp2-wrap { grid-template-columns: 1fr; gap: 40px; }
  .iflp2-panels { position: relative; }
  .iflp2-panel { position: relative; }
  .iflp2-panel-img { flex: 0 0 auto; height: 280px; }
  .iflp2-panel-body { padding: 24px 24px; }
  .iflp2-name { font-size: 28px; }
}
@media (max-width: 640px) {
  .iflp2-name { font-size: 22px; }
  .iflp2-panel-img { height: 220px; }
  .iflp2-panel-body { padding: 18px 18px; }
  .iflp2-en { display: none; }
}

/* ════════════════════════════════════════════
   SDNG — 네이버 블로그 시딩 상품 섹션
════════════════════════════════════════════ */
.sdng-products-section { position: relative; }

/* ════════════════════════════════════════════
   SDNG — 스플릿 레이아웃 (타이틀+리스트 / 패널)
════════════════════════════════════════════ */
.sdng-split-layout {
  display: grid;
  grid-template-columns: 5fr 7fr;   /* 왼쪽 타이틀+리스트 : 오른쪽 패널 */
  gap: 0 72px;
  align-items: center;
  min-height: 560px;
}

/* 왼쪽 컬럼 — 타이틀 + 리스트 수직 배치 */
.sdng-split-left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sdng-split-head {
  margin-bottom: 36px;
}
.sdng-split-head .sec-label  { margin-bottom: 10px; }
.sdng-split-head .sec-title  { margin-bottom: 16px; }
.sdng-split-head .sec-sub    { margin-bottom: 0; }

/* 오른쪽 컬럼 — 패널 영역 */
.sdng-split-right {
  width: 100%;
  align-self: center;
}

/* 인스타 특징 태그 — 왼쪽 정렬로 변경 */
.sdng-split-layout .sdng-insta-features {
  justify-content: flex-start;
  margin: 0 0 28px;
}

/* 반응형 — 모바일: 세로 스택 */
@media (max-width: 900px) {
  .sdng-split-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    min-height: auto;
  }
}

/* 2열 그리드 */
.sdng-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

/* 카드 */
.sdng-card {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  overflow: hidden;
  transition: border-color 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease;
  display: flex;
  flex-direction: column;
}
.sdng-card:hover {
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.sdng-card--recommend {
  border-color: rgba(245,158,11,0.25);
  box-shadow: 0 0 0 1px rgba(245,158,11,0.15);
}
.sdng-card--recommend:hover {
  border-color: rgba(245,158,11,0.5);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(245,158,11,0.4);
}

/* RECOMMEND 배지 */
.sdng-recommend-badge {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 10;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: 'Space Grotesk', sans-serif;
  text-transform: uppercase;
}

/* 이미지 영역 */
.sdng-card-img-wrap {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  flex-shrink: 0;
}
.sdng-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
  filter: brightness(0.85) saturate(0.9);
}
.sdng-card:hover .sdng-card-img {
  transform: scale(1.06);
  filter: brightness(0.9) saturate(1);
}
.sdng-card-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(5,5,18,0.85) 100%);
  pointer-events: none;
}

/* 상단 배지 */
.sdng-badge {
  position: absolute;
  bottom: 14px; right: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 20px;
  font-family: 'Space Grotesk', sans-serif;
  backdrop-filter: blur(8px);
}
.sdng-badge--basic       { background: rgba(59,130,246,0.25); border: 1px solid rgba(59,130,246,0.4); color: #93c5fd; }
.sdng-badge--specialized { background: rgba(139,92,246,0.25); border: 1px solid rgba(139,92,246,0.4); color: #c4b5fd; }
.sdng-badge--ranking     { background: rgba(245,158,11,0.25); border: 1px solid rgba(245,158,11,0.5); color: #fcd34d; }
.sdng-badge--premium     { background: rgba(16,185,129,0.25); border: 1px solid rgba(16,185,129,0.4); color: #6ee7b7; }

/* 카드 본문 */
.sdng-card-body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

/* 헤더: 아이콘 + 타이틀 */
.sdng-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.sdng-card-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--sc, #3b82f6) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc, #3b82f6) 30%, transparent);
  display: flex; align-items: center; justify-content: center;
  color: var(--sc, #3b82f6);
  flex-shrink: 0;
  transition: background 0.3s;
}
.sdng-card:hover .sdng-card-icon {
  background: color-mix(in srgb, var(--sc, #3b82f6) 20%, transparent);
}
.sdng-card-icon svg { width: 20px; height: 20px; }
.sdng-card-title {
  font-size: 20px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  line-height: 1.2;
  margin-bottom: 3px;
}
.sdng-card-en {
  font-size: 11px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--sc, #3b82f6);
  opacity: 0.75;
  text-transform: uppercase;
}

/* 설명 */
.sdng-card-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  line-height: 1.8;
  margin: 0 0 18px;
}

/* 특징 리스트 */
.sdng-card-features {
  list-style: none;
  padding: 0; margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sdng-card-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
}
.sdng-feat-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* 태그 */
.sdng-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
}
.sdng-tag {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--sc, #3b82f6) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc, #3b82f6) 22%, transparent);
  color: color-mix(in srgb, var(--sc, #3b82f6) 85%, white);
  transition: background 0.25s, border-color 0.25s;
}
.sdng-card:hover .sdng-tag {
  background: color-mix(in srgb, var(--sc, #3b82f6) 16%, transparent);
  border-color: color-mix(in srgb, var(--sc, #3b82f6) 38%, transparent);
}

/* 반응형 */
@media (max-width: 900px) {
  .sdng-grid { grid-template-columns: 1fr; gap: 20px; }
  .sdng-card-img-wrap { height: 200px; }
}
@media (max-width: 640px) {
  .sdng-card-body { padding: 22px 20px 26px; }
  .sdng-card-title { font-size: 18px; }
  .sdng-card-img-wrap { height: 180px; }
}

/* ════════════════════════════════════════════
   SDNG — 패널 내 배지 (홈 svc-panel 스타일 사용)
════════════════════════════════════════════ */
.sdng-panel-badge {
  position: absolute;
  bottom: 14px; right: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 4px 13px;
  border-radius: 20px;
  font-family: 'Space Grotesk', sans-serif;
  backdrop-filter: blur(8px);
  z-index: 3;
}
.sdng-panel-badge--basic       { background: rgba(59,130,246,0.22); border: 1px solid rgba(59,130,246,0.4); color: #93c5fd; }
.sdng-panel-badge--specialized { background: rgba(139,92,246,0.22); border: 1px solid rgba(139,92,246,0.4); color: #c4b5fd; }
.sdng-panel-badge--ranking     { background: rgba(245,158,11,0.22); border: 1px solid rgba(245,158,11,0.5); color: #fcd34d; }
.sdng-panel-badge--premium     { background: rgba(16,185,129,0.22); border: 1px solid rgba(16,185,129,0.4); color: #6ee7b7; }

/* RECOMMEND 리본 (이미지 좌상단) */
.sdng-panel-rec {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 3;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: 'Space Grotesk', sans-serif;
  text-transform: uppercase;
}

/* ── BEST 상품 강조 — 리스트 뱃지 ── */
.sdng-list-best-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-family: 'Space Grotesk', sans-serif;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  box-shadow: 0 2px 8px rgba(245,158,11,0.4);
  vertical-align: middle;
  animation: bestPulse 2.4s ease-in-out infinite;
}
@keyframes bestPulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(245,158,11,0.4); }
  50%       { box-shadow: 0 2px 18px rgba(245,158,11,0.75); }
}

/* ── BEST 패널 — 테두리 글로우 ── */
.sdng-panel--best {
  border: 1.5px solid rgba(245,158,11,0.4) !important;
  box-shadow: 0 0 0 1px rgba(245,158,11,0.15), 0 8px 40px rgba(245,158,11,0.08) !important;
}

/* 이미지 오버레이 — BEST 황금 그라디언트 */
.sdng-best-overlay {
  background: linear-gradient(180deg, rgba(245,158,11,0.08) 0%, rgba(0,0,0,0.38) 100%) !important;
}

/* BEST 왕관 배지 (이미지 우상단) */
.sdng-best-crown {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: linear-gradient(135deg, rgba(245,158,11,0.95), rgba(239,68,68,0.9));
  border-radius: 12px;
  padding: 8px 14px;
  box-shadow: 0 4px 20px rgba(245,158,11,0.5);
  backdrop-filter: blur(4px);
}
.sdng-best-crown-icon { font-size: 18px; line-height: 1; }
.sdng-best-crown-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #fff;
  line-height: 1;
}

/* BEST 패널 info 영역 — 상단 배너 */
.sdng-best-header {
  margin-bottom: 8px;
}
.sdng-best-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-family: 'Space Grotesk', sans-serif;
  background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(239,68,68,0.14));
  border: 1px solid rgba(245,158,11,0.4);
  color: #fcd34d;
  box-shadow: 0 2px 12px rgba(245,158,11,0.15);
}

/* BEST 패널 info 배경 강조 */
.sdng-best-info {
  background: linear-gradient(180deg, rgba(245,158,11,0.04) 0%, transparent 40%) !important;
  border-top: 1px solid rgba(245,158,11,0.2) !important;
}

/* BEST 리스트 아이템 활성화 색상 */
.sdng-list-best.active a .svc-list-name,
.sdng-list-best a:hover .svc-list-name {
  color: #fcd34d !important;
}
.sdng-list-best.active a .svc-list-num {
  color: #f59e0b !important;
}

/* ════════════════════════════════════════════
   SDTL — 시딩 캠페인 프로세스 타임라인
════════════════════════════════════════════ */
.sdtl-section { position: relative; }

/* ── 전체 래퍼 ── */
.sdtl-wrap {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 0 8px;
}

/* ── 중앙 세로선 ── */
.sdtl-axis {
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  transform: translateX(-50%);
  width: 2px;
  pointer-events: none;
  z-index: 0;
}
.sdtl-axis-line {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255,255,255,0.08) 8%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.08) 92%,
    transparent 100%
  );
}

/* ── 각 스텝 행 ── */
.sdtl-item {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  align-items: start;
  gap: 0;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}

/* ── 스페이서(반대쪽 빈 칸) ── */
.sdtl-spacer { min-height: 10px; }

/* ── 중앙 닷 ── */
.sdtl-dot {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(10,11,30,0.95);
  border: 2px solid color-mix(in srgb, var(--tc, #1a6bff) 60%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--tc, #1a6bff) 10%, transparent),
    0 0 20px color-mix(in srgb, var(--tc, #1a6bff) 20%, transparent);
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 20px;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.sdtl-dot--final {
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--tc, #10b981) 15%, transparent),
    0 0 28px color-mix(in srgb, var(--tc, #10b981) 35%, transparent);
}
.sdtl-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--tc, #1a6bff);
  letter-spacing: 0.04em;
  line-height: 1;
}

/* 연결선: 닷 → 카드 */
.sdtl-item--left .sdtl-dot::after,
.sdtl-item--right .sdtl-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 1px;
  background: color-mix(in srgb, var(--tc, #1a6bff) 40%, transparent);
}
.sdtl-item--left .sdtl-dot::after  { right: 100%; margin-right: 0; }
.sdtl-item--right .sdtl-dot::before { left: 100%; margin-left: 0; }

/* ── 카드 ── */
.sdtl-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.sdtl-card:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.13);
  transform: translateY(-3px);
}
.sdtl-card--final {
  border-color: rgba(16,185,129,0.2);
  background: rgba(16,185,129,0.04);
}
.sdtl-card--final:hover {
  border-color: rgba(16,185,129,0.35);
  background: rgba(16,185,129,0.08);
}

/* 카드 아이콘 */
.sdtl-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tc, #1a6bff) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tc, #1a6bff) 25%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tc, #1a6bff);
  flex-shrink: 0;
}

/* 카드 본문 */
.sdtl-card-body { flex: 1; min-width: 0; }

.sdtl-card-en {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 5px;
}
.sdtl-card-title {
  font-size: 17px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin: 0 0 8px;
  line-height: 1.3;
}
.sdtl-card-desc {
  font-size: 13.5px;
  color: rgba(255,255,255,0.5);
  line-height: 1.75;
  margin: 0;
}

/* ── 하단 배너 ── */
.sdtl-footer {
  margin-top: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 40px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  font-size: 13.5px;
  color: rgba(255,255,255,0.45);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.sdtl-footer strong { color: rgba(255,255,255,0.72); font-weight: 600; }
.sdtl-footer-icon { font-size: 16px; }

/* ── 반응형 ── */
@media (max-width: 720px) {
  .sdtl-wrap { max-width: 100%; }
  .sdtl-axis { left: 24px; }
  .sdtl-item {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto;
    margin-bottom: 20px;
  }
  .sdtl-item--left  { grid-template-areas: "dot card"; }
  .sdtl-item--right { grid-template-areas: "dot card"; }
  .sdtl-item--left  .sdtl-card  { grid-area: card; }
  .sdtl-item--left  .sdtl-dot   { grid-area: dot; }
  .sdtl-item--left  .sdtl-spacer,
  .sdtl-item--right .sdtl-spacer { display: none; }
  .sdtl-item--right .sdtl-dot  { grid-area: dot; order: -1; }
  .sdtl-item--right .sdtl-card { grid-area: card; }
  .sdtl-dot { margin-top: 16px; }
  .sdtl-item--left  .sdtl-dot::after  { display: none; }
  .sdtl-item--right .sdtl-dot::before { display: none; }
  .sdtl-card { padding: 18px 16px; }
  .sdtl-card-title { font-size: 15px; }
}

/* ════════════════════════════════════════════
   SEOP — SEO 4대 상품군 탭 레이아웃
════════════════════════════════════════════ */
.seo-products-section { position: relative; }

/* ── 탭 버튼 줄 ── */
.seop-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.seop-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 40px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s;
  font-family: inherit;
}
.seop-tab:hover {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.8);
  border-color: rgba(255,255,255,0.18);
}
.seop-tab.active {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
  font-weight: 600;
}
.seop-tab-icon { font-size: 16px; }
.seop-tab-label { white-space: nowrap; }

/* ── 패널 공통 ── */
.seop-panel {
  display: none;
}
.seop-panel.active {
  display: block;
  animation: seopFadeIn 0.35s ease;
}
@keyframes seopFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.seop-panel-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* ── 왼쪽 정보 영역 ── */
.seop-tag-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.seop-chip {
  display: inline-block;
  padding: 4px 13px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  font-family: 'Space Grotesk', sans-serif;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--cc,#eab308) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--cc,#eab308) 35%, transparent);
  color: color-mix(in srgb, var(--cc,#eab308) 90%, white);
}
.seop-purpose {
  font-size: 12px;
  color: rgba(255,255,255,0.38);
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: 0.04em;
}
.seop-title {
  font-size: 28px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  line-height: 1.35;
  margin: 0 0 16px;
}
.seop-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  line-height: 1.85;
  margin: 0 0 28px;
}
.seop-desc strong { color: rgba(255,255,255,0.8); }

/* ── 플레이스: 4개 세부 카드 ── */
.seop-sub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* 플레이스 카드 클릭 유도 힌트 */
@keyframes placeHintBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}
.seop-place-hint {
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: rgba(59, 130, 246, 0.9);
  animation: placeHintBlink 1.4s ease-in-out infinite;
  letter-spacing: 0.01em;
}
.seop-sub-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  transition: border-color 0.25s, background 0.25s;
}
.seop-sub-card:hover {
  border-color: color-mix(in srgb, var(--sc,#3b82f6) 30%, transparent);
  background: color-mix(in srgb, var(--sc,#3b82f6) 5%, transparent);
}
.seop-sub-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--sc,#3b82f6) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc,#3b82f6) 25%, transparent);
  display: flex; align-items: center; justify-content: center;
  color: var(--sc, #3b82f6);
  flex-shrink: 0;
}
.seop-sub-card strong {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 4px;
}
.seop-sub-card p {
  font-size: 12px;
  color: rgba(255,255,255,0.42);
  line-height: 1.6;
  margin: 0;
}

/* ── 자동완성: 하이라이트 카드 ── */
.seop-badge-row { display: flex; flex-direction: column; gap: 10px; }
.seop-highlight-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--hc,#6d28d9) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--hc,#6d28d9) 22%, transparent);
  color: color-mix(in srgb, var(--hc,#6d28d9) 80%, white);
}
.seop-highlight-card svg { flex-shrink: 0; margin-top: 2px; }
.seop-highlight-card strong { display: block; font-size: 13.5px; color: rgba(255,255,255,0.88); margin-bottom: 3px; }
.seop-highlight-card p { font-size: 12px; color: rgba(255,255,255,0.42); margin: 0; line-height: 1.55; }

/* ── 유튜브: 스텝 행 ── */
.seop-steps-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.seop-step-item {
  flex: 1;
  padding: 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--sc,#e11d48) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc,#e11d48) 22%, transparent);
  text-align: center;
}
.seop-step-num {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--sc, #e11d48);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.seop-step-item strong { display: block; font-size: 13px; color: rgba(255,255,255,0.85); margin-bottom: 4px; }
.seop-step-item p { font-size: 11.5px; color: rgba(255,255,255,0.4); margin: 0; line-height: 1.5; }
.seop-step-arrow { font-size: 18px; color: rgba(255,255,255,0.2); flex-shrink: 0; }

/* ── 인스타: 유즈케이스 그리드 ── */
.seop-usecase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.seop-usecase {
  padding: 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--uc,#ec4899) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--uc,#ec4899) 18%, transparent);
  transition: border-color 0.25s;
}
.seop-usecase:hover { border-color: color-mix(in srgb, var(--uc,#ec4899) 35%, transparent); }
.seop-usecase-icon { font-size: 20px; display: block; margin-bottom: 8px; }
.seop-usecase strong { display: block; font-size: 13px; color: rgba(255,255,255,0.85); margin-bottom: 4px; }
.seop-usecase p { font-size: 12px; color: rgba(255,255,255,0.42); margin: 0; line-height: 1.55; }

/* ══ 오른쪽: 목업 비주얼 ══ */
.seop-visual { position: relative; }

/* ════════════════════════════════════════════
   SEO — 블로그 배포 모핑 비주얼
════════════════════════════════════════════ */
.seop-blog-morph {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.08);
  background: #06070f;
  user-select: none;
}

/* ── 레이어 1: 기본 이미지 ── */
.sbm-base {
  position: relative;
  width: 100%;
}
.sbm-base-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: filter 0.5s ease;
}
.sbm-morph.active ~ .sbm-base .sbm-base-img,
.seop-blog-morph.morphed .sbm-base-img {
  filter: brightness(0.4) blur(1px);
}

/* 프레임 오버레이 */
.sbm-frame {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(6,7,15,0.6) 100%);
}

/* ── 레이어 2: 모핑 오버레이 ── */
.sbm-morph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.sbm-morph.active {
  opacity: 1;
  pointer-events: auto;
}

/* 블러 백드롭 */
.sbm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6,7,15,0.72);
  backdrop-filter: blur(4px);
}

/* 확대 줌 카드 */
.sbm-zoom-card {
  position: relative;
  z-index: 2;
  background: #0f1225;
  border-radius: 16px;
  border: 1px solid rgba(59,130,246,0.4);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.1), 0 16px 48px rgba(0,0,0,0.6);
  overflow: hidden;
  width: 82%;
  /* 모핑: 작은 상태에서 원래 크기로 확대 */
  transform: scale(0.55);
  opacity: 0;
  transition:
    transform 0.55s cubic-bezier(0.34,1.56,0.64,1),
    opacity   0.4s ease;
}
.sbm-morph.active .sbm-zoom-card {
  transform: scale(1);
  opacity: 1;
}

.sbm-zoom-img {
  display: block;
  width: 100%;
  height: auto;
}

/* UP! 뱃지 */
.sbm-up-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, #ef4444, #f97316);
  border-radius: 10px;
  padding: 4px 9px;
  box-shadow: 0 4px 16px rgba(239,68,68,0.5);
  animation: upBounce 0.8s cubic-bezier(0.34,1.56,0.64,1) 0.5s both;
}
@keyframes upBounce {
  from { transform: scale(0) rotate(-15deg); opacity:0; }
  to   { transform: scale(1) rotate(-8deg);  opacity:1; }
}
.sbm-up-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.05em;
  line-height: 1;
}
.sbm-up-arrow {
  font-size: 10px;
  color: rgba(255,255,255,0.85);
  line-height: 1;
}

/* 숫자 통계 행 */
.sbm-stat-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(10,12,30,0.9);
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: 12px;
  width: 82%;
  overflow: hidden;
  transform: translateY(14px);
  opacity: 0;
  transition:
    transform 0.45s cubic-bezier(0.16,1,0.3,1) 0.2s,
    opacity   0.4s ease 0.2s;
}
.sbm-morph.active .sbm-stat-row {
  transform: translateY(0);
  opacity: 1;
}
.sbm-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  gap: 3px;
}
.sbm-stat strong {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: 'Space Grotesk', sans-serif;
}
.sbm-stat-num {
  font-size: 22px;
  font-weight: 800;
  color: #60a5fa;
  font-family: 'Space Grotesk', sans-serif;
  line-height: 1;
  min-width: 2ch;
  text-align: center;
}
.sbm-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}

/* 닫기 버튼 */
.sbm-close {
  position: relative;
  z-index: 3;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  padding: 5px 14px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: 0.06em;
  opacity: 0;
  transform: translateY(8px);
  transition:
    background 0.2s, color 0.2s,
    opacity 0.3s ease 0.4s,
    transform 0.3s ease 0.4s;
}
.sbm-morph.active .sbm-close {
  opacity: 1;
  transform: translateY(0);
}
.sbm-close:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

/* 블로그 배포 카드 — 클릭 유도 강조 */
.seop-sub-card--blog-trigger {
  cursor: pointer;
  position: relative;
}
.seop-sub-card--blog-trigger:hover,
.seop-sub-card--blog-trigger.active {
  border-color: rgba(59,130,246,0.6) !important;
  background: rgba(59,130,246,0.1) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15) !important;
}

/* ── 나머지 3개 트리거 카드 공통 pulse ── */
.seop-sub-card--trigger {
  cursor: pointer;
  animation: blogCardPulse 2.6s ease-in-out infinite;
}
.seop-sub-card--trigger:hover,
.seop-sub-card--trigger.active {
  border-color: color-mix(in srgb, var(--sc,#3b82f6) 60%, transparent) !important;
  background: color-mix(in srgb, var(--sc,#3b82f6) 10%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc,#3b82f6) 15%, transparent) !important;
  animation: none;
}

/* ════════════════════════════════════
   유입 작업 목업
════════════════════════════════════ */
/* ════════════════════════════════
   유입 작업 — 실제 이미지 + 커서
════════════════════════════════ */
.sbm-zoom-card--inflow {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  width: 82%;
  background: #0f1225;
  border-radius: 16px;
  border: 1px solid rgba(139,92,246,0.4);
  box-shadow: 0 0 0 4px rgba(139,92,246,0.1), 0 16px 48px rgba(0,0,0,0.6);
}
/* 이미지 래퍼 */
.sbm-inflow-img-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0a0c1e;
}
.sbm-inflow-bg-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  /* 클릭 시 깜빡임은 JS에서 클래스로 제어 */
  transition: filter 0.08s ease;
}
/* 이미지 깜빡임 클래스 (JS에서 add/remove) */
.sbm-inflow-bg-img.flash {
  filter: brightness(1.6) saturate(1.15);
}
/* 클릭 타깃 하이라이트 (플레이스 카드 영역) */
.sbm-inflow-click-target {
  position: absolute;
  /* blog-before.jpg 기준 플레이스 리스트 첫 항목 위치 */
  top: 18%;
  left: 6%;
  width: 88%;
  height: 18%;
  border-radius: 8px;
  background: transparent;
  border: 2px solid rgba(139,92,246,0);
  pointer-events: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sbm-inflow-img-wrap.clicking .sbm-inflow-click-target {
  border-color: rgba(139,92,246,0.8);
  background: rgba(139,92,246,0.12);
}
/* 유입 카운트 배지 */
.sbm-inflow-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(139,92,246,0.9);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  color: #fff;
  font-weight: 600;
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease 0.5s, transform 0.4s ease 0.5s;
  pointer-events: none;
}
.sbm-morph--inflow.active .sbm-inflow-badge {
  opacity: 1;
  transform: translateY(0);
}
.sbm-inflow-badge strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
}
/* 구버전 목업 CSS 제거용 (하위호환) */
.sbm-inflow-mock,
.sbm-inflow-row,
.sbm-inflow-thumb,
.sbm-inflow-info,
.sbm-inflow-name,
.sbm-inflow-sub,
.sbm-inflow-bar-wrap,
.sbm-inflow-bar-label,
.sbm-inflow-bar,
.sbm-inflow-fill,
.sbm-inflow-count { display: none; }

/* ── 마우스 커서 공통 ── */
.sbm-cursor {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  /* 유입 기본 위치: 플레이스 리스트 첫 항목 위에서 시작 */
  top: 10%;
  left: 40%;
  animation: cursorMoveInflow 2.4s cubic-bezier(0.25,0.46,0.45,0.94) 0.5s infinite;
}
/* 유입 전용 커서 클래스 */
.sbm-cursor--inflow {
  top: 10%;
  left: 40%;
  animation: cursorMoveInflow 2.4s cubic-bezier(0.25,0.46,0.45,0.94) 0.5s infinite;
}
.sbm-cursor--save {
  /* 저장 이미지에서 저장(북마크) 버튼 위치 — save-click.jpg 기준 */
  top: 8%;
  left: 30%;
  animation: cursorMoveSave 2.4s cubic-bezier(0.25,0.46,0.45,0.94) 0.5s infinite;
}

/* 유입: 위에서 아래(플레이스 카드)로 이동 후 클릭 */
@keyframes cursorMoveInflow {
  0%   { transform: translate(0, -12px) scale(1);  opacity: 0; }
  12%  { opacity: 1; }
  38%  { transform: translate(6px, 28px) scale(1); opacity: 1; }
  50%  { transform: translate(6px, 28px) scale(0.82); } /* 클릭 눌림 */
  62%  { transform: translate(6px, 28px) scale(1);   }
  85%  { opacity: 1; }
  100% { transform: translate(6px, 28px) scale(1);   opacity: 0; }
}
/* 저장: 왼쪽 위 → 저장 버튼 → 클릭 */
@keyframes cursorMoveSave {
  0%   { transform: translate(-8px, -10px) scale(1); opacity: 0; }
  12%  { opacity: 1; }
  38%  { transform: translate(8px, 24px) scale(1);   opacity: 1; }
  50%  { transform: translate(8px, 24px) scale(0.82); } /* 클릭 눌림 */
  62%  { transform: translate(8px, 24px) scale(1);    }
  85%  { opacity: 1; }
  100% { transform: translate(8px, 24px) scale(1);    opacity: 0; }
}

/* 클릭 파문 링 */
.sbm-cursor-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0);
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(139,92,246,0.75);
  animation: cursorRipple 2.4s ease-out 0.5s infinite;
}
.sbm-cursor-ring--amber {
  border-color: rgba(245,158,11,0.8);
  animation: cursorRipple 2.4s ease-out 0.5s infinite;
}
@keyframes cursorRipple {
  0%,38%  { transform: translate(-50%,-50%) scale(0); opacity: 0; }
  52%     { transform: translate(-50%,-50%) scale(0.35); opacity: 1; }
  78%     { transform: translate(-50%,-50%) scale(1.5); opacity: 0; }
  100%    { opacity: 0; }
}

/* "click !" 텍스트 */
.sbm-click-label {
  position: absolute;
  top: 5%;
  left: 60%;
  font-size: 13px;
  font-weight: 800;
  color: #a78bfa;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: 0.04em;
  pointer-events: none;
  animation: clickLabelPop 2.4s ease-out 0.5s infinite;
  transform-origin: left center;
}
.sbm-click-label--inflow {
  top: 5%;
  left: 60%;
  color: #a78bfa;
}
.sbm-click-label--amber {
  color: #fbbf24;
  left: 55%;
  top: 5%;
}
@keyframes clickLabelPop {
  0%,38%  { transform: scale(0.6); opacity: 0; }
  52%     { transform: scale(1.15); opacity: 1; }
  70%     { transform: scale(1);   opacity: 1; }
  88%     { opacity: 0; }
  100%    { opacity: 0; }
}

/* 이미지 플래시 — 유입/저장 클릭 시 이미지가 깜빡이는 효과 (카드 단위) */
.sbm-zoom-card--inflow,
.sbm-zoom-card--save {
  animation: none;
}
.sbm-morph--inflow.active .sbm-zoom-card--inflow {
  animation: imgFlash 2.4s ease-out 0.6s infinite;
}
.sbm-morph--save.active .sbm-zoom-card--save {
  animation: imgFlash 2.4s ease-out 0.6s infinite;
}
@keyframes imgFlash {
  0%,38% { filter: brightness(1); }
  52%    { filter: brightness(1.45) saturate(1.15); }
  68%    { filter: brightness(1); }
  100%   { filter: brightness(1); }
}

/* ════════════════════════════════════
   방문자 리뷰 — 가로형 이미지 줌
════════════════════════════════════ */
.sbm-zoom-img--review {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #0d1020;
  padding: 0;
}
/* 기획형 리뷰 — 세로가 긴 이미지, 스크롤 가능 */
.sbm-review-img-wrap {
  width: 100%;
  max-height: 340px;
  overflow-y: auto;
  border-radius: 8px;
  background: #fff;
}
.sbm-zoom-img--planned {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
/* 단순 리뷰 — 작은 카드형, 스크롤 없음 */
.sbm-review-img-wrap--simple {
  max-height: none;
  overflow-y: visible;
  background: #fff;
  border-radius: 8px;
}
.sbm-zoom-img--simple {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
/* 리뷰 탭 */
.sbm-review-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.sbm-review-tab {
  flex: 1;
  padding: 6px 0;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.sbm-review-tab.active {
  background: rgba(16,185,129,0.18);
  border-color: rgba(16,185,129,0.5);
  color: #34d399;
}
.sbm-review-tab:hover:not(.active) {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
}
/* 리뷰 패널 */
.sbm-review-panel { display: none; }
.sbm-review-panel.active { display: block; }
/* 방문자 리뷰 카드 — green 테마 */
.sbm-zoom-card--review {
  border-color: rgba(16,185,129,0.45);
  box-shadow: 0 0 0 4px rgba(16,185,129,0.1), 0 16px 48px rgba(0,0,0,0.6);
}
.sbm-up-badge--green {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 4px 16px rgba(16,185,129,0.5);
}
.sbm-stat-num--green { color: #34d399; }

/* ════════════════════════════════════
   저장 작업 — 이미지 + 커서
════════════════════════════════════ */
.sbm-zoom-card--save {
  animation: none;
  padding: 0;
  overflow: hidden;
  background: #0f1225;
  border-color: rgba(245,158,11,0.4);
  box-shadow: 0 0 0 4px rgba(245,158,11,0.1), 0 16px 48px rgba(0,0,0,0.6);
}
/* 저장 이미지 래퍼 */
.sbm-save-img-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;
}
.sbm-zoom-img--save {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #fff;
  padding: 20px;
  /* 이미지 크기가 작으므로 최소 높이 지정 */
  min-height: 120px;
}
/* 저장 버튼 하이라이트 영역 */
.sbm-save-target {
  position: absolute;
  /* save-click.jpg의 저장(북마크) 버튼 위치 — 이미지 우측 상단 쪽 */
  top: 22%;
  right: 18%;
  width: 24%;
  height: 32%;
  border-radius: 6px;
  background: transparent;
  border: 2px solid rgba(245,158,11,0);
  pointer-events: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.sbm-save-img-wrap.clicking .sbm-save-target {
  border-color: rgba(245,158,11,0.85);
  background: rgba(245,158,11,0.14);
}
/* 저장 통계 */
.sbm-stat-row--save {
  justify-content: center;
  padding: 12px;
  background: rgba(15,18,37,0.95);
}
.sbm-stat-row--amber {
  justify-content: center;
}
.sbm-stat-num--amber { color: #fbbf24; }

.seop-mock {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  background: #0d0e1f;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
.seop-mock-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.seop-mock-bar { display: flex; gap: 5px; }
.seop-mock-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.seop-mock-dot.r { background: #ff5f57; }
.seop-mock-dot.y { background: #ffbd2e; }
.seop-mock-dot.g { background: #28c840; }
.seop-mock-url {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.03em;
}
.seop-mock-body { padding: 16px; }

/* 플레이스 목업 */
.seop-place-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  margin-bottom: 14px;
}
.seop-place-kw { font-size: 13px; color: rgba(255,255,255,0.8); font-weight: 500; }
.seop-place-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.seop-place-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
}
.seop-place-item--top {
  background: rgba(245,158,11,0.07);
  border-color: rgba(245,158,11,0.22);
}
.seop-place-rank {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
  font-family: 'Space Grotesk', sans-serif;
}
.rank-1 { background: rgba(245,158,11,0.25); color: #fcd34d; }
.rank-2 { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); }
.rank-3 { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.35); }
.seop-place-info strong { display: block; font-size: 12px; color: rgba(255,255,255,0.8); }
.seop-place-info span { font-size: 11px; color: rgba(255,255,255,0.38); }
.seop-place-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  background: rgba(245,158,11,0.2);
  border: 1px solid rgba(245,158,11,0.4);
  color: #fcd34d;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Space Grotesk', sans-serif;
}
.seop-place-stats { display: flex; flex-direction: column; gap: 7px; }
.seop-pstat { display: flex; align-items: center; gap: 8px; font-size: 11px; color: rgba(255,255,255,0.4); }
.seop-pstat-label { width: 68px; flex-shrink: 0; }
.seop-pstat-bar { flex: 1; height: 5px; background: rgba(255,255,255,0.07); border-radius: 3px; overflow: hidden; }
.seop-pstat-fill { height: 100%; border-radius: 3px; }
.seop-pstat span:last-child { width: 30px; text-align: right; }

/* 자동완성 목업 */
/* ══════════════════════════════════════════
   자동완성 — 목록 순차 등장 애니메이션
══════════════════════════════════════════ */
.seop-auto-searchbox {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  margin-bottom: 4px;
}
.seop-auto-typing { font-size: 13px; color: rgba(255,255,255,0.8); font-weight: 500; }
.seop-cursor { animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ══════════════════════════════════════════
   자동완성 — 패널 활성 시 아이템 순차 페이드인 (CSS only)
══════════════════════════════════════════ */
@keyframes autoItemIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
.seop-panel.active .seop-auto-item {
  animation: autoItemIn 0.32s ease both;
}
.seop-panel.active .seop-auto-item:nth-child(1) { animation-delay: 0.05s; }
.seop-panel.active .seop-auto-item:nth-child(2) { animation-delay: 0.12s; }
.seop-panel.active .seop-auto-item:nth-child(3) { animation-delay: 0.19s; }
.seop-panel.active .seop-auto-item:nth-child(4) { animation-delay: 0.26s; }
.seop-panel.active .seop-auto-item:nth-child(5) { animation-delay: 0.33s; }

/* ══════════════════════════════════════════
   유튜브 — 패널 활성 시 영상 아이템 순차 페이드인 (CSS only)
══════════════════════════════════════════ */
@keyframes ytItemIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.seop-panel.active .seop-yt-item {
  animation: ytItemIn 0.35s ease both;
}
.seop-panel.active .seop-yt-item:nth-child(1) { animation-delay: 0.05s; }
.seop-panel.active .seop-yt-item:nth-child(2) { animation-delay: 0.20s; }
.seop-panel.active .seop-yt-item:nth-child(3) { animation-delay: 0.35s; }

/* ══════════════════════════════════════════
   인스타 — 자동완성 드롭다운 + 이미지 결과
══════════════════════════════════════════ */

/* 자동완성 드롭다운 */
.seop-insta-suggest {
  display: none;
  flex-direction: column;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 4px;
}
.seop-insta-suggest.suggest-visible {
  display: flex;
}
.seop-insta-sug-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease, background 0.15s;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.seop-insta-sug-item:last-child { border-bottom: none; }
.seop-insta-sug-item.sug-visible {
  opacity: 1;
  transform: translateY(0);
}
.seop-insta-sug-item:hover,
.seop-insta-sug-item.active {
  background: rgba(236,72,153,0.18);
}
.seop-insta-sug-hash {
  color: #ec4899;
  font-size: 12px;
  font-weight: 700;
}
.seop-insta-sug-text {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  flex: 1;
}
.seop-insta-sug-text strong {
  color: #fff;
  font-weight: 700;
}
.seop-insta-sug-cnt {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
}

/* 이미지 결과 영역 */
.seop-insta-result {
  display: none;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.seop-insta-result.insta-result-visible {
  display: flex;
}
/* 결과 상단바 */
.seop-insta-result-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.seop-insta-result-header {
  font-size: 12px;
  font-weight: 700;
  color: #ec4899;
  flex: 1;
  text-align: center;
}
.seop-insta-back,
.seop-insta-close {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 6px;
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  padding: 4px 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.seop-insta-back:hover,
.seop-insta-close:hover {
  background: rgba(255,255,255,0.16);
  color: #fff;
}
.seop-insta-result-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  object-fit: contain;
}

/* 레전드 */
#instaLegend {
  opacity: 0;
  transition: opacity 0.4s ease;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  text-align: center;
  padding-top: 4px;
}
#instaLegend.insta-legend-visible {
  opacity: 1;
}
/* 해시 기호 스타일 */
.seop-insta-hash {
  color: rgba(255,255,255,0.45);
  font-size: 14px;
}
.seop-auto-list { display: flex; flex-direction: column; }
.seop-auto-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  font-size: 12.5px; color: rgba(255,255,255,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.2s;
}
.seop-auto-item:hover { background: rgba(255,255,255,0.04); }
.seop-auto-item--brand {
  color: rgba(255,255,255,0.82);
  background: rgba(109,40,217,0.07);
}
.seop-auto-item--brand em { color: #a78bfa; font-style: normal; font-weight: 600; }
.seop-auto-hit { margin-left: auto; font-size: 10px; color: #a78bfa; }
.seop-auto-legend {
  margin-top: 10px;
  font-size: 11px;
  color: rgba(255,255,255,0.28);
  text-align: center;
  padding: 8px;
}

/* 유튜브 목업 */
.seop-yt-searchbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 12px;
}
.seop-yt-kw { color: rgba(255,255,255,0.8); font-weight: 500; }
.seop-yt-list { display: flex; flex-direction: column; gap: 10px; }
.seop-yt-item { display: flex; gap: 10px; align-items: flex-start; }
.seop-yt-item--top .seop-yt-meta strong { color: rgba(255,255,255,0.9); }
.seop-yt-thumb {
  width: 88px; height: 54px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(225,29,72,0.35), rgba(249,115,22,0.2));
  display: flex; align-items: center; justify-content: center;
  position: relative; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.07);
}
.seop-yt-thumb--sm { background: rgba(255,255,255,0.05); }
.seop-yt-play { font-size: 14px; color: rgba(255,255,255,0.7); }
.seop-yt-dur {
  position: absolute; bottom: 3px; right: 5px;
  font-size: 9px; color: rgba(255,255,255,0.6);
  font-family: 'Space Grotesk', sans-serif;
}
.seop-yt-meta strong { display: block; font-size: 11.5px; color: rgba(255,255,255,0.65); margin-bottom: 3px; line-height: 1.4; }
.seop-yt-meta span { font-size: 10.5px; color: rgba(255,255,255,0.3); }
.seop-yt-topbadge {
  display: inline-block; margin-top: 5px;
  font-size: 9.5px; font-weight: 700;
  background: rgba(225,29,72,0.18); border: 1px solid rgba(225,29,72,0.35); color: #fca5a5;
  padding: 2px 7px; border-radius: 4px;
  font-family: 'Space Grotesk', sans-serif;
}

/* 인스타 목업 */
.seop-insta-searchbar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 13px; color: rgba(255,255,255,0.6);
}
.seop-insta-kw { color: rgba(255,255,255,0.85); font-weight: 500; }
.seop-insta-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 3px;
  border-radius: 6px; overflow: hidden;
}
.seop-insta-cell {
  aspect-ratio: 1; position: relative;
  background: rgba(255,255,255,0.05);
}
.seop-insta-cell--featured { grid-row: span 2; grid-column: span 1; }
.seop-insta-cell--featured { background: linear-gradient(135deg,rgba(236,72,153,0.4),rgba(168,85,247,0.25)); }
.seop-insta-cell--brand     { background: linear-gradient(135deg,rgba(168,85,247,0.3),rgba(236,72,153,0.2)); }
.seop-insta-cell--brand2    { background: linear-gradient(135deg,rgba(236,72,153,0.25),rgba(249,115,22,0.2)); }
.seop-insta-cell--c4 { background: rgba(255,255,255,0.06); }
.seop-insta-cell--c5 { background: rgba(255,255,255,0.05); }
.seop-insta-cell--c6 { background: rgba(255,255,255,0.04); }
.seop-insta-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 5px 7px; font-size: 10px; color: rgba(255,255,255,0.7);
}
.seop-insta-fbadge {
  font-size: 9px; font-weight: 700;
  background: rgba(236,72,153,0.7); color: #fff;
  padding: 2px 6px; border-radius: 3px;
  font-family: 'Space Grotesk', sans-serif;
}
.seop-insta-legend {
  margin-top: 8px; text-align: center;
  font-size: 11px; color: rgba(255,255,255,0.28);
}

/* 클릭 유도 힌트 */
@keyframes instaHintBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}
.seop-insta-hint {
  margin-top: 20px;
  text-align: center;
  font-size: 12px;
  color: rgba(236, 72, 153, 0.85);
  animation: instaHintBlink 1.4s ease-in-out infinite;
  letter-spacing: 0.01em;
}

/* ── 반응형 ── */
@media (max-width: 900px) {
  .seop-panel-inner { grid-template-columns: 1fr; gap: 32px; }
  .seop-visual { order: -1; }
  .seop-mock { max-width: 480px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .seop-tabs { gap: 7px; }
  .seop-tab { padding: 9px 14px; font-size: 13px; }
  .seop-title { font-size: 22px; }
  .seop-sub-grid { grid-template-columns: 1fr; }
  .seop-usecase-grid { grid-template-columns: 1fr; }
  .seop-steps-row { flex-direction: column; }
  .seop-step-arrow { transform: rotate(90deg); }
}

/* ═══════════════════════════════════════════
   SEOP-PROC  SEO 프로세스 섹션
═══════════════════════════════════════════ */
.seop-process-section { padding: 100px 0; }

.seop-proc-wrap {
  max-width: 820px;
  margin: 60px auto 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 각 스텝 행 */
.seop-proc-step {
  display: flex;
  gap: 0;
  align-items: stretch;
}

/* 왼쪽 번호 컬럼 */
.seop-proc-num-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 72px;
}

/* 원형 번호 */
.seop-proc-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(var(--pc-r, 26), var(--pc-g, 107), var(--pc-b, 255), 0.12);
  border: 2px solid color-mix(in srgb, var(--pc, #1a6bff) 60%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 16px color-mix(in srgb, var(--pc, #1a6bff) 25%, transparent);
  transition: transform 0.3s;
}
.seop-proc-circle:hover { transform: scale(1.08); }

.seop-proc-circle--final {
  border-width: 2px;
  border-style: solid;
  border-color: color-mix(in srgb, var(--pc, #10b981) 80%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--pc, #10b981) 45%, transparent);
}

.seop-proc-n {
  font-size: 15px;
  font-weight: 800;
  color: var(--pc, #1a6bff);
  letter-spacing: 0.02em;
}

/* 연결선 */
.seop-proc-line {
  flex: 1;
  width: 2px;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--pc, #1a6bff) 40%, transparent),
    rgba(255,255,255,0.06)
  );
  margin: 6px 0;
  min-height: 40px;
}
.seop-proc-step--last .seop-proc-line { display: none; }

/* 오른쪽 본문 */
.seop-proc-body {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 0 0 48px 28px;
  flex: 1;
}

.seop-proc-step--last .seop-proc-body {
  padding-bottom: 0;
}

/* 아이콘 박스 */
.seop-proc-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--pc, #1a6bff) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc, #1a6bff) 30%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--pc, #1a6bff);
}

/* 텍스트 */
.seop-proc-text { flex: 1; }

.seop-proc-en {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: color-mix(in srgb, var(--pc, #1a6bff) 85%, transparent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.seop-proc-title {
  font-size: 20px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  margin: 0 0 10px;
}

.seop-proc-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  line-height: 1.75;
  margin: 0;
}

/* 상품 칩 (STEP 04) */
.seop-proc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.seop-proc-chip {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--cc, #6d28d9) 12%, rgba(255,255,255,0.04));
  border: 1px solid color-mix(in srgb, var(--cc, #6d28d9) 40%, transparent);
  color: color-mix(in srgb, var(--cc, #6d28d9) 90%, #fff);
}

/* 하단 안내 */
.seop-proc-note {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 820px;
  margin: 32px auto 0;
  padding: 16px 22px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  line-height: 1.6;
}
.seop-proc-note svg { flex-shrink: 0; color: rgba(255,255,255,0.35); }
.seop-proc-note strong { color: rgba(255,255,255,0.7); font-weight: 600; }

/* 반응형 */
@media (max-width: 640px) {
  .seop-proc-num-col { width: 48px; }
  .seop-proc-circle { width: 40px; height: 40px; }
  .seop-proc-n { font-size: 13px; }
  .seop-proc-body { padding: 0 0 36px 16px; gap: 14px; }
  .seop-proc-icon-wrap { width: 40px; height: 40px; border-radius: 10px; }
  .seop-proc-title { font-size: 17px; }
}

/* ═══════════════════════════════════════════
   RVT  리뷰 타입 비교 섹션
═══════════════════════════════════════════ */
.rvt-section { padding: 100px 0; }

.rvt-compare {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 60px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
}

/* 카드 공통 */
.rvt-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.rvt-card--premium { background: rgba(234,179,8,0.04); border-right: 1px solid rgba(255,255,255,0.08); }
.rvt-card--basic   { background: rgba(255,255,255,0.02); }

.rvt-card-top {
  padding: 28px 28px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rvt-tier-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid;
  width: fit-content;
}

/* 목업 미리보기 */
.rvt-mock-preview {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(15,15,20,0.8);
}

/* 실제 이미지로 교체된 mock — 잘리지 않게 전체 표시 */
.rvt-mock-real-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #fff;
  max-height: 260px;
  overflow: hidden;
  /* 기획형 리뷰는 세로가 길어 스크롤 */
}
.rvt-mock--blog .rvt-mock-real-img {
  max-height: 260px;
  object-position: top;
}

.rvt-mock-header-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.rvt-mock-dots { display: flex; gap: 4px; }
.rvt-mock-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
}
.rvt-mock-url-text { font-size: 10px; color: rgba(255,255,255,0.3); font-family: monospace; }

.rvt-mock-content { padding: 14px 14px 16px; }
.rvt-mock-stars { font-size: 14px; margin-bottom: 10px; }
.rvt-mock-stars--dim { opacity: 0.4; }

.rvt-mock-text-lines { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.rvt-mock-line {
  height: 8px; border-radius: 4px;
  background: rgba(255,255,255,0.12); width: 100%;
}
.rvt-mock-line--title { height: 10px; background: rgba(255,255,255,0.2); }
.rvt-mock-line--mid   { width: 70%; }
.rvt-mock-line--short { width: 45%; }

.rvt-mock-imgs { display: flex; gap: 6px; }
.rvt-mock-img {
  width: 44px; height: 44px; border-radius: 6px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}

/* 카드 바디 */
.rvt-card-body { padding: 24px 28px 32px; flex: 1; }

.rvt-type-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid rgba(234,179,8,0.4);
}
.rvt-type-name svg { color: #eab308; }
.rvt-type-name--basic { border-bottom-color: rgba(100,116,139,0.3); }
.rvt-type-name--basic svg { color: rgba(255,255,255,0.3); }

.rvt-feature-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rvt-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.rvt-feat-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--fi, #eab308) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--fi, #eab308) 35%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.rvt-feat-icon--dim { opacity: 0.45; }

.rvt-feature-list strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  margin-bottom: 3px;
}
.rvt-feature-list p {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  margin: 0;
  line-height: 1.5;
}
.rvt-feature-list--basic strong { color: rgba(255,255,255,0.45); }
.rvt-feature-list--basic p     { color: rgba(255,255,255,0.28); }

/* VS 구분 */
.rvt-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.03);
  border-left: 1px solid rgba(255,255,255,0.08);
  border-right: 1px solid rgba(255,255,255,0.08);
}
.rvt-vs span {
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.05em;
  writing-mode: vertical-rl;
}

/* ═══════════════════════════════════════════
   RVP  프리미엄 리뷰 상세
═══════════════════════════════════════════ */
.rvp-section { padding: 100px 0; }

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

.rvp-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  padding: 28px 24px 32px;
  transition: border-color 0.3s, transform 0.3s;
}
.rvp-card:hover {
  border-color: rgba(234,179,8,0.3);
  transform: translateY(-4px);
}

.rvp-card-num {
  font-size: 28px;
  font-weight: 900;
  color: rgba(234,179,8,0.25);
  font-family: 'Space Grotesk', sans-serif;
  margin-bottom: 10px;
  line-height: 1;
}

.rvp-card-title {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin: 0 0 14px;
}

.rvp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.rvp-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(26,107,255,0.12);
  border: 1px solid rgba(26,107,255,0.3);
  color: rgba(96,165,250,0.9);
}

.rvp-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rvp-list li {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  padding-left: 14px;
  position: relative;
  line-height: 1.6;
}
.rvp-list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: rgba(234,179,8,0.6);
  font-weight: 700;
}
.rvp-list li em { color: rgba(255,255,255,0.35); font-style: normal; }

.rvp-desc {
  font-size: 13.5px;
  color: rgba(255,255,255,0.52);
  line-height: 1.75;
  margin: 0;
}
.rvp-desc strong { color: rgba(255,255,255,0.82); font-weight: 600; }

/* 채널 배지 */
.rvp-channels {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 48px;
  padding: 20px 32px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.rvp-ch-label {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  font-weight: 500;
  margin-right: 4px;
}
.rvp-ch-badge {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
  padding: 6px 16px;
  border-radius: 8px;
}
.rvp-ch-naver {
  background: rgba(3,199,90,0.1);
  color: #03c75a;
  border: 1px solid rgba(3,199,90,0.3);
}
.rvp-ch-coupang {
  background: rgba(255,82,0,0.1);
  color: #ff5200;
  border: 1px solid rgba(255,82,0,0.3);
}
.rvp-ch-x {
  font-size: 16px;
  color: rgba(255,255,255,0.25);
  font-weight: 700;
}

/* ═══════════════════════════════════════════
   PREMIUM REVIEW — 새 디자인
═══════════════════════════════════════════ */

/* 히어로 헤더 */
.rvp-hero {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 72px;
}

.rvp-hero-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
}

.rvp-hero-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 5px 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(234,179,8,0.2), rgba(234,179,8,0.08));
  border: 1px solid rgba(234,179,8,0.45);
  color: #eab308;
  font-family: 'Space Grotesk', sans-serif;
}

.rvp-hero-sub-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(26,107,255,0.12);
  border: 1px solid rgba(26,107,255,0.35);
  color: rgba(96,165,250,0.9);
  font-family: 'Space Grotesk', sans-serif;
}

.rvp-hero-title {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -1px;
  color: rgba(255,255,255,0.95);
  margin: 0 0 20px;
}
.rvp-hero-title em {
  color: rgba(234,179,8,0.8);
  font-style: normal;
}
.rvp-hero-title strong {
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.rvp-hero-desc {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255,255,255,0.5);
}
.rvp-hero-desc strong {
  color: rgba(255,255,255,0.82);
  font-weight: 600;
}

/* ─── 3-카드 프리미엄 그리드 ─── */
.rvp-premium-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.rvp-premium-card {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.rvp-premium-card:hover {
  transform: translateY(-6px);
}
.rvp-premium-card--blue:hover {
  border-color: rgba(59,130,246,0.45);
  box-shadow: 0 20px 48px rgba(59,130,246,0.12);
}
.rvp-premium-card--gold:hover {
  border-color: rgba(234,179,8,0.45);
  box-shadow: 0 20px 48px rgba(234,179,8,0.12);
}
.rvp-premium-card--green:hover {
  border-color: rgba(16,185,129,0.45);
  box-shadow: 0 20px 48px rgba(16,185,129,0.12);
}

/* 이미지 영역 */
.rvp-premium-img-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.rvp-premium-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s ease;
}
.rvp-premium-card:hover .rvp-premium-img {
  transform: scale(1.05);
}
.rvp-premium-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(5,5,20,0.05) 0%,
    rgba(5,5,20,0.6) 100%
  );
}
.rvp-premium-num {
  position: absolute;
  top: 14px;
  left: 16px;
  font-size: 36px;
  font-weight: 900;
  font-family: 'Space Grotesk', sans-serif;
  line-height: 1;
  color: rgba(255,255,255,0.18);
  z-index: 2;
}
.rvp-premium-card--blue .rvp-premium-num  { color: rgba(96,165,250,0.35); }
.rvp-premium-card--gold .rvp-premium-num  { color: rgba(234,179,8,0.35); }
.rvp-premium-card--green .rvp-premium-num { color: rgba(52,211,153,0.35); }

/* 카드 본문 */
.rvp-premium-body {
  padding: 24px 22px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rvp-premium-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rvp-premium-tag {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: 0.02em;
}
.rvp-premium-card--blue  .rvp-premium-tag { background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.3); color: rgba(96,165,250,0.9); }
.rvp-premium-card--gold  .rvp-premium-tag { background: rgba(234,179,8,0.12);  border: 1px solid rgba(234,179,8,0.3);  color: rgba(234,179,8,0.9); }
.rvp-premium-card--green .rvp-premium-tag { background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.3); color: rgba(52,211,153,0.9); }

.rvp-premium-title {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  margin: 0;
  line-height: 1.3;
}
.rvp-premium-card--blue  .rvp-premium-title { color: #93c5fd; }
.rvp-premium-card--gold  .rvp-premium-title { color: #fcd34d; }
.rvp-premium-card--green .rvp-premium-title { color: #6ee7b7; }

.rvp-premium-desc {
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(255,255,255,0.48);
  margin: 0;
}
.rvp-premium-desc strong {
  color: rgba(255,255,255,0.82);
  font-weight: 600;
}

.rvp-premium-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 14px;
}
.rvp-premium-list li {
  font-size: 12.5px;
  color: rgba(255,255,255,0.45);
  padding-left: 14px;
  position: relative;
  line-height: 1.55;
}
.rvp-premium-list li em {
  color: rgba(255,255,255,0.28);
  font-style: normal;
}
.rvp-premium-card--blue  .rvp-premium-list li::before { content: '·'; position: absolute; left: 0; color: #60a5fa; font-weight: 700; }
.rvp-premium-card--gold  .rvp-premium-list li::before { content: '·'; position: absolute; left: 0; color: #eab308; font-weight: 700; }
.rvp-premium-card--green .rvp-premium-list li::before { content: '·'; position: absolute; left: 0; color: #34d399; font-weight: 700; }

/* ─── 하단 강조 배너 ─── */
.rvp-premium-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 32px;
  border-radius: 16px;
  background: linear-gradient(135deg,
    rgba(234,179,8,0.08) 0%,
    rgba(26,107,255,0.08) 50%,
    rgba(16,185,129,0.08) 100%
  );
  border: 1px solid rgba(234,179,8,0.25);
  position: relative;
  overflow: hidden;
}
.rvp-premium-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(234,179,8,0.04), transparent 50%, rgba(16,185,129,0.04));
  pointer-events: none;
}

.rvp-premium-banner-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(234,179,8,0.12);
  border: 1px solid rgba(234,179,8,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #eab308;
}

.rvp-premium-banner-text {
  flex: 1;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.55);
}
.rvp-premium-banner-text strong {
  color: #fcd34d;
  font-weight: 700;
}
.rvp-premium-banner-text em {
  color: rgba(255,255,255,0.75);
  font-style: normal;
  font-weight: 600;
}

.rvp-premium-banner-kpi {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.rvp-premium-banner-kpi span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  padding: 10px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  white-space: nowrap;
}
.rvp-premium-banner-kpi span b {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
}

/* 반응형 */
@media (max-width: 1024px) {
  .rvp-premium-grid { grid-template-columns: 1fr; gap: 20px; }
  .rvp-premium-img-wrap { height: 220px; }
  .rvp-premium-banner { flex-direction: column; text-align: center; }
  .rvp-premium-banner-kpi { justify-content: center; }
}
@media (max-width: 640px) {
  .rvp-hero-title { font-size: 26px; }
  .rvp-premium-banner { padding: 20px; }
}

/* 반응형 */
@media (max-width: 900px) {
  .rvt-compare { flex-direction: column; }
  .rvt-vs { width: 100%; height: 44px; writing-mode: initial; border-left: none; border-right: none; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); }
  .rvt-vs span { writing-mode: horizontal-tb; }
  .rvp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rvt-card-top, .rvt-card-body { padding: 20px 18px; }
  .rvt-type-name { font-size: 18px; }
  .rvp-channels { flex-wrap: wrap; gap: 10px; }
}

/* ══════════════════════════════════════════
   OLIVE YOUNG MARKETING PAGE
   ══════════════════════════════════════════ */

/* ── 4대 서비스 그리드 ── */
.oy-services-section { position: relative; }

.oy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 56px;
}

.oy-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  padding: 32px 28px;
  transition: border-color .3s, transform .3s, box-shadow .3s;
  position: relative;
  overflow: hidden;
}
.oy-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 60%);
  pointer-events: none;
}
.oy-card:hover {
  border-color: rgba(3,199,90,0.3);
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(3,199,90,0.12);
}
.oy-card--ranking:hover { border-color: rgba(26,107,255,0.3); box-shadow: 0 20px 48px rgba(26,107,255,0.1); }
.oy-card--exposure:hover { border-color: rgba(245,158,11,0.3); box-shadow: 0 20px 48px rgba(245,158,11,0.1); }
.oy-card--conversion:hover { border-color: rgba(225,29,72,0.3); box-shadow: 0 20px 48px rgba(225,29,72,0.1); }

.oy-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.oy-card-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(var(--oc-rgb, 3,199,90), 0.12);
  border: 1px solid rgba(var(--oc-rgb, 3,199,90), 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--oc, #03c75a);
  flex-shrink: 0;
}
.oy-card--review .oy-card-icon-wrap { background: rgba(3,199,90,0.12); border-color: rgba(3,199,90,0.25); color: #03c75a; }
.oy-card--ranking .oy-card-icon-wrap { background: rgba(26,107,255,0.12); border-color: rgba(26,107,255,0.25); color: #1a6bff; }
.oy-card--exposure .oy-card-icon-wrap { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.25); color: #f59e0b; }
.oy-card--conversion .oy-card-icon-wrap { background: rgba(225,29,72,0.12); border-color: rgba(225,29,72,0.25); color: #e11d48; }

.oy-card-en {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin: 0 0 4px;
}
.oy-card-title {
  font-size: 20px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  margin: 0;
}
.oy-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.oy-tag {
  font-size: 12px;
  font-weight: 500;
  color: rgba(3,199,90,0.85);
  background: rgba(3,199,90,0.1);
  border: 1px solid rgba(3,199,90,0.2);
  border-radius: 20px;
  padding: 4px 12px;
}
.oy-card--ranking .oy-tag { color: rgba(26,107,255,0.9); background: rgba(26,107,255,0.1); border-color: rgba(26,107,255,0.2); }
.oy-card--exposure .oy-tag { color: rgba(245,158,11,0.9); background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.2); }
.oy-card--conversion .oy-tag { color: rgba(225,29,72,0.9); background: rgba(225,29,72,0.1); border-color: rgba(225,29,72,0.2); }

.oy-card-desc {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,0.62);
  margin-bottom: 20px;
}
.oy-card-desc strong { color: rgba(255,255,255,0.88); }

.oy-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.oy-card-list li {
  font-size: 13.5px;
  color: rgba(255,255,255,0.7);
  padding-left: 18px;
  position: relative;
}
.oy-card-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #03c75a;
  font-weight: 700;
  font-size: 12px;
}
.oy-card--ranking .oy-card-list li::before { color: #1a6bff; }
.oy-card--exposure .oy-card-list li::before { color: #f59e0b; }
.oy-card--conversion .oy-card-list li::before { color: #e11d48; }

/* 구매 전환 플로우 */
.oy-conversion-flow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px;
  background: rgba(225,29,72,0.06);
  border: 1px solid rgba(225,29,72,0.15);
  border-radius: 12px;
  margin-top: 16px;
}
.oy-cf-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  font-weight: 500;
}
.oy-cf-icon { font-size: 18px; }
.oy-cf-arrow {
  color: rgba(255,255,255,0.3);
  font-size: 16px;
  font-weight: 700;
}
.oy-cf-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #e11d48;
  font-weight: 700;
}
.oy-cf-result .oy-cf-icon { font-size: 20px; }

/* ── 카드 이미지 ── */
.oy-card-img-wrap {
  position: relative;
  width: calc(100% + 56px);
  height: 200px;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  margin: -28px -28px 20px -28px;
  background: #f0f4ff;
}
.oy-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f0f4ff;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94);
  display: block;
}
.oy-card:hover .oy-card-img { transform: scale(1.04); }
.oy-card-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4,8,20,0.45) 0%, rgba(4,8,20,0.05) 40%, transparent 100%);
  display: flex;
  align-items: flex-end;
  padding: 14px 16px;
}
.oy-card-img-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(3,199,90,0.22);
  border: 1px solid rgba(3,199,90,0.4);
  color: #03c75a;
}
.oy-card-img-badge--ranking {
  background: rgba(26,107,255,0.22);
  border-color: rgba(26,107,255,0.4);
  color: #1a6bff;
}
.oy-card-img-badge--exposure {
  background: rgba(245,158,11,0.22);
  border-color: rgba(245,158,11,0.4);
  color: #f59e0b;
}

/* ── 구매전환 강조 카드 ── */
.oy-card--conversion-highlight {
  background: linear-gradient(145deg, rgba(225,29,72,0.08) 0%, rgba(14,16,33,0.95) 40%);
  border: 1.5px solid rgba(225,29,72,0.35) !important;
  box-shadow: 0 0 32px rgba(225,29,72,0.1), 0 8px 24px rgba(0,0,0,0.4);
  position: relative;
  overflow: visible;
}
.oy-card--conversion-highlight::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(225,29,72,0.4), rgba(255,100,130,0.15), transparent 60%);
  z-index: 0;
  pointer-events: none;
}
.oy-card--conversion-highlight:hover {
  border-color: rgba(225,29,72,0.6) !important;
  box-shadow: 0 0 48px rgba(225,29,72,0.2), 0 20px 48px rgba(225,29,72,0.1);
  transform: translateY(-6px);
}
.oy-conversion-header {
  position: relative;
  z-index: 1;
}
.oy-conversion-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  color: #e11d48;
  background: rgba(225,29,72,0.12);
  border: 1px solid rgba(225,29,72,0.3);
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: 12px;
}
.oy-card-icon-wrap--conversion {
  background: rgba(225,29,72,0.15) !important;
  border-color: rgba(225,29,72,0.35) !important;
  color: #e11d48 !important;
  box-shadow: 0 0 16px rgba(225,29,72,0.2);
}
.oy-card-title--conversion {
  background: linear-gradient(90deg, #fff 30%, #e11d48 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.oy-card-desc--conversion {
  color: rgba(255,255,255,0.72) !important;
  font-size: 14px !important;
}
.oy-card-desc--conversion strong {
  color: #fff !important;
  font-weight: 700;
}
.oy-tag--conversion {
  color: rgba(225,29,72,0.9) !important;
  background: rgba(225,29,72,0.12) !important;
  border-color: rgba(225,29,72,0.3) !important;
}

/* 구매전환 KPI 배너 */
.oy-conversion-kpi {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 20px;
  padding: 16px 20px;
  background: rgba(225,29,72,0.08);
  border: 1px solid rgba(225,29,72,0.2);
  border-radius: 12px;
}
.oy-ckpi-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.oy-ckpi-item strong {
  font-size: 22px;
  font-weight: 800;
  color: #e11d48;
  line-height: 1;
}
.oy-ckpi-item span {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
}
.oy-ckpi-divider {
  width: 1px;
  height: 36px;
  background: rgba(225,29,72,0.2);
  flex-shrink: 0;
}

/* 하단 배너 */
.oy-scenario-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
  padding: 24px 32px;
  background: linear-gradient(135deg, rgba(3,199,90,0.1) 0%, rgba(26,107,255,0.08) 100%);
  border: 1px solid rgba(3,199,90,0.25);
  border-radius: 16px;
}
.oy-sb-icon { font-size: 28px; flex-shrink: 0; }
.oy-sb-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.oy-sb-text strong {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
}
.oy-sb-text span {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}
.oy-sb-btn {
  padding: 10px 22px;
  background: #03c75a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, transform .2s;
}
.oy-sb-btn:hover { background: #02a84c; transform: translateY(-1px); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .oy-grid { grid-template-columns: 1fr; gap: 16px; }
  .oy-scenario-banner { flex-direction: column; text-align: center; }
}
@media (max-width: 600px) {
  .oy-card { padding: 24px 20px; }
  .oy-card-title { font-size: 17px; }
  .oy-conversion-flow { justify-content: center; }
}


/* ══════════════════════════════════════════
   PPL MARKETING PAGE
   ══════════════════════════════════════════ */

/* ── 서비스 소개 + 강점 4개 ── */
.ppl-features-section { position: relative; }

.ppl-intro-wrap {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: start;
  margin-top: 16px;
}

.ppl-intro-left .sec-title {
  font-size: clamp(26px, 3.5vw, 38px);
}

.ppl-intro-desc {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255,255,255,0.65);
}
.ppl-intro-desc strong { color: rgba(255,255,255,0.9); }

.ppl-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 16px;
}
.ppl-kw {
  font-size: 13px;
  font-weight: 600;
  color: rgba(239,68,68,0.85);
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: 20px;
  padding: 6px 14px;
}

.ppl-intro-note {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  border-left: 2px solid rgba(239,68,68,0.3);
  padding-left: 10px;
  margin-top: 8px;
}

/* 강점 카드 4개 */
.ppl-intro-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ppl-feat-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  transition: border-color .3s, transform .25s;
}
.ppl-feat-card:hover {
  border-color: rgba(239,68,68,0.25);
  transform: translateX(4px);
}

.ppl-feat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.ppl-feat-body h4 {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin: 0 0 6px;
}
.ppl-feat-body p {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255,255,255,0.55);
  margin: 0;
}

/* ── 에피소드 기획 PPL ── */
.ppl-episode-section { position: relative; }

.ppl-episode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 52px;
}

.ppl-ep-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.ppl-ep-card:hover {
  border-color: rgba(239,68,68,0.35);
  box-shadow: 0 20px 50px rgba(239,68,68,0.1);
  transform: translateY(-4px);
}

.ppl-ep-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef4444, #fb923c);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ppl-ep-num span {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.ppl-ep-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.ppl-ep-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: -0.02em;
}

/* 모의 방송 화면 */
.ppl-ep-visual { margin-bottom: 20px; }

/* 실제 이미지 래퍼 */
.ppl-ep-img-wrap {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
}
.ppl-ep-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94);
}
.ppl-ep-card:hover .ppl-ep-img { transform: scale(1.04); }
.ppl-ep-img-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(239,68,68,0.95);
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 20px;
  padding: 4px 12px;
  backdrop-filter: blur(4px);
}
.ppl-ep-img-badge--orange {
  color: rgba(251,146,60,0.95);
  background: rgba(251,146,60,0.12);
  border-color: rgba(251,146,60,0.3);
}

.ppl-ep-mock {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
}

.ppl-ep-screen {
  background: #0a0a12;
  aspect-ratio: 16/9;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ppl-ep-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(239,68,68,0.05) 0%, transparent 60%);
}

.ppl-ep-scene {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
}

.ppl-ep-poster {
  display: flex;
  gap: 12px;
  align-items: center;
}
.ppl-ep-poster-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ppl-ep-poster-img {
  width: 68px;
  height: 80px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ppl-ep-poster-label {
  font-size: 9px;
  color: rgba(255,255,255,0.4);
  text-align: center;
}

.ppl-ep-play-badge {
  font-size: 11px;
  color: rgba(239,68,68,0.85);
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 20px;
  padding: 4px 12px;
  text-align: center;
}

/* 제품 노출 씬 */
.ppl-ep-scene--product {
  background: linear-gradient(160deg, rgba(251,146,60,0.06) 0%, transparent 70%);
}
.ppl-ep-product-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.ppl-ep-product-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ppl-ep-product-label {
  font-size: 10px;
  color: rgba(239,68,68,0.7);
}
.ppl-ep-product-hand {
  opacity: 0.6;
}

.ppl-ep-label-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: rgba(0,0,0,0.5);
  font-size: 11.5px;
  color: rgba(255,255,255,0.5);
  border-top: 1px solid rgba(255,255,255,0.07);
  letter-spacing: 0.01em;
}

.ppl-ep-desc {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255,255,255,0.65);
  margin: 18px 0 0;
  word-break: keep-all;
}

/* 에피소드 배너 */
.ppl-episode-banner {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 44px;
  padding: 26px 32px;
  background: linear-gradient(135deg, rgba(239,68,68,0.12) 0%, rgba(251,146,60,0.07) 100%);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(239,68,68,0.06);
}
.ppl-eb-icon {
  font-size: 28px;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 50%;
}
.ppl-eb-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ppl-eb-text strong {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  letter-spacing: -0.01em;
}
.ppl-eb-text span {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.55);
  word-break: keep-all;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .ppl-intro-wrap { grid-template-columns: 1fr; gap: 36px; }
  .ppl-episode-grid { grid-template-columns: 1fr; }
  .ppl-episode-banner { flex-direction: column; text-align: center; }
}
@media (max-width: 600px) {
  .ppl-ep-card { padding: 20px 18px; }
  .ppl-feat-card { padding: 16px 18px; }
}


/* ══════════════════════════════════════════
   INSTAGRAM SEEDING SECTION
   ══════════════════════════════════════════ */

/* ── 핵심 특징 태그 바 ── */
.sdng-insta-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: -16px 0 36px;
}
.sdng-insta-feat {
  font-size: 13px;
  font-weight: 600;
  padding: 7px 18px;
  border-radius: 20px;
  border: 1px solid rgba(225,48,108,0.3);
  background: rgba(225,48,108,0.08);
  color: rgba(225,48,108,0.9);
  letter-spacing: .02em;
}

/* ── 인스타 배지 ── */
.sdng-panel-badge--insta-basic {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.2);
}
.sdng-panel-badge--insta-specialized {
  background: linear-gradient(135deg, #e1306c, #833ab4);
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px rgba(225,48,108,0.4);
}

/* ── 패널 배경 (이미지 없는 그라디언트) ── */
.sdng-insta-panel-bg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sdng-insta-panel-bg--basic {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
}
.sdng-insta-panel-bg--specialized {
  background: linear-gradient(135deg, #1a0a14 0%, #2d0b22 40%, #3d0f33 100%);
}

/* ── 피드 그리드 모의 UI (Basic) ── */
.sdng-insta-grid-mock {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  width: 220px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  position: relative;
  z-index: 1;
}
.sdng-insta-cell {
  aspect-ratio: 1;
  border-radius: 2px;
}
.sdng-insta-cell--1 { background: linear-gradient(135deg,rgba(255,100,130,0.5),rgba(255,150,80,0.4)); }
.sdng-insta-cell--2 { background: linear-gradient(135deg,rgba(100,180,255,0.5),rgba(80,120,220,0.4)); }
.sdng-insta-cell--3 { background: linear-gradient(135deg,rgba(100,220,150,0.5),rgba(60,180,120,0.4)); }
.sdng-insta-cell--4 { background: linear-gradient(135deg,rgba(200,150,255,0.5),rgba(150,80,220,0.4)); }
.sdng-insta-cell--5 { background: linear-gradient(135deg,rgba(255,200,80,0.5),rgba(220,150,40,0.4)); }
.sdng-insta-cell--6 { background: linear-gradient(135deg,rgba(255,100,130,0.4),rgba(200,60,100,0.5)); }

/* ── 타깃 모의 UI (Specialized) ── */
.sdng-insta-target-mock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.sdng-insta-target-ring {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid rgba(225,48,108,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 24px rgba(225,48,108,0.25), 0 0 48px rgba(131,58,180,0.15);
  animation: sdng-insta-pulse 2.4s ease-in-out infinite;
}
@keyframes sdng-insta-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(225,48,108,0.25), 0 0 40px rgba(131,58,180,0.1); }
  50%       { box-shadow: 0 0 32px rgba(225,48,108,0.45), 0 0 64px rgba(131,58,180,0.25); }
}
.sdng-insta-target-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.sdng-insta-target-inner span {
  font-size: 11px;
  color: rgba(225,48,108,0.85);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sdng-insta-hashtag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  max-width: 200px;
}
.sdng-insta-hashtag-cloud span {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 3px 10px;
}

/* ── 태그 인스타 색상 ── */
.sdng-insta-ptag {
  color: rgba(225,48,108,0.85) !important;
  background: rgba(225,48,108,0.09) !important;
  border-color: rgba(225,48,108,0.2) !important;
}
.sdng-insta-ptag--spec {
  color: rgba(131,58,180,0.9) !important;
  background: rgba(131,58,180,0.1) !important;
  border-color: rgba(131,58,180,0.22) !important;
}

/* ── 하단 배너 ── */
.sdng-insta-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 36px;
  padding: 22px 28px;
  background: linear-gradient(135deg, rgba(225,48,108,0.1) 0%, rgba(131,58,180,0.07) 100%);
  border: 1px solid rgba(225,48,108,0.22);
  border-radius: 14px;
}
.sdng-insta-banner-icon { font-size: 26px; flex-shrink: 0; }
.sdng-insta-banner-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sdng-insta-banner-text strong {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
}
.sdng-insta-banner-text span {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}

@media (max-width: 600px) {
  .sdng-insta-banner { flex-direction: column; text-align: center; }
  .sdng-insta-grid-mock { width: 160px; }
}


/* ── Admin Login Button (Footer) ── */
.admin-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: rgba(255,255,255,0.25);
  font-size: 13px;
  text-decoration: none;
  margin-left: 12px;
  transition: all .2s;
  vertical-align: middle;
  cursor: pointer;
}
.admin-login-btn:hover {
  background: rgba(26,107,255,0.2);
  border-color: rgba(26,107,255,0.4);
  color: #1a6bff;
}

/* ══════════════════════════════════════════════════════════════
   SCROLL REVEAL — 마케팅 상세 페이지 공통 진입 애니메이션
══════════════════════════════════════════════════════════════ */

/* 기본 초기 숨김 상태 (JS가 적용하기 전 FOUC 방지용 선택적 사용) */
[data-sr-ready="1"] {
  will-change: opacity, transform;
}

/* svc-intro 좌우 분할 */
.svc-intro-text,
.svc-intro-visual {
  transition: opacity 0.75s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 0.75s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* 프로세스 스텝 이미지 호버 오버레이 */
.sps-img-wrap { overflow: hidden; border-radius: 16px; }

/* srg-metric 카운터업 강조 */
.srg-metric strong {
  display: inline-block;
  transition: transform 0.3s;
}
.srg-card:hover .srg-metric strong {
  transform: scale(1.06);
}

/* section-head 기본 위치 (JS 초기화 전 보이도록 유지 — JS가 덮어쓰기) */
.section-head { }


/* ══════════════════════════════════════
   킥오프 미팅 신청 — 재설계 CSS
   ══════════════════════════════════════ */

/* 단일 컬럼 폼 래퍼 */
.ct-kickoff-form-solo {
  max-width: 680px;
  margin: 0 auto;
  padding-bottom: 80px;
}

/* 섹션 공통 */
.kf-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 28px 28px 24px;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.kf-section--visible {
  opacity: 1;
  transform: translateY(0);
}
/* STEP 1(미팅 방식)은 처음부터 보임 */
.kf-section:first-of-type,
.kf-method-section {
  opacity: 1;
  transform: translateY(0);
}

/* 섹션 헤더 */
.kf-section-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}
.kf-step-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(160,120,255,0.15);
  border: 1px solid rgba(160,120,255,0.35);
  color: rgba(160,120,255,0.95);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.kf-section-title {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  margin-bottom: 4px;
  line-height: 1.4;
}
.kf-section-desc {
  font-size: 12.5px;
  color: rgba(255,255,255,0.38);
  line-height: 1.5;
  margin: 0;
}

/* ── 미팅 방식 카드 ── */
.kf-method-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kf-method-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
.kf-method-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.kf-mc-icon {
  font-size: 26px;
  flex-shrink: 0;
  line-height: 1;
}
.kf-mc-body {
  flex: 1;
}
.kf-mc-body strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  margin-bottom: 3px;
}
.kf-mc-body p {
  font-size: 12.5px;
  color: rgba(255,255,255,0.42);
  margin: 0;
}
.kf-mc-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.kf-mc-check svg { opacity: 0; transition: opacity 0.2s ease; }
.kf-method-card:hover {
  border-color: rgba(160,120,255,0.4);
  background: rgba(160,120,255,0.05);
}
.kf-method-card.kf-mc--selected {
  border-color: rgba(160,120,255,0.7);
  background: rgba(160,120,255,0.1);
  box-shadow: 0 0 0 1px rgba(160,120,255,0.2), 0 4px 20px rgba(160,120,255,0.1);
}
.kf-method-card.kf-mc--selected .kf-mc-check {
  background: rgba(160,120,255,0.9);
  border-color: rgba(160,120,255,0.9);
}
.kf-method-card.kf-mc--selected .kf-mc-check svg { opacity: 1; }
.kf-method-card.kf-mc--selected .kf-mc-body strong {
  color: rgba(220,200,255,0.96);
}

/* ── 주소 검색 ── */
.cf-row--addr {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 0;
}
.kf-addr-search-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  height: 48px;
  background: rgba(160,120,255,0.14);
  border: 1.5px solid rgba(160,120,255,0.4);
  border-radius: 8px;
  color: rgba(200,175,255,0.92);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}
.kf-addr-search-btn:hover {
  background: rgba(160,120,255,0.25);
  border-color: rgba(160,120,255,0.65);
}
.kf-address-wrap { display: flex; flex-direction: column; gap: 0; }

/* ── 인원 칩 ── */
.kf-members-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.kf-member-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 40px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  transition: all 0.2s ease;
  background: rgba(255,255,255,0.03);
}
.kf-member-chip input { position: absolute; opacity: 0; width:0; height:0; }
.kf-member-chip:hover {
  border-color: rgba(160,120,255,0.45);
  color: rgba(220,200,255,0.9);
}
.kf-member-chip:has(input:checked) {
  border-color: rgba(160,120,255,0.7);
  background: rgba(160,120,255,0.12);
  color: rgba(220,200,255,0.96);
  box-shadow: 0 0 0 1px rgba(160,120,255,0.2);
}

/* ── 일정 블록 ── */
.kf-schedule-block {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 16px 18px;
}
.kf-schedule-rank {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 12px;
}
.kf-rank--1 {
  background: rgba(160,120,255,0.18);
  color: rgba(200,175,255,0.95);
  border: 1px solid rgba(160,120,255,0.35);
}
.kf-rank--2 {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.1);
}
.kf-schedule-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 12px;
  color: rgba(160,120,255,0.65);
  line-height: 1.5;
}

/* ── 사전질문 textarea ── */
.kf-textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 14px 16px;
  color: rgba(255,255,255,0.85);
  font-size: 13.5px;
  line-height: 1.7;
  resize: vertical;
  min-height: 100px;
  transition: border-color 0.2s ease;
  font-family: inherit;
}
.kf-textarea::placeholder { color: rgba(255,255,255,0.25); }
.kf-textarea:focus {
  outline: none;
  border-color: rgba(160,120,255,0.5);
  background: rgba(160,120,255,0.04);
}

/* ── 킥오프 완료 화면 ── */
.ct-kickoff-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 20px 80px;
  animation: ctFormIn 0.5s ease forwards;
}
.ckd-icon { font-size: 52px; margin-bottom: 20px; }
.ckd-title {
  font-size: 26px;
  font-weight: 800;
  color: rgba(255,255,255,0.95);
  margin-bottom: 18px;
  line-height: 1.3;
}
.ckd-msg {
  font-size: 15px;
  color: rgba(200,210,255,0.75);
  line-height: 1.9;
  margin-bottom: 32px;
}
.ckd-msg strong { color: rgba(220,200,255,0.95); }
.ckd-info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(160,120,255,0.07);
  border: 1px solid rgba(160,120,255,0.18);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 28px;
  width: 100%;
  max-width: 440px;
}
.ckd-info-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: rgba(200,185,255,0.8);
  text-align: left;
  line-height: 1.5;
}
.ckd-contact {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
}
.ckd-contact a {
  color: rgba(160,120,255,0.9);
  font-weight: 600;
  text-decoration: none;
}
.ckd-contact a:hover { color: #fff; }

/* ── 작성 내용 보기 버튼 ── */
.cs-review-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 4px;
  color: rgba(255,255,255,0.5);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.2s ease;
}
.cs-review-btn:hover {
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.8);
  border-color: rgba(255,255,255,0.3);
}

/* ── 작성내용 보기 모달 본문 ── */
.srm-box { max-width: 480px; }
.srm-list { display: flex; flex-direction: column; gap: 0; }
.srm-row {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13.5px;
  line-height: 1.5;
}
.srm-row:last-child { border-bottom: none; }
.srm-key {
  flex-shrink: 0;
  width: 100px;
  color: rgba(255,255,255,0.38);
  font-size: 12px;
  padding-top: 1px;
}
.srm-val {
  flex: 1;
  color: rgba(255,255,255,0.82);
  word-break: break-all;
}


/* ── 킥오프 폼: 담당자 정보 섹션 ── */
.kf-contact-section {
  background: rgba(160,120,255,0.04);
  border: 1px solid rgba(160,120,255,0.15);
  border-radius: 12px;
  padding: 28px 28px 24px;
}
.kf-contact-grid { display: flex; flex-direction: column; gap: 0; }
.cf-label {
  display: block;
  font-size: 11.5px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 7px;
  letter-spacing: 0.02em;
}

/* ── 킥오프 완료: 작성 내용 보기 버튼 ── */
.ckd-review-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  background: rgba(160,120,255,0.08);
  border: 1px solid rgba(160,120,255,0.25);
  border-radius: 4px;
  color: rgba(200,170,255,0.7);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 20px;
  transition: all 0.2s ease;
}
.ckd-review-btn:hover {
  background: rgba(160,120,255,0.15);
  color: rgba(220,200,255,0.95);
  border-color: rgba(160,120,255,0.5);
}

/* ── 작성내용 모달: 소스 제목 ── */
.srm-source-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(160,120,255,0.85);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(160,120,255,0.15);
  margin-bottom: 4px;
}

/* ── 반응형: 킥오프 담당자 ── */
@media (max-width: 640px) {
  .kf-contact-section { padding: 20px 16px; }
}

/* ── 킥오프: 인애드컴퍼니 고정 주소 카드 ── */
.kf-fixed-addr-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: rgba(160,120,255,0.06);
  border: 1.5px solid rgba(160,120,255,0.25);
  border-radius: 12px;
}
.kf-fixed-addr-main {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  line-height: 1.5;
  margin: 0 0 5px;
}
.kf-fixed-addr-sub {
  font-size: 12px;
  color: rgba(160,120,255,0.7);
  margin: 0;
}

/* ════════════════════════════════════════════
   SVC-FAQ — 자주 하는 질문 아코디언
════════════════════════════════════════════ */
.svc-faq-section { position: relative; }

.faq-wrap {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (max-width: 860px) {
  .faq-wrap { max-width: 100%; }
}

.faq-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.faq-item:hover {
  border-color: rgba(26,107,255,0.3);
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}
.faq-item.faq-item--open {
  border-color: rgba(26,107,255,0.35);
  box-shadow: 0 6px 32px rgba(26,107,255,0.08);
}

/* 질문 버튼 */
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background .2s;
}
.faq-q:hover { background: rgba(255,255,255,0.03); }
.faq-item--open .faq-q { background: rgba(26,107,255,0.05); }

.faq-q-left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.faq-q-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a6bff, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.02em;
}
.faq-q-text {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  line-height: 1.5;
  word-break: keep-all;
}
.faq-chevron {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.35);
  transition: transform .3s, background .2s, border-color .2s, color .2s;
}
.faq-item--open .faq-chevron {
  transform: rotate(180deg);
  background: rgba(26,107,255,0.12);
  border-color: rgba(26,107,255,0.35);
  color: #3b82f6;
}

/* 답변 */
.faq-a {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.faq-item--open .faq-a {
  max-height: 400px;
  opacity: 1;
}
.faq-a-inner {
  padding: 0 24px 22px 64px;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255,255,255,0.58);
  word-break: keep-all;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 16px;
}
.faq-a-inner strong {
  color: rgba(255,255,255,0.82);
  font-weight: 600;
}

/* 모바일 */
@media (max-width: 640px) {
  .faq-q { padding: 16px 18px; }
  .faq-a-inner { padding: 14px 18px 18px 18px; }
  .faq-q-text { font-size: 14px; }
}