/*! 맑은 블루 핀테크형(Clear Cobalt) 브랜드 팩 v2 — 모션 보조 규칙
 *  이 브랜드에 연결된 사이트에만 실린다(DesignSystemService::brandPackHeadTags). 글자 크기·배치는 바꾸지 않는다(모션 전용 팩).
 *  원칙: 숨김·시작 위치 같은 모션 상태는 html[data-vl-motion="live"] 아래에서만, 그것도 스크립트가 붙인 표식에만 건다
 *        (스크립트가 안 떠도 글과 사진이 보인다).
 */
html:root{--vl-ease:cubic-bezier(.22,1,.36,1);--vl-head-dur:.3s}

/* ── 1. 부드러운 스크롤(Lenis) ─────────────────────────────────── */
html[data-vl-motion="live"].lenis,html[data-vl-motion="live"].lenis body{height:auto}
html[data-vl-motion="live"].lenis.lenis-smooth{scroll-behavior:auto!important}
html[data-vl-motion="live"].lenis.lenis-stopped{overflow:hidden}

/* 공통 런타임을 끄면 블록 안 흐르는 띠·첫 화면 사진 넘김까지 멈춘다 — 이 팩이 켜진 동안은 블록 자체 움직임을 되살린다
   (블록 단위로 주인이 끈 곳은 그대로 둔다). */
html[data-vl-motion="live"][data-zs-motion="off"] .zs-page-block:not([data-zs-motion="off"]) :not(.zs-page-block [data-zs-motion="off"] *),
html[data-vl-motion="live"][data-zs-motion="off"] .zs-page-block:not([data-zs-motion="off"]) :not(.zs-page-block [data-zs-motion="off"] *)::before,
html[data-vl-motion="live"][data-zs-motion="off"] .zs-page-block:not([data-zs-motion="off"]) :not(.zs-page-block [data-zs-motion="off"] *)::after{animation-play-state:running!important}

/* 첫 화면 글은 페이지가 다 뜰 때까지 숨겨 두었다가 등장 장면으로 꺼낸다(엔진이 못 떠도 부트가 3초 뒤 걷는다) */
html.vl-intro-wait :is(main,body) > .zs-page-block[data-zs-block^="heroes/"]:first-of-type :is([data-zs-role="label"],[data-zs-role="title"],[data-zs-role="text"],[data-zs-role="button"],[data-zs-btn],[data-zs-typo]){opacity:0!important}

