/* =============================================================================
 *  Payvit — 2026-10-15 디자인 개편 레이어
 *  - 문구·그림(HTML)은 그대로 두고 생김새만 바꿈. style.css / fx.css 다음에 로드
 *  - 방향: 종이색 바탕 + 먹색 글씨 + 핑크는 '포인트'(마침표·밑줄·숫자)로만
 *    그라데이션 글자·네온 글로우·보라 배경 제거, 그림자 대신 가는 선
 *  - 움직임은 motion.js 가 붙임 (실패해도 내용은 그대로 보임)
 * ============================================================================= */

/* ─── 0. 바탕 ──────────────────────────────────────────────────────────────── */
body { background: var(--surface-0); color: var(--ink-800); letter-spacing: -0.01em; word-break: keep-all; }
h1, h2, h3, .section-title, .hero__title, .page-hero__title, .final-cta__title { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--ink-900); color: var(--surface-0); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.stat__value, .fee-card__row-fee, .fee-card__vs-value, .vs-table__cell, .roi__result-value,
.roi__input-label-value, .pricing-tier__rate-value, .tier-table__rate, .pv-bar__val { font-variant-numeric: tabular-nums; }

/* 그라데이션 글자 → 단색 (토큰이 단색이 되었지만, 직접 쓴 값들 정리) */
.hero__title .accent, .page-hero__title .accent, .mission__quote .accent,
.final-cta__title .accent, .section-title .accent, .stat__value,
.fee-card__row-fee, .fee-card__vs-row--ours .fee-card__vs-value, .fee-card__impact-num strong {
    background: none; -webkit-background-clip: initial; background-clip: initial;
    color: inherit; -webkit-text-fill-color: currentColor; text-shadow: none;
}

/* 강조어: 글자색은 그대로, 아래에 핑크 형광펜 밑줄이 그려짐 (.pv-in 이 붙으면) */
.accent {
    color: inherit;
    background-image: linear-gradient(var(--pv-mark, rgba(233, 69, 96, 0.28)), var(--pv-mark, rgba(233, 69, 96, 0.28))) !important;
    background-repeat: no-repeat !important;
    background-position: 0 88% !important;
    background-size: 100% 0.2em !important;
    -webkit-background-clip: border-box !important; background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    transition: background-size 0.9s var(--ease-expo) 0.25s;
    padding: 0 0.04em;
}
.js-motion .accent:not(.pv-in) { background-size: 0% 0.2em !important; }
[data-theme="dark"] .accent { --pv-mark: rgba(233, 69, 96, 0.5); }

/* 섹션 제목 끝 핑크 마침표 (motion.js 가 문장부호로 끝나지 않는 제목에만 붙임) */
.pv-dot {
    display: inline-block; width: 0.2em; height: 0.2em; margin-left: 0.06em;
    border-radius: 50%; background: var(--brand); vertical-align: baseline;
}

/* ─── 1. 섹션 머리 ─────────────────────────────────────────────────────────── */
main { counter-reset: pv-sec; }
.section-eyebrow, .hero__badge, .page-hero__badge {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 0; background: none; border: 0; border-radius: 0;
    font-size: 12.5px; font-weight: var(--fw-bold); letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-500);
}
.section-eyebrow::before, .page-hero__badge::before, .hero__badge::before {
    content: ""; flex: none; width: 22px; height: 9px;
    /* 로고의 '속도선' 세 줄 */
    background:
        linear-gradient(var(--brand), var(--brand)) 0 0 / 100% 2px no-repeat,
        linear-gradient(var(--brand), var(--brand)) 6px 50% / calc(100% - 6px) 2px no-repeat,
        linear-gradient(var(--brand), var(--brand)) 12px 100% / calc(100% - 12px) 2px no-repeat;
    opacity: 0.9;
}
main .section-eyebrow { counter-increment: pv-sec; }
main .section-eyebrow::after { content: counter(pv-sec, decimal-leading-zero); order: -1; color: var(--ink-900); letter-spacing: 0.04em; }
.trust .section-eyebrow, .final-cta .section-eyebrow { color: rgba(243, 241, 236, 0.55); }
.trust .section-eyebrow::after { color: #f3f1ec; }

.section-title { font-weight: var(--fw-extrabold); letter-spacing: -0.035em; line-height: 1.22; }
.section-subtitle { color: var(--ink-500); line-height: 1.7; }
.section-header { margin-bottom: clamp(40px, 6vw, 64px); }

/* 제목 줄 단위로 아래에서 올라오는 효과 (motion.js 가 .pv-line 으로 감쌈) */
.pv-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.pv-line__in { display: block; transition: transform 1s var(--ease-expo), opacity 1s var(--ease-expo); transition-delay: calc(var(--l, 0) * 90ms); }
.pv-lines-wait .pv-line__in { transform: translateY(105%); opacity: 0; }

/* ─── 2. 버튼 — 먹색 알약 + 핑크 점 ───────────────────────────────────────── */
.btn { border-radius: var(--radius-full); font-weight: var(--fw-bold); letter-spacing: -0.01em; transition: background-color .25s, color .25s, border-color .25s, transform .35s var(--ease-bounce), box-shadow .25s; }
.btn-lg { padding: 17px 28px; border-radius: var(--radius-full); }
.btn-primary { background: var(--ink-900); color: var(--surface-0); box-shadow: none; }
.btn-primary::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; transition: transform .35s var(--ease-bounce); }
.btn-primary:hover { background: var(--ink-900); color: var(--surface-0); box-shadow: 0 12px 24px -14px rgba(22, 21, 19, 0.55); transform: translateY(-2px); }
.btn-primary:hover::before { transform: scale(1.6); }
.btn-ghost { background: transparent; color: var(--ink-900); border: 1.5px solid var(--ink-200); }
.btn-ghost:hover { background: transparent; border-color: var(--ink-900); transform: translateY(-2px); }
[data-theme="dark"] .btn-ghost { color: var(--ink-900); }
.btn-outline { border-radius: var(--radius-full); }
.btn-arrow::after { content: "→"; font-weight: var(--fw-regular); }

