/* 지급대행 전용: 공통 카드 위에 3+3 단계와 화면 폭별 배치를 적용한다. */
.flow-section--payout {
    padding: 0;
    --flow-group-ratio-merchant: 1;
    --flow-group-ratio-payup: 1;
    --flow-boundary: 50%;
    --flow-radius: var(--radius-2xl);
    --flow-inner-radius: calc(var(--radius-2xl) - 1px);
    --flow-group-inset: var(--spacing-24);
    --flow-label-gap: var(--spacing-20);
    --flow-role-height: var(--spacing-32);
    --flow-steps-gap-top: var(--spacing-32);
    --flow-chip-size: var(--spacing-80);
    --flow-connector-clearance: var(--spacing-48);
    --flow-icon-size: var(--icon-size-lg);
    --flow-shadow-merchant: 0 0 0 transparent;
    --flow-shadow-payup: 0 0 0 transparent;
}

.flow-section--payout .flow__role {
    height: var(--flow-role-height);
    font-size: var(--font-size-ui);
}

.flow-section--payout .flow__group--payup .flow__role::before {
    background-color: var(--color-primary);
}

.flow-section--payout .flow__label {
    font-weight: var(--font-weight-bold);
}

/* 결과 업데이트 문서는 정산대행과 같은 얇은 선 굵기를 적용한다. */
.flow-section--payout .flow__chip .flow__icon--light {
    stroke-width: 1.4;
}

.flow-section--payout .flow__note {
    margin-top: var(--spacing-4);
    padding: 0 var(--spacing-4);
}

/* 점선의 기본 모양을 유지하고 아래 전용 모션에서 흐르는 강조선을 겹친다. */
.flow-section--payout .flow__dots {
    mask-image: none;
    background: repeating-linear-gradient(to right, var(--color-gray-40) 0 5px, transparent 5px 9px);
}

.flow-section--payout .flow__dots::before {
    display: none;
}

/* 중간 폭 상하 배치에서는 영역 간 점선을 숨긴다. */
.flow-section--payout .flow__connector--handoff {
    display: none;
}

/* 넓은 PC에서는 마지막 가맹점 단계에서 첫 Payup 단계까지 수평으로 연결한다. */
@media (min-width: 1281px) {
    .flow-section--payout .flow__connector--handoff {
        display: block;
    }
}

/* 좁은 PC와 태블릿: 영역은 상하로, 각 영역의 세 단계는 가로로 유지한다. */
@media (max-width: 1280px) {
    .flow-section--payout .flow {
        flex-direction: column;
    }
    .flow-section--payout .flow__group {
        position: relative;
        flex: auto;
        display: grid;
        grid-template-columns: 184px minmax(0, 1fr);
        align-items: center;
        padding: var(--spacing-32) var(--spacing-24);
    }
    .flow-section--payout .flow__group--merchant {
        border-radius: var(--flow-inner-radius) var(--flow-inner-radius) 0 0;
    }
    .flow-section--payout .flow__group--payup {
        border-radius: 0 0 var(--flow-inner-radius) var(--flow-inner-radius);
    }
    .flow-section--payout .flow__role {
        margin-left: 0;
        justify-self: start;
        align-self: center;
    }
    .flow-section--payout .flow__steps {
        margin-top: 0;
    }
    .flow-section--payout .flow__handoff {
        top: 0;
        left: 50%;
        margin-top: calc(var(--flow-handoff-size) / -2);
    }
    .flow-section--payout .flow__handoff .flow__icon {
        transform: rotate(90deg);
    }
}

/* 768px 이하: 아이콘과 문구를 중앙에 쌓고 정산대행과 같은 단계 간격을 사용한다. */
@media (max-width: 768px) {
    .flow-section--payout {
        --flow-chip-size: var(--spacing-64);
        --flow-label-gap: 18px;
        --flow-steps-gap-top: var(--spacing-24);
        --flow-mobile-header-height: calc(var(--spacing-48) + var(--flow-role-height) + var(--flow-steps-gap-top));
        --flow-mobile-step-height: calc(var(--flow-chip-size) + var(--flow-label-gap) + var(--font-size-body-lg) * var(--line-height-tight) + var(--spacing-4) + var(--font-size-ui) * var(--line-height-tight));
    }
    .flow-section--payout .flow__group {
        display: flex;
        padding: var(--spacing-32) var(--spacing-24) var(--spacing-40);
    }
    /* 정산대행과 동일하게 경계 화살표와 Payup 배지 사이 여백을 확보한다. */
    .flow-section--payout .flow__group--payup {
        padding-top: var(--spacing-48);
    }
    .flow-section--payout .flow__group--merchant {
        padding-bottom: var(--flow-mobile-merchant-bottom);
    }
    .flow-section--payout .flow__role {
        position: relative;
        z-index: 2;
        align-self: center;
        background-color: var(--color-bg-white);
    }
    .flow-section--payout .flow__steps {
        flex-direction: column;
        gap: var(--flow-mobile-gap);
        margin-top: var(--flow-steps-gap-top);
        width: 100%;
    }
    .flow-section--payout .flow__step {
        display: block;
        min-height: var(--flow-mobile-step-height);
        text-align: center;
    }
    .flow-section--payout .flow__chip {
        margin: 0 auto;
    }
    .flow-section--payout .flow__label {
        padding: 0;
        font-size: var(--font-size-body-lg);
    }
    .flow-section--payout .flow__note {
        padding: 0;
        font-size: var(--font-size-ui);
    }
    .flow-section--payout .flow__connector {
        z-index: 1;
        top: calc(100% + var(--flow-mobile-edge));
        left: calc(50% - var(--flow-connector-height) / 2);
        width: var(--flow-connector-height);
        height: calc(var(--flow-mobile-gap) - var(--flow-mobile-edge) * 2);
    }
    /* 상하 영역 패딩과 배지 높이를 합산해 연결선 양끝을 같은 8px로 맞춘다. */
    .flow-section--payout .flow__connector--handoff {
        display: block;
        height: calc(var(--flow-mobile-merchant-bottom) + var(--flow-mobile-header-height) - var(--flow-mobile-edge) * 2);
    }
    .flow-section--payout .flow__connector--handoff .flow__dots {
        height: 100%;
    }
    .flow-section--payout .flow__dots {
        width: 100%;
        height: calc(100% - var(--flow-chevron-size) - var(--flow-connector-gap));
        background: repeating-linear-gradient(to bottom, var(--color-gray-40) 0 var(--flow-mobile-dash-length), transparent var(--flow-mobile-dash-length) var(--flow-mobile-dash-period));
    }
    .flow-section--payout .flow__chevron {
        top: auto;
        bottom: 0;
        left: 50%;
        right: auto;
        transform: translateX(-50%) rotate(90deg);
    }
}

