/* 먹튀컷.com 홈(= landing/verify 브랜치의 /verify 랜딩) 전용 — 홈에서만 style.css 다음에 싣는다.
   1) 앞부분: 원본이 본 사이트 globals.css 의 기본 규칙에 기대던 것(.container·.header·.searchbar·.btn·토큰)만 그대로 옮김.
      style.css 의 .btn(투명 테두리)·.logo 는 여기 규칙이 뒤에 와서 이긴다 — 홈 밖 페이지는 영향 없음.
   2) 뒷부분: 브랜치 globals.css 끝 "/verify 랜딩 (vf-*)" 블록 원문 그대로(히어로 이미지 경로만 /assets/ 로). 고치려면 원문 주석을 먼저 읽을 것 —
      v3~v7 까지 "두 번 데인" 기록이 들어 있다(크롬 전용 scroll-driven 금지, N초 뒤 전부 열기 금지, html.vf-js 아래에서만 숨김). */
:root { --fs-2xs: 11px; --fs-2xl: 33px; --r-pill: 999px; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.header { border-bottom: 1px solid var(--border); background: linear-gradient(180deg, #0f1622, #0b0f17); position: sticky; top: 0; z-index: 10; }
.header-inner { display: flex; align-items: center; gap: 16px; padding: 14px 16px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }
.logo span { color: var(--accent); }
.logo-icon { width: 30px; height: 30px; border-radius: var(--r-sm); display: block; flex-shrink: 0; }
/* 머리줄 오른쪽(2026-10-03 사용자: 메뉴 빼고) — '평생주소' 표기 + 텔레그램 + 본 사이트 바로가기. 색은 페이지 배지·CTA 와 같은 계열. */
.hdr-tag { display: inline-flex; align-items: center; height: 26px; margin-left: 4px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid rgba(127, 180, 216, .35); background: rgba(93, 138, 194, .13); color: var(--link); font-size: var(--fs-sm); font-style: normal; font-weight: 700; letter-spacing: -.2px; }
.hdr-acts { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hdr-tele { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border-radius: var(--r-md); border: 1px solid var(--border-strong); color: var(--text); font-size: var(--fs-sm); font-weight: 700; transition: border-color .15s, transform .15s; }
.hdr-tele svg { color: #2aabee; flex: none; }
.hdr-tele:hover { border-color: var(--accent); transform: translateY(-1px); }
.hdr-go { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: var(--r-md); background: linear-gradient(135deg, #7fb4d8, #5d8ac2); color: #0b0f17; font-size: var(--fs-sm); font-weight: 800; letter-spacing: -.2px; white-space: nowrap; box-shadow: 0 10px 26px -10px rgba(93, 138, 194, .8); transition: transform .18s, box-shadow .18s, filter .18s; }
.hdr-go:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(93, 138, 194, .95); filter: brightness(1.06); }
@media (max-width: 640px) {
  .header-inner { gap: 8px; padding: 10px 12px; }
  .hdr-tag { height: 22px; padding: 0 7px; font-size: var(--fs-2xs); }
  .hdr-tele span { display: none; }
  .hdr-tele { padding: 0 12px; }
  .hdr-go { padding: 0 13px; font-size: var(--fs-xs); }
}
@media (prefers-reduced-motion: reduce) { .hdr-tele, .hdr-go { transition: none; } .hdr-tele:hover, .hdr-go:hover { transform: none; } }
.searchbar { display: flex; gap: 8px; flex: 1; min-width: 260px; }
.searchbar input[type="text"] { flex: 1; background: var(--panel2); border: 1px solid var(--border-strong); color: var(--text); padding: 10px 14px; border-radius: var(--r-md); font-size: var(--fs-base); font-family: inherit; }
.searchbar input:focus { border-color: var(--accent); }
.searchbar input[type="text"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.search-wrap { position: relative; flex: 1; min-width: 200px; }
.search-wrap input[type="text"] { width: 100%; }
.btn { background: var(--accent); color: var(--on-accent); border: none; padding: 10px 18px; border-radius: var(--r-md); font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; font-family: inherit; }
.btn:hover { filter: brightness(1.1); border-color: transparent; }

/* ============ /verify 랜딩 (vf-*) ============
   먹튀검증 타깃 유입 랜딩. 토큰은 :root 그대로 쓰고 이 블록에서 새 색을 만들지 않는다.
   본문 페이지들보다 여백·타입을 크게 가져가되(랜딩이라), 색은 사이트와 동일해야 한다. */
.vf { padding-bottom: 72px; }
.vf-kicker { color: var(--link); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .2px; margin: 0 0 14px; }
.vf-h1 { font-size: 46px; font-weight: 800; letter-spacing: -1.6px; line-height: 1.22; margin: 0; }
.vf-h1 em { font-style: normal; color: var(--link); }
.vf-h2 { font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1.3; margin: 0 0 14px; }
.vf-lead { color: var(--muted); font-size: var(--fs-md); line-height: 1.75; margin: 16px 0 0; max-width: 62ch; }
.vf-lead b { color: var(--text); font-weight: 700; }
.vf-note { color: var(--muted); font-size: var(--fs-xs); margin: 12px 0 0; }
.vf-src { color: var(--muted); font-size: var(--fs-xs); line-height: 1.7; margin: 16px 0 0; }
.vf-src b { color: var(--text); }

.vf-hero { padding: 68px 16px 54px; }
.vf-search { margin: 30px 0 0; max-width: 620px; }
.vf-search .searchbar input[type="text"] { height: 56px; padding: 0 18px; font-size: var(--fs-md); border-radius: var(--r-lg); }
.vf-search .btn { height: 56px; padding: 0 26px; border-radius: var(--r-lg); font-size: var(--fs-base); }

.vf-kpis { display: flex; flex-wrap: wrap; gap: 36px; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--border); }
.vf-kpi b { display: block; font-size: 30px; font-weight: 800; color: var(--link); font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.vf-kpi i { display: block; font-style: normal; color: var(--muted); font-size: var(--fs-xs); margin-top: 5px; }

/* 섹션 밴드 — 배경을 번갈아 깔아 긴 랜딩의 리듬을 만든다 */
.vf-band { background: var(--panel); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-top: 8px; }
.vf-sec { padding: 58px 16px; }

/* 도메인 수명 — 이 페이지의 주인공 */
.vf-age { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding: 62px 16px; }
.vf-quote { margin: 22px 0 0; padding: 14px 18px; border-left: 3px solid var(--accent); background: var(--panel2);
  border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--text); font-size: var(--fs-base); line-height: 1.7; }
.vf-big { display: flex; align-items: baseline; gap: 10px; }
.vf-big b { font-size: 112px; font-weight: 800; color: var(--link); line-height: .9; letter-spacing: -5px; font-variant-numeric: tabular-nums; }
.vf-big span { font-size: 30px; font-weight: 700; }
.vf-big i { font-style: normal; color: var(--muted); font-size: var(--fs-sm); margin-left: 6px; }
.vf-age-sub { display: flex; gap: 14px; margin-top: 24px; }
.vf-age-sub > div { flex: 1; background: var(--panel2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; }
.vf-age-sub b { display: block; font-size: var(--fs-xl); font-weight: 800; color: var(--link); font-variant-numeric: tabular-nums; }
.vf-age-sub i { display: block; font-style: normal; color: var(--muted); font-size: var(--fs-xs); margin-top: 6px; line-height: 1.5; }

/* 가로 막대 */
.vf-bars { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.vf-bar { display: flex; align-items: center; gap: 16px; }
.vf-bar-n { width: 168px; flex: none; font-size: var(--fs-base); font-weight: 600; }
.vf-bar-t { flex: 1; height: 26px; background: var(--panel2); border-radius: var(--r-sm); overflow: hidden; }
.vf-bar-f { display: block; height: 100%; background: var(--accent); border-radius: var(--r-sm); }
.vf-bar-f.hi { background: linear-gradient(90deg, var(--accent), var(--link)); }
.vf-bar-v { width: 128px; flex: none; text-align: right; font-size: var(--fs-base); font-weight: 700;
  color: var(--link); font-variant-numeric: tabular-nums; }
.vf-bar-v i { font-style: normal; color: var(--muted); font-size: var(--fs-xs); font-weight: 500; margin-left: 7px; }
.vf-bars-sm .vf-bar-t { height: 22px; }

.vf-amt { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: center; margin-top: 8px; }
.vf-amt-hero { background: var(--panel2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; }
.vf-amt-hero i { display: block; font-style: normal; color: var(--muted); font-size: var(--fs-sm); }
.vf-amt-hero b { display: block; font-size: 46px; font-weight: 800; color: var(--link); letter-spacing: -1.6px; margin: 8px 0 10px; }
.vf-amt-hero span { color: var(--muted); font-size: var(--fs-xs); line-height: 1.6; }

.vf-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.vf-chip { border: 1px solid var(--border); background: var(--panel2); border-radius: var(--r-pill);
  padding: 9px 18px; font-size: var(--fs-sm); color: var(--text); }

.vf-steps { list-style: none; counter-reset: s; padding: 0; margin: 26px 0 0; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vf-steps li { counter-increment: s; background: var(--panel2); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 24px; }
.vf-steps li::before { content: counter(s); display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r-md); background: var(--accent); color: var(--on-accent);
  font-weight: 800; font-size: var(--fs-base); margin-bottom: 14px; }
.vf-steps b { display: block; font-size: var(--fs-md); margin-bottom: 7px; }
.vf-steps span { color: var(--muted); font-size: var(--fs-sm); line-height: 1.65; }

.vf-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.vf-btn { display: inline-flex; align-items: center; background: var(--accent); color: var(--on-accent);
  font-weight: 700; font-size: var(--fs-base); padding: 15px 28px; border-radius: var(--r-lg); }
.vf-btn:hover { filter: brightness(1.08); }
.vf-btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
.vf-btn.ghost:hover { border-color: var(--accent); filter: none; }

.vf-faq { margin-top: 24px; border-top: 1px solid var(--border); }
.vf-faq details { border-bottom: 1px solid var(--border); }
.vf-faq summary { cursor: pointer; padding: 20px 36px 20px 0; font-size: var(--fs-md); font-weight: 700;
  position: relative; list-style: none; }
.vf-faq summary::-webkit-details-marker { display: none; }
.vf-faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  color: var(--link); font-size: var(--fs-xl); font-weight: 400; line-height: 1; }
.vf-faq details[open] summary::after { content: "\2212"; }
.vf-faq summary:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 3px; }
.vf-faq p { margin: 0 0 22px; color: var(--muted); font-size: var(--fs-base); line-height: 1.8; max-width: 72ch; }

.vf-ag { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 24px; }
.vf-ag-c { background: var(--panel2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 24px; }
.vf-ag-c i { display: block; font-style: normal; color: var(--link); font-size: var(--fs-sm); font-weight: 700; }
.vf-ag-c b { display: block; font-size: var(--fs-lg); margin: 8px 0 6px; font-variant-numeric: tabular-nums; }
.vf-ag-c b a { color: inherit; text-decoration: underline; }
.vf-ag-c span { color: var(--muted); font-size: var(--fs-xs); }

.vf-disc { color: var(--muted); font-size: var(--fs-xs); line-height: 1.85; margin: 44px auto 0;
  padding: 18px 16px 0; border-top: 1px solid var(--border); }
.vf-disc a { color: var(--link); text-decoration: underline; }

@media (max-width: 860px) {
  .vf-age { grid-template-columns: 1fr; gap: 34px; padding: 44px 16px; }
  .vf-amt { grid-template-columns: 1fr; gap: 26px; }
  .vf-steps { grid-template-columns: 1fr; }
  .vf-ag { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .vf-hero { padding: 40px 16px 34px; }
  .vf-h1 { font-size: 31px; letter-spacing: -1.1px; }
  .vf-h2 { font-size: 23px; letter-spacing: -.7px; }
  .vf-lead { font-size: var(--fs-base); }
  .vf-sec { padding: 42px 16px; }
  .vf-kpis { gap: 22px 30px; margin-top: 30px; }
  .vf-kpi b { font-size: var(--fs-xl); }
  .vf-big b { font-size: 78px; letter-spacing: -3px; }
  .vf-big span { font-size: var(--fs-xl); }
  /* 막대: 라벨을 위로 올리고 수치를 오른쪽에 — 좁은 폭에서 3열은 못 버틴다 */
  .vf-bar { flex-wrap: wrap; gap: 6px 10px; }
  .vf-bar-n { width: auto; flex: 1 1 auto; font-size: var(--fs-sm); }
  .vf-bar-v { width: auto; flex: none; font-size: var(--fs-sm); }
  .vf-bar-t { flex: 1 1 100%; order: 3; height: 18px; }
  .vf-search .searchbar input[type="text"], .vf-search .btn { height: 50px; }
  .vf-faq summary { font-size: var(--fs-base); padding: 17px 32px 17px 0; }
}

/* ── /verify 히어로 v2 — 텍스트만이라 허전하다는 피드백 반영 ──────────────
   왼쪽은 카피+검색, 오른쪽은 "제품이 뭘 보여주는지"를 그대로 보여주는 결과 카드.
   배경은 AI 이미지 + 라디얼 글로우. 강조색은 사이트가 이미 쓰는 #fbbf24(hot) 를 그대로 쓴다. */
.vf-hero {
  position: relative; overflow: hidden; padding: 0 0 48px;
  background:
    radial-gradient(900px 420px at 72% 18%, rgba(93, 138, 194, .20), transparent 68%),
    radial-gradient(600px 300px at 12% 6%, rgba(127, 180, 216, .10), transparent 70%),
    var(--bg);
}
.vf-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('/assets/verify-hero.webp') right top / 62% auto no-repeat;
  opacity: .85; mask-image: linear-gradient(90deg, transparent 18%, #000 52%);
  -webkit-mask-image: linear-gradient(90deg, transparent 18%, #000 52%);
}
.vf-hero > * { position: relative; z-index: 1; }
.vf-hero-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding: 74px 16px 54px; }

.vf-badge { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 20px;
  background: rgba(93, 138, 194, .13); border: 1px solid rgba(127, 180, 216, .3);
  color: var(--link); font-size: var(--fs-sm); font-weight: 700; padding: 8px 15px; border-radius: var(--r-pill); }
.vf-badge span { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74, 222, 128, .18); }

/* 결과 미리보기 카드 — 이 페이지에서 시선을 가장 먼저 받는 요소 */
.vf-card {
  background: linear-gradient(170deg, var(--panel2), var(--panel));
  border: 1px solid var(--border-strong); border-radius: 18px; padding: 24px 26px 20px;
  box-shadow: 0 32px 70px -22px rgba(0, 0, 0, .85), 0 0 0 1px rgba(127, 180, 216, .07) inset;
}
.vf-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.vf-card-k { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .3px; }
.vf-card-d { color: var(--link); font-size: var(--fs-xs); font-family: ui-monospace, monospace; }
.vf-card-name { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 27px; font-weight: 800; letter-spacing: -.8px; margin: 18px 0 18px; }
.vf-card-flag { font-size: var(--fs-xs); font-weight: 800; color: #fbbf24;
  background: rgba(251, 191, 36, .12); border: 1px solid rgba(251, 191, 36, .34);
  border-radius: var(--r-sm); padding: 5px 11px; letter-spacing: .2px; }
.vf-card-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  background: rgba(0, 0, 0, .22); border-radius: var(--r-md); padding: 16px 14px; }
.vf-card-nums > div { text-align: center; }
.vf-card-nums b { display: block; font-size: var(--fs-xl); font-weight: 800; color: var(--link);
  font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.vf-card-nums i { display: block; font-style: normal; color: var(--muted); font-size: var(--fs-2xs); margin-top: 5px; }

.vf-card-tl { margin-top: 18px; }
.vf-card-tl > i, .vf-card-tags > i { display: block; font-style: normal; color: var(--muted);
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .3px; margin-bottom: 9px; }
.vf-card-bars { display: flex; align-items: flex-end; gap: 6px; height: 46px; }
.vf-card-bars b { flex: 1; background: linear-gradient(180deg, var(--link), var(--accent)); border-radius: 3px 3px 0 0; opacity: .9; }
.vf-card-bars b:nth-child(5) { background: linear-gradient(180deg, #fbbf24, #d97706); }

.vf-card-tags { margin-top: 18px; }
.vf-card-tags span { display: inline-block; border: 1px solid var(--border); background: rgba(0, 0, 0, .2);
  color: var(--text); font-size: var(--fs-xs); border-radius: var(--r-sm); padding: 6px 12px; margin: 0 7px 7px 0; }
.vf-card-note { margin: 16px 0 0; padding-top: 13px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: var(--fs-2xs); }

/* KPI — 더 크게, 구분선 위에 */
.vf-kpis { display: flex; flex-wrap: wrap; gap: 44px; padding-top: 28px; margin-top: 0; border-top: 1px solid var(--border); }
.vf-kpi b { font-size: 36px; }

@media (max-width: 980px) {
  .vf-hero::before { background-size: 120% auto; background-position: center top;
    mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 72%); opacity: .5; }
  .vf-hero-in { grid-template-columns: 1fr; gap: 38px; padding: 50px 16px 38px; }
  .vf-card-name { font-size: 23px; }
}
@media (max-width: 640px) {
  .vf-hero-in { padding: 36px 16px 30px; }
  .vf-kpis { gap: 22px 34px; }
  .vf-kpi b { font-size: var(--fs-2xl); }
  .vf-card { padding: 20px 20px 16px; border-radius: 14px; }
  .vf-card-nums b { font-size: var(--fs-lg); }
}
@media (prefers-reduced-motion: reduce) { .vf-badge span { box-shadow: none; } }

/* ── /verify v3 — "번쩍이는 게 없다"는 피드백 반영 ─────────────────────────
   오로라 배경 / 회전 글로우 보더 / 샤인 스윕 / 펄스 링 / 텍스트 글로우 / 막대 성장.
   전부 prefers-reduced-motion 에서 정지한다(접근성). 색은 기존 토큰 + hot(#fbbf24) 범위 안. */

/* 1) 히어로 오로라 — 두 덩어리가 천천히 돌며 숨 쉰다 */
.vf-hero::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  top: -28%; right: -12%; width: 76%; height: 150%;
  background:
    radial-gradient(42% 38% at 62% 34%, rgba(93, 138, 194, .40), transparent 70%),
    radial-gradient(34% 30% at 38% 62%, rgba(127, 180, 216, .26), transparent 72%),
    radial-gradient(26% 24% at 74% 72%, rgba(251, 191, 36, .14), transparent 74%);
  filter: blur(42px);
  animation: vfAurora 16s ease-in-out infinite alternate;
}
@keyframes vfAurora {
  0%   { transform: translate3d(0, 0, 0) scale(1);      opacity: .85; }
  50%  { transform: translate3d(-4%, 3%, 0) scale(1.08); opacity: 1; }
  100% { transform: translate3d(3%, -3%, 0) scale(1.04); opacity: .9; }
}

/* 2) h1 강조어 — 글로우 + 밑줄 스윕 */
.vf-h1 em {
  position: relative; color: #9ecbe8;
  text-shadow: 0 0 22px rgba(127, 180, 216, .55), 0 0 56px rgba(93, 138, 194, .35);
}
.vf-h1 em::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.08em; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, #7fb4d8, #fbbf24, transparent);
  background-size: 220% 100%;
  animation: vfSweep 3.2s linear infinite;
}
@keyframes vfSweep { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

/* 3) 결과 카드 — 회전하는 그라데이션 테두리 + 표면 샤인 스윕 */
.vf-card { position: relative; isolation: isolate; }
.vf-card::before {
  content: ''; position: absolute; inset: -1.5px; border-radius: 19px; z-index: -1;
  background: conic-gradient(from 0deg, transparent 0 42%, rgba(127, 180, 216, .95) 52%,
    rgba(251, 191, 36, .9) 60%, transparent 70% 100%);
  animation: vfSpin 5.5s linear infinite;
}
@keyframes vfSpin { to { transform: rotate(1turn); } }
.vf-card::after {
  content: ''; position: absolute; inset: 0; border-radius: 18px; pointer-events: none; overflow: hidden;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .11) 48%, transparent 58%);
  background-size: 260% 100%;
  animation: vfShine 4.6s ease-in-out infinite;
}
@keyframes vfShine { 0%, 62% { background-position: 150% 0; } 100% { background-position: -60% 0; } }

/* 4) "제보 12건" 배지 — 숨 쉬는 글로우 */
.vf-card-flag {
  box-shadow: 0 0 0 0 rgba(251, 191, 36, .5);
  animation: vfFlag 2.4s ease-out infinite;
}
@keyframes vfFlag {
  0%   { box-shadow: 0 0 0 0 rgba(251, 191, 36, .45), 0 0 14px rgba(251, 191, 36, .25); }
  70%  { box-shadow: 0 0 0 11px rgba(251, 191, 36, 0),  0 0 22px rgba(251, 191, 36, .4); }
  100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0),     0 0 14px rgba(251, 191, 36, .25); }
}

/* 5) 라이브 점 — 펄스 링 */
.vf-badge span { position: relative; }
.vf-badge span::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid rgba(74, 222, 128, .7);
  animation: vfPulse 2s ease-out infinite;
}
@keyframes vfPulse {
  0%   { transform: scale(.7); opacity: 1; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* 6) 미니 막대 — 자라면서 들어오고 피크는 빛난다 */
.vf-card-bars b { transform-origin: bottom; animation: vfGrow .9s cubic-bezier(.2, .9, .25, 1) both; }
.vf-card-bars b:nth-child(1) { animation-delay: .05s } .vf-card-bars b:nth-child(2) { animation-delay: .12s }
.vf-card-bars b:nth-child(3) { animation-delay: .19s } .vf-card-bars b:nth-child(4) { animation-delay: .26s }
.vf-card-bars b:nth-child(5) { animation-delay: .33s; box-shadow: 0 0 18px rgba(251, 191, 36, .75); }
.vf-card-bars b:nth-child(6) { animation-delay: .4s }  .vf-card-bars b:nth-child(7) { animation-delay: .47s }
@keyframes vfGrow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: .9; } }

/* 7) KPI 숫자 — 은은한 글로우 */
.vf-kpi b { text-shadow: 0 0 26px rgba(127, 180, 216, .35); }

/* 8) 107일 — 이 페이지 주인공이니 가장 세게 */
.vf-big b {
  background: linear-gradient(135deg, #cfe6f6 0%, #7fb4d8 42%, #5d8ac2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 34px rgba(127, 180, 216, .45));
}
.vf-age-sub > div { position: relative; overflow: hidden; }
.vf-age-sub > div::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .07) 50%, transparent 60%);
  background-size: 300% 100%; animation: vfShine 5.4s ease-in-out infinite; animation-delay: 1.2s;
}

