/* =============================================================================
 *  Payvit — 비주얼·인터랙션 레이어 (2026-10 고도화)
 *  - style.css 는 건드리지 않고 이 파일에서만 덧붙임
 *  - 색은 tokens.css 토큰만 사용 (--brand, --surface-*, --ink-*, --success ...)
 *  - 모든 애니메이션은 '최종 모습'이 기본 상태 — 움직임 줄이기 설정 시 정지
 * ============================================================================= */

/* ─── 공통 ─────────────────────────────────────────────────────────────────── */
.pv-pending { opacity: 0; transform: translateY(16px); }
.pv-shown { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }

/* ─── 1. Hero: 떠 있는 결제 화면들 ──────────────────────────────────────────── */
.hero__visual .pv-float { position: absolute; z-index: 3; pointer-events: none; }
.pv-phone {
    left: -56px; bottom: -48px; width: 176px;
    background: var(--surface-0); color: var(--ink-900);
    border: 1px solid var(--border-subtle); border-radius: 26px;
    box-shadow: var(--shadow-xl); padding: 14px 12px 16px;
    animation: pv-bob 7s ease-in-out infinite;
}
.pv-phone__notch { width: 44px; height: 5px; border-radius: 3px; background: var(--ink-200); margin: 0 auto 12px; }
.pv-phone__brand { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: var(--fw-bold); color: var(--ink-500); }
.pv-phone__brand i { width: 14px; height: 14px; border-radius: 4px; background: var(--gradient-brand); }
.pv-phone__item { margin-top: 10px; font-size: 12px; color: var(--ink-500); }
.pv-phone__amount { font-size: 22px; font-weight: var(--fw-black); letter-spacing: -0.02em; color: var(--ink-900); margin-top: 2px; font-variant-numeric: tabular-nums; }
.pv-phone__card { margin-top: 10px; height: 46px; border-radius: 10px; background: linear-gradient(135deg, #2a1a35, #e94560); position: relative; overflow: hidden; }
.pv-phone__card::after { content: ""; position: absolute; left: 10px; bottom: 9px; width: 46px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.55); box-shadow: 0 -10px 0 0 rgba(255,255,255,.25); }
.pv-phone__btn { margin-top: 10px; height: 32px; border-radius: 10px; background: var(--brand); color: #fff; font-size: 12px; font-weight: var(--fw-bold); display: grid; place-items: center; position: relative; overflow: hidden; }
.pv-phone__btn span { transition: opacity .3s; }
.pv-phone__btn .done { position: absolute; inset: 0; display: grid; place-items: center; background: var(--success); opacity: 0; }
.pv-phone.is-paid .pv-phone__btn .done { opacity: 1; }

.pv-toast {
    right: -28px; top: -26px;
    display: flex; align-items: center; gap: 10px;
    background: var(--surface-0); color: var(--ink-900);
    border: 1px solid var(--border-subtle); border-radius: 16px;
    padding: 10px 14px 10px 10px; box-shadow: var(--shadow-lg);
    font-size: 13px; line-height: 1.35;
    animation: pv-bob 6s ease-in-out infinite; animation-delay: -2s;
}
.pv-toast__ico { width: 30px; height: 30px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: grid; place-items: center; font-weight: var(--fw-black); }
.pv-toast b { display: block; font-weight: var(--fw-bold); }
.pv-toast small { color: var(--ink-500); font-size: 11.5px; }
.pv-toast.is-pop { animation: pv-pop .5s var(--ease-out), pv-bob 6s ease-in-out infinite; }
@keyframes pv-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes pv-pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 1100px) { .pv-phone { left: -24px; } .pv-toast { right: -8px; } }
@media (max-width: 880px) {
    /* 모바일: 폰 화면은 수수료 카드를 가리므로 숨기고, 알림만 위에 */
    .pv-phone { display: none; }
    .pv-toast { right: auto; left: 8px; top: -30px; }
}

/* ─── 2. 업종 흐르는 띠 ─────────────────────────────────────────────────────── */
.pv-marquee { padding: 22px 0; background: var(--surface-0); border-bottom: 1px solid var(--border-subtle); overflow: hidden; position: relative; }
.pv-marquee::before, .pv-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 1; pointer-events: none; }
.pv-marquee::before { left: 0; background: linear-gradient(90deg, var(--surface-0), transparent); }
.pv-marquee::after { right: 0; background: linear-gradient(270deg, var(--surface-0), transparent); }
.pv-marquee__label { text-align: center; font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .08em; color: var(--ink-500); margin-bottom: 14px; }
.pv-marquee__track { display: flex; width: max-content; animation: pv-slide 40s linear infinite; }
.pv-marquee:hover .pv-marquee__track { animation-play-state: paused; }
.pv-marquee__group { display: flex; }
.pv-marquee__item { display: inline-flex; align-items: center; gap: 10px; padding: 0 22px; font-size: 1.125rem; font-weight: var(--fw-bold); color: var(--ink-700); white-space: nowrap; }
.pv-marquee__item::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin-left: 22px; }
.pv-marquee__item em { font-style: normal; font-size: 1.25rem; }
@keyframes pv-slide { to { transform: translateX(-50%); } }