/* 항상 어두운 띠 안의 버튼 — 종이색 알약 */
.final-cta .btn-primary, .inline-cta .btn-primary, .post-cta .btn-primary, .trust .btn-primary,
.pricing-tier--featured .btn-primary, .roi__panel .btn-primary, .ucard--feature .btn-primary {
    background: #f3f1ec; color: #161513;
}
.final-cta .btn-secondary, .inline-cta .btn-secondary, .post-cta .btn-secondary {
    background: transparent; color: #f3f1ec; border: 1.5px solid rgba(243, 241, 236, 0.25); backdrop-filter: none;
}
.final-cta .btn-secondary:hover, .inline-cta .btn-secondary:hover, .post-cta .btn-secondary:hover { border-color: #f3f1ec; background: transparent; }
.btn-secondary { background: var(--ink-900); color: var(--surface-0); }

/* 자석처럼 끌리는 큰 버튼 (motion.js 가 --mx/--my 설정) */
.btn-lg { translate: var(--bx, 0) var(--by, 0); }

/* ─── 3. 상단 메뉴 — 떠 있는 알약 바 ──────────────────────────────────────── */
.nav {
    top: 12px; left: 0; right: 0; margin: 0 auto; transform: translateZ(0); /* 펼친 모바일 메뉴의 기준 상자 */
    width: min(calc(var(--container-max) - 24px), calc(100% - 24px));
    border: 1px solid transparent; border-radius: 22px;
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    transition: background-color .35s, border-color .35s, box-shadow .35s, top .35s var(--ease-expo);
}
.nav--scrolled, [data-theme="dark"] .nav--scrolled {
    top: 8px;
    background: color-mix(in srgb, var(--surface-0) 82%, transparent);
    border-color: var(--border-color);
    box-shadow: 0 18px 40px -28px rgba(22, 21, 19, 0.45);
    backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
[data-theme="dark"] .nav { background: transparent; }
.nav__inner { height: 60px; padding: 0 10px 0 20px !important; max-width: none; }
.nav__logo { font-size: 1.3rem; }
.nav__logo-mark { transition: transform .5s var(--ease-bounce); }
.nav__logo:hover .nav__logo-mark { transform: translateX(3px) rotate(-6deg); }
.nav__menu { position: relative; gap: 2px; }
.nav__link { position: relative; z-index: 1; border-radius: var(--radius-full); padding: 9px 14px; color: var(--ink-600); font-weight: var(--fw-semibold); }
.nav__link:hover, [data-theme="dark"] .nav__link:hover { background: transparent; color: var(--ink-900); }
.nav__link[aria-current="page"] { color: var(--ink-900); }
.nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--brand); }
.nav__ind {
    position: absolute; top: 50%; left: 0; height: 36px; margin-top: -18px; width: 0;
    border-radius: var(--radius-full); background: var(--surface-2); opacity: 0; z-index: 0;
    transition: transform .45s var(--ease-bounce), width .45s var(--ease-bounce), opacity .25s;
    pointer-events: none;
}
.theme-toggle { border-color: transparent; }
.theme-toggle:hover { background: var(--surface-2); border-color: transparent; }
.nav__cta .btn-sm { padding: 11px 18px; }

@media (max-width: 880px) {
    .nav { top: 8px; width: calc(100% - 16px); border-radius: 18px; }
    .nav__inner { height: 56px; padding: 0 6px 0 14px !important; }
    .nav__menu--open, [data-theme="dark"] .nav__menu--open {
        position: absolute !important; top: calc(100% + 8px) !important; left: 0 !important; right: 0 !important; max-height: calc(100vh - 90px);
        border-radius: 18px; border: 1px solid var(--border-color) !important;
        background: var(--surface-0) !important; box-shadow: var(--shadow-lg) !important;
    }
    .nav__menu--open .nav__link { color: var(--ink-900); }
}

/* 맨 위 읽은 만큼 차오르는 선 */
.pv-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 200; background: var(--brand); transform-origin: 0 50%; transform: scaleX(var(--scroll, 0)); pointer-events: none; }

