.pay-cards {
    --pay-ill-blue-soft: #a9c6fa;
    --pay-ill-cyan-pale: #bfe8f7;
    --pay-ill-cyan-text: #07627f;
    --pay-ill-indigo-text: #3730a3;
    --pay-ill-size: 96px;
    --pay-ill-size-mobile: 80px;
    --pay-card-mobile-padding: 28px;
    --pay-card-text-gap-mobile: 2px;
}

/* service.css */
/* ============================================================
   1. 공통
============================================================ */
.service-detail-page {
    --service-process-bg: var(--color-gray-10);
    --service-process-slider-max-width: 520px;
    --service-process-slider-height: 400px;
    --service-process-slider-height-mobile: 340px;
    --service-process-slider-height-small: 300px;
    --service-process-dot-hit-area: var(--touch-target-min);
    --service-process-dot-hit-width: 26px;
    --service-process-dot-size: 8px;
    --service-process-dot-active-width: 36px;
    --service-process-number-bg: var(--color-gray-30);
    --service-process-number-color: var(--color-gray-60);
    --service-process-number-active-bg: var(--color-primary);
    --service-process-number-active-color: var(--color-text-white);
    --service-process-number-active-shadow: rgba(6, 74, 203, 0.2);
    --service-process-dot-bg: var(--color-gray-30);
    --service-process-dot-active-bg: var(--color-gray-90);
    --service-process-dot-focus-outline: var(--color-primary);
    --service-process-cta-bg: var(--color-gray-90);
    --service-process-cta-bg-hover: var(--color-gray-90);
    --service-process-cta-bg-active: var(--color-gray-90);
    --service-process-cta-color: var(--color-text-white);
    --service-process-cta-focus-outline: var(--color-primary);
    --service-process-cta-focus-shadow: rgba(6, 74, 203, 0.2);
    background-color: var(--color-bg-white);
}

.service-detail-page .section-header {
    margin-bottom: var(--spacing-48);
}

.service-detail-page .section {
    padding-top: 112px;
    padding-bottom: 112px;
}

.service-scroll-reveal.is-reveal-ready {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.72s ease, transform 0.72s ease;
    will-change: opacity, transform;
}

.service-scroll-reveal.is-reveal-ready.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .service-scroll-reveal.is-reveal-ready {
        animation: none;
        opacity: 1;
        transform: none;
        transition: none;
    }
    .service-hero.is-reveal-ready .service-hero-eyebrow,     .service-hero.is-reveal-ready .service-hero-title,     .service-hero.is-reveal-ready .service-hero-cta,     .service-hero.is-reveal-ready .service-hero-image,     .service-hero.is-reveal-ready .service-feature-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .service-hero-cta,     .service-hero-cta::after,     .service-process-cta {
        transition: none;
    }
    .service-feature-card {
        transition: none;
    }
    .service-process-cta:hover {
        transform: none;
    }
}

/* ============================================================
   2. Hero
============================================================ */
.service-hero {
    display: flex;
    align-items: center;
    overflow: hidden;
    min-height: calc(100vh - 73px);
    padding: 72px 0 104px;
    background: var(--background-service-hero);
}

.service-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.service-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: var(--color-primary);
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: 0;
}

.service-hero-title {
    margin-top: var(--spacing-8);
    color: var(--color-text-primary);
    font-size: var(--font-size-service-hero-title);
    font-weight: var(--font-weight-bold);
    line-height: 1.32;
    letter-spacing: 0;
}

.service-hero.is-reveal-ready .service-hero-eyebrow, .service-hero.is-reveal-ready .service-hero-title, .service-hero.is-reveal-ready .service-hero-cta, .service-hero.is-reveal-ready .service-hero-image {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1), transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.service-hero.is-reveal-ready.is-visible .service-hero-eyebrow, .service-hero.is-reveal-ready.is-visible .service-hero-title, .service-hero.is-reveal-ready.is-visible .service-hero-cta, .service-hero.is-reveal-ready.is-visible .service-hero-image {
    opacity: 1;
    transform: translateY(0);
}

.service-hero.is-reveal-ready.is-visible .service-hero-eyebrow {
    transition-delay: 0s;
}

.service-hero.is-reveal-ready.is-visible .service-hero-title {
    transition-delay: 0.08s;
}

.service-hero.is-reveal-ready.is-visible .service-hero-cta {
    transition-delay: 0.16s;
}

.service-hero.is-reveal-ready.is-visible .service-hero-image {
    transition-delay: 0.22s;
}

.service-hero-cta, .service-process-cta {
    position: relative;
    overflow: hidden;
    transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.service-hero-cta {
    background-color: var(--color-gray-90);
    border-color: var(--color-gray-90);
    min-height: var(--button-height);
    margin-top: var(--spacing-32);
    padding-right: 28px;
    padding-left: 28px;
}

.service-hero-cta::after {
    content: "";
    position: absolute;
    top: 0;
    left: -62%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-primary-0) 20%, transparent), transparent);
    transform: skewX(-18deg);
    transition: left 0.58s ease;
    pointer-events: none;
}

.service-hero-cta:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.service-hero-cta:hover::after {
    left: 124%;
}

.service-process-cta:hover {
    background-color: var(--service-process-cta-bg-hover);
    border-color: var(--service-process-cta-bg-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.service-process-cta:active {
    background-color: var(--service-process-cta-bg-active);
    border-color: var(--service-process-cta-bg-active);
}

.service-process-cta:focus-visible {
    outline-color: var(--service-process-cta-focus-outline);
    box-shadow: 0 0 0 4px var(--service-process-cta-focus-shadow);
}

/* URL결제의 단계 번호·CTA는 수기결제와 같은 공통 색상 토큰을 상속한다. */
[data-service-page="linkpay"] .service-process {
    --service-process-bg: #FFF9FC;
    --service-process-dot-bg: #F1AFC8;
    --service-process-dot-active-bg: #D41367;
    --service-process-dot-focus-outline: #D41367;
}

/* 히어로는 cardCMS의 실제 오브젝트 무게감을 기준으로 원본 투명 여백과 재생 프레임을 비교해 보정한다. */
.service-hero-image {
    --service-hero-art-scale: 0.6666666667;
    width: min(calc(285px * var(--service-hero-art-scale)),calc(33vw * var(--service-hero-art-scale)));
    margin-top: var(--spacing-48);
}

/* 정산대행 기준과 이미 면적이 충분한 문자결제는 기존 표시 크기를 유지한다. */
[data-service-page="settlementAgency"] .service-hero-image, [data-service-page="smspay"] .service-hero-image {
    --service-hero-art-scale: 1;
}

/* 넓고 얇은 카드·휴대폰은 키우고, 면적이 큰 지구본은 상대적으로 작게 보정한다. */
.service-hero-image--sugipay, .service-hero-image--qrpay, [data-service-page="regularpay"] .service-hero-image {
    --service-hero-art-scale: 1.0877192982;
}

[data-service-page="easypay"] .service-hero-image {
    --service-hero-art-scale: 0.9473684211;
}

/* 지급대행만 기존 시각 보정 크기에서 PC·태블릿·모바일 모두8% 축소한다. */
[data-service-page="payAgency"] .service-hero-image {
    --service-hero-art-scale: 0.9845614035;
}

.service-hero-image--overseas, [data-service-page="globalpay"] .service-hero-image {
    --service-hero-art-scale: 0.8421052632;
}

.service-hero-image img, .service-hero-image video {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================================
   3. Feature Card
============================================================ */
.service-feature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-24);
    width: min(680px, 100%);
    margin: 56px auto 0;
}

.service-feature-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 132px;
    padding: var(--spacing-32) 28px;
    border-radius: var(--radius-2xl);
    background-color: rgba(255, 255, 255, 0.86);
    box-shadow: 0 14px 34px rgba(6, 74, 203, 0.07);
    text-align: center;
    backdrop-filter: blur(8px);
}