/* ─── 3. 결제 흐름 비교 ─────────────────────────────────────────────────────── */
.pv-flow { background: var(--surface-0); }
.pv-flow__lanes { display: grid; gap: var(--space-5); margin-top: var(--space-10); }
.pv-lane { border-radius: var(--radius-xl); padding: var(--space-6) var(--space-8); border: 1px solid var(--border-subtle); background: var(--surface-1); display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: var(--space-6); }
.pv-lane--ours { background: var(--surface-dark); border-color: transparent; color: #fff; box-shadow: var(--shadow-brand); }
.pv-lane__name { font-weight: var(--fw-extrabold); font-size: 1.125rem; line-height: 1.3; }
.pv-lane__name small { display: block; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--ink-500); margin-top: 4px; }
.pv-lane--ours .pv-lane__name small { color: rgba(255,255,255,.6); }
.pv-lane__track { display: flex; align-items: center; min-width: 0; }
.pv-node { flex: none; display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 92px; }
.pv-node__box { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem; background: var(--surface-0); border: 1px solid var(--border-subtle); }
.pv-lane--ours .pv-node__box { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.pv-node__label { font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--ink-700); line-height: 1.3; }
.pv-lane--ours .pv-node__label { color: rgba(255,255,255,.85); }
.pv-node__sub { font-size: 11px; font-weight: var(--fw-semibold); color: var(--ink-500); }
.pv-node--cut .pv-node__box { background: var(--danger-soft, #fee2e2); border-color: transparent; }
.pv-node--cut .pv-node__sub { color: var(--danger, #dc2626); }
.pv-node--goal .pv-node__box { background: var(--success); border-color: transparent; color: #fff; }
.pv-node--goal .pv-node__sub, .pv-lane--ours .pv-node__sub { color: #4ade80; }
.pv-wire { flex: 1; min-width: 24px; height: 2px; margin: 0 4px 30px; position: relative; background: repeating-linear-gradient(90deg, var(--ink-300) 0 6px, transparent 6px 12px); }
.pv-lane--ours .pv-wire { background: linear-gradient(90deg, rgba(233,69,96,.35), rgba(74,222,128,.55)); }
.pv-wire i { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--ink-400); animation: pv-travel 2.6s linear infinite; }
.pv-lane--ours .pv-wire i { background: #4ade80; box-shadow: 0 0 12px rgba(74,222,128,.8); animation-duration: 1.4s; }
.pv-wire i:nth-child(2) { animation-delay: -1.3s; }
.pv-lane--ours .pv-wire i:nth-child(2) { animation-delay: -.7s; }
@keyframes pv-travel { from { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { left: calc(100% - 10px); opacity: 0; } }
.pv-flow__note { margin-top: var(--space-5); text-align: center; font-size: var(--text-xs); color: var(--ink-500); }
@media (max-width: 880px) {
    .pv-lane { grid-template-columns: 1fr; padding: var(--space-5) var(--space-4); gap: var(--space-4); }
    .pv-node { min-width: 0; flex: 1 1 0; }
    .pv-node__box { width: 44px; height: 44px; border-radius: 12px; font-size: 1.2rem; }
    .pv-node__label { font-size: 11px; }
    .pv-node__sub { font-size: 10px; }
    .pv-wire { flex: 0 0 14px; min-width: 14px; margin: 0 0 30px; }
    .pv-wire i:nth-child(2) { display: none; }
}

/* ─── 4. 100만원 결제 시 수수료 막대 ───────────────────────────────────────── */
.pv-bars { margin: var(--space-10) auto 0; max-width: 880px; background: var(--surface-0); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-sm); }
.pv-bars__title { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-6); }
.pv-bars__title h3 { font-size: var(--text-h3); font-weight: var(--fw-extrabold); color: var(--ink-900); }
.pv-bars__title span { font-size: var(--text-xs); color: var(--ink-500); }
.pv-bar { display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px; align-items: center; gap: 16px; padding: 10px 0; }
.pv-bar__name { font-weight: var(--fw-bold); color: var(--ink-800); font-size: var(--text-small); }
.pv-bar__name small { display: block; color: var(--ink-500); font-weight: var(--fw-medium, 500); font-size: 12px; }
.pv-bar__track { height: 22px; border-radius: 11px; background: var(--surface-1); position: relative; overflow: hidden; }
.pv-bar__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 11px; width: var(--w); background: var(--success); transition: width 1.2s var(--ease-out); min-width: 6px; }
.pv-bar__range { position: absolute; top: 0; bottom: 0; left: var(--from); width: calc(var(--w) - var(--from)); background: repeating-linear-gradient(135deg, rgba(220,38,38,.55) 0 6px, rgba(220,38,38,.25) 6px 12px); border-radius: 0 11px 11px 0; transition: width 1.2s var(--ease-out) .3s; }
.pv-bar--pg .pv-bar__fill { background: var(--danger, #dc2626); border-radius: 11px 0 0 11px; }
.pv-bar__val { text-align: right; font-weight: var(--fw-extrabold); color: var(--ink-900); font-variant-numeric: tabular-nums; }
.pv-bar--ours .pv-bar__val { color: var(--success); }
.pv-bar--pg .pv-bar__val { color: var(--danger, #dc2626); }
.pv-bars.pv-pending .pv-bar__fill { width: 0; }
.pv-bars.pv-pending .pv-bar__range { width: 0; }
.pv-bars__foot { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px dashed var(--border-color); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: var(--text-small); color: var(--ink-700); }
.pv-bars__foot b { color: var(--brand); font-weight: var(--fw-black); }
.pv-bars__foot small { color: var(--ink-500); font-size: 12px; }
@media (max-width: 640px) {
    .pv-bars { padding: var(--space-6); }
    .pv-bar { grid-template-columns: 1fr auto; row-gap: 6px; }
    .pv-bar__track { grid-column: 1 / -1; grid-row: 2; }
}

/* ─── 5. 고객 유형 카드 미니 화면 ──────────────────────────────────────────── */
.ucard .pv-mini { margin: var(--space-5) 0 var(--space-4); border-radius: var(--radius-md); background: var(--surface-1); padding: 12px; font-size: 12px; line-height: 1.45; min-height: 92px; display: grid; gap: 6px; align-content: start; transition: transform .3s var(--ease-out); }
.ucard:hover .pv-mini { transform: translateY(-3px); }
.ucard--feature .pv-mini { background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); }
.pv-mini__bubble { justify-self: start; max-width: 92%; background: var(--surface-0); border: 1px solid var(--border-subtle); color: var(--ink-700); padding: 7px 10px; border-radius: 12px 12px 12px 4px; }
.pv-mini__link { justify-self: start; display: inline-flex; gap: 6px; align-items: center; background: var(--brand); color: #fff; font-weight: var(--fw-bold); padding: 6px 10px; border-radius: 10px; }
.pv-mini__row { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-700); }
.pv-mini__row b { color: var(--ink-900); font-variant-numeric: tabular-nums; }
.pv-mini__stamp { justify-self: end; margin-top: 2px; font-size: 11px; font-weight: var(--fw-black); color: var(--success); border: 2px solid var(--success); border-radius: 6px; padding: 1px 8px; transform: rotate(-6deg); }
.pv-mini code { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pv-mini code .k { color: #ff8fa3; } .pv-mini code .ok { color: #4ade80; }
.pv-mini__bars { display: flex; align-items: flex-end; gap: 8px; height: 54px; }
.pv-mini__bars span { flex: 1; border-radius: 4px 4px 0 0; background: var(--brand); opacity: .85; height: var(--h); transform-origin: bottom; animation: pv-grow 3s ease-in-out infinite alternate; }
.pv-mini__bars span:nth-child(2) { animation-delay: -.8s; } .pv-mini__bars span:nth-child(3) { animation-delay: -1.6s; } .pv-mini__bars span:nth-child(4) { animation-delay: -2.2s; }
.pv-mini__axis { display: flex; gap: 8px; font-size: 10.5px; color: var(--ink-500); } .pv-mini__axis span { flex: 1; text-align: center; }
@keyframes pv-grow { from { transform: scaleY(.6); } to { transform: scaleY(1); } }
.pv-caret { display: inline-block; width: 6px; height: 12px; background: currentColor; vertical-align: -2px; margin-left: 2px; animation: pv-caret 1s steps(1) infinite; }
@keyframes pv-caret { 50% { opacity: 0; } }

/* ─── 6. 3단계: 순서대로 켜지는 진행선 ─────────────────────────────────────── */
.how__steps { position: relative; }
.how__step-num { transition: background .4s, box-shadow .4s, color .4s; }
.how__step.pv-lit .how__step-num { box-shadow: 0 0 0 6px var(--brand-soft); }
@media (min-width: 881px) {
    .how__steps::before { content: ""; position: absolute; left: 6%; right: 6%; top: 62px; height: 2px; background: var(--border-subtle); z-index: 0; }
    .how__steps::after { content: ""; position: absolute; left: 6%; top: 62px; height: 2px; width: calc(88% * var(--pv-p, 1)); background: var(--gradient-brand); z-index: 0; transition: width .2s linear; }
    .how__step { z-index: 1; }
}

/* ─── 움직임 줄이기 ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pv-phone, .pv-toast, .pv-marquee__track, .pv-wire i, .pv-mini__bars span, .pv-caret { animation: none !important; }
    .pv-marquee__track { flex-wrap: wrap; width: auto; justify-content: center; }
    .pv-marquee__group[aria-hidden] { display: none; }
    .pv-wire i { display: none; }
}

/* 막대 길이 = 금액 / 55,000원 (일반 PG 최대 5.5%) */
.pv-w-check { --w: 2.73%; }
.pv-w-credit { --w: 7.27%; }
.pv-w-pg { --w: 58.18%; }
.pv-w-pgmax { --from: 58.18%; --w: 100%; }
.pv-h-1 { --h: 62%; } .pv-h-2 { --h: 88%; } .pv-h-3 { --h: 74%; } .pv-h-4 { --h: 52%; }

/* 모바일: 히어로 메인 버튼 글자가 버튼 밖으로 넘치던 문제 (두 버튼이 같은 폭이라 긴 쪽이 넘침) */
@media (max-width: 480px) {
    .hero__cta .btn { padding-left: 16px; padding-right: 16px; }
    .hero__cta .btn-primary { flex: 1.5 1 0; }
}

/* ─── 7. 서브 페이지 히어로 아래 무대 ───────────────────────────────────────── */
.pv-stage { position: relative; margin: var(--space-12) auto 0; max-width: 980px; }
.pv-stage .pv-bars { margin-top: 0; }
.pv-stage .pv-flow__lanes { margin-top: 0; text-align: left; }

/* 자영업자: 결제링크 3단계 폰 */
.pv-steps3 { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 14px; text-align: left; }
.pv-arrow { color: var(--ink-300); font-size: 22px; font-weight: var(--fw-black); }
.pv-ph { background: var(--surface-0); color: var(--ink-900); border: 1px solid var(--border-subtle); border-radius: 26px; padding: 14px 14px 18px; min-height: 250px; box-shadow: var(--shadow-md); display: grid; gap: 8px; align-content: start; transition: transform .4s var(--ease-out), box-shadow .4s, border-color .4s; position: relative; }
.pv-ph::before { content: ""; width: 44px; height: 5px; border-radius: 3px; background: var(--ink-200); justify-self: center; margin-bottom: 6px; }
.pv-ph.is-active { transform: translateY(-8px); border-color: var(--brand); box-shadow: var(--shadow-brand); }
.pv-ph__step { position: absolute; top: -12px; left: 16px; font-size: 12px; font-weight: var(--fw-extrabold); color: #fff; background: var(--brand); border-radius: 999px; padding: 3px 10px; }
.pv-ph__head { font-size: 11px; font-weight: var(--fw-bold); color: var(--ink-500); }
.pv-ph__bubble { background: var(--surface-1); border-radius: 12px 12px 12px 4px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; color: var(--ink-700); }
.pv-ph__url { display: block; margin-top: 6px; color: var(--accent-blue); font-weight: var(--fw-semibold); word-break: break-all; }
.pv-ph__amount { font-size: 24px; font-weight: var(--fw-black); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pv-ph__opts { display: grid; gap: 6px; }
.pv-ph__opt { border: 1px solid var(--border-subtle); border-radius: 10px; padding: 8px 10px; font-size: 12px; font-weight: var(--fw-semibold); color: var(--ink-700); }
.pv-ph__opt.on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.pv-ph__pay { height: 36px; border-radius: 10px; background: var(--brand); color: #fff; font-size: 13px; font-weight: var(--fw-bold); display: grid; place-items: center; margin-top: 4px; }
.pv-ph__ok { width: 56px; height: 56px; border-radius: 50%; background: var(--success); color: #fff; display: grid; place-items: center; font-size: 28px; font-weight: var(--fw-black); justify-self: center; margin-top: 14px; }
.pv-ph__center { text-align: center; display: grid; gap: 4px; }
.pv-ph__center b { font-size: 16px; font-weight: var(--fw-extrabold); }
.pv-ph__center small { font-size: 12px; color: var(--ink-500); }
.pv-ph__deposit { margin-top: 8px; border-radius: 10px; background: var(--success-soft); color: var(--success); font-size: 12px; font-weight: var(--fw-bold); padding: 8px 10px; text-align: center; }
.pv-ph__label { text-align: center; font-size: var(--text-small); font-weight: var(--fw-bold); color: var(--ink-700); margin-top: 12px; }
@media (max-width: 760px) {
    .pv-steps3 { grid-template-columns: 1fr; gap: 26px; max-width: 300px; margin: 0 auto; }
    .pv-arrow { justify-self: center; transform: rotate(90deg); margin: -10px 0; }
    .pv-ph { min-height: 0; }
}

/* 플랫폼: 지점 일괄 등록 보드 */
.pv-board { text-align: left; background: var(--surface-dark); color: #fff; border-radius: var(--radius-2xl); padding: var(--space-8); box-shadow: var(--shadow-xl); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-8); align-items: start; }
.pv-board__code { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-lg); padding: 16px 18px; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 13px; line-height: 1.8; color: rgba(255,255,255,.85); overflow-x: auto; }
.pv-board__code .k { color: #ff8fa3; } .pv-board__code .s { color: #fda4b6; } .pv-board__code .c { color: rgba(255,255,255,.4); } .pv-board__code .ok { color: #4ade80; }
.pv-board__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
.pv-board__head b { font-size: 1.125rem; font-weight: var(--fw-extrabold); }
.pv-board__count { font-size: 13px; color: rgba(255,255,255,.65); font-variant-numeric: tabular-nums; }
.pv-board__count strong { color: #4ade80; font-size: 1.5rem; font-weight: var(--fw-black); }
.pv-board__list { display: grid; gap: 8px; }
.pv-board__row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.04); font-size: 13.5px; }
.pv-board__row em { font-style: normal; color: rgba(255,255,255,.5); font-size: 12px; font-variant-numeric: tabular-nums; }
.pv-board__pill { font-size: 12px; font-weight: var(--fw-bold); padding: 3px 10px; border-radius: 999px; background: rgba(74,222,128,.15); color: #4ade80; white-space: nowrap; }
.pv-board__row.is-wait .pv-board__pill { background: rgba(255,255,255,.08); color: rgba(255,255,255,.55); }
.pv-board__row.is-new { animation: pv-flash .8s var(--ease-out); }
@keyframes pv-flash { from { background: rgba(74,222,128,.25); } to { background: rgba(255,255,255,.04); } }
@media (max-width: 860px) { .pv-board { grid-template-columns: 1fr; padding: var(--space-6); } }
@media (prefers-reduced-motion: reduce) { .pv-ph, .pv-board__row { transition: none; animation: none; } }