/* ─────────────────────────────────────────────
   main.css :  다날핀테크 index.html 전용 스타일
   공통 기반: b-style.css
───────────────────────────────────────────── */

/* ══════════════════════════════════════════
   HERO: centered single-column
══════════════════════════════════════════ */

.hero-c {
  max-width: 720px;
  margin: 0 auto;
  padding: 100px 24px 96px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-c .hero-kicker {
  justify-content: center;
}

.hero-h1 {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1.3;
  letter-spacing: normal;
  margin-bottom: 20px;
}

.hero-sub {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255,255,255,.58);
  max-width: 480px;
  margin-bottom: 36px;
  font-weight: 400;
  letter-spacing: normal;
}

.hero-c .hero-actions {
  justify-content: center;
}


/* ══════════════════════════════════════════
   INFRA SECTION
══════════════════════════════════════════ */
.infra-sec {
  background: #FFFFFF;
  padding: 0 0 48px;
}
.infra-sec-head {
  text-align: center;
  padding: 44px 24px 28px;
}
.infra-sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6666FE;
  opacity: .75;
  margin-bottom: 12px;
}
.infra-sec-eyebrow svg, .infra-sec-eyebrow i { opacity: .8; }
.infra-sec-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 8px;
  letter-spacing: normal;
}
.infra-sec-sub {
  font-size: .85rem;
  color: #64748B;
  line-height: 1.65;
  max-width: 400px;
  margin: 0 auto;
}


/* ══════════════════════════════════════════
   INFRA SCENE: canvas 영역
══════════════════════════════════════════ */
.infra-scene {
  position: relative;
  width: 100%;
  min-height: 360px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  isolation: isolate;
}
.infra-scene canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* 좌·우 노드 컬럼 */
.inode-col { display: flex; flex-direction: column; gap: 10px; z-index: 2; position: relative; }
.inode-col-left  { justify-content: center; gap: 16px; padding: 0; margin-right: auto; min-width: 168px; align-self: center; }
.inode-col-right { justify-content: space-between; padding: 32px 0; margin-left: auto; min-width: 184px; }