/* 지급대행 3+3단계 전용: 가맹점 두 선→경계 화살표→Payup 두 선 순서로 반복한다. */
.flow-section--payout .flow__group--merchant .flow__step:nth-child(1) {
    --payout-flow-delay: 0s;
}

.flow-section--payout .flow__group--merchant .flow__step:nth-child(2) {
    --payout-flow-delay: 0.8s;
}

.flow-section--payout .flow__group--merchant .flow__step:nth-child(3) {
    --payout-flow-delay: 1.6s;
}

.flow-section--payout .flow__group--payup .flow__step:nth-child(1) {
    --payout-flow-delay: 2.6s;
}

.flow-section--payout .flow__group--payup .flow__step:nth-child(2) {
    --payout-flow-delay: 3.4s;
}

@media (prefers-reduced-motion: no-preference) {
    .flow-section--payout .flow__dots {
        background: none;
        mask-image: repeating-linear-gradient(to right, #000 0 5px, transparent 5px 9px);
    }
    .flow-section--payout .flow__dots::before {
        display: block;
    }
    .flow-section--payout .flow__dots::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, transparent, var(--flow-sweep-color) 40%, var(--flow-sweep-color) 60%, transparent);
        animation: payout-flow-sweep var(--flow-connector-duration) linear var(--payout-flow-delay) infinite both;
    }
    .flow-section--payout .flow__handoff::after {
        content: '';
        position: absolute;
        inset: calc(-1 * var(--flow-handoff-border-width));
        border-radius: var(--radius-full);
        background: conic-gradient(transparent 0deg 310deg, var(--flow-handoff-ring-color) 330deg 360deg);
        mask-image: radial-gradient(closest-side, transparent calc(100% - var(--flow-handoff-ring-width)), #000 calc(100% - var(--flow-handoff-ring-width)));
        pointer-events: none;
        animation: payout-flow-ring var(--flow-connector-duration) linear infinite both;
    }
}

@keyframes payout-flow-sweep {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    4%, 12% {
        opacity: var(--flow-sweep-opacity);
    }
    20%, 100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes payout-flow-sweep-vertical {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    4%, 12% {
        opacity: var(--flow-sweep-opacity);
    }
    20%, 100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes payout-flow-ring {
    0%, 30% {
        transform: rotate(-90deg);
        opacity: 0;
    }
    33%, 51% {
        opacity: 1;
    }
    54%, 100% {
        transform: rotate(270deg);
        opacity: 0;
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
    .flow-section--payout .flow__dots {
        background: none;
        mask-image: repeating-linear-gradient(to bottom, #000 0 var(--flow-mobile-dash-length), transparent var(--flow-mobile-dash-length) var(--flow-mobile-dash-period));
    }
    .flow-section--payout .flow__dots::after {
        background: linear-gradient(to bottom, transparent, var(--flow-sweep-color) 40%, var(--flow-sweep-color) 60%, transparent);
        animation-name: payout-flow-sweep-vertical;
    }
    /* 경계선 강조의 중심을 원형 화살표에 맞추고 링과 같은 30~54% 구간을 공유한다. */
    .flow-section--payout .flow__connector--handoff .flow__dots::after {
        animation-name: payout-flow-handoff;
        animation-delay: 0s;
    }
}

@keyframes payout-flow-handoff {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    20% {
        opacity: var(--flow-sweep-opacity);
    }
    30%, 40% {
        transform: translateY(calc(var(--flow-mobile-merchant-bottom) - var(--flow-mobile-edge) - 50%));
        opacity: var(--flow-sweep-opacity);
    }
    54% {
        transform: translateY(calc(var(--flow-mobile-merchant-bottom) - var(--flow-mobile-edge) - 50% + var(--flow-handoff-size)));
        opacity: var(--flow-sweep-opacity);
    }
    70%, 100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* 모션 줄이기에서는 기존 정적 점선만 표시하며 설정 복귀 시 CSS로 재개한다. */
@media (prefers-reduced-motion: reduce) {
    .flow-section--payout .flow__dots::after,     .flow-section--payout .flow__handoff::after {
        display: none;
        animation: none;
    }
}