.service-hero.is-reveal-ready .service-feature-card {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.88s cubic-bezier(0.22, 1, 0.36, 1), transform 0.88s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.service-hero.is-reveal-ready.is-visible .service-feature-card {
    opacity: 1;
    transform: translateY(0);
}

.service-hero.is-reveal-ready.is-visible .service-feature-card:nth-child(1) {
    transition-delay: 0.3s;
}

.service-hero.is-reveal-ready.is-visible .service-feature-card:nth-child(2) {
    transition-delay: 0.38s;
}

.service-feature-card-caption, .service-feature-card-title {
    display: block;
}

.service-feature-card-caption {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
}

.service-feature-card-title {
    margin-top: var(--spacing-8);
    color: var(--color-text-primary);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

/* ============================================================
   4. 추천 업종
============================================================ */
.service-recommend {
    padding-top: var(--section-padding-y);
}

.service-recommend.is-reveal-ready .section-header, .service-recommend.is-reveal-ready .service-recommend-card {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.service-recommend.is-reveal-ready.is-visible .section-header, .service-recommend.is-reveal-ready.is-visible .service-recommend-card {
    opacity: 1;
    transform: translateY(0);
}

.service-recommend.is-reveal-ready .service-recommend-card:nth-child(1) {
    transition-delay: 0.12s;
}

.service-recommend.is-reveal-ready .service-recommend-card:nth-child(2) {
    transition-delay: 0.24s;
}

.service-recommend.is-reveal-ready .service-recommend-card:nth-child(3) {
    transition-delay: 0.36s;
}

.service-recommend-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1020px;
    margin-right: auto;
    margin-left: auto;
    gap: var(--spacing-32);
}

.service-recommend-card {
    position: relative;
    min-height: 328px;
    padding: var(--spacing-40) var(--spacing-24);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    background-color: var(--color-bg-white);
    text-align: center;
    transition: border-color 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
    box-shadow: none;
}

.service-recommend-card:hover {
    border-color: rgba(6, 74, 203, 0.24);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

.service-recommend-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 28px;
    margin-bottom: var(--spacing-32);
    padding: 0 var(--spacing-12);
    border: 1px solid var(--color-primary-10);
    border-radius: var(--radius-full);
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0;
}

.service-recommend-card-title, .service-recommend-card-desc {
    display: block;
}

.service-recommend-card-title {
    color: var(--color-text-primary);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
}

.service-recommend-card-desc {
    margin-top: var(--spacing-8);
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
}

[data-service-page="payAgency"] .service-recommend-list, [data-service-page="settlementAgency"] .service-recommend-list {
    gap: var(--spacing-32);
}

[data-service-page="payAgency"] .service-recommend-card, [data-service-page="settlementAgency"] .service-recommend-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

[data-service-page="payAgency"] .service-recommend-card:hover, [data-service-page="settlementAgency"] .service-recommend-card:hover {
    border-color: rgba(6, 74, 203, 0.24);
}

[data-service-page="payAgency"] .service-recommend-badge, [data-service-page="settlementAgency"] .service-recommend-badge {
    display: inline-flex;
    margin-bottom: var(--spacing-32);
}

[data-service-page="payAgency"] .service-recommend-card-desc, [data-service-page="settlementAgency"] .service-recommend-card-desc {
    margin-top: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
}

[data-service-page="payAgency"] .service-recommend-card-title, [data-service-page="settlementAgency"] .service-recommend-card-title {
    margin-top: var(--spacing-8);
    font-size: var(--font-size-h5);
    line-height: var(--line-height-tight);
    word-break: keep-all;
}

[data-service-page="settlementAgency"] .service-recommend {
    --recommend-art-size: 96px;
    --recommend-art-gap: var(--spacing-24);
}

[data-service-page="settlementAgency"] .service-recommend-card--blue {
    --tone-light: var(--color-spot-blue-light);
    --tone-mid: var(--color-spot-blue-mid);
    --tone-point: var(--color-spot-blue-point);
    --tone-badge-bg: var(--color-primary-light);
    --tone-badge-border: var(--color-primary-10);
    --tone-badge-text: var(--color-primary);
}

[data-service-page="settlementAgency"] .service-recommend-card--mint {
    --tone-light: var(--color-spot-cyan-light);
    --tone-mid: var(--color-spot-cyan-mid);
    --tone-point: var(--color-spot-cyan-point);
    --tone-badge-bg: color-mix(in srgb, var(--tone-light) 55%, var(--color-bg-white));
    --tone-badge-border: color-mix(in srgb, var(--tone-light) 75%, var(--tone-mid));
    --tone-badge-text: var(--color-icon-teal);
}

[data-service-page="settlementAgency"] .service-recommend-card--violet {
    --tone-light: var(--color-spot-indigo-light);
    --tone-mid: var(--color-spot-indigo-mid);
    --tone-point: var(--color-spot-indigo-point);
    --tone-badge-bg: color-mix(in srgb, var(--tone-light) 55%, var(--color-bg-white));
    --tone-badge-border: color-mix(in srgb, var(--tone-light) 75%, var(--tone-mid));
    --tone-badge-text: var(--color-spot-indigo-point);
}

[data-service-page="settlementAgency"] .service-recommend-card .service-recommend-badge {
    margin-bottom: var(--spacing-24);
    border-color: var(--tone-badge-border);
    background-color: var(--tone-badge-bg);
    color: var(--tone-badge-text);
}

[data-service-page="settlementAgency"] .service-recommend-art {
    display: block;
    width: var(--recommend-art-size);
    height: var(--recommend-art-size);
    flex-shrink: 0;
    margin: 0 auto var(--recommend-art-gap);
    border-radius: 50%;
    overflow: visible;
    background: radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--tone-light) 80%, white), var(--tone-light) 76%);
    box-shadow: none;
}

[data-service-page="settlementAgency"] .service-recommend-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

[data-service-page="settlementAgency"] .service-recommend-svg__white {
    fill: var(--color-bg-white);
}

[data-service-page="settlementAgency"] .service-recommend-svg__point {
    fill: var(--tone-point);
}

[data-service-page="settlementAgency"] .service-recommend-svg__point-soft {
    fill: var(--tone-mid);
}

[data-service-page="settlementAgency"] .service-recommend-svg__tint {
    fill: var(--tone-light);
}

[data-service-page="settlementAgency"] .service-recommend-svg__panel {
    filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--tone-point) 16%, transparent));
}

[data-service-page="settlementAgency"] .service-recommend-svg__status, [data-service-page="settlementAgency"] .service-recommend-svg__switch {
    filter: drop-shadow(0 1px 1.5px color-mix(in srgb, var(--tone-point) 18%, transparent));
}

[data-service-page="settlementAgency"] .service-recommend-svg__line, [data-service-page="settlementAgency"] .service-recommend-svg__line-white {
    fill: none;
    stroke: var(--tone-point);
    stroke-linecap: round;
    stroke-linejoin: round;
}

[data-service-page="settlementAgency"] .service-recommend-svg__line-white {
    stroke: var(--color-bg-white);
}

[data-service-page="settlementAgency"] .service-recommend-svg__node-circle {
    fill: var(--tone-light);
    stroke: var(--tone-point);
    stroke-width: 1.6;
}

[data-service-page="settlementAgency"] .service-recommend.is-reveal-ready.is-visible, [data-service-page="payAgency"] .service-recommend.is-reveal-ready.is-visible, [data-service-page="globalpay"] .service-recommend.is-reveal-ready.is-visible, [data-service-page="linkpay"] .service-recommend.is-reveal-ready.is-visible {
    transform: none;
    will-change: auto;
}

[data-service-page="settlementAgency"] .service-recommend.is-reveal-ready.is-visible .service-recommend-card, [data-service-page="settlementAgency"] .service-recommend.is-reveal-ready.is-visible .section-header, [data-service-page="payAgency"] .service-recommend.is-reveal-ready.is-visible .service-recommend-card, [data-service-page="payAgency"] .service-recommend.is-reveal-ready.is-visible .section-header, [data-service-page="globalpay"] .service-recommend.is-reveal-ready.is-visible .service-recommend-card, [data-service-page="globalpay"] .service-recommend.is-reveal-ready.is-visible .section-header, [data-service-page="linkpay"] .service-recommend.is-reveal-ready.is-visible .service-recommend-card, [data-service-page="linkpay"] .service-recommend.is-reveal-ready.is-visible .section-header {
    transform: none;
}

@media (prefers-reduced-motion: no-preference) {
    [data-service-page="settlementAgency"] .service-recommend-card {
        --art-delay: 0.3s;
    }
    [data-service-page="settlementAgency"] .service-recommend-card:nth-child(2) {
        --art-delay: 0.45s;
    }
    [data-service-page="settlementAgency"] .service-recommend-card:nth-child(3) {
        --art-delay: 0.6s;
    }
    [data-service-page="settlementAgency"] .service-recommend.is-reveal-ready.is-visible .service-recommend-svg {
        transform-box: view-box;
        transform-origin: center;
        animation: recommend-art-spring 0.8s ease-out var(--art-delay) both;
    }
    [data-service-page="settlementAgency"] .service-recommend.is-visible .service-recommend-svg__bar {
        transform-box: fill-box;
        transform-origin: center bottom;
        animation: recommend-bar-loop 1.4s ease-in-out calc(var(--art-delay) + 0.18s) infinite both;
    }
    [data-service-page="settlementAgency"] .service-recommend-svg__bar--2 {
        --bar-offset: 0.08s;
    }
    [data-service-page="settlementAgency"] .service-recommend-svg__bar--3 {
        --bar-offset: 0.16s;
    }
    [data-service-page="settlementAgency"] .service-recommend-svg__bar--4 {
        --bar-offset: 0.24s;
    }
    [data-service-page="settlementAgency"] .service-recommend.is-visible .service-recommend-svg__bar {
        animation-delay: calc(var(--art-delay) + 0.18s + var(--bar-offset, 0s));
    }
    [data-service-page="settlementAgency"] .service-recommend-svg__node--1 {
        --node-offset: 0.08s;
    }
    [data-service-page="settlementAgency"] .service-recommend-svg__node--2 {
        --node-offset: 0.16s;
    }
    [data-service-page="settlementAgency"] .service-recommend-svg__node--3 {
        --node-offset: 0.24s;
    }
    [data-service-page="settlementAgency"] .service-recommend.is-visible .service-recommend-svg__node {
        transform-box: fill-box;
        transform-origin: center;
        animation: recommend-node-loop 1.4s ease-in-out calc(var(--art-delay) + 0.2s + var(--node-offset, 0s)) infinite both;
    }
    [data-service-page="settlementAgency"] .service-recommend.is-reveal-ready.is-visible .service-recommend-svg__status-piece {
        transform-box: view-box;
        transform-origin: 75px 25px;
        animation: recommend-detail-pop 0.6s ease-out calc(var(--art-delay) + 0.55s) both;
    }
    [data-service-page="settlementAgency"] .service-recommend.is-visible .service-recommend-svg__arrow {
        transform-box: view-box;
        transform-origin: 32.5px 47px;
        animation: recommend-cycle-loop 1.8s linear calc(var(--art-delay) + 0.2s) infinite both;
    }
    [data-service-page="settlementAgency"] .service-recommend.is-reveal-ready.is-visible .service-recommend-card--violet .service-recommend-svg__check {
        stroke-dasharray: 12;
        animation: recommend-check-draw 0.35s ease-out calc(var(--art-delay) + 0.85s) both;
    }
    [data-service-page="settlementAgency"] .service-recommend.is-reveal-ready.is-visible .service-recommend-svg__switch-knob {
        animation: recommend-toggle-spring 0.65s ease-out calc(var(--art-delay) + 0.55s) both;
    }
}

