/* 부가서비스 공통 프로세스: 정산대행의 기존 기본값과 선택자 우선순위를 보존한다. */
.flow-section {
    --flow-color-border: var(--color-gray-30);
    --flow-color-icon: var(--color-gray-70);
    --flow-icon-stroke: 1.6;
    --flow-color-payup-bg: var(--color-gray-10);
    --flow-role-dot-size: 6px;
    --flow-color-role-border: var(--color-gray-30);
    --flow-color-role-text: var(--color-text-primary);
    --flow-color-role-payup-bg: var(--color-bg-white);
    --flow-color-role-payup-text: var(--flow-color-role-text);
    --flow-color-handoff-bg: var(--color-gray-90);
    --flow-color-handoff-text: var(--color-text-white);
    --flow-handoff-border-width: 4px;
    --flow-color-payup-ring: var(--color-gray-30);
    --flow-color-note: var(--color-text-secondary);
    --flow-color-bridge: var(--color-gray-40);
    --flow-color-payup-dots: var(--color-gray-40);
    --flow-color-payup-chevron: var(--color-gray-50);
    --flow-shadow-container: none;
    --flow-shadow-merchant: 0 3px 8px rgba(15, 23, 42, 0.035);
    --flow-shadow-payup: var(--flow-shadow-merchant);
    --flow-shadow-handoff: none;
    --flow-radius: 28px;
    --flow-inner-radius: 27px;
    --flow-group-inset: 28px;
    --flow-group-ratio-merchant: 2;
    --flow-group-ratio-payup: 3;
    --flow-boundary: 40%;
    --flow-chip-size: 80px;
    --flow-ring-width: 1px;
    --flow-icon-size: 40px;
    --flow-handoff-size: 48px;
    --flow-role-height: 28px;
    --flow-handoff-top: calc(var(--flow-group-inset) + var(--flow-role-height) + var(--flow-steps-gap-top) + (var(--flow-chip-size) - var(--flow-handoff-size)) / 2);
    --flow-handoff-icon-size: 22px;
    --flow-steps-gap-top: var(--spacing-48);
    --flow-label-gap: 18px;
    --flow-connector-top: calc((var(--flow-chip-size) - var(--flow-connector-height)) / 2);
    --flow-connector-clearance: 54px;
    --flow-connector-height: 2px;
    --flow-chevron-size: 20px;
    --flow-connector-gap: 4px;
    --flow-connector-duration: 5s;
    --flow-sweep-width: 24cqw;
    --flow-sweep-travel: calc(80cqw + var(--flow-sweep-width));
    --flow-sweep-handoff: calc(30cqw + var(--flow-sweep-width) / 2);
    --flow-sweep-exit: calc(var(--flow-sweep-handoff) + 8cqw);
    --flow-dash-gap: var(--spacing-4);
    --flow-dash-color: var(--color-gray-70);
    --flow-sweep-color: var(--color-gray-90);
    --flow-dash-opacity: 0.25;
    --flow-sweep-opacity: 0.95;
    --flow-handoff-ring-color: var(--color-gray-70);
    --flow-handoff-ring-width: 2px;
    --flow-mobile-gap: calc(var(--spacing-40) * 2);
    --flow-mobile-edge: var(--spacing-8);
    --flow-mobile-merchant-bottom: var(--spacing-64);
    --flow-mobile-step-height: calc(var(--flow-chip-size) + var(--flow-label-gap) + var(--font-size-ui) * var(--line-height-tight) + var(--flow-mobile-note-height));
    --flow-mobile-note-height: calc(var(--font-size-body-sm) * var(--line-height-tight));
    --flow-mobile-header-height: calc(var(--flow-group-inset) + var(--flow-role-height) + var(--flow-steps-gap-top));
    --flow-mobile-sweep-height: calc(var(--spacing-48) * 2);
    --flow-mobile-dash-length: 6px;
    --flow-mobile-dash-period: 10px;
    --flow-mobile-late-offset: calc(var(--flow-mobile-step-height) * 2 + var(--flow-mobile-gap) + var(--flow-mobile-merchant-bottom) + var(--flow-mobile-header-height));
    --flow-mobile-last-offset: calc(var(--flow-mobile-late-offset) + var(--flow-mobile-step-height) + var(--flow-mobile-gap));
    --flow-mobile-sweep-travel: calc(var(--flow-mobile-last-offset) + var(--flow-mobile-gap) - var(--flow-mobile-edge) * 2 + var(--flow-mobile-sweep-height));
    --flow-mobile-sweep-handoff: calc(var(--flow-mobile-step-height) + var(--flow-mobile-gap) + var(--flow-mobile-merchant-bottom) - var(--flow-mobile-edge) + var(--flow-mobile-sweep-height) / 2);
    padding-top: 0;
    padding-bottom: 0;
    background-color: var(--color-bg-white);
}

.flow-section .flow__group--merchant {
    --flow-ring-color: var(--color-gray-30);
    --flow-chip-shadow: var(--flow-shadow-merchant);
    --flow-dots-color: var(--color-gray-40);
    --flow-chevron-color: var(--color-gray-50);
}

