/* =======================================================================
   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: 32px;
    --service-process-dot-size: 6px;
    --service-process-dot-active-width: 36px;
    --service-process-number-bg: var(--color-gray-20);
    --service-process-number-color: var(--color-text-secondary);
    --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);
    --service-addon-flow-max-width: 860px;
    --service-addon-flow-max-width-tablet: 760px;
    --service-addon-flow-max-width-mobile: 480px;
    --service-addon-flow-connector-column-width: 64px;
    --service-addon-flow-connector-column-width-tablet: 48px;
    --service-addon-step-list-min-height: 520px;
    --service-addon-step-list-min-height-tablet: 480px;
    --service-addon-step-icon-size: 64px;
    --service-addon-step-icon-size-mobile: 56px;
    --service-addon-step-icon-svg-size: 36px;
    --service-addon-step-icon-svg-size-mobile: 32px;
    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);}

[data-service-page="linkpay"] .service-process {
    --service-process-bg: #FFF9FC;
    --service-process-number-bg: #F8D8E5;
    --service-process-number-color: #A83E68;
    --service-process-number-active-bg: #D41367;
    --service-process-number-active-color: var(--color-text-white);
    --service-process-number-active-shadow: rgba(212, 19, 103, 0.22);
    --service-process-dot-bg: #F1AFC8;
    --service-process-dot-active-bg: #D41367;
    --service-process-dot-focus-outline: #D41367;
    --service-process-cta-bg: #D41367;
    --service-process-cta-bg-hover: #B80F59;
    --service-process-cta-bg-active: #A50D50;
    --service-process-cta-color: #FFFFFF;
    --service-process-cta-focus-outline: #D41367;
    --service-process-cta-focus-shadow: rgba(212, 19, 103, 0.22);
}

.service-hero-image {width: min(190px, 22vw); margin-top: var(--spacing-48);}
.service-hero-image img {
    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-temp-icon {
    display: block;
    width: 92px;
    height: 92px;
    margin: 0 auto var(--spacing-40);
    border-radius: var(--radius-full);
    background-color: var(--color-gray-20);
}

.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-temp-icon,
[data-service-page="settlementAgency"] .service-temp-icon {
    width: 92px;
    height: 92px;
    margin-top: 0;
    margin-bottom: var(--spacing-40);
    border-radius: var(--radius-full);
    background: var(--color-gray-20);
}
[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;
}

/* ============================================================
   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-static {
    width: min(100%, var(--service-process-slider-max-width));
    height: var(--service-process-slider-height);
    overflow: hidden;
    border-radius: var(--radius-2xl);
    background-color: var(--color-bg-service-process-light);
}
[data-service-page="globalpay"] .service-process-block-reverse .service-process-static {background-color: var(--color-primary-10);}
[data-service-page="globalpay"] .service-process-number {color: var(--color-primary); 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-payment-form-mockup {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.service-payment-phone {
    width: 238px;
    height: 430px;
    margin-top: 54px;
    padding: 14px 10px 0;
    border: 6px solid var(--color-gray-90);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    background-color: var(--color-bg-white);
}

.service-payment-screen {color: var(--color-text-secondary); font-size: 0.625rem;}

.service-payment-form-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-20);
    color: var(--color-gray-70);
    font-weight: var(--font-weight-bold);
}

.service-payment-logo {color: var(--color-gray-80);}

.service-payment-form-title {
    display: block;
    color: var(--color-primary);
    font-size: var(--font-size-body-xs);
}

.service-payment-line,
.service-payment-input-wide,
.service-payment-agree,
.service-payment-submit {
    display: block;
    width: 100%;
}

.service-payment-line {
    height: 2px;
    margin: var(--spacing-8) 0;
    background-color: var(--color-primary-30);
}

.service-payment-input-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-12);
}
.service-payment-input-grid-small {grid-template-columns: repeat(3, minmax(0, 1fr));}
.service-payment-input-grid span,
.service-payment-input-wide {
    height: 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-white);
}
.service-payment-input-wide {margin-bottom: var(--spacing-12);}

.service-payment-agree {
    height: 32px;
    margin-top: var(--spacing-16);
    border-radius: var(--radius-sm);
    background-color: var(--color-primary-5);
}

.service-payment-submit {
    height: 36px;
    margin-top: var(--spacing-12);
    border-radius: var(--radius-sm);
    background-color: var(--color-primary);
}

.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 var(--service-process-dot-hit-area);
    width: var(--service-process-dot-hit-area);
    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 {background-color: transparent;}
.service-process-dot.is-active::before {width: var(--service-process-dot-active-width); background-color: var(--service-process-dot-active-bg);}
.service-process-dot:not(.is-active) + .service-process-dot:not(.is-active)::before {left: 0;}
.service-process-dot:first-child:not(.is-active) + .service-process-dot:not(.is-active) + .service-process-dot.is-active::before {left: calc(50% - 17px);}

@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-addon-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--service-addon-flow-connector-column-width) minmax(0, 1fr);
    align-items: stretch;
    max-width: var(--service-addon-flow-max-width);
    margin: 0 auto;
    gap: var(--spacing-20);
}

.service-addon-flow-row {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.service-addon-flow-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-bottom: var(--spacing-8);
    padding: var(--spacing-12) var(--spacing-16);
    border-radius: var(--radius-lg);
    color: var(--color-text-white);
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    text-align: center;
    white-space: nowrap;
}
.service-addon-flow-label-dark {background-color: var(--color-gray-90);}
.service-addon-flow-label-primary {background-color: var(--color-primary);}

.service-addon-step-list {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: var(--service-addon-step-list-min-height);
    padding: var(--spacing-32) var(--spacing-24);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-10);
}

.service-addon-step {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: var(--spacing-8) 0;
    text-align: center;
}

.service-addon-step-connector {
    display: block;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin: 20px auto;
    background: url("../../images/icons/icon-caret-down-fill.svg") center / 24px 24px no-repeat;
    opacity: 0.36;
}

[data-service-page="settlementAgency"] .service-addon-step-list-2 {justify-content: center;}
[data-service-page="settlementAgency"] .service-addon-step-list-2 .service-addon-step {flex: 0 0 auto; min-height: 0;}
[data-service-page="settlementAgency"] .service-addon-step-list-2 .service-addon-step-connector {margin: 20px auto;}

.service-addon-step-icon {
    display: inline-flex;
    flex: 0 0 var(--service-addon-step-icon-size);
    align-items: center;
    justify-content: center;
    width: var(--service-addon-step-icon-size);
    height: var(--service-addon-step-icon-size);
    margin-bottom: var(--spacing-16);
    border-radius: var(--radius-full);
    background-color: var(--color-bg-white);
    color: var(--color-primary);
    line-height: 0;
    box-shadow: 0 8px 18px rgba(148, 163, 184, 0.16);
}
.service-addon-step-icon svg {
    display: block;
    width: var(--service-addon-step-icon-svg-size);
    height: var(--service-addon-step-icon-svg-size);
    color: var(--color-primary);
    overflow: visible;
}

.service-addon-step strong {
    color: var(--color-text-primary);
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    word-break: keep-all;
}

.service-addon-step span:not(.service-addon-step-icon) {
    display: block;
    min-height: 20px;
    margin-top: var(--spacing-4);
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
}
.service-addon-step span:not(.service-addon-step-icon):not([aria-hidden="true"]) {margin-bottom: var(--spacing-8);}

.service-addon-flow-connector {
    position: relative;
    align-self: center;
    width: 64px;
    height: 40px;
    margin-top: 56px;
    background-color: transparent;
}
.service-addon-flow-connector::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 36px;
    background-color: var(--color-primary-20);
    clip-path: polygon(0 18%, 58% 18%, 58% 0, 100% 50%, 58% 100%, 58% 82%, 0 82%);
    content: "";
    transform: translate(-50%, -50%);
}

.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;}

    .service-addon-flow {
        grid-template-columns: minmax(0, 1fr) var(--service-addon-flow-connector-column-width-tablet) minmax(0, 1fr);
        max-width: var(--service-addon-flow-max-width-tablet);
        gap: var(--spacing-16);
    }
    .service-addon-flow-row {min-width: 0;}
    .service-addon-flow-label {min-height: 48px;}
    .service-addon-step-list {min-height: var(--service-addon-step-list-min-height-tablet); padding: var(--spacing-24) var(--spacing-20);}
    .service-addon-flow-connector {width: 48px;}
}

@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);}

    .service-hero-image {width: min(180px, 34vw); 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);}

    .service-addon-flow {
        grid-template-columns: 1fr;
        max-width: var(--service-addon-flow-max-width-mobile);
        gap: var(--spacing-20);
    }
    .service-addon-step-list {
        min-height: 0;
        padding: var(--spacing-32) var(--spacing-24);
        justify-content: center;
    }
    .service-addon-step {
        flex: 0 0 auto;
        min-height: 116px;
        padding: 0;
    }
    .service-addon-step span:not(.service-addon-step-icon)[aria-hidden="true"] {
        display: none;
        min-height: 0;
        margin-top: 0;
    }
    .service-addon-step-connector,
    [data-service-page="settlementAgency"] .service-addon-step-list-2 .service-addon-step-connector {
        flex-basis: 56px;
        width: 22px;
        height: 56px;
        margin: 0 auto;
        background-position: center;
    }
    .service-addon-flow-connector {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        margin: var(--spacing-8) auto;
        transform: rotate(90deg);
    }
    .service-addon-flow-connector::after {width: 56px; height: 42px;}
}

@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;
    }

    .service-hero-image {width: min(156px, 46vw); 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-temp-icon {
        width: 80px;
        height: 80px;
        margin-bottom: var(--spacing-32);
    }
    [data-service-page="payAgency"] .service-temp-icon,
    [data-service-page="settlementAgency"] .service-temp-icon {
        width: 80px;
        height: 80px;
        margin-bottom: var(--spacing-32);
    }

    .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,
    [data-service-page="globalpay"] .service-process-static {
        height: var(--service-process-slider-height-mobile);
    }
    .service-payment-phone {
        width: 214px;
        height: 340px;
        margin-top: var(--spacing-32);
    }
    .service-process-number {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: var(--font-size-ui);
    }

    .service-addon-flow-label {min-height: 46px; font-size: var(--font-size-ui);}
    .service-addon-step-list {padding: var(--spacing-24) var(--spacing-20);}
    .service-addon-step-icon {
        flex-basis: var(--service-addon-step-icon-size-mobile);
        width: var(--service-addon-step-icon-size-mobile);
        height: var(--service-addon-step-icon-size-mobile);
        margin-bottom: var(--spacing-12);
    }
    .service-addon-step-icon svg {width: var(--service-addon-step-icon-svg-size-mobile); height: var(--service-addon-step-icon-svg-size-mobile);}
    .service-addon-step strong {font-size: var(--font-size-body);}

    .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);
    }

    .service-addon-step-connector,
    [data-service-page="settlementAgency"] .service-addon-step-list-2 .service-addon-step-connector {
        flex-basis: 52px;
        width: 20px;
        height: 52px;
        background-position: center;
    }
    [data-service-page="payAgency"] .service-addon-flow-connector::after,
    [data-service-page="settlementAgency"] .service-addon-flow-connector::after {
        width: 48px;
        height: 36px;
    }

    [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,
    [data-service-page="globalpay"] .service-process-static {
        height: var(--service-process-slider-height-small);
    }
    .service-payment-phone {
        width: 190px;
        height: 300px;
        margin-top: 28px;
    }
    .service-process-item {gap: var(--spacing-12);}
    .service-process-item-title {font-size: var(--font-size-h6);}

    .service-addon-step {min-height: 96px;}
    .service-addon-step span:not(.service-addon-step-icon) {font-size: var(--font-size-body-xs);}

    .service-faq-answer {padding-right: var(--spacing-20); padding-left: 44px;}
}

[data-service-page="easypay"] .service-recommend-card-desc {
    margin-top: 2px;
    color: var(--color-text-primary);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}