/* ─── 4. 히어로 ───────────────────────────────────────────────────────────── */
.hero { padding-top: clamp(130px, 19vh, 190px); background: var(--surface-0); }
.hero::before, .page-hero::before, .post-hero::before { display: none; }
.pv-streaks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, #000 70%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, #000 70%); }
.page-hero .pv-streaks, .post-hero .pv-streaks { -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 40%, transparent 30%, #000 85%); mask-image: radial-gradient(ellipse 70% 90% at 50% 40%, transparent 30%, #000 85%); opacity: .8; }
.hero__badge { margin-bottom: var(--space-8); }
.hero__badge::before { animation: pv-dash 2.4s var(--ease-expo) infinite; }
@keyframes pv-dash { 0% { transform: translateX(-6px); opacity: 0; } 30%, 70% { transform: none; opacity: .9; } 100% { transform: translateX(6px); opacity: 0; } }
.hero__title { font-weight: var(--fw-extrabold); letter-spacing: -0.045em; line-height: 1.08; }
.hero__title-eyebrow { color: var(--ink-500); font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: var(--fw-bold); margin-bottom: var(--space-4); }
.hero__title-eyebrow::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin-right: 8px; vertical-align: 3px; }
.hero__title-detail { color: var(--ink-600); font-weight: var(--fw-medium); letter-spacing: -0.01em; }
/* 슬라이드 전환: 글자가 아래 가림막에서 올라옴 */
.hero__title-slide { transform: none; transition: opacity .5s var(--ease-out); }
.hero__title-slide .hero__title-text { clip-path: inset(0 0 100% 0); transform: translateY(0.35em); transition: clip-path .9s var(--ease-expo), transform .9s var(--ease-expo); }
.hero__title-slide.is-active .hero__title-text { clip-path: inset(-0.1em -0.2em -0.2em -0.2em); transform: none; }
.hero__title-slide .hero__title-detail, .hero__title-slide .hero__title-eyebrow { transform: translateY(8px); transition: transform .8s var(--ease-expo) .15s; }
.hero__title-slide.is-active .hero__title-detail, .hero__title-slide.is-active .hero__title-eyebrow { transform: none; }
/* 진행 막대 — 다음 문구까지 남은 시간이 차오름 */
.hero__title-dot { position: relative; overflow: hidden; width: 36px; height: 3px; background: var(--ink-200); }
.hero__title-dot.is-active { width: 56px; background: var(--ink-200); }
.hero__title-dot.is-active::after { content: ""; position: absolute; inset: 0; background: var(--ink-900); transform-origin: 0 50%; animation: pv-fill 4s linear forwards; }
@keyframes pv-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero__trust { padding-top: var(--space-6); border-top: 1px solid var(--border-color); max-width: 520px; }
.hero__trust .hero__trust-key { color: var(--brand); }