.flow-section .flow__group--payup {
    --flow-ring-color: var(--flow-color-payup-ring);
    --flow-chip-shadow: var(--flow-shadow-payup);
    --flow-dots-color: var(--flow-color-payup-dots);
    --flow-chevron-color: var(--flow-color-payup-chevron);
}

.flow-section .flow {
    container-type: inline-size;
    position: relative;
    display: flex;
    isolation: isolate;
    border: var(--flow-ring-width) solid var(--flow-color-border);
    border-radius: var(--flow-radius);
    background-color: var(--color-bg-white);
    box-shadow: var(--flow-shadow-container);
}

.flow-section .flow__group {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--flow-group-inset) 0 var(--spacing-40);
}

.flow-section .flow__group--merchant {
    flex: var(--flow-group-ratio-merchant) 1 0;
    border-radius: var(--flow-inner-radius) 0 0 var(--flow-inner-radius);
    background-color: var(--color-bg-white);
}

.flow-section .flow__group--payup {
    flex: var(--flow-group-ratio-payup) 1 0;
    border-radius: 0 var(--flow-inner-radius) var(--flow-inner-radius) 0;
    background-color: var(--flow-color-payup-bg);
}

.flow-section .flow__role {
    align-self: flex-start;
    gap: var(--spacing-8);
    margin-left: var(--flow-group-inset);
    margin-bottom: 0;
    border-color: var(--flow-color-role-border);
    background-color: var(--color-bg-white);
    color: var(--flow-color-role-text);
}

.flow-section .flow__role::before {
    content: '';
    flex-shrink: 0;
    width: var(--flow-role-dot-size);
    height: var(--flow-role-dot-size);
    border-radius: var(--radius-full);
    background-color: currentColor;
}

.flow-section .flow__group--payup .flow__role {
    background-color: var(--flow-color-role-payup-bg);
    color: var(--flow-color-role-payup-text);
}

.flow-section .flow__steps {
    display: flex;
    margin: var(--flow-steps-gap-top) 0 0;
    padding: 0;
    list-style: none;
}

.flow-section .flow__step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

.flow-section .flow__chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--flow-chip-size);
    height: var(--flow-chip-size);
    margin: 0 auto;
    border-radius: var(--radius-full);
    background-color: var(--color-bg-white);
    color: var(--flow-color-icon);
    box-shadow: 0 0 0 var(--flow-ring-width) var(--flow-ring-color), var(--flow-chip-shadow);
}

.flow-section .flow__icon {
    display: block;
    width: var(--flow-icon-size);
    height: var(--flow-icon-size);
    flex-shrink: 0;
}

.flow-section .flow__chip .flow__icon {
    stroke-width: var(--flow-icon-stroke);
}

.flow-section .flow__label {
    display: block;
    margin-top: var(--flow-label-gap);
    padding: 0 var(--spacing-8);
    color: var(--color-text-primary);
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-base);
    line-height: var(--line-height-tight);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.flow-section .flow__note {
    display: block;
    margin-top: 0;
    color: var(--flow-color-note);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    word-break: keep-all;
}

.flow-section .flow__connector {
    position: absolute;
    top: var(--flow-connector-top);
    left: calc(50% + var(--flow-connector-clearance));
    width: calc(100% - var(--flow-connector-clearance) * 2);
    height: var(--flow-connector-height);
    color: var(--flow-dots-color);
}

.flow-section .flow__dots {
    position: relative;
    display: block;
    width: max(0px, calc(100% - var(--flow-chevron-size) - var(--flow-connector-gap)));
    height: 100%;
    overflow: hidden;
    mask-image: repeating-linear-gradient(to right, #000 0 calc((100% - var(--flow-dash-gap) * 4) / 5), transparent calc((100% - var(--flow-dash-gap) * 4) / 5) calc((100% + var(--flow-dash-gap)) / 5));
}

.flow-section .flow__dots::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-full);
    background-color: var(--flow-dash-color);
    opacity: var(--flow-dash-opacity);
}

.flow-section .flow__chevron {
    position: absolute;
    top: 50%;
    right: 0;
    width: var(--flow-chevron-size);
    height: var(--flow-chevron-size);
    color: var(--flow-chevron-color);
    transform: translateY(-50%);
}

.flow-section .flow__connector--handoff {
    color: var(--flow-color-bridge);
}

.flow-section .flow__connector--handoff .flow__dots {
    width: 100%;
}

.flow-section .flow__handoff {
    position: absolute;
    z-index: 1;
    top: var(--flow-handoff-top);
    left: var(--flow-boundary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--flow-handoff-size);
    height: var(--flow-handoff-size);
    margin-left: calc(var(--flow-handoff-size) / -2);
    border: var(--flow-handoff-border-width) solid var(--color-bg-white);
    border-radius: var(--radius-full);
    background-color: var(--flow-color-handoff-bg);
    color: var(--flow-color-handoff-text);
    box-shadow: var(--flow-shadow-handoff);
    overflow: visible;
    isolation: isolate;
}

.flow-section .flow__handoff .flow__icon {
    position: relative;
    z-index: 1;
    width: var(--flow-handoff-icon-size);
    height: var(--flow-handoff-icon-size);
}