:root{
  --max:1200px;
  --pad:20px;
  --header-offset:0px; /* JS에서 프로모션바 높이에 맞춰 자동 보정 */
  --stage-overlap:30vh; /* 카드가 히어로 위로 겹쳐 올라오는 높이 */
}

/* Reset & base */
*{ box-sizing:border-box }
html,body{ height:100% }
body{ margin:0; font-family:ui-sans-serif,system-ui,-apple-system; color:#111; background:#000 }
a{ color:inherit; text-decoration:none }

/* ===== Top Promo Bar ===== */
.top-banner{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:#000; color:#fff; text-align:center; font-size:14px; padding:8.2px 0;
}
.top-banner span{ opacity:.85 }
.top-banner .code{ background:#333; padding:2px 6px; border-radius:4px; font-family:monospace }
.top-banner button{
  position:absolute; right:12px; top:6px; background:none; border:0; color:#fff;
  font-size:20px; cursor:pointer; opacity:.7;
}
.top-banner button:hover{ opacity:1 }

/* ===== Header ===== */
.site-header{
  position:fixed; left:0; right:0; top:var(--header-offset); z-index:90;
  background:transparent; color:#fff; backdrop-filter:none;
  transition:background .25s ease, backdrop-filter .25s ease, box-shadow .25s ease;
}
.site-header .inner{
  max-width:var(--max); margin:0 auto; padding:14px var(--pad);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px;
}
.logo{ font-weight:800; letter-spacing:.2px }
.nav{ grid-column:2; display:flex; gap:20px; justify-content:center }
.nav button{ background:none; border:0; color:#fff; font-weight:700; cursor:pointer; padding:8px 6px; font-size:15px }
.cta{ grid-column:3; justify-self:end; background:#fff; color:#111; padding:10px 16px; border-radius:12px; font-weight:800 }
.site-header--solid{
  background:rgba(0,0,0,.92);
  backdrop-filter:saturate(1.2) blur(6px);
  box-shadow:0 1px 0 rgba(255,255,255,.06), 0 8px 30px rgba(0,0,0,.25);
}

/* ===== Mega Dropdown ===== */
.dropdown-panel{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  width:100vw; background:rgba(0,0,0,.97); color:#fff;
  padding:40px var(--pad); display:none; justify-content:center; animation:fadeIn .2s ease;
}
.dropdown-panel.active{ display:flex }
@keyframes fadeIn{ from{opacity:0; transform:translate(-50%,-10px)} to{opacity:1; transform:translate(-50%,0)} }
.panel-columns{
  display:grid; grid-template-columns:repeat(4, minmax(180px,1fr));
  gap:40px; max-width:var(--max); width:100%;
}
.panel-columns h4{ margin:0 0 10px; font-size:15px; color:#aaa; text-transform:uppercase }
.panel-columns a{ display:block; padding:4px 0; color:#fff; font-size:15px; opacity:.9 }
.panel-columns a:hover{ opacity:1; text-decoration:underline }

/* ===== STAGE (히어로 + 카드 한 섹션) =====
   - 서로 다른 섹션 경계를 제거하고 한 섹션 내부 두 레이어로 구성
   - 배경: 히어로 레이어 (비디오/그라데이션)
   - 전경: 카드 레이어 (수평 캐러셀)
*/
.stage{
  position:relative; /* 두 레이어의 기준 */
  min-height:100svh; /* 안전 */
  overflow:visible;  /* Y축 잘림 방지 */
  background:#000;  /* 아래쪽 섹션과 자연스러운 연결 */
}

/* 히어로 레이어 */
.stage__hero{
  position:relative; z-index:1; height:120vh; min-height:720px; overflow:visible;
}
.stage__hero-media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; z-index:0;
}
.stage__hero::after{ /* 아래로 페이드 → 검정 */
  content:""; position:absolute; left:0; right:0; bottom:0; height:100vh;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 60%, #000 100%);
  z-index:1; pointer-events:none;
}
.stage__hero-overlay{
  position:relative; z-index:2; height:100%;
  display:grid; place-items:center; text-align:center; color:#fff; padding:0 var(--pad);
}
.stage__hero-overlay h1{ font-size:clamp(32px,6.5vw,72px); margin:0 0 12px }
.btn{ display:inline-block; background:#fff; color:#111; padding:12px 18px; border-radius:12px; font-weight:800 }

/* 카드 레이어 (히어로 위로 겹쳐 올라옴) */
.stage__cards{
  position:relative; z-index:3; /* 히어로 페이드보다 위 */
  transform:translateY(calc(-1 * var(--stage-overlap)));
  /* 히어로와 같은 섹션 내부이므로 섹션 경계/클리핑 이슈가 없다 */
  padding:0 0 20px; /* 하단 여백 */
}

/* Showcase Track */
.showcase{
  position:relative; color:#fff; background:transparent; /* 이미 섹션 배경이 #000 */
  overflow:visible;
}
.showcase .track{
  display:flex; gap:40px; padding:0 8vw 40px;
  overflow-x:auto; overflow-y:visible; /* Y축은 무조건 보이게 */
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
}
.showcase__track::-webkit-scrollbar { display: none; } /* Chrome/Safari용 */
.showcase .track::-webkit-scrollbar{ height:8px }
.showcase .track::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:8px }

/* 카드 */
.card{
  flex:0 0 78vw; max-width:45vw; height:60vh; min-height:420px;
  background:#111; border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.35);
  position:relative; overflow:hidden; scroll-snap-align:center;
  transform:rotateZ(-2deg); transition:transform .35s ease, box-shadow .35s ease, opacity .35s ease;
}

.card{
  --lift: 0;
  --scale: .96;
  --bright: .85;
  --blur: 1px;
  --rot: -2deg;          /* 기본 회전각 (홀수) */
  transform:
    translateY(calc(var(--lift) * -16px))
    rotateZ(var(--rot))
    scale(var(--scale));
  transition: transform .35s ease, box-shadow .35s ease, opacity .35s ease;
}

.card:nth-child(even){
  --rot: 2deg;           /* 짝수 카드만 회전각 변수 변경 */
}

.card .bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter: brightness(var(--bright)) blur(var(--blur));
  transition: filter .35s ease;
}


.card.is-focus{
  --lift: 1;
  --scale: 1.02;
  --bright: 1;
  --blur: 0px;
  z-index: 6;
  box-shadow: 0 40px 110px rgba(0,0,0,.55);
}

.card:hover{ transform:rotateZ(0deg) scale(1.01); box-shadow:0 30px 80px rgba(0,0,0,.5) }
.card::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 -60px 120px rgba(0,0,0,.55) } /* 비네팅 */
.card .label{ position:absolute; left:24px; top:20px; font-weight:800; letter-spacing:.08em; font-size:14px; opacity:.8 }
.card .title{ position:absolute; left:28px; bottom:30px; font-size:clamp(22px,3.2vw,34px); font-weight:900 }

/* 캐러셀 좌우 버튼 (호버시 표시) */
.showcase .nav-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:#fff; color:#111; border:none; border-radius:999px; padding:16px 22px;
  font-weight:800; box-shadow:0 10px 30px rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:5;
}
.showcase:hover .nav-btn{ opacity:1; pointer-events:auto }
.showcase .nav-btn.prev{ left:24px }
.showcase .nav-btn.next{ right:24px }
.showcase .nav-btn:active{ transform:translateY(-50%) scale(.98) }
.showcase .hint{ text-align:center; color:#999; font-size:13px; margin-top:-8px }

/* ===== 아래 일반 섹션들 ===== */
.stats{
  background:#000; color:#fff; padding:10px var(--pad);   padding-top: 0px;   /* 기존 72px → 20px */
  padding-bottom: 200px; /* 아래 여백은 유지 */  margin-top: -100px;   /* 섹션 자체를 위로 당김 */
}
.stats .inner{ max-width:var(--max); margin:0 auto; text-align:center }
.stats h2{ font-size:clamp(20px,2.5vw,28px); font-weight:600; opacity:.85 }
.kpis{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px;
  max-width:var(--max); margin-inline:auto;
}
.kpi{ font-size:clamp(40px,6vw,80px); font-weight:800 }
.kpi small{ display:block; margin-top:10px; font-size:14px; opacity:.75; font-weight:600 }

.threeD-iframe{ height:100vh; margin-top: 196px;  }
.threeD-iframe iframe{ width:100%; height:100%; border:0; display:block }

.features{ max-width:var(--max); margin:0 auto; padding:72px var(--pad) }
.features h2{ font-size:clamp(24px,4vw,40px); margin:0 0 20px }
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.feature-card{ border:1px solid #eaeaea; border-radius:16px; padding:18px; transition:.2s }
.feature-card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.08) }
.feature-card h3{ margin:0 0 6px; font-size:18px } .feature-card p{ margin:0; color:#444 }

/* Footer */
.site-footer{ background:#111; color:#bbb }
.site-footer .inner{ max-width:var(--max); margin:0 auto; padding:32px var(--pad);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px }

/* Responsive */
@media (max-width:900px){
  .panel-columns{ grid-template-columns:1fr 1fr }
  .grid{ grid-template-columns:1fr 1fr }
  .kpis{ grid-template-columns:1fr }
}
@media (max-width:640px){
  .nav{ display:none }
  .top-banner{ font-size:12px }
  .grid{ grid-template-columns:1fr }
  .card{ flex-basis:88vw; max-width:88vw; height:48vh; min-height:360px }
  .showcase .nav-btn{ padding:12px 16px }
}

/* Features iframe 섹션을 화면에 꽉 차게 */
.features-iframe{
  position: relative;
  width: 100%;
  background: #000;
  /* 헤더/프로모션바 높이를 제외하고 꽉 차게 하고 싶으면 아래처럼 계산도 가능 */
  /* min-height: calc(100vh - var(--header-offset, 0px)); */
  min-height: 100vh;
}

.features-iframe iframe{
  display: block;
  width: 100%;
  height: 100vh;     /* 핵심: 높이 고정으로 내부 스크롤 제거 */
  border: 0;
  overflow: hidden;      /* 내부 스크롤 제거 */
}
/* 간격을 자연스럽게 어둡게 유지 */
.threeD-iframe {
  margin-bottom: 80px;         /* 여백 크기 조정 가능 */
  background: #000;            /* 흰 띠 방지 */
}

.features-iframe {
  margin-top: 80px;              
  background: #000;          
}
/* ScrollStep 섹션만 높이를 자동 확장 */
.threeD-iframe.embed-auto { height:auto; padding:0; background:#000; }
.threeD-iframe.embed-auto iframe {
  width:100%;
  height:auto;           /* JS가 실제 높이로 덮어씀 */
  display:block;
  border:0;
  min-height:100vh;      /* 초기 페인트 안전망 */
}

/* ===== Footer & Extra ===== */
/* ===== Compact Fintech Footer ===== */
  .gp-footer{
    --ink:#e7edf5; --muted:#9aa7b6; --bg:#0a0f15; --line:#151c24;
    --fz-s:12px; --fz:13px; --fz-l:14px;
    background:var(--bg); color:#c7d2de; border-top:1px solid var(--line);
  }
  .gp-footer .gp-in{max-width:1200px;margin:0 auto;padding:28px 20px;display:grid;gap:18px}
  /* brand line */
  .gp-brand{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--line)}
  .gp-logo{display:flex;align-items:baseline;gap:10px}
  .gp-logo strong{font-size:16px;color:var(--ink);letter-spacing:.2px}
  .gp-logo small{font-size:11px;color:var(--muted)}
  .gp-copy{font-size:11px;color:var(--muted)}
  /* grid */
  .gp-grid{display:grid;grid-template-columns:1fr;gap:16px;padding-top:10px}
  .gp-col h6{margin:0 0 8px;color:#cdd6e3;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
  .gp-col ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
  .gp-col li{display:grid;grid-template-columns:96px 1fr;gap:8px;align-items:start}
  .gp-col .k{color:var(--muted);font-size:var(--fz-s)}
  .gp-col .v{color:#d7e1ec;font-size:var(--fz)}
  .gp-col a{color:#d7e1ec;text-decoration:none}
  .gp-col a:hover{text-decoration:underline}
  .gp-col .address .v{line-height:1.6}
  .gp-note{margin:0 0 8px;color:var(--muted);font-size:var(--fz);line-height:1.6}
  .gp-links{display:flex;align-items:center;gap:10px;font-size:var(--fz)}
  .gp-links .dot{opacity:.45}
  /* thin separators between columns (desktop) */
  @media (min-width:900px){
    .gp-grid{grid-template-columns:1.2fr 0.9fr 1.1fr;gap:24px}
    .gp-col{padding:4px 0}
    .gp-col + .gp-col{border-left:1px solid var(--line);padding-left:24px}
  }
  /* tighten overall spacing on small screens */
  @media (max-width:480px){
    .gp-footer .gp-in{padding:22px 16px}
    .gp-col li{grid-template-columns:84px 1fr}
    .gp-logo strong{font-size:15px}
  }

/* ===== Covalent Flow (namespaced) ===== */
.cflow {
  --bg: transparent; /* 기존 0b0d10 → 투명 */
  --ink:#e9eef5; --muted:#ffffff; --acc:#7ee787;
  --radius:22px; --shadow: 0 30px 60px rgba(0,0,0,.35);
  --slide-w: min(78vw, 1080px); --slide-h: clamp(320px, 54vh, 720px);
  --gap: clamp(12px, 2.2vw, 28px);
  --cover-tilt: 14deg; --cover-shift: 120px; --cover-depth: 260px;
  color: var(--ink);
  background: transparent !important;  /* 전체 투명 */
}
.cflow .hero { position:relative; max-width:1200px; margin: 0 auto; padding: clamp(18px,2.2vw,28px) var(--pad, 20px); }
.cflow .header{ display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:center }
.cflow .brand{ font-weight:800; letter-spacing:.6px; font-size: clamp(18px,2.6vw,26px) }
.cflow .badge{ border:1px solid rgba(255,255,255,.12); color:var(--muted); padding:.5rem .8rem; border-radius:999px; font-size:12.5px }
.cflow .title{ font-weight:900; line-height:1.02; letter-spacing:-.02em; font-size: clamp(34px, 6.6vw, 92px); margin: 6vh 0 2vh; text-wrap: balance }
.cflow .subtitle{ color:var(--muted); margin: 0 0 3vh; max-width: 70ch; font-size: clamp(14px,1.8vw,18px) }

/* Stage */
.cflow .viewport {
  position: relative;
  perspective: 1600px;
  height: var(--slide-h);
  overflow: hidden;
  border-radius: calc(var(--radius) + 2px);
  background: transparent !important;  /* 검은 배경 제거 */
  box-shadow: none !important;         /* 카드 외곽 그림자 제거(선택사항) */
  margin-top: 12vh;   /* 카드들이 들어있는 3D 뷰포트만 아래로 이동 */
}

.cflow .stage {
  position: relative;
  margin: 2vh 0;
  max-width: min(var(--slide-w), 100%);
  background: transparent !important;  /* stage 배경 제거 */
}
.cflow .deck{ position:absolute; inset:0; display:grid; place-items:center; transform-style:preserve-3d; }
.cflow .slide{ position:absolute; width: 74%; height: 84%; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); transform-style:preserve-3d; will-change: transform, filter, opacity }
.cflow .slide .media{ position:absolute; inset:0; background:#111; display:block }
.cflow .slide img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) }
.cflow .slide .gloss{ position:absolute; inset:-10% -10%; background: radial-gradient(120% 140% at 20% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%); mix-blend-mode:soft-light; pointer-events:none }
.cflow .slide .vignette{ position:absolute; inset:0; background: radial-gradient(120% 120% at 50% 60%, rgba(0,0,0,0) 40%, rgba(0,0,0,.28) 100%) }
.cflow .caption{ position:absolute; bottom:14px; left:14px; right:14px; padding:14px 16px; border-radius:14px; backdrop-filter: blur(8px) saturate(1.3); background: linear-gradient( to bottom, rgba(8,11,15,.24), rgba(8,11,15,.38)); color:#e9eef5; font-weight:700; letter-spacing:.2px; display:flex; justify-content:space-between; align-items:center; gap:10px }
.cflow .caption small{ color:#a9b4c2; font-weight:600; letter-spacing:.3px }
.cflow .caption .dot{ width:10px; height:10px; border-radius:50%; background:var(--acc); filter: drop-shadow(0 0 10px rgba(126,231,135,.8)) }

/* Controls */
.cflow .controls{ position:absolute; inset:0; display:flex; justify-content:space-between; align-items:center; pointer-events:none }
.cflow .controls button{ pointer-events:auto; width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.08); color:#fff; border:0; display:grid; place-items:center; cursor:pointer; outline:1px solid rgba(255,255,255,.12) }
.cflow .controls button:hover{ background:rgba(255,255,255,.14) }
.cflow .controls svg{ width:20px; height:20px }

/* Progress / peeks */
.cflow .peeks{ position:absolute; inset:0; pointer-events:none }
.cflow .peeks:before, .cflow .peeks:after{ content:none !important; /* 양옆 마스크 완전 제거 */ position:absolute; top:0; bottom:0; width:max(8vw,120px); z-index:5 }
.cflow .peeks:before{ left:-1px; background:linear-gradient(90deg, #0b0d10 22%, rgba(11,13,16,0) 100%) }
.cflow .peeks:after{ right:-1px; background:linear-gradient(-90deg, #0b0d10 22%, rgba(11,13,16,0) 100%) }

/* Mobile refinements */
@media (max-width: 900px){
  .cflow { --slide-h: clamp(280px, 60vh, 560px); --cover-tilt: 12deg; --cover-shift: 86px; --cover-depth: 200px }
  .cflow .header{ grid-template-columns: 1fr; justify-items:start }
  .cflow .title{ margin-top: 2vh }
  .cflow .controls button{ width:44px; height:44px }
  .cflow .slide{ width:82%; height:84% }
  .cflow .peeks{ display:none } /* 모바일 좌우 스크롤 원인 제거 */
}

@media (prefers-reduced-motion: reduce){ .cflow .slide, .cflow .deck{ transition:none !important } }

/* cflow 전용 배경 비디오 */
.cflow { position: relative; isolation: isolate; }
.cflow .cflow-bgvideo{
  position: absolute; inset: 0;
  z-index: -1;          /* 콘텐츠 뒤 */
  overflow: hidden; border-radius: 0; 
}
.cflow .cflow-bgvideo__el{
  position: absolute; top: 50%; left: 50%;
  min-width: 100%; min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
}
.cflow .cflow-bgvideo__shade{
  position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 50% 20%, rgba(255,240,200,0.1), rgba(0,0,0,0.3));
  pointer-events: none;
}

/* 데이터/접근성 가드 */
@media (prefers-reduced-data: reduce){
  .cflow .cflow-bgvideo__el{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .cflow .cflow-bgvideo__el{ animation: none; }
}

/* background GIF support */
.cflow .cflow-bgimage__el{
  position:absolute; top:50%; left:50%;
  min-width:100%; min-height:100%;
  transform:translate(-50%,-50%);
  object-fit:cover; pointer-events:none; user-select:none;
  image-rendering:auto;
}

/* 내려보낼 오프셋 값(한 번에 조절) */
#cflow{ --hero-shift: 20vh; }  /* 10~24vh 사이로 조절 */

#cflow .hero{
  padding-top: calc(var(--hero-shift));   /* 위에서 밀어내기 */
}

#cflow .stage{
  margin-top: 4vh;   /* 제목 아래 카드 여백(옵션) */
}

/* 배경 컨테이너의 위·아래 인셋으로 살짝 크롭 */
#cflow .cflow-bgvideo{
  inset: 0 0 20% 0 !important;   /* 위 4%, 아래 10% 잘라서 살짝 낮게 보이게 */
}

/* 아래로 갈수록 자연스럽게 어두워지는 레이어 */
#cflow .cflow-bgvideo__fadebot{
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 120vh;                     /* 어둡게 덮을 범위 */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.55) 65%,
    #000 100%
  );
  pointer-events: none;
  z-index: 0;                        /* 배경 위, 콘텐츠 뒤 */
}

  #stats {
    margin-top: -250px !important;  /* 통계 섹션을 위로 당기기 (필요 시 조절) */
  }

/* 기본: 화살표 보이도록 */
#cflowPrev,
#cflowNext { display: inline-flex; }

/* 데스크톱 폭일 때만 숨김 (에뮬에서도 즉시 반응) */
@media (min-width: 821px) {
  #cflowPrev,
  #cflowNext { display: none; }
}

/* 타이틀과 서브타이틀 간격 조절 */
#cflow .hero .title {
  margin-bottom: clamp(12px, 6.0vw, 38px);
}

/* 혹시 kicker가 있으면 (보조제목용) */
#cflow .hero .kicker {
  margin-bottom: clamp(8px, 1.5vw, 18px);
}

/* 서브타이틀 전체 여백도 살짝 조정 */
#cflow .hero .subtitle {
  margin-top: 0;
  margin-bottom: clamp(20px, 3vw, 36px);
}