/* 수수료 카드 → 영수증 */
.hero__visual { perspective: 1400px; }
.fee-card {
    background: #fffefb; color: var(--ink-900);
    border: 1px solid var(--border-color); border-radius: 22px 22px 6px 6px;
    box-shadow: 0 50px 90px -50px rgba(22, 21, 19, 0.5), 0 2px 6px rgba(22, 21, 19, 0.04);
    animation: none; transform-style: preserve-3d;
    transform: rotateY(calc(var(--px, 0) * 7deg)) rotateX(calc(var(--py, 0) * -7deg));
    transition: transform .6s var(--ease-expo);
    overflow: visible; padding-bottom: calc(var(--space-8) + 6px);
}
.fee-card:hover { transform: rotateY(calc(var(--px, 0) * 7deg)) rotateX(calc(var(--py, 0) * -7deg)); }
.fee-card::before { content: none; }
/* 영수증 아래 톱니 */
.fee-card::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -9px; top: auto; width: auto; height: 10px;
    background: radial-gradient(circle at 8px -2px, transparent 7px, #fffefb 7.5px) 0 0 / 16px 10px repeat-x;
    filter: drop-shadow(0 1px 0 var(--border-color));
}
[data-theme="dark"] .fee-card { background: #1d1c1a; }
[data-theme="dark"] .fee-card::after { background: radial-gradient(circle at 8px -2px, transparent 7px, #1d1c1a 7.5px) 0 0 / 16px 10px repeat-x; }
.fee-card__pill { background: none; border: 0; padding: 0; color: var(--ink-500); letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--fw-bold); }
.fee-card__pill-dot { background: var(--success); box-shadow: none; animation: pv-ping 2s var(--ease-out) infinite; }
@keyframes pv-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 50%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
.fee-card__rates { border-top: 1.5px solid var(--ink-900); }
.fee-card__row { grid-template-columns: 1fr auto; border-bottom: 1px dashed var(--border-color); }
.fee-card__row-icon { display: none; }
.fee-card__row-name { color: var(--ink-800); }
.fee-card__row-name small { color: var(--ink-500); }
.fee-card__row-fee { color: var(--ink-900); font-weight: var(--fw-extrabold); letter-spacing: -0.04em; font-size: 2.25rem; }
.fee-card__row-fee .unit { color: var(--ink-500); }
.fee-card__vs { background: var(--surface-1); border: 0; border-radius: 12px; }
.fee-card__vs-row--theirs { color: var(--ink-500); }
.fee-card__vs-row--theirs .fee-card__vs-value { color: var(--ink-400); text-decoration-color: var(--brand); }
.fee-card__impact { border-top: 1.5px solid var(--ink-900); text-align: left; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.fee-card__impact-num { color: var(--ink-800); }
.fee-card__impact-num strong { color: var(--brand); font-weight: var(--fw-black); }
.fee-card__impact-label { color: var(--ink-500); margin-top: 0; }
.fee-card__vs-divider span { background: var(--surface-1); color: var(--ink-500); }

.pv-phone, .pv-toast { transform: translate3d(calc(var(--px, 0) * var(--d, 20) * -1px), calc(var(--py, 0) * var(--d, 20) * -1px), 0); transition: transform .7s var(--ease-expo); }
.pv-phone { --d: 34; border-color: var(--border-color); box-shadow: 0 40px 70px -36px rgba(22, 21, 19, 0.5); }
.pv-toast { --d: 22; border-color: var(--border-color); box-shadow: 0 24px 48px -26px rgba(22, 21, 19, 0.45); }
.pv-phone__brand i { background: var(--brand); }
.pv-phone__card { background: var(--surface-dark); }
.pv-phone__card::before { content: ""; position: absolute; right: 10px; top: 10px; width: 22px; height: 8px;
    background: linear-gradient(var(--brand), var(--brand)) 0 0 / 100% 2px no-repeat, linear-gradient(var(--brand), var(--brand)) 5px 50% / calc(100% - 5px) 2px no-repeat, linear-gradient(var(--brand), var(--brand)) 10px 100% / calc(100% - 10px) 2px no-repeat; }
.pv-phone__btn { background: var(--ink-900); color: var(--surface-0); }

/* ─── 5. 숫자 띠 — 어두운 띠 대신 선으로 나눈 신문 지면 ─────────────────── */
.stats { background: var(--surface-0); color: var(--ink-900); padding: 0; }
.stats::before { display: none; }
.stats__grid { gap: 0; border-top: 1.5px solid var(--ink-900); border-bottom: 1px solid var(--border-color); }
.stat { text-align: left; padding: var(--space-8) var(--space-6); border-left: 1px solid var(--border-color); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat__value { color: var(--ink-900); font-weight: var(--fw-extrabold); letter-spacing: -0.05em; font-size: clamp(2.25rem, 4.4vw, 3.5rem); }
.stat__value .unit { -webkit-text-fill-color: var(--ink-500); color: var(--ink-500); letter-spacing: -0.02em; }
.stat__label { color: var(--ink-500); }
@media (max-width: 768px) {
    .stats__grid { gap: 0; }
    .stat { padding: var(--space-6) var(--space-4); }
    .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
    .stat:nth-child(n+3) { border-top: 1px solid var(--border-color); }
}

/* ─── 6. 업종 띠 ──────────────────────────────────────────────────────────── */
.pv-marquee { border-bottom: 0; background: var(--surface-0); padding: 28px 0 8px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.pv-marquee::before, .pv-marquee::after { display: none; }
.pv-marquee__label { letter-spacing: 0; font-weight: var(--fw-semibold); }
.pv-marquee__item { color: var(--ink-400); font-weight: var(--fw-bold); font-size: clamp(1.25rem, 2.2vw, 1.75rem); letter-spacing: -0.03em; transition: color .3s; }
.pv-marquee__item:hover { color: var(--ink-900); }
.pv-marquee__item em { filter: grayscale(1); opacity: .55; font-size: .85em; transition: filter .3s, opacity .3s; }
.pv-marquee__item:hover em { filter: none; opacity: 1; }

/* ─── 7. 결제 흐름 ────────────────────────────────────────────────────────── */
.pv-lane { background: transparent; border: 1px solid var(--border-color); border-radius: 18px; }
.pv-lane--ours { background: var(--surface-dark); box-shadow: none; }
.pv-node__box { border-radius: 14px; }
.pv-node--cut .pv-node__box { background: var(--danger-soft); }
.pv-lane--ours .pv-wire { background: linear-gradient(90deg, rgba(243, 241, 236, .15), rgba(233, 69, 96, .7)); }
.pv-lane--ours .pv-wire i { background: var(--brand); box-shadow: 0 0 0 4px rgba(233, 69, 96, .18); }
.pv-node--goal .pv-node__box { background: var(--brand); }
.pv-node--goal .pv-node__sub, .pv-lane--ours .pv-node__sub { color: #f7a5b3; }

/* ─── 8. 비교표 ───────────────────────────────────────────────────────────── */
.comparison, .user-types, .devs { background: var(--surface-1); }
.pv-bars { border-color: var(--border-color); box-shadow: none; border-radius: 18px; }
.pv-bar__track { background: var(--surface-1); }
.pv-bar--ours .pv-bar__val { color: var(--ink-900); }
.pv-bar--ours .pv-bar__fill { background: var(--ink-900); }
.pv-bar--pg .pv-bar__fill { background: var(--brand); }
.pv-bar__range { background: repeating-linear-gradient(135deg, rgba(233, 69, 96, .55) 0 6px, rgba(233, 69, 96, .2) 6px 12px); }
.pv-bar--pg .pv-bar__val { color: var(--brand); }

.vs-table { box-shadow: none; border: 1px solid var(--border-color); border-radius: 20px; }
.vs-table__row--head .vs-table__cell--ours { background: var(--surface-dark); border-color: var(--brand); }
.vs-table__row--head .vs-table__cell--ours::before { content: none; }
.vs-table__cell-badge { box-shadow: none; }
.vs-table__cell--ours { border-left-width: 1.5px; border-right-width: 1.5px; }
.vs-table__cell--label { background: transparent; }
.vs-table__row--head, .vs-table__row--head .vs-table__cell--label { background: var(--surface-1); }
.comparison__table { box-shadow: none; border: 1px solid var(--border-color); }

/* ─── 9. 절약 계산기 ──────────────────────────────────────────────────────── */
.roi__panel { background: var(--surface-dark); border-radius: 24px; }
.roi__panel::before { content: none; }
.roi__result { border-radius: 18px; background: rgba(243, 241, 236, .04); border-color: rgba(243, 241, 236, .1); }
.roi__result-value { color: #f3f1ec; -webkit-text-fill-color: #f3f1ec; background: none; }
.roi__slider { height: 4px; background: rgba(243, 241, 236, .14); }
.roi__slider::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(233, 69, 96, .2); }

/* ─── 10. 카드 공통 — 가는 선, 그림자 없음, 마우스 따라오는 은은한 빛 ─────── */
.ucard, .scenario, .pricing-tier, .feature-item, .blog-card, .how__step, .devs__feature, .info-card, .step-list-item {
    border: 1px solid var(--border-color); box-shadow: none; border-radius: 20px;
    background-color: var(--surface-0);
    transition: border-color .3s, transform .45s var(--ease-bounce), background-color .3s;
}
.ucard:hover, .scenario:hover, .pricing-tier:hover, .feature-item:hover, .blog-card:hover, .how__step:hover, .devs__feature:hover {
    border-color: var(--ink-900); box-shadow: none; transform: translateY(-3px); background-color: var(--surface-0);
}
.pv-spot { background-image: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(233, 69, 96, 0.07), transparent 60%); }
.ucard__icon, .scenario__icon, .feature-item__icon, .devs__feature-icon, .trust__item-icon {
    background: var(--surface-1) !important; border: 1px solid var(--border-color); color: var(--ink-900);
}
.ucard__tag { background: transparent; border: 1px solid var(--border-color); color: var(--ink-600); }
.ucard--feature, .pricing-tier--featured { background: var(--surface-dark); border-color: transparent; }
.ucard--feature::before { content: none; }
.ucard--feature:hover, .pricing-tier--featured:hover { border-color: var(--brand); box-shadow: none; }
.ucard--feature .ucard__icon, .pricing-tier--featured .pricing-tier__rates { background: rgba(243, 241, 236, .06) !important; border-color: rgba(243, 241, 236, .1); }
.ucard--feature .ucard__tag { border-color: rgba(243, 241, 236, .2); color: #f3f1ec; background: transparent; }
.ucard .pv-mini { background: var(--surface-1); border-radius: 12px; }
.pv-mini__bars span { background: var(--ink-900); }
.pv-mini__bars span:nth-child(2) { background: var(--brand); }
.pv-mini__link { background: var(--ink-900); color: var(--surface-0); }
.scenario__example { border-left-color: var(--brand); background: var(--surface-1); }
.pricing-tier--featured::before { border-radius: var(--radius-full); }
.pricing-tier--featured .pricing-tier__rate-value { color: #f3f1ec; }
.pricing-tier__rate-value, .tier-table__rate { color: var(--ink-900); }

/* ─── 11. 3단계 ───────────────────────────────────────────────────────────── */
.how__step { background-color: var(--surface-0); }
.how__step-num {
    width: 48px; height: 48px; background: var(--surface-0); color: var(--ink-900);
    border: 1.5px solid var(--ink-900); box-shadow: none; font-variant-numeric: tabular-nums;
}
.how__step.pv-lit .how__step-num { background: var(--ink-900); color: var(--surface-0); box-shadow: 0 0 0 6px var(--surface-2); }
.how__steps::after { background: var(--brand); }
.how__step-meta { background: transparent; border: 1px solid var(--border-color); color: var(--ink-700); }
.step-list-item__num { background: var(--ink-900); color: var(--surface-0); box-shadow: none; }

/* ─── 12. 신뢰 (항상 어두운 띠) ──────────────────────────────────────────── */
.trust { background: var(--surface-dark); }
.trust::before { content: none; }
.trust__item { background: transparent; border: 0; border-top: 1.5px solid rgba(243, 241, 236, .9); border-radius: 0; padding: var(--space-6) 0 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.trust__grid { gap: clamp(24px, 4vw, 48px); }
.trust__item-icon { background: rgba(243, 241, 236, .06) !important; border-color: rgba(243, 241, 236, .12); color: #f3f1ec; }
.trust__item-desc { color: rgba(243, 241, 236, .62); }

/* ─── 13. 개발자 ─────────────────────────────────────────────────────────── */
.code-block { background: #0f0e0d; border-radius: 18px; box-shadow: 0 50px 90px -50px rgba(22, 21, 19, .6); border: 1px solid rgba(243, 241, 236, .06); }
.code-block__header { background: transparent; }
.code-block__lang::before { background: var(--brand); }
.code-block__content { color: #e6e2da; }
.code-block__content .tk-keyword { color: #ff8fa3; }
.code-block__content .tk-string  { color: #d9c79e; }
.code-block__content .tk-comment { color: #7a756d; }
.code-block__content .tk-num     { color: #e9b872; }
.code-block__content .tk-key     { color: #a9c7e3; }
.devs__feature:hover { transform: translateX(4px); }

/* ─── 14. 자주 묻는 질문 ─────────────────────────────────────────────────── */
.faq__list { border-top: 1.5px solid var(--ink-900); }
.faq__item { border-bottom: 1px solid var(--border-color); }
.faq__item[open], [data-theme="dark"] .faq__item[open] { background: transparent; border-radius: 0; border-bottom-color: var(--border-color); }
.faq__item summary { padding: var(--space-6) 0; transition: color .2s; }
.faq__item summary:hover { color: var(--brand); }
.faq__item summary::after {
    content: ""; flex: none; width: 14px; height: 14px; margin-left: 16px;
    background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
    color: var(--ink-900); transition: transform .4s var(--ease-bounce);
}
.faq__item[open] summary::after { transform: rotate(135deg); color: var(--brand); }
.faq__item-body { padding: 0 0 var(--space-6); max-width: 680px; }
.faq__item[open] .faq__item-body { animation: pv-open .5s var(--ease-expo); }
@keyframes pv-open { from { opacity: 0; transform: translateY(-6px); } }

/* ─── 15. 마지막 권유 · 중간 권유 · 푸터 ─────────────────────────────────── */
.final-cta, .inline-cta, .post-cta { background: var(--surface-dark); }
.final-cta::before, .inline-cta::before, .post-cta::before, .blog-card__cover::before { content: none; }
.final-cta { padding: clamp(96px, 14vw, 168px) 0; }
.final-cta__title { font-size: clamp(2rem, 4.6vw, 3.5rem); letter-spacing: -0.04em; line-height: 1.15; color: #f3f1ec; }
.final-cta__title .accent { color: #f3f1ec; --pv-mark: rgba(233, 69, 96, .65); }
.final-cta__subtitle, .inline-cta__subtitle { color: rgba(243, 241, 236, .6); }
.inline-cta, .post-cta { border-radius: 24px; }
.footer { background: var(--surface-dark); border-top: 1px solid rgba(243, 241, 236, .06); }
.footer__col-list a { position: relative; }
.footer__col-list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .4s var(--ease-expo); }
.footer__col-list a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

/* ─── 16. 서브 페이지 ────────────────────────────────────────────────────── */
.page-hero, .post-hero, [data-theme="dark"] .page-hero, [data-theme="dark"] .post-hero { background: var(--surface-0); }
.page-hero__title { font-size: clamp(2.125rem, 1.3rem + 3.6vw, 3.75rem); letter-spacing: -0.045em; line-height: 1.12; }
.page-hero__subtitle { color: var(--ink-600); }
.pv-ph { border-color: var(--border-color); box-shadow: 0 30px 60px -36px rgba(22, 21, 19, .45); }
.pv-ph.is-active { border-color: var(--ink-900); box-shadow: 0 40px 70px -36px rgba(22, 21, 19, .55); }
.pv-ph__step { background: var(--ink-900); color: var(--surface-0); }
.pv-ph__pay { background: var(--ink-900); color: var(--surface-0); }
.pv-ph__opt.on { border-color: var(--ink-900); color: var(--ink-900); background: var(--surface-1); }
.pv-ph__ok { background: var(--brand); }
.pv-board { background: var(--surface-dark); border-radius: 24px; box-shadow: 0 50px 90px -50px rgba(22, 21, 19, .6); }
.blog-card__cover { background: var(--surface-dark); }
.blog-card__cover-tag { background: rgba(243, 241, 236, .12); backdrop-filter: none; -webkit-backdrop-filter: none; }
.tier-table-wrap { box-shadow: none; border-color: var(--border-color); border-radius: 18px; }
.pill { background: transparent; border-color: var(--border-color); }
.mission__quote .accent { color: inherit; }
[data-theme="dark"] .bento__card--feature { background: var(--surface-dark); }

/* ─── 17. 등장 효과 — 같은 줄의 카드는 순서대로 ─────────────────────────── */
.fade-up { transition: opacity .9s var(--ease-expo), transform .9s var(--ease-expo); transition-delay: calc(var(--i, 0) * 80ms); }
.fade-up.is-pending { transform: translateY(28px); }

/* ─── 움직임 줄이기 ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hero__badge::before, .fee-card__pill-dot, .hero__title-dot.is-active::after { animation: none !important; }
    .hero__title-dot.is-active::after { transform: none; }
    .fee-card, .pv-phone, .pv-toast, .btn-lg { transform: none !important; translate: none !important; }
    .js-motion .accent:not(.pv-in) { background-size: 100% 0.2em !important; }
    .pv-lines-wait .pv-line__in { transform: none; opacity: 1; }
}
@media (hover: none) {
    .btn-lg { translate: none; }
}

/* ─── 18. 손질 (화면 확인 후) ───────────────────────────────────────────────── */
/* 히어로 문구 전환: 나가는 문구는 빨리 사라지고 들어오는 문구는 살짝 늦게 */
.hero__title-slide { transition: opacity .25s ease; }
.hero__title-slide.is-active { transition: opacity .5s ease .2s; }
/* 어두운 카드 안 미니 화면 */
.ucard--feature .pv-mini { background: rgba(243, 241, 236, .06); color: rgba(243, 241, 236, .85); }
/* 블로그 표지 — 알록달록한 그라데이션 대신 먹색·핑크·종이색 세 가지 */
.blog-card .blog-card__cover { background: var(--surface-dark) !important; }
.blog-card:nth-child(3n+2) .blog-card__cover { background: var(--brand) !important; }
.blog-card:nth-child(3n) .blog-card__cover { background: var(--surface-3) !important; }
.blog-card:nth-child(3n) .blog-card__cover-tag { background: rgba(22, 21, 19, .08); color: var(--ink-900); }
.blog-card__cover::after { content: ""; position: absolute; right: 18px; bottom: 18px; width: 44px; height: 16px; opacity: .55;
    background: linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 10px 50% / calc(100% - 10px) 2px no-repeat, linear-gradient(currentColor, currentColor) 20px 100% / calc(100% - 20px) 2px no-repeat;
    color: #f3f1ec; }
.blog-card:nth-child(3n) .blog-card__cover::after { color: var(--brand); }
.blog-featured, .blog-featured:hover { background-color: var(--surface-dark); border-color: transparent; }
.blog-featured:hover { border-color: var(--brand); }
.blog-card.blog-featured .blog-card__cover { background: var(--brand) !important; }
/* 어두운 카드는 마우스를 올려도 어두운 배경 유지 (위 공통 hover 의 종이색이 덮지 않게) */
.ucard--feature:hover, .pricing-tier--featured:hover, .blog-featured:hover { background-color: var(--surface-dark); }

/* ─── 19. 전 페이지 글자 대비 점검(10-15) 후 손질 ─────────────────────────── */
/* 모바일 비교표: 왼쪽 항목 칸은 어두운 바탕 유지 (흰 글씨가 종이색 위에 놓이던 문제) */
@media (max-width: 768px) {
    .vs-table__cell--label { background: var(--surface-dark); color: #f3f1ec; }
    .vs-table__cell--label small { color: rgba(243, 241, 236, .6); }
}
/* 어두운 띠 안의 버튼 — 마우스를 올려도 글자가 보이게 */
.final-cta .btn-primary:hover, .inline-cta .btn-primary:hover, .post-cta .btn-primary:hover, .trust .btn-primary:hover,
.pricing-tier--featured .btn-primary:hover, .roi__panel .btn-primary:hover, .ucard--feature .btn-primary:hover, .error-hero .btn-primary:hover,
.error-hero .btn-primary { background: #fffefb; color: #161513; }
.error-actions .btn-secondary, .error-actions .btn-secondary:hover { color: #f3f1ec; }
.error-hero { background: var(--surface-dark); }
/* 작은 핑크 글자는 한 단계 진하게 (밝은 화면에서 종이색 위 대비 부족) */
:root:not([data-theme="dark"]) :is(.hero__trust-key, .pv-bar--pg .pv-bar__val, .pv-bars__foot b, .info-card__value a, .post-hero__category, .faq__item summary:hover, .pv-form em) { color: var(--brand-dark); }
/* 흐린 회색 글자 한 단계 진하게 */
.pv-marquee__item, .blog-card__meta, .vs-table__cell--theirs small, .fee-card__vs-row--theirs .fee-card__vs-value { color: var(--ink-500); }
.post-hero__meta-divider { color: var(--ink-400); }
/* 핑크 표지 위 태그 */
.blog-card:nth-child(3n+2) .blog-card__cover-tag, .blog-featured .blog-card__cover-tag { background: rgba(22, 21, 19, .3); }
/* 다크 모드 보정 */
[data-theme="dark"] .vs-table__cell--ours small { color: #f7a5b3; opacity: 1; }
[data-theme="dark"] :is(.faq__item-body, .step-list-item__desc, .devs__feature-desc, .feature-item__desc) code { color: #ff8fa3; }
[data-theme="dark"] .pv-ph__url { color: #9cbcec; }
[data-theme="dark"] .legal-disclaimer__title, [data-theme="dark"] .legal-disclaimer__body { color: #e9b872; }
.footer__col-title, .footer__legal { color: rgba(243, 241, 236, .58); }
.pv-board__code .c { color: rgba(243, 241, 236, .58); }
.code-block__content .tk-comment { color: #948e85; }
:root:not([data-theme="dark"]) :is(.post-body a, .legal-article a) { color: var(--brand-dark); }
[data-theme="dark"] .info-card__value a:hover, [data-theme="dark"] .post-hero__category { color: #ff8fa3; }
.pv-node__sub { color: var(--ink-600); }
.pv-node--cut .pv-node__sub { color: var(--brand-dark); }
[data-theme="dark"] .pv-node--cut .pv-node__sub { color: #ff8fa3; }
.pv-ph__deposit { color: var(--success-dark); }

/* ─── 20. 같은 수수료 띠 (홈: 현장결제 = Payvit 온라인결제 ≠ 온라인결제(PG)) ── */
.pv-same { padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 7vw, 88px); background: var(--surface-0); }
.pv-same__title { text-align: center; font-size: clamp(1.875rem, 1.1rem + 3.4vw, 3.5rem); font-weight: var(--fw-extrabold); letter-spacing: -0.045em; line-height: 1.18; color: var(--ink-900); margin-bottom: clamp(36px, 5vw, 56px); }
.pv-same__eq { display: grid; grid-template-columns: 1fr auto 1fr auto 0.85fr; align-items: stretch; gap: clamp(10px, 1.6vw, 20px); }
.pv-same__card { display: grid; align-content: start; gap: 4px; padding: clamp(20px, 2.4vw, 32px); border: 1px solid var(--border-color); border-radius: 20px; background: var(--surface-0); }
.pv-same__card--ours { border: 1.5px solid var(--ink-900); background: var(--surface-0); box-shadow: 0 30px 60px -36px rgba(22, 21, 19, .4); }
.pv-same__card--pg { background: var(--surface-1); border-color: transparent; }
.pv-same__tag { justify-self: start; font-size: 12.5px; font-weight: var(--fw-bold); letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-color); color: var(--ink-600); margin-bottom: 10px; }
.pv-same__card--ours .pv-same__tag { background: var(--ink-900); color: var(--surface-0); border-color: var(--ink-900); }
.pv-same__name { font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: var(--fw-extrabold); letter-spacing: -0.03em; color: var(--ink-900); }
.pv-same__desc { font-size: var(--text-small); color: var(--ink-500); margin-bottom: 14px; }
.pv-same__rate { display: flex; align-items: baseline; gap: 10px; padding-top: 10px; border-top: 1px dashed var(--border-color); font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: var(--fw-extrabold); letter-spacing: -0.05em; line-height: 1.1; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.pv-same__rate + .pv-same__rate { margin-top: 6px; }
.pv-same__rate em { font-style: normal; font-size: 14px; font-weight: var(--fw-bold); letter-spacing: 0; color: var(--ink-500); width: 30px; }
.pv-same__rate i { font-style: normal; font-size: .5em; color: var(--ink-500); margin-left: -6px; }
.pv-same__card--pg .pv-same__rate { color: var(--ink-500); text-decoration: line-through; text-decoration-color: var(--brand); text-decoration-thickness: 2px; font-size: clamp(1.625rem, 2.6vw, 2.125rem); }
.pv-same__op { align-self: center; font-size: clamp(2.5rem, 4.4vw, 4rem); font-weight: var(--fw-black); line-height: 1; color: var(--brand); }
.pv-same__op--ne { color: var(--ink-400); }
.js-motion .pv-same__op { transition: transform .8s var(--ease-bounce) .3s, opacity .5s .3s; }
.js-motion .pv-same__eq.pv-wait .pv-same__op { transform: scale(.3); opacity: 0; }
.pv-same__note { margin-top: var(--space-6); text-align: center; font-size: var(--text-small); color: var(--ink-500); }
@media (max-width: 900px) {
    .pv-same__eq { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; gap: 8px; }
    .pv-same__op { justify-self: center; font-size: 2.5rem; }
    .pv-same__rate { font-size: 2rem; }
}
/* 홈 히어로 수수료 카드의 '현장결제와 수수료 동일' 문구를 더 잘 보이게 */
.fee-card__impact-label { color: var(--ink-900); font-weight: var(--fw-bold); }
.fee-card__impact-label::before { content: "="; color: var(--brand); font-weight: var(--fw-black); margin-right: 6px; }
@media (max-width: 768px) { .vs-table__cell--theirs::before { content: "온라인결제(PG)"; } }
.pv-same__rate em { display: inline-block; }
.vs-table__cell-badge { background: var(--brand-dark); }

/* ─── 21. 푸터 — 핵심 메시지 + 큰 워드마크 ─────────────────────────────────── */
.footer { position: relative; overflow: hidden; padding-bottom: 0; }
.footer__statement { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; padding-bottom: clamp(40px, 6vw, 72px); margin-bottom: clamp(40px, 6vw, 64px); border-bottom: 1px solid rgba(243, 241, 236, .1); }
.footer__statement-title { font-size: clamp(1.625rem, 1rem + 2.6vw, 2.75rem); font-weight: var(--fw-extrabold); letter-spacing: -0.04em; line-height: 1.2; color: #f3f1ec; }
.footer__statement-rates { display: flex; gap: clamp(20px, 3vw, 44px); flex-wrap: wrap; }
.footer__statement-rates li { display: grid; gap: 4px; font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: var(--fw-extrabold); letter-spacing: -0.04em; color: #f3f1ec; font-variant-numeric: tabular-nums; }
.footer__statement-rates li:last-child { color: #f7a5b3; }
.footer__statement-rates em { font-style: normal; font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: 0; color: rgba(243, 241, 236, .58); }
.footer__bottom { gap: 8px 24px; }
.footer__mail { font-size: var(--text-xs); color: rgba(243, 241, 236, .85); border-bottom: 1px solid rgba(243, 241, 236, .3); transition: border-color .3s, color .3s; }
.footer__mail:hover { color: #fff; border-color: var(--brand); }
.footer__wordmark {
    margin-top: clamp(24px, 4vw, 48px); text-align: center; line-height: .78; user-select: none; pointer-events: none;
    font-size: clamp(5rem, 22vw, 20rem); font-weight: var(--fw-black); letter-spacing: -0.06em;
    color: transparent; -webkit-text-stroke: 1px rgba(243, 241, 236, .22);
    transform: translateY(12%);
}
@media (max-width: 480px) { .footer__statement { align-items: flex-start; } }

/* ─── 22. 설명형 페이지 표 (/online-van) ─────────────────────────────────── */
.pv-doc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1.5px solid var(--ink-900); }
.pv-doc-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); min-width: 640px; }
.pv-doc-table th, .pv-doc-table td { padding: 16px 14px; text-align: left; border-bottom: 1px solid var(--border-color); vertical-align: top; line-height: 1.5; }
.pv-doc-table thead th { font-size: 13px; font-weight: var(--fw-bold); color: var(--ink-500); }
.pv-doc-table tbody th { font-weight: var(--fw-bold); color: var(--ink-900); white-space: nowrap; }
.pv-doc-table small { display: block; font-size: 12px; font-weight: var(--fw-medium); color: var(--ink-500); margin-top: 2px; }
.pv-doc-table td { color: var(--ink-700); }
.pv-doc-table .is-ours { background: var(--brand-soft); color: var(--ink-900); font-weight: var(--fw-semibold); }
.pv-doc-table thead .is-ours { color: var(--brand-dark); }
[data-theme="dark"] .pv-doc-table thead .is-ours { color: #ff8fa3; }
.pv-doc-table--num td { font-size: 1.125rem; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--ink-900); }
.pv-doc-note { margin-top: var(--space-4); font-size: 13px; color: var(--ink-500); text-align: center; }
.pv-doc-note a { color: var(--brand-dark); }
[data-theme="dark"] .pv-doc-note a { color: #ff8fa3; }
.page-hero__subtitle strong { color: var(--ink-900); }
.pv-same__note a { color: var(--brand-dark); font-weight: var(--fw-bold); white-space: nowrap; }
[data-theme="dark"] .pv-same__note a { color: #ff8fa3; }