@keyframes recommend-art-spring {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.88);
    }
    55% {
        opacity: 1;
        transform: translateY(-4px) scale(1.045);
    }
    78% {
        transform: translateY(1px) scale(0.985);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes recommend-bar-loop {
    0%, 100% {
        transform: scaleY(0.35);
    }
    45% {
        transform: scaleY(1.12);
    }
    65% {
        transform: scaleY(0.94);
    }
    78% {
        transform: scaleY(1);
    }
}

@keyframes recommend-node-loop {
    0%, 100% {
        opacity: 1;
        transform: scale(0.9);
    }
    45% {
        opacity: 1;
        transform: scale(1.06);
    }
    65% {
        opacity: 1;
        transform: scale(0.99);
    }
    78% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes recommend-detail-pop {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    60% {
        opacity: 1;
        transform: scale(1.12);
    }
    82% {
        transform: scale(0.97);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes recommend-cycle-loop {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes recommend-check-draw {
    from {
        stroke-dashoffset: 12;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes recommend-toggle-spring {
    0% {
        transform: translateX(-14px);
    }
    65% {
        transform: translateX(1.5px);
    }
    85% {
        transform: translateX(-0.5px);
    }
    100% {
        transform: translateX(0);
    }
}

@media (min-width: 769px) {
    [data-service-page="settlementAgency"] .service-recommend {
        --recommend-art-gap: var(--spacing-32);
    }
    [data-service-page="settlementAgency"] .service-recommend-card-title {
        margin-top: var(--spacing-4);
    }
}

@media (max-width: 768px) {
    [data-service-page="settlementAgency"] .service-recommend {
        --recommend-art-size: 80px;
        --recommend-art-gap: var(--spacing-24);
    }
    [data-service-page="settlementAgency"] .service-recommend-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 28px var(--spacing-20);
        text-align: center;
    }
    [data-service-page="settlementAgency"] .service-recommend-art {
        margin: 0 auto var(--recommend-art-gap);
    }
    [data-service-page="settlementAgency"] .service-recommend-card .service-recommend-badge {
        margin: 0 0 var(--spacing-20);
    }
    [data-service-page="settlementAgency"] .service-recommend-card-desc {
        margin: 0;
        font-size: var(--font-size-body-sm);
        line-height: 1.4;
    }
    [data-service-page="settlementAgency"] .service-recommend-card-title {
        margin: 2px 0 0;
        font-size: var(--font-size-ui);
        line-height: 1.4;
        word-break: keep-all;
    }
}

@media (max-width: 480px) {
    [data-service-page="settlementAgency"] .service-recommend-svg__detail,     [data-service-page="settlementAgency"] .service-recommend-svg__bar--1 {
        display: none;
    }
}

/* ============================================================
   5. Process
============================================================ */
.service-process {
    background-color: var(--color-bg-white);
}

.service-process-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.88fr);
    align-items: center;
    gap: 72px;
    padding: var(--spacing-64);
    border-radius: var(--radius-2xl);
    background-color: var(--service-process-bg);
}

.service-process-visual {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

[data-service-page="globalpay"] .service-process-block + .service-process-block {
    margin-top: var(--spacing-48);
}

[data-service-page="globalpay"] .service-process-block-reverse .service-process-visual {
    grid-column: 2;
    grid-row: 1;
    align-items: flex-start;
}

[data-service-page="globalpay"] .service-process-block-reverse .service-process-content {
    grid-column: 1;
    grid-row: 1;
}

[data-service-page="globalpay"] .service-process-number {
    box-shadow: none;
}

.service-process-slider {
    position: relative;
    width: min(100%, var(--service-process-slider-max-width));
    height: var(--service-process-slider-height);
    overflow: hidden;
    border-radius: var(--radius-2xl);
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.service-process-slider.is-dragging {
    cursor: grabbing;
}

.service-process-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.56s ease, transform 0.56s ease;
    pointer-events: none;
}

.service-process-slide:first-child {
    background-color: var(--color-bg-service-process-light);
}

.service-process-slide:nth-child(2) {
    background-color: var(--color-primary-10);
}

.service-process-slide.is-active {
    z-index: 1;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.service-process-dots {
    display: flex;
    gap: 0;
    justify-content: center;
    width: min(100%, var(--service-process-slider-max-width));
    margin-top: var(--spacing-24);
}

.service-process-dot {
    position: relative;
    flex: 0 0 auto;
    width: var(--service-process-dot-hit-width);
    height: var(--service-process-dot-hit-area);
    padding: 0;
    border: 0;
    background-color: transparent;
    cursor: pointer;
}

.service-process-dot::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--service-process-dot-size);
    height: var(--service-process-dot-size);
    border-radius: var(--radius-full);
    background-color: var(--service-process-dot-bg);
    content: "";
    transform: translate(-50%, -50%);
    transition: width 0.24s ease, background-color 0.24s ease;
}

.service-process-dot:focus-visible {
    outline: 2px solid var(--service-process-dot-focus-outline);
    outline-offset: 3px;
}

.service-process-dot.is-active {
    width: var(--service-process-dot-active-width);
    background-color: transparent;
}

.service-process-dot.is-active::before {
    width: var(--service-process-dot-active-width);
    background-color: var(--service-process-dot-active-bg);
}

@media (prefers-reduced-motion: reduce) {
    .service-process-slide,     .service-process-dot,     .service-process-dot::before {
        transition: none;
    }
}

.service-process-title {
    color: var(--color-text-primary);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    word-break: keep-all;
}

.service-title-mobile-break {
    display: none;
}

.service-process-list {
    display: grid;
    gap: var(--spacing-24);
    margin-top: var(--spacing-32);
}

.service-process-list-2 {
    grid-template-columns: 1fr;
}

.service-process-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-20);
}

.service-process-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background-color: var(--service-process-number-bg);
    color: var(--service-process-number-color);
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-bold);
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.service-process-item.is-active .service-process-number {
    background-color: var(--service-process-number-active-bg);
    color: var(--service-process-number-active-color);
    box-shadow: 0 8px 20px var(--service-process-number-active-shadow);
}

@media (prefers-reduced-motion: reduce) {
    .service-process-number {
        transition: none;
    }
    [data-service-page="globalpay"] .service-process-number {
        animation: none;
    }
}

.service-process-item-title {
    color: var(--color-text-primary);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-medium);
}

.service-process-cta {
    background-color: var(--service-process-cta-bg);
    border-color: var(--service-process-cta-bg);
    color: var(--service-process-cta-color);
    min-width: 176px;
    margin-top: var(--spacing-48);
}

/* ============================================================
   5-1. 부가서비스 Process
============================================================ */
.service-addon-process {
    background-color: var(--color-bg-white);
}

.service-addon-process-inner {
    padding: var(--spacing-64);
    border-radius: var(--radius-2xl);
    background-color: var(--service-process-bg);
}

.service-faq-cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-80);
}

.service-faq-bottom-cta {
    min-width: 260px;
    min-height: 64px;
    font-size: 20px;
    box-shadow: none;
}

/* ============================================================
   6. FAQ
============================================================ */
.service-faq-list {
    max-width: 760px;
    margin: 0 auto;
}

.service-faq-item {
    border-bottom: 1px solid var(--color-gray-20);
    transition: border-color 0.24s ease, box-shadow 0.24s ease;
}

.service-faq-item[open] {
    margin: var(--spacing-12) 0;
    border: 1px solid var(--color-gray-20);
    border-radius: var(--radius-xl);
    background-color: var(--color-bg-white);
}

.service-faq-question {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 76px;
    padding: 0 64px 0 var(--spacing-32);
    color: var(--color-text-primary);
    font-size: 1.375rem;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    list-style: none;
}

.service-faq-question::-webkit-details-marker {
    display: none;
}

.service-faq-question::before {
    content: "Q";
    flex: 0 0 20px;
    margin-right: var(--spacing-16);
    color: var(--color-primary);
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
}

.service-faq-toggle {
    position: absolute;
    top: 50%;
    right: var(--spacing-24);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    color: var(--color-gray-50);
    transform: translateY(-50%);
}

.service-faq-chevron {
    display: block;
    width: 22px;
    height: 22px;
    stroke-width: 2.25;
    transition: transform 0.24s ease;
}

.service-faq-item[open] .service-faq-chevron {
    transform: rotate(180deg);
}

.service-faq-answer {
    padding: 0 96px 42px 64px;
    color: var(--color-text-body);
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-regular);
    line-height: 1.65;
}

.service-faq-answer p {
    margin: 0;
}

.service-faq-answer p + p {
    margin-top: var(--spacing-16);
}

@media (prefers-reduced-motion: reduce) {
    .service-faq-item,     .service-faq-chevron {
        transition: none;
    }
}