/* 9) 막대 그래프 — 채워지며 들어오고 1위는 글로우 */
.vf-bar-f { transform-origin: left; animation: vfFill 1s cubic-bezier(.2, .9, .25, 1) both; }
.vf-bar-f.hi { box-shadow: 0 0 20px rgba(127, 180, 216, .5); }
@keyframes vfFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 10) CTA 버튼 — 글로우 + 호버 리프트 */
.vf-btn { position: relative; box-shadow: 0 10px 30px -10px rgba(93, 138, 194, .7); transition: transform .18s, box-shadow .18s; }
.vf-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -10px rgba(93, 138, 194, .95); }
.vf-btn.ghost { box-shadow: none; }

/* 11) 섹션 밴드 상단에 가는 빛줄 */
.vf-band { position: relative; }
.vf-band::before {
  content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: min(560px, 70%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(127, 180, 216, .75), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .vf-hero::after, .vf-h1 em::after, .vf-card::before, .vf-card::after,
  .vf-card-flag, .vf-badge span::after, .vf-card-bars b, .vf-bar-f, .vf-age-sub > div::after {
    animation: none !important;
  }
  .vf-card-bars b, .vf-bar-f { transform: none; opacity: .9; }
}

/* ── /verify v3 수정: 회전 conic 보더 폐기 ───────────────────────────────
   회전시키면 사각형 모서리가 카드 밖으로 쓸려 나가 노란 삼각형이 된다(실측).
   대신 border-box/padding-box 2중 배경으로 "테두리에만" 그라데이션을 깔고,
   그 그라데이션의 위치만 애니메이션해서 빛이 테두리를 따라 흐르게 한다. 삐져나올 곳이 없다. */
.vf-card::before { display: none !important; }
.vf-card {
  border: 1.5px solid transparent;
  background:
    linear-gradient(170deg, var(--panel2), var(--panel)) padding-box,
    linear-gradient(115deg,
      rgba(127, 180, 216, .15) 0%,
      rgba(127, 180, 216, .95) 22%,
      rgba(251, 191, 36, .9) 34%,
      rgba(127, 180, 216, .25) 48%,
      rgba(127, 180, 216, .12) 70%,
      rgba(127, 180, 216, .15) 100%) border-box;
  background-size: 100% 100%, 300% 100%;
  animation: vfBorderFlow 6s linear infinite;
}
@keyframes vfBorderFlow {
  0%   { background-position: 0 0, 200% 0; }
  100% { background-position: 0 0, -100% 0; }
}
/* 샤인 스윕은 카드 안쪽으로만 */
.vf-card::after { border-radius: 16px; }

@media (prefers-reduced-motion: reduce) { .vf-card { animation: none !important; } }

/* ── /verify v4 — "색이 2개뿐이라 심심하다 + 스크롤 효과가 없다" 반영 ──────
   (1) 섹션마다 고유 액센트를 준다. 스크롤하면 색이 바뀌어 리듬이 생긴다.
   (2) 스크롤 진입 애니메이션은 **CSS scroll-driven**(animation-timeline: view())으로.
       JS 없이 되고, 미지원 브라우저(사파리/파폭)에서는 @supports 밖이라 그냥 보인다 = 안전.
   색은 전부 어두운 배경에서 대비 7:1 이상으로 골랐다. */

.vf-sec, .vf-age, .vf-hero-in { --sa: var(--link); --sa2: var(--accent); }

/* 섹션별 액센트 — nth-of-type 대신 명시 클래스가 안전하므로 섹션 래퍼에 직접 지정 */
.vf-s-age   { --sa: #67e8f9; --sa2: #22d3ee; }   /* 도메인 수명 — 시안 */
.vf-s-method{ --sa: #fbbf24; --sa2: #f59e0b; }   /* 수법 분포 — 앰버 */
.vf-s-amt   { --sa: #fb7185; --sa2: #e11d48; }   /* 피해 규모 — 로즈 */
.vf-s-comm  { --sa: #c4b5fd; --sa2: #8b5cf6; }   /* 커뮤니티 — 바이올렛 */
.vf-s-step  { --sa: #7fb4d8; --sa2: #5d8ac2; }   /* 3단계 — 사이트 기본 */
.vf-s-faq   { --sa: #5eead4; --sa2: #14b8a6; }   /* FAQ — 틸 */
.vf-s-ag    { --sa: #4ade80; --sa2: #22c55e; }   /* 신고처 — 그린 */

/* 섹션 액센트를 쓰는 요소들 */
.vf-kicker { color: var(--sa); }
.vf-h2 { position: relative; padding-left: 18px; }
.vf-h2::before {
  content: ''; position: absolute; left: 0; top: .18em; bottom: .18em; width: 5px; border-radius: 3px;
  background: linear-gradient(180deg, var(--sa), var(--sa2));
  box-shadow: 0 0 16px color-mix(in srgb, var(--sa) 55%, transparent);
}
.vf-bar-v { color: var(--sa); }
.vf-bar-f { background: linear-gradient(90deg, var(--sa2), var(--sa)); }
.vf-bar-f.hi { box-shadow: 0 0 22px color-mix(in srgb, var(--sa) 60%, transparent); }
.vf-quote { border-left-color: var(--sa); }
.vf-quote b { color: var(--sa); }
.vf-big b { background: linear-gradient(135deg, #e6fbff 0%, var(--sa) 45%, var(--sa2) 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 36px color-mix(in srgb, var(--sa) 45%, transparent)); }
.vf-age-sub b { color: var(--sa); }
.vf-amt-hero { border-color: color-mix(in srgb, var(--sa) 40%, var(--border)); }
.vf-amt-hero b { color: var(--sa); text-shadow: 0 0 30px color-mix(in srgb, var(--sa) 45%, transparent); }
.vf-ag-c i { color: var(--sa); }
.vf-faq summary::after { color: var(--sa); }
.vf-steps li::before { background: linear-gradient(135deg, var(--sa), var(--sa2)); color: #0b0f17;
  box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--sa) 70%, transparent); }
.vf-band::before { background: linear-gradient(90deg, transparent, var(--sa), transparent); }

/* 섹션 배경 글로우 — 색이 깔려야 "심심"하지 않다 */
.vf-band { position: relative; overflow: hidden; }
.vf-band::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: -40%; width: 1100px; height: 420px; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--sa) 16%, transparent), transparent 72%);
  filter: blur(30px);
}
.vf-band > * { position: relative; z-index: 1; }

/* 칩 — 색을 순환시켜 알록달록하게 */
.vf-chip { transition: transform .16s, border-color .16s, box-shadow .16s; }
.vf-chip:nth-child(7n+1) { border-color: rgba(103,232,249,.4); color: #a5f3fc; }
.vf-chip:nth-child(7n+2) { border-color: rgba(251,191,36,.4);  color: #fde68a; }
.vf-chip:nth-child(7n+3) { border-color: rgba(251,113,133,.4); color: #fecdd3; }
.vf-chip:nth-child(7n+4) { border-color: rgba(196,181,253,.4); color: #ddd6fe; }
.vf-chip:nth-child(7n+5) { border-color: rgba(94,234,212,.4);  color: #99f6e4; }
.vf-chip:nth-child(7n+6) { border-color: rgba(74,222,128,.4);  color: #bbf7d0; }
.vf-chip:nth-child(7n+7) { border-color: rgba(127,180,216,.45);color: #bfdbfe; }
.vf-chip:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -12px currentColor; }

/* 카드 호버 — 떠오르고 섹션 색으로 빛난다 */
.vf-age-sub > div, .vf-steps li, .vf-ag-c, .vf-amt-hero { transition: transform .2s, border-color .2s, box-shadow .2s; }
.vf-age-sub > div:hover, .vf-steps li:hover, .vf-ag-c:hover, .vf-amt-hero:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--sa) 55%, var(--border));
  box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--sa) 70%, transparent);
}
.vf-bar:hover .vf-bar-f { filter: brightness(1.25); }
.vf-faq summary:hover { color: var(--sa); }

/* ── 스크롤 진입 효과 (CSS scroll-driven) ──────────────────────────────── */
@supports (animation-timeline: view()) {
  .vf-sec > h2, .vf-sec > .vf-lead, .vf-sec > .vf-src,
  .vf-bars .vf-bar, .vf-steps li, .vf-ag-c, .vf-faq details,
  .vf-age-l > *, .vf-age-r, .vf-amt > *, .vf-chips, .vf-cta {
    animation: vfRise linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 32%;
  }
  /* 막대는 왼쪽에서 밀려들어오게 */
  .vf-bars .vf-bar { animation-name: vfSlide; }
  /* 107일 숫자는 살짝 확대되며 */
  .vf-big { animation: vfPop linear both; animation-timeline: view(); animation-range: entry 10% cover 36%; }
}
@keyframes vfRise  { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes vfSlide { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes vfPop   { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  @supports (animation-timeline: view()) {
    .vf-sec > h2, .vf-sec > .vf-lead, .vf-sec > .vf-src, .vf-bars .vf-bar, .vf-steps li,
    .vf-ag-c, .vf-faq details, .vf-age-l > *, .vf-age-r, .vf-amt > *, .vf-chips, .vf-cta, .vf-big {
      animation: none !important; opacity: 1 !important; transform: none !important;
    }
  }
  .vf-chip:hover, .vf-age-sub > div:hover, .vf-steps li:hover, .vf-ag-c:hover, .vf-amt-hero:hover { transform: none; }
}

/* ── /verify v5 — 스크롤 연동 효과 ─────────────────────────────────────────
   (1) 막대가 스크롤에 맞춰 실제로 늘어난다(진입 시 한 번 재생이 아니라 스크롤 위치에 묶임)
   (2) 카드가 3D 로 회전하며 들어온다
   (3) 107 숫자가 0 부터 올라간다 (@property + counter, JS 0줄)
   (4) 히어로 결과 카드가 스크롤에 따라 기울며 떠오른다
   (5) 상단 스크롤 진행바
   전부 Chrome 계열 전용(animation-timeline). 미지원 브라우저는 @supports 밖이라 정적으로 보인다. */

/* 5) 스크롤 진행바 — 페이지 맨 위 */
@supports (animation-timeline: scroll()) {
  .vf::before {
    content: ''; position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 50; transform-origin: 0 50%;
    background: linear-gradient(90deg, #67e8f9, #fbbf24, #fb7185, #c4b5fd, #5eead4, #4ade80);
    animation: vfProgress linear both; animation-timeline: scroll(root);
  }
  @keyframes vfProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

@supports (animation-timeline: view()) {
  /* 1) 막대 — 스크롤 위치에 묶어서 늘어난다. 되감으면 다시 줄어든다. */
  .vf-bar-f {
    animation: vfFillScroll linear both;
    animation-timeline: view();
    animation-range: entry 24% cover 48%;
  }
  @keyframes vfFillScroll { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* 숫자 라벨은 막대보다 살짝 늦게 */
  .vf-bar-v { animation: vfRise linear both; animation-timeline: view(); animation-range: entry 32% cover 54%; }

  /* 2) 카드 3D 회전 진입 */
  .vf-steps li, .vf-ag-c, .vf-age-sub > div {
    animation: vfFlip linear both; animation-timeline: view(); animation-range: entry 10% cover 40%;
    transform-style: preserve-3d;
  }
  .vf-steps li:nth-child(2) { animation-range: entry 14% cover 44%; }
  .vf-steps li:nth-child(3) { animation-range: entry 18% cover 48%; }
  .vf-ag-c:nth-child(2) { animation-range: entry 13% cover 43%; }
  .vf-ag-c:nth-child(3) { animation-range: entry 16% cover 46%; }
  .vf-ag-c:nth-child(4) { animation-range: entry 19% cover 49%; }
  @keyframes vfFlip {
    from { opacity: 0; transform: perspective(1000px) rotateX(22deg) rotateZ(-2deg) translateY(44px) scale(.94); }
    to   { opacity: 1; transform: perspective(1000px) rotateX(0) rotateZ(0) translateY(0) scale(1); }
  }

  /* 칩 — 하나씩 튀어 들어온다 */
  .vf-chip { animation: vfPopIn linear both; animation-timeline: view(); animation-range: entry 12% cover 42%; }
  .vf-chip:nth-child(2n) { animation-range: entry 16% cover 46%; }
  .vf-chip:nth-child(3n) { animation-range: entry 20% cover 50%; }
  @keyframes vfPopIn { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }

  /* 4) 히어로 결과 카드 — 스크롤 내내 기울기가 변한다(패럴랙스) */
  .vf-card {
    animation: vfBorderFlow 6s linear infinite, vfTilt linear both;
    animation-timeline: auto, view();
    animation-range: normal, entry 0% exit 90%;
  }
  @keyframes vfTilt {
    from { transform: perspective(1400px) rotateY(-7deg) rotateX(3deg) translateY(10px); }
    to   { transform: perspective(1400px) rotateY(5deg) rotateX(-3deg) translateY(-26px); }
  }

  /* 섹션 제목 — 약간 회전하며 */
  .vf-h2 { animation: vfTurn linear both; animation-timeline: view(); animation-range: entry 6% cover 30%; }
  @keyframes vfTurn { from { opacity: 0; transform: translateY(24px) rotateX(-14deg); } to { opacity: 1; transform: none; } }
}

/* 3) 107 카운트업 — @property 로 커스텀 속성을 보간하고 counter() 로 찍는다 */
@property --vfn { syntax: '<integer>'; initial-value: 0; inherits: false; }
.vf-count { counter-reset: vfn var(--vfn); }
.vf-count::after { content: counter(vfn); }
@supports (animation-timeline: view()) {
  .vf-count { animation: vfCount linear both; animation-timeline: view(); animation-range: entry 14% cover 46%; }
  @keyframes vfCount { from { --vfn: 0; } to { --vfn: var(--to); } }
}

@media (prefers-reduced-motion: reduce) {
  @supports (animation-timeline: view()) {
    .vf-bar-f, .vf-bar-v, .vf-steps li, .vf-ag-c, .vf-age-sub > div, .vf-chip, .vf-card, .vf-h2, .vf-count {
      animation: none !important; opacity: 1 !important; transform: none !important;
    }
    .vf-card { animation: vfBorderFlow 6s linear infinite !important; }
  }
  @supports (animation-timeline: scroll()) { .vf::before { display: none; } }
}

/* .hi 막대가 섹션색을 안 따라가던 버그 — v1 의 .vf-bar-f.hi 배경이 특이도로 이겨서 1위 막대만 파랑이었다. */
.vf-bar-f.hi { background: linear-gradient(90deg, var(--sa2), color-mix(in srgb, var(--sa) 70%, #ffffff)) !important; }

/* 카운트업 폐기: @keyframes 안의 var(--to) 가 보간되지 않고 끝값으로 스냅한다(실측).
   숫자는 실제 텍스트로 두는 편이 색인·스크린리더에도 낫다. 등장 효과는 vfPop 으로 충분. */
.vf-count::after { content: none; }

/* ── /verify v6 — 전 브라우저 대응 + 첫 진입 연출 + 스크롤 스냅 ──────────────
   앞선 scroll-driven(animation-timeline) 은 크롬 전용이라 사파리·파폭에서 아무 효과도 없었다.
   여기서 전부 끄고, IntersectionObserver(Fx.jsx)가 붙이는 .vf-in 으로 통일한다.
   ⚠️ 숨김은 html.vf-js 가 있을 때만 — JS 미실행(크롤러 포함)이면 그냥 보인다. */

/* 0) 크롬 전용 스크롤 애니메이션 전부 해제 — 두 메커니즘이 겹치면 상태가 꼬인다 */
@supports (animation-timeline: view()) {
  .vf-sec > h2, .vf-sec > .vf-lead, .vf-sec > .vf-src, .vf-bars .vf-bar, .vf-steps li,
  .vf-ag-c, .vf-faq details, .vf-age-l > *, .vf-age-r, .vf-amt > *, .vf-chips, .vf-cta,
  .vf-big, .vf-h2, .vf-chip, .vf-bar-v, .vf-age-sub > div {
    animation: none !important; opacity: 1; transform: none;
  }
  .vf-bar-f { animation: vfFill 1s cubic-bezier(.2,.9,.25,1) both !important; }
  .vf-card { animation: vfBorderFlow 6s linear infinite !important; }
}

/* 1) 스크롤 리빌 — JS 가 돌 때만 숨긴다 */
html.vf-js .vf-rv { opacity: 0; transform: translateY(30px); will-change: opacity, transform; }
html.vf-js .vf-rv.vf-in {
  opacity: 1; transform: none;
  transition: opacity .62s cubic-bezier(.2,.9,.25,1) var(--d, 0ms),
              transform .62s cubic-bezier(.2,.9,.25,1) var(--d, 0ms);
}
/* 막대는 왼쪽에서, 칩은 튀어나오게, 카드는 회전하며 */
html.vf-js .vf-bar.vf-rv { transform: translateX(-34px); }
html.vf-js .vf-chip.vf-rv { transform: scale(.55) rotate(-10deg); }
html.vf-js .vf-ag-c.vf-rv, html.vf-js .vf-steps.vf-rv { transform: perspective(1000px) rotateX(20deg) translateY(40px); }
html.vf-js .vf-big.vf-rv { transform: scale(.82); }
html.vf-js .vf-bar.vf-in, html.vf-js .vf-chip.vf-in,
html.vf-js .vf-ag-c.vf-in, html.vf-js .vf-steps.vf-in, html.vf-js .vf-big.vf-in { transform: none; }

/* 막대 길이도 리빌과 함께 — .vf-in 이 붙어야 늘어난다 */
html.vf-js .vf-bar.vf-rv .vf-bar-f { animation: none !important; transform: scaleX(0); transition: transform .9s cubic-bezier(.2,.9,.25,1) calc(var(--d, 0ms) + 120ms); }
html.vf-js .vf-bar.vf-in .vf-bar-f { transform: scaleX(1); }

/* 2) 첫 진입 연출 — 로드되자마자 캐스케이드. JS·브라우저 무관하게 CSS 만으로 돈다. */
.vf-badge   { animation: vfIntroUp .7s cubic-bezier(.2,.9,.25,1) both .05s; }
.vf-h1      { animation: vfIntroUp .8s cubic-bezier(.2,.9,.25,1) both .16s; }
.vf-hero-l .vf-lead { animation: vfIntroUp .8s cubic-bezier(.2,.9,.25,1) both .28s; }
.vf-search  { animation: vfIntroUp .8s cubic-bezier(.2,.9,.25,1) both .38s; }
.vf-note    { animation: vfIntroUp .8s cubic-bezier(.2,.9,.25,1) both .46s; }
.vf-hero-r  { animation: vfIntroCard 1.05s cubic-bezier(.16,.84,.26,1) both .34s; }
.vf-kpi     { animation: vfIntroUp .7s cubic-bezier(.2,.9,.25,1) both both; }
.vf-kpi:nth-child(1) { animation-delay: .56s } .vf-kpi:nth-child(2) { animation-delay: .64s }
.vf-kpi:nth-child(3) { animation-delay: .72s } .vf-kpi:nth-child(4) { animation-delay: .80s }
@keyframes vfIntroUp { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes vfIntroCard {
  from { opacity: 0; transform: perspective(1400px) rotateY(-22deg) translateX(90px) scale(.9); }
  to   { opacity: 1; transform: perspective(1400px) rotateY(-5deg) translateX(0) scale(1); }
}
/* 히어로 오로라도 커지며 등장 */
.vf-hero::after { animation: vfAuroraIn 1.4s ease-out both, vfAurora 16s ease-in-out 1.4s infinite alternate; }
@keyframes vfAuroraIn { from { opacity: 0; transform: scale(.5); } to { opacity: .9; transform: none; } }

/* 3) 스크롤 스냅 — 섹션 단위로 딱딱 멈춘다 */
html { scroll-snap-type: y proximity; scroll-behavior: smooth; scroll-padding-top: 64px; }
.vf-snap { scroll-snap-align: start; scroll-snap-stop: normal; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; scroll-behavior: auto; }
  .vf-badge, .vf-h1, .vf-hero-l .vf-lead, .vf-search, .vf-note, .vf-hero-r, .vf-kpi, .vf-hero::after {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  html.vf-js .vf-rv { opacity: 1 !important; transform: none !important; }
}

/* ── /verify v7 — 그래프를 "그 자리에서" 터지게 ──────────────────────────────
   전: 막대마다 .vf-rv 를 붙여 개별 관찰 → 섹션에 도착하기 전에 하나씩 새어 나갔다.
   후: .vf-bars 컨테이너 하나만 관찰하고, 안의 막대들은 CSS 시차로 순차 발사.
   그리고 scroll-behavior: smooth 를 뺀다 — 스냅과 겹치면 로드 직후 페이지가 튕긴다(그게 조기 발동의 원인). */
html { scroll-behavior: auto; }

/* 컨테이너가 열리기 전: 행은 왼쪽에 숨고, 막대 길이는 0 */
html.vf-js .vf-bars.vf-rv .vf-bar { opacity: 0; transform: translateX(-30px); }
html.vf-js .vf-bars.vf-rv .vf-bar-f { animation: none !important; transform: scaleX(0); }

/* 열리면: 행이 들어오고 막대가 자란다. 행마다 시차 */
html.vf-js .vf-bars.vf-in .vf-bar {
  opacity: 1; transform: none;
  transition: opacity .45s cubic-bezier(.2,.9,.25,1), transform .45s cubic-bezier(.2,.9,.25,1);
}
html.vf-js .vf-bars.vf-in .vf-bar-f {
  transform: scaleX(1);
  transition: transform .95s cubic-bezier(.16,.84,.26,1);
}
html.vf-js .vf-bars.vf-in .vf-bar:nth-child(1) { transition-delay: .00s }
html.vf-js .vf-bars.vf-in .vf-bar:nth-child(2) { transition-delay: .07s }
html.vf-js .vf-bars.vf-in .vf-bar:nth-child(3) { transition-delay: .14s }
html.vf-js .vf-bars.vf-in .vf-bar:nth-child(4) { transition-delay: .21s }
html.vf-js .vf-bars.vf-in .vf-bar:nth-child(5) { transition-delay: .28s }
html.vf-js .vf-bars.vf-in .vf-bar:nth-child(6) { transition-delay: .35s }
html.vf-js .vf-bars.vf-in .vf-bar:nth-child(7) { transition-delay: .42s }
html.vf-js .vf-bars.vf-in .vf-bar:nth-child(1) .vf-bar-f { transition-delay: .10s }
html.vf-js .vf-bars.vf-in .vf-bar:nth-child(2) .vf-bar-f { transition-delay: .17s }
html.vf-js .vf-bars.vf-in .vf-bar:nth-child(3) .vf-bar-f { transition-delay: .24s }
html.vf-js .vf-bars.vf-in .vf-bar:nth-child(4) .vf-bar-f { transition-delay: .31s }
html.vf-js .vf-bars.vf-in .vf-bar:nth-child(5) .vf-bar-f { transition-delay: .38s }
html.vf-js .vf-bars.vf-in .vf-bar:nth-child(6) .vf-bar-f { transition-delay: .45s }
html.vf-js .vf-bars.vf-in .vf-bar:nth-child(7) .vf-bar-f { transition-delay: .52s }

/* 수치 라벨은 막대가 다 자란 뒤 톡 */
html.vf-js .vf-bars.vf-rv .vf-bar-v { opacity: 0; transform: translateX(-10px) scale(.9); }
html.vf-js .vf-bars.vf-in .vf-bar-v {
  opacity: 1; transform: none;
  transition: opacity .4s ease-out, transform .4s cubic-bezier(.2,1.5,.4,1);
}
html.vf-js .vf-bars.vf-in .vf-bar:nth-child(1) .vf-bar-v { transition-delay: .62s }
html.vf-js .vf-bars.vf-in .vf-bar:nth-child(2) .vf-bar-v { transition-delay: .69s }
html.vf-js .vf-bars.vf-in .vf-bar:nth-child(3) .vf-bar-v { transition-delay: .76s }
html.vf-js .vf-bars.vf-in .vf-bar:nth-child(4) .vf-bar-v { transition-delay: .83s }
html.vf-js .vf-bars.vf-in .vf-bar:nth-child(5) .vf-bar-v { transition-delay: .90s }
html.vf-js .vf-bars.vf-in .vf-bar:nth-child(6) .vf-bar-v { transition-delay: .97s }
html.vf-js .vf-bars.vf-in .vf-bar:nth-child(7) .vf-bar-v { transition-delay: 1.04s }

@media (prefers-reduced-motion: reduce) {
  html.vf-js .vf-bars .vf-bar, html.vf-js .vf-bars .vf-bar-f, html.vf-js .vf-bars .vf-bar-v {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}