/* 노드 카드 */
.inode {
  display: flex; align-items: center; gap: 10px;
  background: #FFFFFF;
  border: 1.5px solid #DDD8F8;
  border-radius: 10px; padding: 10px 14px;
  transition: border-color .35s ease, background .35s ease, box-shadow .35s ease;
  cursor: default;
}
.inode-icon {
  width: 32px; height: 32px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .35s ease;
}
.inode-name { font-size: .92rem; font-weight: 700; color: #1E293B; line-height: 1.2; transition: color .35s ease; }
.inode-sub  { font-size: .64rem; color: #94A3B8; margin-top: 2px; }

/* 허브 카드 (중앙) */
.infra-hub {
  position: relative; z-index: 2; margin: 0 14px; flex-shrink: 0;
  align-self: center; display: flex; align-items: center;
}
.infra-hub-card {
  width: 126px;
  background: #fff;
  border: 1.5px solid #DDD8F8;
  border-radius: 14px;
  padding: 22px 14px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: 0 2px 14px rgba(102,102,254,.08);
  transition: border-color .3s, box-shadow .3s;
}
.infra-hub.hub-spinning .infra-hub-card {
  border-color: rgba(102,102,254,.65);
  box-shadow: 0 4px 22px rgba(102,102,254,.2), 0 0 0 2px rgba(102,102,254,.08);
}
.infra-hub-logo-img { width: 80px; height: auto; display: block; opacity: .92; }
.infra-hub-texts    { text-align: center; width: 100%; }
.infra-hub-label {
  font-size: .82rem; font-weight: 800; color: #1E293B;
  letter-spacing: .01em; line-height: 1.2;
}
.infra-hub-status {
  font-size: .65rem; font-weight: 600; color: #475569;
  line-height: 1.35; text-align: center; min-height: 1.35em;
  transition: color .3s ease; word-break: keep-all;
}
.infra-hub.hub-spinning .infra-hub-status { color: #6666FE; }

/* 로딩 바 */
@keyframes hub-bar-slide {
  0%   { left: -60%; }
  100% { left: 110%; }
}
.infra-hub-bar-track {
  width: 82%; height: 3px;
  background: rgba(102,102,254,.1);
  border-radius: 2px; overflow: hidden;
  position: relative; opacity: 0;
  transition: opacity .3s ease;
}
.infra-hub.hub-spinning .infra-hub-bar-track { opacity: 1; }
.infra-hub-bar-fill {
  position: absolute; top: 0; left: -60%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, #6666FE 40%, #A5B4FC 70%, transparent);
  border-radius: 2px;
  animation: hub-bar-slide 1.25s ease-in-out infinite;
  animation-play-state: paused;
}
.infra-hub.hub-spinning .infra-hub-bar-fill { animation-play-state: running; }

/* 하단 레이블: 사용 안 함 */
.infra-label { display: none; }


/* ══════════════════════════════════════════
   CTA 섹션: 제목 사이즈 조정
══════════════════════════════════════════ */
.cta-h2 {
  font-size: clamp(1.35rem, 2.2vw, 2rem);
}


/* ══════════════════════════════════════════
   파트너사 로고 그리드
══════════════════════════════════════════ */
.partners-flat {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
}

.partners-flat-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 156px;
  height: 72px;
  background: #fff;
  border: 1.5px solid #E8ECF2;
  border-radius: 10px;
  padding: 14px 20px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.partners-flat-item:hover {
  border-color: #C5CDD8;
  box-shadow: 0 3px 10px rgba(0,0,0,.07);
}

.partners-flat-item img {
  max-width: 100%;
  width: auto;
  height: 32px;
  object-fit: contain;
  opacity: .7;
  filter: grayscale(15%);
  transition: opacity .2s ease, filter .2s ease;
}

/* 시각적 무게 보정: 로고 이미지 내부 여백으로 인해 작아 보이는 경우 개별 키움 */
.partners-flat-item img.partner-logo-lg {
  height: 44px;
}

/* 아이콘+워드마크가 결합된 가로형 로고는 컨테이너를 넓혀 높이 통일 유지 */
.partners-flat-item.partner-item-wide {
  width: 208px;
}

/* 매우 긴 순수 워드마크(예: suho.io)는 한층 더 넓은 컨테이너 + 소폭 축소된 높이 */
.partners-flat-item.partner-item-xwide {
  width: 240px;
}
.partners-flat-item img.partner-logo-xwide {
  height: 22px;
}

.partners-flat-item:hover img {
  opacity: 1;
  filter: none;
}

/* 아직 로고 준비 안 된 파트너를 위한 텍스트 플레이스홀더 */
.partners-flat-placeholder {
  background: #FAFBFC;
}
.partners-flat-placeholder span {
  font-family: 'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,system-ui,'Noto Sans KR','Apple SD Gothic Neo',sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #94A3B8;
  transition: color .2s ease;
}
.partners-flat-placeholder:hover span {
  color: #475569;
}

@media (max-width: 640px) {
  .partners-flat-item,
  .partners-flat-item.partner-item-wide,
  .partners-flat-item.partner-item-xwide {
    width: calc(50% - 6px);
    height: 64px;
  }
  .partners-flat-item img {
    height: 28px;
  }
  .partners-flat-item img.partner-logo-lg {
    height: 38px;
  }
  .partners-flat-item img.partner-logo-xwide {
    height: 18px;
  }
  .partners-flat-placeholder span {
    font-size: .76rem;
  }
}


/* ══════════════════════════════════════════
   INFRA SCENE: 반응형
══════════════════════════════════════════ */

/* 태블릿 */
@media (max-width: 960px) {
  .infra-scene { min-height: 340px; }
  .inode-col-left  { min-width: 140px; gap: 14px; }
  .inode-col-right { min-width: 156px; padding: 24px 0; }
  .inode { padding: 8px 10px; gap: 8px; border-radius: 9px; }
  .inode-icon { width: 26px; height: 26px; font-size: .78rem; border-radius: 6px; }
  .inode-name { font-size: .72rem; }
  .inode-sub  { font-size: .6rem; }
  .infra-hub-card { width: 112px; padding: 12px 10px 10px; gap: 5px; }
  .infra-hub-logo-img { width: 50px; }
  .infra-hub-label  { font-size: .76rem; }
  .infra-hub-status { font-size: .6rem; }
  .infra-hub { margin: 0 10px; }
}

/* ─── 모바일: 수직 스택 레이아웃 ───
   상단: [KRW] [KSC] (2개)
   중앙: [IEUM HUB]
   하단: [Wallet][KYC][PoR][Blockchain][Audit] (5개)
   신호는 위→아래로 흐르고, 반환은 아래→위로 흐름 */
@media (max-width: 640px) {
  .infra-sec { padding: 0 0 28px; }
  .infra-sec-head { padding: 28px 16px 18px; }
  .infra-sec-title { font-size: 1.125rem; }
  .infra-sec .wrap { padding: 0 12px; }

  .infra-scene {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: auto;
    gap: 44px;               /* 행 사이 간격: 베지어 커브 공간 */
    padding: 20px 0 24px;
  }

  /* 각 컬럼을 가로 행으로 변환 */
  .inode-col {
    flex-direction: row;
    width: 100%;
    gap: 8px;
    min-width: 0;
    padding: 0;
    margin: 0;
  }
  .inode-col-left {
    justify-content: center;
    gap: 40px;               /* KRW-KSC 사이 여유 */
    align-self: auto;
  }
  .inode-col-right {
    justify-content: space-between;
    gap: 6px;
    padding: 0 2px;
  }

  .infra-hub {
    margin: 0 auto;
    align-self: center;
  }

  /* 노드: 아이콘 위, 이름 아래 (세로 카드) */
  .inode {
    flex-direction: column;
    text-align: center;
    padding: 8px 4px 7px;
    gap: 5px;
    border-radius: 9px;
    border-width: 1px;
    min-width: 0;
    flex: 1 1 auto;
    max-width: 72px;
  }
  .inode-icon {
    width: 26px; height: 26px;
    font-size: .78rem;
    border-radius: 6px;
  }
  .inode-name {
    font-size: .56rem;
    line-height: 1.2;
    font-weight: 700;
    word-break: keep-all;
    text-align: center;
  }
  .inode-sub { display: none; }

  /* 좌측(KRW/KSC)은 여유가 있어 약간 크게 */
  .inode-col-left .inode { max-width: 92px; min-width: 84px; padding: 9px 10px; }
  .inode-col-left .inode-icon { width: 30px; height: 30px; font-size: .88rem; }
  .inode-col-left .inode-name { font-size: .68rem; }

  /* 허브 카드 */
  .infra-hub-card {
    width: 150px;
    padding: 12px 14px 11px;
    border-radius: 12px;
    gap: 5px;
    border-width: 1px;
  }
  .infra-hub-logo-img { width: 48px; }
  .infra-hub-label    { font-size: .82rem; }
  .infra-hub-status   { font-size: .62rem; min-height: 1.3em; }
  .infra-hub-bar-track { height: 2.5px; width: 85%; }
}

/* 아주 작은 화면 (iPhone SE 등 ≤ 380px) */
@media (max-width: 380px) {
  .infra-scene { gap: 38px; }
  .inode-col-left { gap: 28px; }
  .inode-col-left .inode { max-width: 82px; min-width: 76px; padding: 8px; }
  .inode-col-left .inode-icon { width: 26px; height: 26px; }
  .inode-col-left .inode-name { font-size: .62rem; }

  .inode { padding: 6px 3px 6px; gap: 4px; max-width: 62px; }
  .inode-icon { width: 22px; height: 22px; font-size: .68rem; }
  .inode-name { font-size: .52rem; }

  .infra-hub-card { width: 132px; padding: 10px 12px 9px; }
  .infra-hub-logo-img { width: 42px; }
  .infra-hub-label    { font-size: .76rem; }
  .infra-hub-status   { font-size: .58rem; }
}


/* ═══════════════════════════════════════════
   홈(index.html) 전용 스타일
═══════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   다날핀테크 홈(index.html)
   bridge.xyz 구조/톤 참고 (미니멀, 타이포 중심)
   공통 기반: b-style.css
───────────────────────────────────────────── */

/* ══════════════════════════════════════════
   공통 변수 & 타이포
══════════════════════════════════════════ */
.v-body {
  background: #FFFFFF;
  color: #0A0A0A;
}

/* 투명한 블러 헤더 (배경이 비치도록) */
.v-body .hd.light {
  background: rgba(255,255,255,.55);
  border-bottom: 1px solid rgba(15,23,42,.05);
  box-shadow: 0 1px 0 rgba(15,23,42,.02);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

/* Contact Us 버튼: 페이지 톤에 맞춘 블랙 필 버튼 */
.v-body .btn-contact {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border-radius: 999px;
  background: #0A0A0A;
  color: #FFFFFF;
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: -.005em;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.v-body .btn-contact:hover {
  background: #222;
  box-shadow: 0 6px 20px -8px rgba(10,10,10,.3);
  transform: translateY(-1px);
}

/* 모바일 햄버거 — 배경 톤에 맞춰 잉크 컬러 */
.v-body .hd-ham span { background: #0A0A0A; }


.v-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
}

@media (max-width: 640px) {
  .v-wrap { padding: 0 20px; }
}

/* ══════════════════════════════════════════
   TOP ANNOUNCEMENT BAR
══════════════════════════════════════════ */
.v-ann {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1001;
  background: #0A0A0A;
  color: #FFFFFF;
  font-size: .82rem;
  padding: 10px 20px;
  text-align: center;
  letter-spacing: -.005em;
}
.v-ann a {
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity .2s;
}
.v-ann a:hover { opacity: .75; }
.v-ann .tag {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(255,255,255,.12);
  padding: 3px 8px;
  border-radius: 4px;
  margin-right: 10px;
}
.v-ann .arr { transition: transform .2s; }
.v-ann a:hover .arr { transform: translateX(3px); }

/* ══════════════════════════════════════════
   HERO — 큰 타이포그래피 중심
══════════════════════════════════════════ */
/* ── Hero + Animation 공통 배경 래퍼 ── */
.v-hero-group {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.v-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 820px 480px at 88% 12%, rgba(102,102,254,.22) 0%, transparent 58%),
    radial-gradient(ellipse 780px 480px at 8% 88%, rgba(55,207,255,.20) 0%, transparent 58%),
    radial-gradient(ellipse 560px 420px at 50% 42%, rgba(167,139,250,.14) 0%, transparent 62%),
    linear-gradient(180deg, #F1F4FB 0%, #F6F8FC 45%, #FCFDFE 100%);
}
.v-hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15,23,42,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 960px 560px at 50% 42%, rgba(0,0,0,.95) 0%, rgba(0,0,0,.45) 55%, transparent 82%);
  mask-image: radial-gradient(ellipse 960px 560px at 50% 42%, rgba(0,0,0,.95) 0%, rgba(0,0,0,.45) 55%, transparent 82%);
}
.v-hero-bg::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 200px;
  background: linear-gradient(180deg, transparent 0%, #FFFFFF 100%);
}

.v-hero {
  position: relative;
  padding: 200px 0 56px;
  background: transparent;
  overflow: hidden;
}

.v-hero-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}

.v-hero h1 {
  font-family: 'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  font-weight: 800;
  color: #0A0A0A;
  margin: 0 0 20px;
  word-break: keep-all;
}

.v-hero-lead {
  font-size: clamp(.98rem, 1.25vw, 1.12rem);
  line-height: 1.6;
  color: #4A4A4A;
  max-width: 720px;
  margin: 0 auto 36px;
  font-weight: 400;
  letter-spacing: -.005em;
  word-break: keep-all;
}

.v-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0A0A0A;
  color: #FFFFFF;
  font-weight: 600;
  font-size: .98rem;
  padding: 16px 30px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.v-hero-cta:hover {
  background: #222;
  transform: translateY(-1px);
}
.v-hero-cta .arr { transition: transform .2s; }
.v-hero-cta:hover .arr { transform: translateX(3px); }

@media (max-width: 960px) {
  .v-hero { padding: 148px 0 40px; }
  .v-hero-inner { padding: 0 28px; }
}
@media (max-width: 640px) {
  .v-hero { padding: 120px 0 28px; }
  .v-hero-inner { padding: 0 20px; }
  .v-hero-lead { margin-bottom: 32px; }
  .v-hero-cta { font-size: .94rem; padding: 14px 26px; }
}

/* ══════════════════════════════════════════
   PARTNER STRIP
══════════════════════════════════════════ */
.v-trust {
  padding: 16px 0 96px;
  background: #FFFFFF;
}
.v-trust-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  font-size: .98rem;
  font-weight: 600;
  color: #1F1F1F;
  margin: 0 0 36px;
  letter-spacing: -.01em;
}
.v-trust-label::before,
.v-trust-label::after {
  content: '';
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #C8C8C4);
}
.v-trust-label::after {
  background: linear-gradient(90deg, #C8C8C4, transparent);
}
.v-trust-label .v-trust-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6666FE;
  box-shadow: 0 0 0 3px rgba(102,102,254,.15);
  margin-right: 2px;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .v-trust-label {
    font-size: .9rem;
    gap: 12px;
  }
  .v-trust-label::before,
  .v-trust-label::after { width: 20px; }
}
.v-trust-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: 40px;
  column-gap: 56px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 40px;
}
.v-trust-logos img {
  height: 28px;
  width: auto;
  opacity: .62;
  filter: grayscale(100%);
  transition: opacity .25s, filter .25s;
}
.v-trust-logos img:hover {
  opacity: 1;
  filter: grayscale(0%);
}
.v-trust-logos img.v-logo-xl { height: 52px; }
.v-trust-logos img.v-logo-lg { height: 36px; }
.v-trust-logos img.v-logo-md { height: 32px; }
.v-trust-logos img.v-logo-sm { height: 24px; }
.v-trust-logos img.v-logo-xs { height: 20px; }
.v-trust-logos img.v-logo-xxs { height: 16px; }