/* ============================================================
   7. 반응형
============================================================ */
@media (min-width: 1025px) {
    body:not([data-service-page="globalpay"]) .service-process-inner {
        padding: var(--spacing-40) var(--spacing-64);
    }
    body:not([data-service-page="globalpay"]) .service-process-dots {
        margin-top: var(--spacing-16);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    body:not([data-service-page="globalpay"]) .service-process-inner {
        padding: var(--spacing-32) var(--spacing-48);
    }
    body:not([data-service-page="globalpay"]) .service-process-dots {
        margin-top: var(--spacing-16);
    }
}

@media (max-width: 1024px) {
    .service-detail-page .section {
        padding-top: var(--spacing-80);
        padding-bottom: var(--spacing-80);
    }
    .service-hero {
        padding: 64px 0 88px;
    }
    .service-hero-title {
        font-size: var(--font-size-h2);
    }
    .service-process-inner {
        grid-template-columns: 1fr;
        gap: var(--spacing-48);
        padding: var(--spacing-48);
    }
    .service-addon-process-inner {
        padding: var(--spacing-48);
    }
    .service-process .section-header-title {
        font-size: var(--font-size-h2);
    }
    [data-service-page="globalpay"] .service-process-inner {
        gap: var(--spacing-24);
    }
    [data-service-page="globalpay"] .service-process-block + .service-process-block {
        margin-top: var(--spacing-24);
    }
    .service-process-visual {
        align-items: center;
        order: 2;
    }
    [data-service-page="globalpay"] .service-process-block-reverse .service-process-visual,     [data-service-page="globalpay"] .service-process-block-reverse .service-process-content {
        grid-column: auto;
        grid-row: auto;
    }
    [data-service-page="globalpay"] .service-process-block-reverse .service-process-visual {
        align-items: center;
    }
    [data-service-page="globalpay"] .service-process-visual {
        order: 1;
    }
    [data-service-page="globalpay"] .service-process-title {
        order: 2;
    }
    [data-service-page="globalpay"] .service-process-actions {
        order: 3;
    }
    .service-process-content {
        display: contents;
        text-align: center;
    }
    .service-process-title {
        order: 1;
        text-align: center;
    }
    .service-process-actions {
        order: 3;
        text-align: center;
    }
    .service-process-list {
        width: fit-content;
        max-width: 100%;
        margin-top: 0;
        margin-right: auto;
        margin-left: auto;
    }
    .service-process-item {
        justify-content: flex-start;
        text-align: left;
    }
    .service-process-dots {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .service-hero-title,     .service-process-title {
        font-size: var(--font-size-h2-tablet);
    }
    .service-process .section-header-title {
        font-size: var(--font-size-h2-tablet);
    }
    /* 태블릿은 PC 기준의 90%로 축소하고 서비스별 시각 보정 비율을 유지한다. */
    .service-hero-image {
        width: min(calc(256.5px * var(--service-hero-art-scale)),calc(49.5vw * var(--service-hero-art-scale)));
        margin-top: var(--spacing-40);
    }
    .service-feature-list,     .service-recommend-list {
        grid-template-columns: 1fr;
    }
    .service-feature-list {
        max-width: 480px;
        margin-top: var(--spacing-40);
    }
    .service-recommend-list {
        max-width: 560px;
        margin-right: auto;
        margin-left: auto;
    }
    [data-service-page="payAgency"] .service-recommend-list,     [data-service-page="settlementAgency"] .service-recommend-list {
        max-width: 520px;
        gap: var(--spacing-24);
    }
    .service-recommend-card {
        min-height: 0;
    }
    .service-recommend-card-desc {
        font-size: var(--font-size-body-lg);
    }
}

@media (max-width: 640px) {
    [data-service-page="globalpay"] .service-hero-title {
        width: 100%;
        max-width: 100%;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: break-word;
    }
}

@media (max-width: 480px) {
    .service-detail-page .section {
        padding-top: var(--spacing-48);
        padding-bottom: var(--spacing-48);
    }
    .service-detail-page .section-header {
        margin-bottom: var(--spacing-32);
    }
    .service-faq .container {
        padding-right: var(--spacing-16);
        padding-left: var(--spacing-16);
    }
    .service-hero {
        min-height: calc(100svh - 60px);
        padding: 56px 0 80px;
    }
    .service-hero-title {
        font-size: var(--font-size-service-hero-title-mobile);
    }
    [data-service-page="globalpay"] .service-hero-title {
        width: 100%;
        max-width: 100%;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: break-word;
    }
    .service-detail-page .section-header-title {
        font-size: var(--font-size-service-section-title-mobile);
    }
    .service-process-title {
        font-size: var(--font-size-service-process-title-mobile);
    }
    .service-process .section-header-title {
        font-size: var(--font-size-service-process-title-mobile);
    }
    .service-detail-page .service-process .section-header {
        margin-bottom: var(--spacing-24);
    }
    [data-service-page="payAgency"] .service-title-mobile-break,     [data-service-page="settlementAgency"] .service-title-mobile-break {
        display: block;
    }
    /* 모바일은 PC 기준의 최대 75%로 축소하며 320px까지 화면 너비에 맞춰 줄인다. */
    .service-hero-image {
        width: min(calc(213.75px * var(--service-hero-art-scale)),calc(63vw * var(--service-hero-art-scale)));
        margin-top: var(--spacing-32);
    }
    .service-feature-card {
        min-height: 116px;
        padding: var(--spacing-24) var(--spacing-20);
    }
    .service-feature-card-caption {
        font-size: var(--font-size-ui);
    }
    .service-feature-card-title,     .service-process-item-title {
        font-size: var(--font-size-h5);
    }
    .service-recommend-card {
        padding: var(--spacing-32) var(--spacing-20);
    }
    .service-recommend-card-desc {
        font-size: var(--font-size-body);
    }
    .service-process-inner {
        gap: var(--spacing-24);
        padding: var(--spacing-32) var(--spacing-20);
    }
    .service-addon-process-inner {
        padding: var(--spacing-32) var(--spacing-20);
    }
    [data-service-page="globalpay"] .service-process-inner {
        gap: var(--spacing-24);
    }
    [data-service-page="globalpay"] .service-process-block + .service-process-block {
        margin-top: var(--spacing-20);
    }
    .service-process-slider {
        height: var(--service-process-slider-height-mobile);
    }
    .service-process-number {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: var(--font-size-ui);
    }
    .service-faq-cta-wrap {
        margin-top: var(--spacing-64);
    }
    .service-faq-bottom-cta {
        width: 100%;
        min-width: 0;
        min-height: 64px;
    }
    .service-faq-question {
        min-height: 72px;
        padding: 0 48px 0 var(--spacing-20);
        font-size: var(--font-size-body-lg);
    }
    [data-service-page="payAgency"] .service-faq-question,     [data-service-page="settlementAgency"] .service-faq-question {
        padding-top: var(--spacing-16);
        padding-bottom: var(--spacing-16);
    }
    .service-faq-question::before {
        flex-basis: 20px;
        margin-right: var(--spacing-12);
        font-size: 1.25rem;
    }
    .service-faq-toggle {
        right: var(--spacing-16);
        width: var(--icon-size-sm);
        height: var(--icon-size-sm);
    }
    .service-faq-chevron {
        width: var(--icon-size-sm);
        height: var(--icon-size-sm);
        stroke-width: 2;
    }
    .service-faq-answer {
        padding: 0 var(--spacing-24) var(--spacing-32) 52px;
        font-size: var(--font-size-body);
    }
}

@media (max-width: 360px) {
    .service-hero-title {
        font-size: var(--font-size-service-hero-title-small);
    }
    .service-process-title {
        font-size: 1.625rem;
    }
    .service-detail-page .section-header-title {
        font-size: 1.625rem;
    }
    .service-detail-page .service-process .section-header {
        margin-bottom: var(--spacing-20);
    }
    .service-process-inner,     [data-service-page="globalpay"] .service-process-inner {
        gap: var(--spacing-20);
    }
    [data-service-page="globalpay"] .service-process-block + .service-process-block {
        margin-top: var(--spacing-16);
    }
    .service-feature-list,     .service-recommend-list {
        gap: var(--spacing-20);
    }
    .service-feature-list {
        margin-top: var(--spacing-32);
    }
    .service-feature-card {
        min-height: 108px;
        padding: var(--spacing-24) var(--spacing-16);
    }
    .service-recommend-card {
        padding-right: var(--spacing-16);
        padding-left: var(--spacing-16);
    }
    .service-process-slider {
        height: var(--service-process-slider-height-small);
    }
    .service-process-item {
        gap: var(--spacing-12);
    }
    .service-process-item-title {
        font-size: var(--font-size-h6);
    }
    .service-faq-answer {
        padding-right: var(--spacing-20);
        padding-left: 44px;
    }
}

.pay-cards .service-recommend-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pay-cards .service-recommend-card .service-recommend-badge {
    margin: 0 0 var(--spacing-24);
    background: var(--tone-badge-bg);
    border-color: var(--tone-badge-border);
    color: var(--tone-badge-text);
}

.pay-cards .service-recommend-card--blue {
    --tone-badge-bg: var(--color-primary-light);
    --tone-badge-border: var(--color-primary-10);
    --tone-badge-text: var(--color-primary);
}

.pay-cards .service-recommend-card--mint {
    --tone-badge-bg: color-mix(in srgb,var(--color-spot-cyan-light) 55%,var(--color-bg-white));
    --tone-badge-border: color-mix(in srgb,var(--color-spot-cyan-light) 75%,var(--color-spot-cyan-mid));
    --tone-badge-text: var(--pay-ill-cyan-text);
}

.pay-cards .service-recommend-card--violet {
    --tone-badge-bg: color-mix(in srgb,var(--color-spot-indigo-light) 55%,var(--color-bg-white));
    --tone-badge-border: color-mix(in srgb,var(--color-spot-indigo-light) 75%,var(--color-spot-indigo-mid));
    --tone-badge-text: var(--pay-ill-indigo-text);
}

.pay-cards .pay-ill {
    display: block;
    flex-shrink: 0;
    width: var(--pay-ill-size);
    height: var(--pay-ill-size);
    margin: 0 auto var(--spacing-32);
    overflow: visible;
}

.pay-ill__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.pay-ill--blue {
    --tone-bg: var(--color-spot-blue-light);
    --tone-point: var(--color-spot-blue-point);
    --tone-soft: var(--pay-ill-blue-soft);
    --tone-pale: var(--color-primary-10);
    --tone-rgb: 6,74,203;
}

.pay-ill--cyan {
    --tone-bg: var(--color-spot-cyan-light);
    --tone-point: var(--color-spot-cyan-point);
    --tone-soft: var(--color-spot-cyan-mid);
    --tone-pale: var(--pay-ill-cyan-pale);
    --tone-rgb: 10,126,168;
}

.pay-ill--indigo {
    --tone-bg: var(--color-spot-indigo-light);
    --tone-point: var(--color-spot-indigo-point);
    --tone-soft: var(--color-spot-indigo-mid);
    --tone-pale: var(--color-recommend-violet-ground);
    --tone-faint: var(--color-primary-light);
    --tone-rgb: 79,70,229;
}

.pay-ill__fill--point {
    fill: var(--tone-point);
}

.pay-ill__fill--soft {
    fill: var(--tone-soft);
}

.pay-ill__fill--pale {
    fill: var(--tone-pale);
}

.pay-ill__stroke--point {
    stroke: var(--tone-point);
}

.pay-ill__stroke--soft {
    stroke: var(--tone-soft);
}

.service-recommend .service-recommend-card .service-recommend-card-title {
    margin: 0;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h5);
    line-height: var(--line-height-tight);
}

.service-recommend .service-recommend-card .service-recommend-card-desc {
    margin: var(--spacing-4) 0 0;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
}

@media (max-width:768px) {
    .pay-cards .service-recommend-card {
        padding: var(--pay-card-mobile-padding) var(--spacing-20);
    }
    .pay-cards .service-recommend-card .service-recommend-badge {
        margin-bottom: var(--spacing-20);
    }
    .pay-cards .pay-ill {
        width: var(--pay-ill-size-mobile);
        height: var(--pay-ill-size-mobile);
        margin-bottom: var(--spacing-24);
    }
    .service-recommend .service-recommend-card .service-recommend-card-title {
        font-size: var(--font-size-ui);
        line-height: 1.4;
    }
    .service-recommend .service-recommend-card .service-recommend-card-desc {
        margin-top: var(--pay-card-text-gap-mobile, 2px);
        font-size: var(--font-size-body-sm);
        line-height: 1.4;
    }
}

@media (prefers-reduced-motion:reduce) {
    .pay-ill__panel,.pay-ill__chip {
        animation: none;
        transition: none;
    }
}

[data-service-page="easypay"] .pay-ill__panel {
    filter: drop-shadow(0 2px 2px color-mix(in srgb,var(--tone-point) 16%,transparent));
}

[data-service-page="easypay"] .pay-ill__chip {
    filter: drop-shadow(0 1px 1.5px color-mix(in srgb,var(--tone-point) 18%,transparent));
}

.pay-cards .service-recommend-card--blue {
    --tone-light: var(--color-spot-blue-light);
    --tone-mid: var(--color-spot-blue-mid);
    --tone-point: var(--color-spot-blue-point);
    --tone-badge-bg: var(--color-primary-light);
    --tone-badge-border: var(--color-primary-10);
    --tone-badge-text: var(--color-primary);
}

.pay-cards .service-recommend-card--mint {
    --tone-light: var(--color-spot-cyan-light);
    --tone-mid: var(--color-spot-cyan-mid);
    --tone-point: var(--color-spot-cyan-point);
    --tone-badge-bg: color-mix(in srgb, var(--tone-light) 55%, var(--color-bg-white));
    --tone-badge-border: color-mix(in srgb, var(--tone-light) 75%, var(--tone-mid));
    --tone-badge-text: var(--color-icon-teal);
}

.pay-cards .service-recommend-card--violet {
    --tone-light: var(--color-spot-indigo-light);
    --tone-mid: var(--color-spot-indigo-mid);
    --tone-point: var(--color-spot-indigo-point);
    --tone-badge-bg: color-mix(in srgb, var(--tone-light) 55%, var(--color-bg-white));
    --tone-badge-border: color-mix(in srgb, var(--tone-light) 75%, var(--tone-mid));
    --tone-badge-text: var(--color-spot-indigo-point);
}

.pay-cards .pay-ill {
    border-radius: var(--radius-full);
    background: radial-gradient(circle at 35% 25%,color-mix(in srgb,var(--tone-light) 80%,white),var(--tone-light) 76%);
}

[data-service-page="linkpay"] .service-recommend-art {
    background: color-mix(in srgb,var(--tone-light) 90%,var(--tone-mid));
}

.pay-cards .pay-ill--blue {
    --tone-soft: var(--color-spot-blue-mid);
    --tone-pale: var(--color-spot-blue-light);
}

.pay-cards .pay-ill--cyan {
    --tone-pale: var(--color-spot-cyan-light);
}

.pay-cards .pay-ill--indigo {
    --tone-pale: var(--color-spot-indigo-light);
}

.pay-cards .pay-ill__panel {
    filter: drop-shadow(0 2px 2px color-mix(in srgb,var(--tone-point) 16%,transparent));
}

.pay-cards .pay-ill__chip {
    filter: drop-shadow(0 1px 1.5px color-mix(in srgb,var(--tone-point) 18%,transparent));
}

@media(max-width:480px) {
    .pay-cards .pay-ill__detail {
        display: none;
    }
}

body:not([data-service-page]) .service-recommend.pay-cards.is-reveal-ready.is-visible {
    transform: none;
    will-change: auto;
}

body:not([data-service-page]) .service-recommend.pay-cards.is-reveal-ready.is-visible .service-recommend-card, body:not([data-service-page]) .service-recommend.pay-cards.is-reveal-ready.is-visible .section-header {
    transform: none;
}

.pay-cards--easypay {
    --easy-enter-duration: 0.8s;
    --easy-loop-duration: 1.4s;
    --easy-timer-duration: 1.4s;
}

.pay-cards--easypay .service-recommend-card {
    --art-delay: 0.3s;
}

.pay-cards--easypay .service-recommend-card:nth-child(2) {
    --art-delay: 0.45s;
}

.pay-cards--easypay .service-recommend-card:nth-child(3) {
    --art-delay: 0.6s;
}

@media(prefers-reduced-motion:no-preference) {
    .pay-cards--easypay.is-reveal-ready.is-visible .pay-ill__svg {
        transform-box: view-box;
        transform-origin: center;
        animation: recommend-art-spring var(--easy-enter-duration) ease-out var(--art-delay) backwards;
    }
    .pay-cards--easypay.is-visible .pay-ill__audience-motion {
        animation: easy-audience-lift var(--easy-loop-duration) ease-in-out calc(var(--art-delay) + 0.18s) infinite;
    }
    .pay-cards--easypay.is-visible .pay-ill__growth-bar {
        transform-box: fill-box;
        transform-origin: center bottom;
        animation: recommend-bar-loop var(--easy-loop-duration) ease-in-out calc(var(--art-delay) + 0.18s + var(--bar-offset)) infinite;
    }
    .pay-cards--easypay.is-visible .pay-ill__timer-motion {
        transform-box: fill-box;
        transform-origin: center;
        animation: easy-timer-tick var(--easy-timer-duration) ease-in-out calc(var(--art-delay) + 0.2s) infinite;
    }
}

@keyframes easy-audience-lift {
    0%,100% {
        transform: translateY(0);
    }
    45% {
        transform: translateY(-1.5px);
    }
    70% {
        transform: translateY(0.4px);
    }
}

@keyframes easy-timer-tick {
    0%,100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-12deg);
    }
    55% {
        transform: rotate(12deg);
    }
    80% {
        transform: rotate(-4deg);
    }
}