/* 메인 첫 방문 로딩 막 — 반투명 검정 + 흰 회전 원(1초 한 바퀴), 페이지가 다 뜨면 걷힌다 */
html.vl-loading body:has(:is(main,body) > .zs-page-block[data-zs-block^="heroes/"]:first-of-type)::before{content:"";position:fixed;inset:0;z-index:2147483000;background:rgba(0,0,0,.5);transition:opacity .3s ease}
html.vl-loading body:has(:is(main,body) > .zs-page-block[data-zs-block^="heroes/"]:first-of-type)::after{content:"";position:fixed;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;z-index:2147483001;
  box-sizing:border-box;border:5px solid #fff;border-bottom-color:transparent;border-radius:50%;animation:vl-spin 1s linear infinite;animation-play-state:running!important}
@keyframes vl-spin{to{transform:rotate(360deg)}}

/* ── 2. 스크롤 등장 — 80px 아래에서, 투명도 1초·이동 0.6초 ease, 화면 80% 지점에서 한 번 ─────────── */
html[data-vl-motion="live"] .vl-sm{opacity:0;translate:0 80px;transition:opacity 1s ease,translate .6s ease}
html[data-vl-motion="live"] .vl-sm.is-on{opacity:1;translate:none}

/* 큰 글자 줄 단위 등장 — 낱말마다 가림 틀 */
.vl-wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.vl-wi{display:inline-block;will-change:transform,opacity}

/* ── 3. 첫 화면 위로 다음 섹션이 덮어 올라오는 막 ─────────────────── */
html[data-vl-motion="live"] .vl-over{position:relative;z-index:1}
html[data-vl-motion="live"] .vl-over.vl-opaque{background-color:var(--vl-page-bg,#fff)}
html[data-vl-motion="live"] .vl-clip{overflow:hidden}

/* ── 4. 머리 — 첫 화면 사진 위 투명·흰 글자 → 내리면 숨고, 올리면 흰 판으로 다시 나온다 ─────── */
html.vl-head-over body > header:first-of-type,html.vl-head-over header.zsdf-h{
  position:fixed!important;left:0;right:0;top:0;z-index:100;background:transparent!important;border-color:transparent!important;box-shadow:none}
html.vl-head-stick body > header:first-of-type,html.vl-head-stick header.zsdf-h{position:sticky!important;top:0;z-index:100}
html.vl-head-ready.vl-head-over :is(body > header:first-of-type,header.zsdf-h),
html.vl-head-ready.vl-head-stick :is(body > header:first-of-type,header.zsdf-h){
  transition:transform var(--vl-head-dur) ease,background-color var(--vl-head-dur) ease,color var(--vl-head-dur) ease,box-shadow var(--vl-head-dur) ease,border-color var(--vl-head-dur) ease;will-change:transform}
html.vl-head-over:not(.vl-head-solid) :is(body > header:first-of-type,header.zsdf-h){color:#fff}
html.vl-head-over:not(.vl-head-solid) :is(body > header:first-of-type,header.zsdf-h) :is(a,button,label,span,strong,p,b){color:#fff!important;border-color:rgba(255,255,255,.55)!important}
html.vl-head-over:not(.vl-head-solid) header.zsdf-h .zsdf-join{background:transparent!important;border:1px solid rgba(255,255,255,.7)!important}
html.vl-head-over:not(.vl-head-solid) header.zsdf-h .zsdf-burger span,
html.vl-head-over:not(.vl-head-solid) header.zsdf-h .zsdf-burger span::before,
html.vl-head-over:not(.vl-head-solid) header.zsdf-h .zsdf-burger span::after{background:#fff!important}
html.vl-head-ready.vl-head-over :is(body > header:first-of-type,header.zsdf-h) img{transition:filter var(--vl-head-dur) ease}
html.vl-head-over:not(.vl-head-solid) :is(body > header:first-of-type,header.zsdf-h) img{filter:brightness(0) invert(1)}
html.vl-head-over.vl-head-solid :is(body > header:first-of-type,header.zsdf-h),
html.vl-head-stick.vl-head-solid :is(body > header:first-of-type,header.zsdf-h){
  background:var(--ds-header-bg,#fff)!important;border-color:var(--ds-header-border,#e5edf5)!important;box-shadow:0 1px 0 var(--ds-header-border,#e5edf5)}
html.vl-head-hide :is(body > header:first-of-type,header.zsdf-h){transform:translateY(-100%)}

/* ── 5. 카드 겹쳐 쌓기(고정 구간) · 화면 가득 펼치기 ─────────────────── */
html[data-vl-motion="live"] .vl-stack > .vl-stack-item{will-change:clip-path}
html[data-vl-motion="live"] .vl-expand{will-change:clip-path}

/* 왼쪽 제목 고정 + 세로 큰 글자 */
.vl-vert-wrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.vl-vert{position:absolute;left:clamp(40px,6vw,120px);top:50%;margin:0;white-space:nowrap;font-weight:700;line-height:1;
  font-size:clamp(140px,12.5vw,240px);letter-spacing:-0.02em;color:currentColor;opacity:.045;text-transform:capitalize;
  transform:translateY(var(--vl-vs,0px)) translate(-50%,-50%) rotate(90deg);transform-origin:center}
.vl-isolate{isolation:isolate}

/* ── 6. hover — 화살표가 4px 밀리고, 카드 테두리가 포인트 색으로 ───────────── */
@media (hover:hover){
  html[data-vl-motion="live"] :is(a,button,[data-zs-role="button"],[data-zs-btn]) > svg:last-child{transition:translate .3s ease}
  html[data-vl-motion="live"] :is(a,button,[data-zs-role="button"],[data-zs-btn]):hover > svg:last-child{translate:4px 0}
  html[data-vl-motion="live"] .vl-card{transition:border-color .3s ease,box-shadow .3s ease}
  html[data-vl-motion="live"] .vl-card:hover{border-color:var(--color-accent,#533AFD)!important}
}


/* ── 8. v2 장면 보조(2026-10-05) — 모두 live 일 때, 스크립트가 붙인 표식에만 ──────────────── */
/* 개별 변형 속성으로 움직인다 — 블록 hover 의 transform 과 겹쳐도 서로 지우지 않는다 */
html[data-vl-motion="live"] .vl-tw{translate:var(--vl-x,0px) var(--vl-y,0px);scale:var(--vl-s,1);rotate:var(--vl-r,0deg);will-change:translate,scale}
html[data-vl-motion="live"] .vl-tw.vl-tilt{rotate:x var(--vl-rx,0deg)}
/* 첫 화면이 물러날 때 덮이는 남색 막 */
html[data-vl-motion="live"] .vl-veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(10,26,74,.35),rgba(10,26,74,.95));opacity:0}
/* 작은 머리말 앞에 그어지는 코발트 선 */
html[data-vl-motion="live"] .vl-eb{display:inline-flex!important;align-items:center;gap:10px}
html[data-vl-motion="live"] .vl-eb::before{content:"";flex:0 0 auto;width:var(--vl-ebw,28px);height:2px;border-radius:2px;background:currentColor}
.vl-num{font-variant-numeric:tabular-nums}
html[data-vl-motion="live"] .vl-deal{box-shadow:0 18px 40px -18px rgba(10,26,74,.28)}
/* 어두운 면·마무리 배너 위를 지나가는 빛 번짐 */
.vl-glow{position:absolute;left:-10%;top:-30%;width:70%;height:160%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(59,130,246,.38),rgba(34,211,238,.12) 55%,transparent 75%);filter:blur(10px);opacity:0}

/* 밝은 마무리 판 위로 퍼지는 가는 동심원 무늬(브랜드 장식) */
.vl-rings{position:absolute;left:50%;top:50%;width:1400px;height:1400px;margin:-700px 0 0 -700px;z-index:-1;pointer-events:none;border-radius:50%;opacity:0;
  background:repeating-radial-gradient(circle at 50% 50%,transparent 0 58px,rgba(31,79,224,.10) 58px 59px);
  -webkit-mask-image:radial-gradient(circle,#000 0,#000 30%,transparent 62%);mask-image:radial-gradient(circle,#000 0,#000 30%,transparent 62%)}

/* ── 7. 맨 위로(서브 쪽만) ───────────────────────────────────── */
.vl-top{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;align-items:center;justify-content:center;width:56px;height:56px;
  background:#fff;color:var(--color-text-primary,#061B31);border:1px solid #cdd1d5;border-radius:8px;
  box-shadow:0 0 1px rgba(0,0,0,.05),0 4px 4px rgba(0,0,0,.08);cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.vl-top.is-on{opacity:1;visibility:visible}
.vl-top svg{width:24px;height:24px}
@media (max-width:1024px){.vl-top{width:40px;height:40px}.vl-top svg{width:17px;height:17px}}