@media (max-width: 960px) {
  .v-trust-logos { row-gap: 32px; column-gap: 44px; max-width: 100%; }
}
@media (max-width: 640px) {
  .v-trust { padding: 8px 0 48px; }
  .v-trust-logos { row-gap: 26px; column-gap: 32px; padding: 0 20px; }
  .v-trust-logos img { height: 22px; }
  .v-trust-logos img.v-logo-xl { height: 42px; }
  .v-trust-logos img.v-logo-lg { height: 30px; }
  .v-trust-logos img.v-logo-md { height: 26px; }
  .v-trust-logos img.v-logo-sm { height: 20px; }
  .v-trust-logos img.v-logo-xs { height: 16px; }
  .v-trust-logos img.v-logo-xxs { height: 13px; }
}

/* ── 모바일 전용 마키(가로 무한 스크롤, 2행 역방향) ──
 * .is-marquee 클래스는 JS 가 viewport <=640px 일 때만 부여.
 * 데스크톱은 기존 flex-wrap 레이아웃 그대로 유지. */
.v-trust-logos.is-marquee {
  display: flex;
  flex-direction: column;
  flex-wrap: unset;
  gap: 18px;
  overflow: hidden;
  padding: 0;
  max-width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.v-trust-logos.is-marquee .v-trust-marquee-row {
  overflow: hidden;
  width: 100%;
}
.v-trust-logos.is-marquee .v-trust-inner {
  display: flex;
  width: max-content;
  animation: v-trust-scroll 80s linear infinite;
  will-change: transform;
}
.v-trust-logos.is-marquee .v-trust-marquee-row.is-reverse .v-trust-inner {
  animation-direction: reverse;
  animation-duration: 90s; /* 두 행 속도 살짝 다르게 — 데칼코마니 방지 */
}
.v-trust-logos.is-marquee .v-trust-track {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
  flex-shrink: 0;
}
.v-trust-logos.is-marquee img {
  height: 22px;
  flex-shrink: 0;
}
.v-trust-logos.is-marquee img.v-logo-xl  { height: 36px; }
.v-trust-logos.is-marquee img.v-logo-lg  { height: 28px; }
.v-trust-logos.is-marquee img.v-logo-md  { height: 25px; }
.v-trust-logos.is-marquee img.v-logo-sm  { height: 20px; }
.v-trust-logos.is-marquee img.v-logo-xs  { height: 17px; }
.v-trust-logos.is-marquee img.v-logo-xxs { height: 13px; }
/* 터치/호버 시 일시정지 */
.v-trust-logos.is-marquee:hover .v-trust-inner,
.v-trust-logos.is-marquee:active .v-trust-inner {
  animation-play-state: paused;
}
@keyframes v-trust-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* 접근성: 모션 감소 선호 시 애니메이션 비활성 */
@media (prefers-reduced-motion: reduce) {
  .v-trust-logos.is-marquee .v-trust-inner {
    animation: none;
  }
}

/* ══════════════════════════════════════════
   IEUM ANIMATION (히어로 바로 아래, 컴팩트)
══════════════════════════════════════════ */
.v-showcase {
  position: relative;
  padding: 0 0 48px;
  background: transparent;
}
.v-showcase-stage {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.v-showcase-stage .infra-scene {
  min-height: 380px;
}

@media (max-width: 960px) {
  .v-showcase { padding: 0 0 32px; }
  .v-showcase-stage { padding: 0 28px; }
  .v-showcase-stage .infra-scene { min-height: 340px; }
}
@media (max-width: 640px) {
  .v-showcase { padding: 0 0 24px; }
  .v-showcase-stage { padding: 0 16px; }
  .v-showcase-stage .infra-scene { min-height: auto; }
}

/* ══════════════════════════════════════════
   SECTION COMMON (bridge 스타일)
══════════════════════════════════════════ */
.v-sec {
  padding: 120px 0;
  background: #FFFFFF;
}
.v-sec.alt { background: #F7F7F6; }

.v-sec-head {
  max-width: 1320px;
  margin: 0 auto 72px;
  text-align: left;
  padding: 0 40px;
}
.v-sec-tag {
  font-size: .78rem;
  font-weight: 600;
  color: #6A6A6A;
  letter-spacing: -.005em;
  margin-bottom: 18px;
}
.v-sec-h {
  font-family: 'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 700;
  color: #0A0A0A;
  margin: 0 0 22px;
  max-width: 960px;
  word-break: keep-all;
}
.v-sec-p {
  font-size: 1.02rem;
  line-height: 1.65;
  color: #4A4A4A;
  margin: 0;
  max-width: 780px;
  letter-spacing: -.005em;
  word-break: keep-all;
}

@media (max-width: 640px) {
  .v-sec { padding: 72px 0; }
  .v-sec-head { margin-bottom: 40px; padding: 0 20px; }
  .v-sec-p { font-size: .98rem; }
}

/* ══════════════════════════════════════════
   CARD GRID (Products / Solutions 공용)
══════════════════════════════════════════ */
.v-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
}
.v-card {
  display: flex;
  flex-direction: column;
  padding: 34px 28px 28px;
  background: #FFFFFF;
  border: 1px solid #ECECE9;
  border-radius: 20px;
  color: inherit;
  min-height: 300px;
}
.v-sec.alt .v-card { background: #FFFFFF; }
.v-card-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  color: #0A0A0A;
}
.v-card-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.v-card h3 {
  font-size: 1.18rem;
  line-height: 1.3;
  font-weight: 700;
  color: #0A0A0A;
  letter-spacing: -.015em;
  margin: 0 0 10px;
  word-break: keep-all;
}
.v-card p {
  font-size: .92rem;
  line-height: 1.6;
  color: #4A4A4A;
  margin: 0 0 22px;
  flex: 1;
  letter-spacing: -.005em;
  word-break: keep-all;
}
.v-cards-cta {
  text-align: center;
  margin-top: 40px;
}

@media (max-width: 1100px) {
  .v-cards { grid-template-columns: repeat(2, 1fr); padding: 0 28px; }
  .v-card { min-height: 260px; }
}
@media (max-width: 640px) {
  .v-cards { grid-template-columns: 1fr; padding: 0 20px; gap: 14px; }
  .v-card { padding: 28px 24px 24px; min-height: auto; }
  .v-card h3 { font-size: 1.2rem; }
}

/* ══════════════════════════════════════════
   BENEFITS (3 stacked blocks)
══════════════════════════════════════════ */
.v-benefits {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.v-benefit {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 56px;
  background: #FFFFFF;
  border: 1px solid #ECECE9;
  border-radius: 24px;
  padding: 44px 56px;
}
.v-benefit.rev { grid-template-columns: 1fr 1.05fr; }
.v-benefit.rev .v-benefit-text { order: 2; }
.v-benefit.rev .v-benefit-visual { order: 1; }

.v-benefit-tag {
  font-size: .78rem;
  font-weight: 600;
  color: #6A6A6A;
  margin-bottom: 14px;
  letter-spacing: -.005em;
}
.v-benefit h3 {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.3;
  font-weight: 700;
  color: #0A0A0A;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  word-break: keep-all;
}
.v-benefit p {
  font-size: .98rem;
  line-height: 1.65;
  color: #4A4A4A;
  margin: 0;
  letter-spacing: -.005em;
  word-break: keep-all;
}

.v-benefit-visual {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #F0F0EE 0%, #E4E4E0 100%);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 24px;
}

/* Visual A: code lines mock */
.v-vis-code {
  width: 100%;
  max-width: 420px;
  background: #FFFFFF;
  border: 1px solid #ECECE9;
  border-radius: 10px;
  padding: 18px 18px 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .78rem;
  color: #6A6A6A;
  line-height: 1.7;
  box-shadow: 0 10px 30px -14px rgba(0,0,0,.12);
}
.v-vis-code-dots { display: flex; gap: 6px; margin-bottom: 12px; }
.v-vis-code-dots span { width: 9px; height: 9px; border-radius: 50%; background: #E4E4E0; }
.v-vis-code .k { color: #6666FE; font-weight: 600; }
.v-vis-code .s { color: #16A34A; }
.v-vis-code .n { color: #D97706; }

/* Visual B: reserve bars */
.v-vis-reserve {
  width: 100%;
  max-width: 400px;
  background: #FFFFFF;
  border: 1px solid #ECECE9;
  border-radius: 10px;
  padding: 22px;
  box-shadow: 0 10px 30px -14px rgba(0,0,0,.12);
}
.v-vis-reserve-h {
  font-size: .82rem; font-weight: 600; color: #0A0A0A; margin-bottom: 16px;
  display: flex; justify-content: space-between; align-items: center;
}
.v-vis-reserve-h .pct { color: #16A34A; font-size: .74rem; font-weight: 700; }
.v-vis-reserve-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .74rem; color: #4A4A4A; margin-bottom: 6px;
}
.v-vis-reserve-bar {
  height: 8px; background: #F0F0EE; border-radius: 4px; overflow: hidden;
  margin-bottom: 14px;
}
.v-vis-reserve-bar > span {
  display: block; height: 100%; background: linear-gradient(90deg, #6666FE, #37CFFF);
}

/* Visual C: partner web */
.v-vis-web {
  width: 100%;
  max-width: 420px;
  background: #FFFFFF;
  border: 1px solid #ECECE9;
  border-radius: 10px;
  padding: 22px;
  box-shadow: 0 10px 30px -14px rgba(0,0,0,.12);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.v-vis-web-chip {
  height: 52px;
  padding: 10px 12px;
  background: #F7F7F6;
  border: 1px solid #ECECE9;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v-vis-web-chip img {
  max-width: 100%;
  max-height: 24px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 1100px) {
  .v-benefits { padding: 0 28px; }
  .v-benefit, .v-benefit.rev {
    gap: 36px;
    padding: 36px 40px;
  }
}
@media (max-width: 900px) {
  .v-benefit, .v-benefit.rev {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 24px;
  }
  .v-benefit.rev .v-benefit-text { order: 1; }
  .v-benefit.rev .v-benefit-visual { order: 2; }
  .v-benefit-visual { min-height: 200px; }
}
@media (max-width: 640px) {
  .v-benefits { padding: 0 16px; gap: 14px; }
  .v-benefit { padding: 26px 20px; border-radius: 18px; }
  .v-benefit-visual { min-height: 180px; }
}

/* ══════════════════════════════════════════
   CTA SECTION (Option B — 좌우 분리형)
══════════════════════════════════════════ */
.v-final {
  border-top: 1px solid #ECECE9;
  background: #F5F5F3;
  padding: 0;
}
.v-final-b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: 56px 0;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
}
.v-final-b-left h2 {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 800;
  color: #0A0A0A;
  line-height: 1.28;
  letter-spacing: -.025em;
  margin: 0 0 8px;
  word-break: keep-all;
}
.v-final-b-left p {
  font-size: .92rem;
  color: #6A6A6A;
  line-height: 1.65;
  margin: 0;
  max-width: 480px;
  word-break: keep-all;
}
.v-final-b-right {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
}
.v-final-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0A0A0A;
  color: #FFFFFF;
  font-weight: 600;
  font-size: .96rem;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.v-final-cta:hover {
  background: #222;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -10px rgba(10,10,10,.3);
}
.v-final-cta .arr { transition: transform .2s; }
.v-final-cta:hover .arr { transform: translateX(3px); }
.v-final-cta-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 999px;
  background: transparent;
  color: #0A0A0A;
  font-size: .94rem;
  font-weight: 600;
  border: 1px solid #D8D8D4;
  transition: background .2s, border-color .2s;
  text-decoration: none;
}
.v-final-cta-outline:hover {
  background: #EDEDEB;
  border-color: #C4C4C0;
}

@media (max-width: 760px) {
  .v-final-b {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 40px 0;
  }
}
@media (max-width: 640px) {
  .v-final-b-right { width: 100%; }
  .v-final-b-right .v-final-cta,
  .v-final-b-right .v-final-cta-outline { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════
   NEWS SECTION
══════════════════════════════════════════ */
.v-news-grid {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.v-news-card {
  display: block;
  background: #FFFFFF;
  border: 1px solid #ECECE9;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  cursor: pointer;
}
.v-news-card:hover {
  border-color: #CFCFCA;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.08);
}
.v-news-thumb {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #F0F0EE 0%, #E4E4E0 100%);
  background-size: cover;
  background-position: center;
}
.v-news-body { padding: 22px 22px 24px; }
.v-news-tag {
  font-size: .74rem;
  font-weight: 600;
  color: #6A6A6A;
  margin-bottom: 10px;
  letter-spacing: -.005em;
}
.v-news-title {
  font-size: 1.02rem;
  line-height: 1.4;
  font-weight: 700;
  color: #0A0A0A;
  letter-spacing: -.015em;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: keep-all;
}
.v-news-excerpt {
  font-size: .855rem;
  color: #6A6A6A;
  line-height: 1.65;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v-news-date {
  font-size: .78rem;
  color: #8A8A8A;
}

.v-sec-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: 1320px;
  margin: 0 auto 56px;
  padding: 0 40px;
  gap: 32px;
}
.v-sec-head-row .v-sec-head { margin: 0; padding: 0; flex: 1; }
.v-sec-head-row .v-sec-all {
  flex: 0 0 auto;
  font-size: .9rem;
  font-weight: 600;
  color: #0A0A0A;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 4px;
}
.v-sec-head-row .v-sec-all .arr { transition: transform .2s; }
.v-sec-head-row .v-sec-all:hover .arr { transform: translateX(3px); }

@media (max-width: 1100px) {
  .v-news-grid { padding: 0 28px; }
  .v-sec-head-row { padding: 0 28px; }
}
@media (max-width: 900px) {
  .v-news-grid { grid-template-columns: 1fr; padding: 0 20px; gap: 14px; }
  .v-sec-head-row { padding: 0 20px; margin-bottom: 32px; }
}

/* ══════════════════════════════════════════
   FOOTER — 라이트 톤 오버라이드
══════════════════════════════════════════ */
.v-body .ft {
  background: #EEEEED;
  color: #4A4A4A;
  border-top: 1px solid #D8D8D4;
}
.v-body .ft-simple {
  max-width: 1320px;
  padding: 56px 40px 40px;
}
.v-body .ft-simple-top {
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.v-body .ft-simple-nav a {
  color: #6A6A6A;
  font-weight: 500;
}
.v-body .ft-simple-nav a:hover {
  color: #0A0A0A;
}
.v-body .ft-simple-bottom {
  padding-top: 28px;
}
.v-body .ft-simple-corp {
  color: #8A8A8A;
}
.v-body .ft-simple-corp a {
  color: #6A6A6A;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.v-body .ft-simple-copy {
  color: #A0A0A0;
}

@media (max-width: 900px) {
  .v-body .ft-simple { padding: 48px 28px 32px; }
}
@media (max-width: 640px) {
  .v-body .ft-simple { padding: 40px 20px 28px; }
}