@media(prefers-reduced-motion:reduce) {
    .pay-cards--easypay .pay-ill__svg,.pay-cards--easypay .pay-ill__audience-motion,.pay-cards--easypay .pay-ill__growth-bar,.pay-cards--easypay .pay-ill__timer-motion {
        animation: none;
        transform: none;
        opacity: 1;
    }
}

/* Pay Agency Icon Motion */
.pay-cards--pay-agency .service-recommend-art {
    position: relative;
}

.pay-cards--pay-agency .pay-agency-ill__chip-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pay-cards--pay-agency .service-recommend-card {
    --art-delay: 0.3s;
}

.pay-cards--pay-agency .service-recommend-card:nth-child(2) {
    --art-delay: 0.45s;
}

.pay-cards--pay-agency .service-recommend-card:nth-child(3) {
    --art-delay: 0.6s;
}

@media (prefers-reduced-motion: no-preference) {
    .pay-cards--pay-agency.is-reveal-ready.is-visible .pay-ill__svg {
        transform-box: view-box;
        transform-origin: center;
        animation: recommend-art-spring 0.8s ease-out var(--art-delay) backwards;
    }
    .pay-cards--pay-agency.is-visible .pay-agency-ill__org-line {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
    }
    .pay-cards--pay-agency.is-visible .pay-agency-ill__org-trunk {
        animation: pay-agency-org-trunk-draw 2.4s ease-in-out calc(var(--art-delay) + 0.8s) infinite both;
    }
    .pay-cards--pay-agency.is-visible .pay-agency-ill__org-branch {
        animation: pay-agency-org-branch-draw 2.4s ease-in-out calc(var(--art-delay) + 0.8s) infinite both;
    }
    .pay-cards--pay-agency.is-visible .pay-agency-ill__org-drop {
        animation: pay-agency-org-drop-draw 2.4s ease-in-out calc(var(--art-delay) + 0.8s) infinite both;
    }
    .pay-cards--pay-agency.is-visible .pay-agency-ill__shield {
        transform-box: view-box;
        transform-origin: 31.5px 43.25px;
        animation: pay-agency-shield-sway 1.6s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--pay-agency.is-visible .pay-agency-ill__gauge {
        animation: pay-agency-gauge-fill 2s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--pay-agency.is-visible .pay-agency-ill__knob {
        animation: pay-agency-gauge-travel 2s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--pay-agency.is-visible .pay-agency-ill__day {
        animation: pay-agency-day-highlight 1.8s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--pay-agency.is-visible .pay-agency-ill__day--2 {
        animation-delay: calc(var(--art-delay) + 1.7s);
    }
    .pay-cards--pay-agency.is-visible .pay-agency-ill__cycle {
        transform-box: view-box;
        transform-origin: 65px 65px;
        animation: pay-agency-cycle-turn 2s linear calc(var(--art-delay) + 0.8s) infinite;
    }
}

@keyframes pay-agency-org-trunk-draw {
    0%, 10% {
        stroke-dashoffset: 1;
        opacity: 1;
    }
    28%, 86% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    96% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
    100% {
        stroke-dashoffset: 1;
        opacity: 0;
    }
}

@keyframes pay-agency-org-branch-draw {
    0%, 24% {
        stroke-dashoffset: 1;
        opacity: 1;
    }
    50%, 86% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    96% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
    100% {
        stroke-dashoffset: 1;
        opacity: 0;
    }
}

@keyframes pay-agency-org-drop-draw {
    0%, 46% {
        stroke-dashoffset: 1;
        opacity: 1;
    }
    66%, 86% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    96% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
    100% {
        stroke-dashoffset: 1;
        opacity: 0;
    }
}

@keyframes pay-agency-shield-sway {
    0%, 100% {
        transform: rotate(-8deg);
    }
    50% {
        transform: rotate(8deg);
    }
}

@keyframes pay-agency-cycle-turn {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pay-agency-gauge-fill {
    0%, 100% {
        width: 21px;
    }
    50% {
        width: 37px;
    }
}

@keyframes pay-agency-gauge-travel {
    0%, 100% {
        transform: translateX(-16px);
    }
    50% {
        transform: translateX(0);
    }
}

@keyframes pay-agency-day-highlight {
    0%, 100% {
        stroke-opacity: 0.5;
        fill: color-mix(in srgb, var(--tone-point) 0%, transparent);
    }
    50% {
        stroke-opacity: 1;
        fill: color-mix(in srgb, var(--tone-point) 18%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pay-cards--pay-agency .pay-ill__svg,     .pay-cards--pay-agency .pay-agency-ill__org-line,     .pay-cards--pay-agency .pay-agency-ill__shield,     .pay-cards--pay-agency .pay-agency-ill__cycle,     .pay-cards--pay-agency .pay-agency-ill__gauge,     .pay-cards--pay-agency .pay-agency-ill__knob,     .pay-cards--pay-agency .pay-agency-ill__day {
        animation: none;
        transform: none;
    }
}

/* Overseas Icon Motion */
.pay-cards--overseas .service-recommend-art {
    position: relative;
}

.pay-cards--overseas .overseas-ill__chip-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pay-cards--overseas .overseas-ill__globe-line {
    display: none;
}

.pay-cards--overseas .service-recommend-card {
    --art-delay: 0.3s;
}

.pay-cards--overseas .service-recommend-card:nth-child(2) {
    --art-delay: 0.45s;
}

.pay-cards--overseas .service-recommend-card:nth-child(3) {
    --art-delay: 0.6s;
}

@media (prefers-reduced-motion: no-preference) {
    .pay-cards--overseas.is-reveal-ready.is-visible .pay-ill__svg {
        transform-box: view-box;
        transform-origin: center;
        animation: recommend-art-spring 0.8s ease-out var(--art-delay) backwards;
    }
    .pay-cards--overseas.is-visible .overseas-ill__participant {
        transform-box: fill-box;
        transform-origin: center;
        animation: overseas-participant-pulse 1.4s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--overseas.is-visible .overseas-ill__participant:nth-of-type(2) {
        animation-delay: calc(var(--art-delay) + 1s);
    }
    .pay-cards--overseas.is-visible .overseas-ill__participant:nth-of-type(3) {
        animation-delay: calc(var(--art-delay) + 1.2s);
    }
    .pay-cards--overseas.is-visible .overseas-ill__globe-guide {
        stroke-opacity: 0.25;
    }
    .pay-cards--overseas.is-visible .overseas-ill__globe-line {
        display: inline;
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
    }
    .pay-cards--overseas.is-visible .overseas-ill__meridian {
        animation: overseas-meridian-draw 3s ease-in-out calc(var(--art-delay) + 0.8s) infinite both;
    }
    .pay-cards--overseas.is-visible .overseas-ill__equator {
        animation: overseas-equator-draw 3s ease-in-out calc(var(--art-delay) + 0.8s) infinite both;
    }
    .pay-cards--overseas.is-visible .overseas-ill__repeat {
        transform-box: view-box;
        transform-origin: 31.5px 42.5px;
        animation: overseas-repeat-turn 3s linear calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--overseas.is-visible .overseas-ill__card {
        animation: overseas-card-lift 1.8s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
}

@keyframes overseas-participant-pulse {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

@keyframes overseas-meridian-draw {
    0%, 8% {
        stroke-dashoffset: 1;
        opacity: 1;
    }
    38%, 78% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    92% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
    100% {
        stroke-dashoffset: 1;
        opacity: 0;
    }
}

@keyframes overseas-equator-draw {
    0%, 38% {
        stroke-dashoffset: 1;
        opacity: 1;
    }
    58%, 78% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    92% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
    100% {
        stroke-dashoffset: 1;
        opacity: 0;
    }
}

@keyframes overseas-repeat-turn {
    to {
        transform: rotate(360deg);
    }
}

@keyframes overseas-card-lift {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pay-cards--overseas .pay-ill__svg,     .pay-cards--overseas .overseas-ill__participant,     .pay-cards--overseas .overseas-ill__globe-line,     .pay-cards--overseas .overseas-ill__repeat,     .pay-cards--overseas .overseas-ill__card {
        animation: none;
        transform: none;
    }
}

/* Globalpay Icon Motion */
[data-service-page="globalpay"] .globalpay-ill__scan, [data-service-page="globalpay"] .globalpay-ill__shine {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    [data-service-page="globalpay"] .service-recommend-card {
        --art-delay: 0.3s;
    }
    [data-service-page="globalpay"] .service-recommend-card:nth-child(2) {
        --art-delay: 0.45s;
    }
    [data-service-page="globalpay"] .service-recommend-card:nth-child(3) {
        --art-delay: 0.6s;
    }
    [data-service-page="globalpay"] .service-recommend.is-reveal-ready.is-visible .pay-ill__svg {
        transform-box: view-box;
        transform-origin: center;
        animation: recommend-art-spring 0.8s ease-out var(--art-delay) backwards;
    }
    [data-service-page="globalpay"] .service-recommend.is-visible .globalpay-ill__shirt {
        transform-box: fill-box;
        transform-origin: center;
        animation: globalpay-shirt-sway 1.6s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    [data-service-page="globalpay"] .service-recommend.is-visible .globalpay-ill__shine {
        display: block;
        animation: globalpay-button-shine 1.6s linear calc(var(--art-delay) + 0.8s) infinite;
    }
    [data-service-page="globalpay"] .service-recommend.is-visible .globalpay-ill__medical-mark circle {
        animation: globalpay-medical-emphasis 1.2s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    [data-service-page="globalpay"] .service-recommend.is-visible .globalpay-ill__heart {
        transform-box: fill-box;
        transform-origin: center;
        animation: globalpay-heart-beat 0.8s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    [data-service-page="globalpay"] .service-recommend.is-visible .globalpay-ill__scan {
        display: block;
        animation: globalpay-scan-sweep 2.2s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
}

@keyframes globalpay-shirt-sway {
    0%, 100% {
        transform: rotate(0deg);
    }
    35% {
        transform: translateY(-1px) rotate(10deg);
    }
    70% {
        transform: translateY(0.5px) rotate(-8deg);
    }
}

@keyframes globalpay-button-shine {
    0% {
        opacity: 0;
        transform: translateX(0);
    }
    15%, 85% {
        opacity: 0.24;
    }
    100% {
        opacity: 0;
        transform: translateX(34px);
    }
}

@keyframes globalpay-medical-emphasis {
    0%, 55%, 100% {
        fill: var(--tone-point);
    }
    20%, 35% {
        fill: color-mix(in srgb, var(--tone-point) 80%, var(--color-text-primary));
    }
}

@keyframes globalpay-heart-beat {
    0%, 100% {
        transform: scale(1);
    }
    20% {
        transform: scale(1.16);
    }
    40% {
        transform: scale(0.98);
    }
    60% {
        transform: scale(1.08);
    }
    80% {
        transform: scale(1);
    }
}

@keyframes globalpay-scan-sweep {
    0%, 100% {
        opacity: 0.25;
        transform: translateY(0);
    }
    50% {
        opacity: 0.8;
        transform: translateY(18px);
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-service-page="globalpay"] .service-recommend .pay-ill__svg,     [data-service-page="globalpay"] .globalpay-ill__shirt,     [data-service-page="globalpay"] .globalpay-ill__medical-mark,     [data-service-page="globalpay"] .globalpay-ill__medical-mark circle,     [data-service-page="globalpay"] .globalpay-ill__heart {
        animation: none;
        transform: none;
        opacity: 1;
    }
    [data-service-page="globalpay"] .globalpay-ill__scan,     [data-service-page="globalpay"] .globalpay-ill__shine {
        display: none;
        animation: none;
    }
}

/* Linkpay Icon Motion */
[data-service-page="linkpay"] .service-recommend-art {
    position: relative;
}

[data-service-page="linkpay"] .linkpay-ill__chip-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

[data-service-page="linkpay"] .linkpay-ill__play, [data-service-page="linkpay"] .linkpay-ill__progress {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    [data-service-page="linkpay"] .service-recommend-card {
        --art-delay: 0.3s;
    }
    [data-service-page="linkpay"] .service-recommend-card:nth-child(2) {
        --art-delay: 0.45s;
    }
    [data-service-page="linkpay"] .service-recommend-card:nth-child(3) {
        --art-delay: 0.6s;
    }
    [data-service-page="linkpay"] .service-recommend.is-reveal-ready.is-visible .pay-ill__svg {
        transform-box: view-box;
        transform-origin: center;
        animation: recommend-art-spring 0.8s ease-out var(--art-delay) backwards;
    }
    [data-service-page="linkpay"] .service-recommend.is-visible .linkpay-ill__play {
        display: block;
        animation: linkpay-play-orbit 1.4s linear calc(var(--art-delay) + 0.8s) infinite;
    }
    [data-service-page="linkpay"] .service-recommend.is-visible .linkpay-ill__heart {
        transform-box: fill-box;
        transform-origin: center;
        animation: linkpay-heart-beat 1.1s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    [data-service-page="linkpay"] .service-recommend.is-visible .linkpay-ill__product {
        animation: linkpay-product-lift 1.6s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    [data-service-page="linkpay"] .service-recommend.is-visible .linkpay-ill__product--second {
        animation-delay: calc(var(--art-delay) + 1.6s);
    }
    [data-service-page="linkpay"] .service-recommend.is-visible .linkpay-ill__progress {
        display: block;
        animation: linkpay-learning-progress 2s linear calc(var(--art-delay) + 0.8s) infinite;
    }
}

@keyframes linkpay-play-orbit {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: -47.124;
    }
}

@keyframes linkpay-heart-beat {
    0%, 100% {
        transform: scale(1);
    }
    20% {
        transform: scale(1.2);
    }
    40% {
        transform: scale(0.98);
    }
    60% {
        transform: scale(1.12);
    }
    80% {
        transform: scale(1);
    }
}

@keyframes linkpay-product-lift {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

@keyframes linkpay-learning-progress {
    0%, 100% {
        width: 0;
    }
    85% {
        width: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-service-page="linkpay"] .service-recommend .pay-ill__svg,     [data-service-page="linkpay"] .linkpay-ill__play,     [data-service-page="linkpay"] .linkpay-ill__heart,     [data-service-page="linkpay"] .linkpay-ill__product,     [data-service-page="linkpay"] .linkpay-ill__progress {
        animation: none;
        transform: none;
        opacity: 1;
    }
    [data-service-page="linkpay"] .linkpay-ill__play,     [data-service-page="linkpay"] .linkpay-ill__progress {
        display: none;
    }
}

/* Static Recommendation Icons */
.pay-cards--static .service-recommend-card {
    --art-delay: 0.3s;
}

.pay-cards--static .service-recommend-card:nth-child(2) {
    --art-delay: 0.45s;
}

.pay-cards--static .service-recommend-card:nth-child(3) {
    --art-delay: 0.6s;
}

.pay-cards--static.is-reveal-ready.is-visible {
    transform: none;
    will-change: auto;
}

.pay-cards--static.is-reveal-ready.is-visible .service-recommend-card, .pay-cards--static.is-reveal-ready.is-visible .section-header {
    transform: none;
}

@media (prefers-reduced-motion: no-preference) {
    .pay-cards--static.is-reveal-ready.is-visible .pay-ill__svg {
        transform-box: view-box;
        transform-origin: center;
        animation: recommend-art-spring 0.8s ease-out var(--art-delay) backwards;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pay-cards--static .pay-ill__svg {
        animation: none;
        transform: none;
    }
}

/* QRpay Icon Motion */
.pay-cards--qrpay .service-recommend-art {
    position: relative;
}

.pay-cards--qrpay .qrpay-ill__chip-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pay-cards--qrpay .service-recommend-card {
    --art-delay: 0.3s;
    --qr-cycle: 2.8s;
}

.pay-cards--qrpay .service-recommend-card:nth-child(2) {
    --art-delay: 0.45s;
    --qr-cycle: 2.2s;
}

.pay-cards--qrpay .service-recommend-card:nth-child(3) {
    --art-delay: 0.6s;
    --qr-cycle: 2.6s;
}

.pay-cards--qrpay .qrpay-ill__scan {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    .pay-cards--qrpay.is-reveal-ready.is-visible .pay-ill__svg {
        transform-box: view-box;
        transform-origin: center;
        animation: recommend-art-spring 0.8s ease-out var(--art-delay) backwards;
    }
    .pay-cards--qrpay.is-visible .qrpay-ill__card-slide {
        animation: qrpay-card-insert var(--qr-cycle) ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--qrpay.is-visible .qrpay-ill__x {
        transform-box: view-box;
        transform-origin: 68px 25px;
        animation: qrpay-x-pulse var(--qr-cycle) ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--qrpay.is-visible .qrpay-ill__megaphone {
        transform-box: view-box;
        transform-origin: 49px 46px;
        animation: qrpay-megaphone-call var(--qr-cycle) ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--qrpay.is-visible .qrpay-ill__wave {
        animation: qrpay-sound-wave 1.1s ease-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--qrpay.is-visible .qrpay-ill__scan {
        display: block;
        animation: qrpay-code-scan var(--qr-cycle) linear calc(var(--art-delay) + 0.8s) infinite;
    }
}

@keyframes qrpay-card-insert {
    0%, 100% {
        transform: translateX(0);
    }
    44%, 54% {
        transform: translateX(-17px);
    }
    82% {
        transform: translateX(0.8px);
    }
}

@keyframes qrpay-x-pulse {
    0%, 24%, 72%, 100% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.16);
    }
    51% {
        transform: scale(1);
    }
    60% {
        transform: scale(1.1);
    }
}

@keyframes qrpay-megaphone-call {
    0%, 100% {
        transform: rotate(0);
    }
    28% {
        transform: rotate(-8deg);
    }
    56% {
        transform: rotate(5deg);
    }
    78% {
        transform: rotate(-3deg);
    }
}

@keyframes qrpay-sound-wave {
    0% {
        transform: translateX(0);
        opacity: 0.35;
    }
    42% {
        opacity: 1;
    }
    100% {
        transform: translateX(2px);
        opacity: 0.2;
    }
}

@keyframes qrpay-code-scan {
    0%, 8% {
        transform: translateY(0);
        opacity: 0;
    }
    16% {
        opacity: 1;
    }
    72% {
        transform: translateY(17px);
        opacity: 1;
    }
    82%, 100% {
        transform: translateY(17px);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pay-cards--qrpay .pay-ill__svg,     .pay-cards--qrpay .qrpay-ill__card-slide,     .pay-cards--qrpay .qrpay-ill__x,     .pay-cards--qrpay .qrpay-ill__megaphone,     .pay-cards--qrpay .qrpay-ill__wave {
        animation: none;
        transform: none;
        opacity: 1;
    }
    .pay-cards--qrpay .qrpay-ill__scan {
        display: none;
    }
}

/* Regular Payment Icon Motion */
.pay-cards--regularpay .service-recommend-art {
    position: relative;
}

.pay-cards--regularpay .regular-ill__chip-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pay-cards--regularpay .service-recommend-card {
    --art-delay: 0.3s;
}

.pay-cards--regularpay .service-recommend-card:nth-child(2) {
    --art-delay: 0.45s;
}

.pay-cards--regularpay .service-recommend-card:nth-child(3) {
    --art-delay: 0.6s;
}

.pay-cards--regularpay.is-reveal-ready.is-visible {
    transform: none;
    will-change: auto;
}

.pay-cards--regularpay.is-reveal-ready.is-visible .service-recommend-card, .pay-cards--regularpay.is-reveal-ready.is-visible .section-header {
    transform: none;
}

@media (prefers-reduced-motion: no-preference) {
    .pay-cards--regularpay.is-reveal-ready.is-visible .pay-ill__svg {
        transform-box: view-box;
        transform-origin: center;
        animation: recommend-art-spring 0.8s ease-out var(--art-delay) backwards;
    }
    .pay-cards--regularpay.is-visible .regular-ill__card-back {
        animation: regular-card-back 2.6s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--regularpay.is-visible .regular-ill__card-middle {
        animation: regular-card-middle 2.6s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--regularpay.is-visible .regular-ill__card-front {
        animation: regular-card-front 2.6s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--regularpay.is-visible .regular-ill__cycle {
        transform-box: view-box;
        transform-origin: 68px 25px;
        animation: regular-cycle-turn 2.6s linear calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--regularpay.is-visible .regular-ill__customer {
        animation: regular-customer-lift 2.2s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--regularpay.is-visible .regular-ill__customer--center {
        animation-delay: calc(var(--art-delay) + 0.96s);
    }
    .pay-cards--regularpay.is-visible .regular-ill__customer--right {
        animation-delay: calc(var(--art-delay) + 1.12s);
    }
    .pay-cards--regularpay.is-visible .regular-ill__heart {
        transform-box: view-box;
        transform-origin: 67px 25px;
        animation: regular-heart-beat 2.2s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--regularpay.is-visible .regular-ill__reminder {
        animation: regular-reminder-lift 2.6s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--regularpay.is-visible .regular-ill__receipt-line {
        transform-box: view-box;
        transform-origin: 26px 35.5px;
        animation: regular-receipt-line 2.6s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--regularpay.is-visible .regular-ill__bell {
        transform-box: view-box;
        transform-origin: 65px 65px;
        animation: regular-bell-ring 2.6s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
}

@keyframes regular-card-back {
    0%, 100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(1.5px, -1px);
    }
}

@keyframes regular-card-middle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-0.6px);
    }
}

@keyframes regular-card-front {
    0%, 100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(-1.5px, 1.5px);
    }
}

@keyframes regular-cycle-turn {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes regular-customer-lift {
    0%, 100% {
        transform: translateY(0);
    }
    42% {
        transform: translateY(-1.8px);
    }
    72% {
        transform: translateY(0.35px);
    }
}

@keyframes regular-heart-beat {
    0%, 100% {
        transform: scale(1);
    }
    22% {
        transform: scale(1.1);
    }
    37% {
        transform: scale(1);
    }
    52% {
        transform: scale(1.06);
    }
    70% {
        transform: scale(1);
    }
}

@keyframes regular-reminder-lift {
    0%, 100% {
        transform: translateY(0);
    }
    42% {
        transform: translateY(-1.3px);
    }
}

@keyframes regular-receipt-line {
    0%, 100% {
        transform: scaleX(1);
    }
    45% {
        transform: scaleX(0.7);
    }
}

@keyframes regular-bell-ring {
    0%, 52%, 100% {
        transform: rotate(0);
    }
    12% {
        transform: rotate(-12deg);
    }
    24% {
        transform: rotate(10deg);
    }
    36% {
        transform: rotate(-6deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pay-cards--regularpay .pay-ill__svg,     .pay-cards--regularpay .regular-ill__card-back,     .pay-cards--regularpay .regular-ill__card-middle,     .pay-cards--regularpay .regular-ill__card-front,     .pay-cards--regularpay .regular-ill__cycle,     .pay-cards--regularpay .regular-ill__customer,     .pay-cards--regularpay .regular-ill__heart,     .pay-cards--regularpay .regular-ill__reminder,     .pay-cards--regularpay .regular-ill__receipt-line,     .pay-cards--regularpay .regular-ill__bell {
        animation: none;
        transform: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .pay-cards--sms-motion.is-visible .sms-ill__message {
        transform-box: view-box;
        transform-origin: 33px 48px;
        animation: sms-message-notify 1.8s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--sms-motion.is-visible .sms-ill__line {
        transform-box: fill-box;
        transform-origin: left center;
        animation: sms-line-extend 1.8s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--sms-motion.is-visible .sms-ill__line--2 {
        animation-delay: calc(var(--art-delay) + 0.98s);
    }
    .pay-cards--sms-motion.is-visible .sms-ill__dot {
        transform-box: fill-box;
        transform-origin: center;
        animation: sms-dot-emphasis 1.5s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--sms-motion.is-visible .sms-ill__dot--2 {
        animation-delay: calc(var(--art-delay) + 0.96s);
    }
    .pay-cards--sms-motion.is-visible .sms-ill__dot--3 {
        animation-delay: calc(var(--art-delay) + 1.12s);
    }
    .pay-cards--sms-motion.is-visible .sms-ill__slot--selected {
        transform-box: fill-box;
        transform-origin: center;
        animation: sms-slot-select 1.8s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--sms-motion.is-visible .sms-ill__coins {
        animation: sms-coins-bounce 1.8s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
}

@keyframes sms-message-notify {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    30% {
        transform: translateY(-4px) rotate(-6deg);
    }
    55% {
        transform: translateY(-1px) rotate(4deg);
    }
    75% {
        transform: translateY(-2px) rotate(-2deg);
    }
}

@keyframes sms-line-extend {
    0%, 100% {
        transform: scaleX(1);
    }
    45% {
        transform: scaleX(0.4);
    }
}

@keyframes sms-dot-emphasis {
    0%, 70%, 100% {
        transform: translateY(0) scale(1);
    }
    35% {
        transform: translateY(-3px) scale(1.35);
    }
}

@keyframes sms-slot-select {
    0%, 100% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.65);
    }
    65% {
        transform: scale(0.9);
    }
}

@keyframes sms-coins-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    35% {
        transform: translateY(-3.5px);
    }
    65% {
        transform: translateY(1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pay-cards--sms-motion .sms-ill__message,     .pay-cards--sms-motion .sms-ill__coins,     .pay-cards--sms-motion .sms-ill__line,     .pay-cards--sms-motion .sms-ill__dot,     .pay-cards--sms-motion .sms-ill__slot--selected {
        animation: none;
        transform: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .pay-cards--sugi-motion.is-visible .sugi-ill__dot {
        animation: sugi-connect-dot 1.8s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--sugi-motion.is-visible .sugi-ill__dot--2 {
        animation-delay: calc(var(--art-delay) + 0.96s);
    }
    .pay-cards--sugi-motion.is-visible .sugi-ill__dot--3 {
        animation-delay: calc(var(--art-delay) + 1.12s);
    }
    .pay-cards--sugi-motion.is-visible .sugi-ill__remote-card {
        animation: sugi-remote-card 1.8s ease-in-out calc(var(--art-delay) + 1.12s) infinite;
    }
    .pay-cards--sugi-motion.is-visible .sugi-ill__entry-card {
        transform-box: view-box;
        transform-origin: 45.5px 46px;
        animation: sugi-card-press 1.8s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--sugi-motion.is-visible .sugi-ill__tap {
        transform-box: view-box;
        transform-origin: 67px 27px;
        animation: sugi-finger-tap 1.8s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--sugi-motion.is-visible .sugi-ill__phone {
        transform-box: view-box;
        transform-origin: 30px 46.5px;
        animation: sugi-phone-ring 1.6s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
}

@keyframes sugi-connect-dot {
    0%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-2px);
    }
}

@keyframes sugi-remote-card {
    0%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-2px);
    }
}

@keyframes sugi-card-press {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    40% {
        transform: translateY(1px) scale(0.96);
    }
}

@keyframes sugi-finger-tap {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    40% {
        transform: translateY(1px) scale(0.88);
    }
}

@keyframes sugi-phone-ring {
    0%, 100% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(-10deg);
    }
    40% {
        transform: rotate(9deg);
    }
    60% {
        transform: rotate(-6deg);
    }
    80% {
        transform: rotate(4deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pay-cards--sugi-motion [class*="sugi-ill__"] {
        animation: none;
        transform: none;
    }
}

.pay-cards--sugi-motion .service-recommend-art {
    position: relative;
}

.pay-cards--sugi-motion .sugi-ill__chip-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pay-cards--talk-motion .service-recommend-art {
    position: relative;
}

.pay-cards--talk-motion .talk-ill__chip-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .pay-cards--talk-motion.is-visible .talk-ill__date {
        transform-box: fill-box;
        transform-origin: center;
        animation: talk-date-select 1.8s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--talk-motion.is-visible .talk-ill__date--2 {
        animation-delay: calc(var(--art-delay) + 1.02s);
    }
    .pay-cards--talk-motion.is-visible .talk-ill__date--3 {
        animation-delay: calc(var(--art-delay) + 1.24s);
    }
    .pay-cards--talk-motion.is-visible .talk-ill__clock-hand {
        transform-box: view-box;
        transform-origin: 0 0;
        animation: talk-clock-turn 3.6s linear calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--talk-motion.is-visible .talk-ill__message {
        transform-box: view-box;
        transform-origin: 45px 50px;
        animation: talk-message-notify 1.8s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--talk-motion.is-visible .talk-ill__plane {
        animation: talk-plane-send 1.8s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--talk-motion.is-visible .talk-ill__mountain-back {
        animation: talk-mountain-rise 2.4s ease-in-out calc(var(--art-delay) + 1.05s) infinite;
    }
    .pay-cards--talk-motion.is-visible .talk-ill__mountain-front {
        animation: talk-mountain-rise 2.4s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--talk-motion.is-visible .talk-ill__dot {
        transform-box: fill-box;
        transform-origin: center;
        animation: talk-typing-dot 1.5s ease-in-out calc(var(--art-delay) + 0.8s) infinite;
    }
    .pay-cards--talk-motion.is-visible .talk-ill__dot--2 {
        animation-delay: calc(var(--art-delay) + 0.96s);
    }
    .pay-cards--talk-motion.is-visible .talk-ill__dot--3 {
        animation-delay: calc(var(--art-delay) + 1.12s);
    }
}

@keyframes talk-date-select {
    0%, 100% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.15);
    }
}

@keyframes talk-clock-turn {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes talk-message-notify {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    35% {
        transform: translateY(-2.5px) rotate(-3deg);
    }
    65% {
        transform: translateY(-0.5px) rotate(2deg);
    }
}

@keyframes talk-plane-send {
    0%, 100% {
        transform: translate(0, 0);
    }
    40% {
        transform: translate(1px, -1px);
    }
}

@keyframes talk-mountain-rise {
    0%, 100% {
        transform: translateY(0);
    }
    45% {
        transform: translateY(-2px);
    }
}

@keyframes talk-typing-dot {
    0%, 100% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pay-cards--talk-motion [class*="talk-ill__"] {
        animation: none;
        transform: none;
    }
}

.pay-cards--easypay .service-recommend-art, .pay-cards--sms-motion .service-recommend-art {
    position: relative;
}

.pay-cards--easypay .easy-ill__chip-layer, .pay-cards--sms-motion .sms-ill__chip-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}