/* =======================================================================
   main.css
======================================================================= */

/* ============================================================
   1. 메인 Hero 섹션
============================================================ */
.main-hero {
    position: relative;
    overflow: hidden;
    padding-top: var(--spacing-100);
    padding-bottom: 0;
    background-image: url('../../../assets/images/main/main_background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ============================================================
   2. Hero 내부 2열 레이아웃
============================================================ */
.main-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--spacing-48);
    min-height: 650px;
}

/* ============================================================
   3. 좌측 텍스트 콘텐츠 영역
============================================================ */
.main-hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-8);
    padding-bottom: var(--spacing-100);
}

/* ============================================================
   4. eyebrow 라벨
============================================================ */
.main-hero-label {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    white-space: nowrap;
    letter-spacing: 0;
}

/* ============================================================
   5. 메인 타이틀
============================================================ */
.main-hero-title {margin: 0; color: var(--color-text-primary);}

/* ============================================================
   6. 문자 진입 애니메이션
============================================================ */
.main-hero-underline {
    display: inline;
    white-space: nowrap;
    color: inherit;
}
.main-hero-char {
    display: inline-block;
    white-space: pre;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.52s ease-out, transform 0.52s ease-out;
    transition-delay: calc(var(--hero-char-index) * 60ms);
}
.main-hero-underline.is-animated .main-hero-char {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .main-hero-char {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================================
   7. CTA 버튼
============================================================ */
.main-hero-cta {
    margin-top: var(--spacing-64);
    height: 60px;
    padding: 0 var(--spacing-40);
    font-size: var(--font-size-body-lg);
}

/* ============================================================
   8. 우측 이미지 영역
============================================================ */
.main-hero-visual {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.main-hero-image {
    width: 100%;
    max-width: 460px;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ============================================================
   통계 섹션
============================================================ */
.main-stats {padding: var(--section-padding-y-lg) 0; background-color: var(--color-bg-white);}

/* ============================================================
   통계 목록
============================================================ */
.main-stats-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    max-width: 1040px;
    padding: var(--spacing-32) var(--spacing-32);
    margin: 0 auto;
    background: #F6F9FD;
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

/* ============================================================
   통계 항목
============================================================ */
.main-stats-card {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
}
.main-stats-card:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 56%;
    background: var(--color-gray-20);
    transform: translateY(-50%);
}
.main-stats-inner {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: var(--spacing-12);
    width: 100%;
    min-height: 96px;
}
.main-stats-inner::before {
    content: '';
    display: none;
    position: absolute;
    top: calc(100% - 20px);
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.10) 0%, rgba(124, 58, 237, 0.06) 46%, transparent 74%);
    z-index: -1;
    pointer-events: none;
}
.main-stats-card:nth-child(2) .main-stats-inner::before {background: radial-gradient(ellipse at center, rgba(6, 182, 212, 0.10) 0%, rgba(6, 182, 212, 0.06) 46%, transparent 74%);}
.main-stats-card:nth-child(3) .main-stats-inner::before {background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.10) 0%, rgba(16, 185, 129, 0.06) 46%, transparent 74%);}
.main-stats-inner::after {
    content: '';
    order: -1;
    width: 32px;
    height: 3px;
    margin-bottom: -4px;
    border-radius: 999px;
    background: var(--color-primary);
}
.main-stats-card:nth-child(2) .main-stats-inner::after {background: var(--color-primary);}
.main-stats-card:nth-child(3) .main-stats-inner::after {background: var(--color-primary);}

.main-stats.is-animated .main-stats-inner::before {
    animation: main-stats-circle-in 0.6s ease-out both;
}

@keyframes main-stats-circle-in {
    from {opacity: 0; transform: translate(-50%, -50%) scale(0.78);}
    to {opacity: 1; transform: translate(-50%, -50%) scale(1);}
}

@media (prefers-reduced-motion: reduce) {
    .main-stats.is-animated .main-stats-inner::before {animation: none;}
}

/* ============================================================
   카드 라벨 (누적 가맹점수 / 총 거래액 / 고객만족도)
============================================================ */
.main-stats-label {
    font-size: 17px;
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    color: var(--color-text-body);
    letter-spacing: 0;
}

/* ============================================================
   숫자 영역
============================================================ */
.main-stats-number {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    margin: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.main-stats-count {
    display: inline-block;
    font-size: calc(var(--font-size-h2) + 0.25rem);
    color: #24477C; 
    vertical-align: baseline;
    font-variant-numeric: tabular-nums;
}
.main-stats-unit {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    vertical-align: baseline;
    margin-left: 2px;
}
.main-stats-plus {display: none;}

/* ============================================================
   반응형
============================================================ */
@media (max-width: 1024px) {
    .main-stats-list {max-width: 1000px; padding: var(--spacing-32) var(--spacing-24);}
    .main-stats-inner {min-height: 92px;}
    .main-stats-number {font-size: var(--font-size-h2-tablet);}
    .main-stats-count {font-size: calc(var(--font-size-h2-tablet) + 0.125rem);}
    .main-stats-unit {font-size: var(--font-size-ui);}
}

@media (max-width: 768px) {
    .main-stats-list {
        max-width: 640px;
        padding-left: var(--spacing-16);
        padding-right: var(--spacing-16);
    }
    .main-stats-inner::before {
        width: 130px;
        height: 70px;
    }
    .main-stats-card:first-child {margin-left: 0;}
    .main-stats-number {font-size: var(--font-size-h3);}
    .main-stats-count {font-size: 1.875rem;}
    .main-stats-unit {margin-left: 1px;}
}

@media (max-width: 560px) {
    .main-stats-list {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-16);
        max-width: none;
        width: 100%;
        padding: var(--spacing-24);
        border-radius: 20px;
        background: #FAFCFF;
        transform: none;
    }
    .main-stats-inner::before {
        width: 132px;
        height: 72px;
    }
    .main-stats-card {
        justify-content: flex-start;
        box-sizing: border-box;
        width: 100%;
    }
    .main-stats-card:not(:last-child)::after {
        top: auto;
        right: auto;
        bottom: calc(var(--spacing-16) / -2);
        left: 0;
        width: 100%;
        height: 1px;
        transform: none;
    }
    .main-stats-card:first-child {margin-left: 0;}
    .main-stats-inner {
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        min-height: 104px;
        padding: var(--spacing-12) 0;
        box-sizing: border-box;
        text-align: left;
    }
    .main-stats-inner::after {display: none;}          
    .main-stats-label {
        align-self: flex-start;
        text-align: left;
    }
    .main-stats-number {
        align-self: flex-end;
        margin-top: auto;
        text-align: right;
        font-size: var(--font-size-h3);
    }
    .main-stats-count {font-size: 1.875rem;}
    
    .main-stats-card:nth-child(2) .main-stats-count:first-of-type + .main-stats-unit {
        font-size: 1.875rem;
        font-weight: var(--font-weight-medium);
        color: var(--color-primary-70); 
        margin-left: 0;
        font-variant-numeric: tabular-nums;
    }
}

/* ============================================================
   9. 반응형
============================================================ */

@media (max-width: 1024px) {
    .main-hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
        min-height: auto;
    }
    .main-hero-content {align-items: center; padding-bottom: var(--spacing-32);}
    .main-hero-label {font-size: var(--font-size-h6);}
    .main-hero-title {font-size: 2.875rem;}
    .main-hero-visual {justify-content: center;}
    .main-hero-image {max-width: 400px;}
}

@media (max-width: 768px) {
    .main-hero {padding-top: var(--spacing-48);}
    .main-hero-inner {gap: var(--spacing-24);}
    .main-hero-content {padding-bottom: var(--spacing-16);}
    .main-hero-title {font-size: 2.5rem;}
    .main-hero-cta {margin-top: var(--spacing-32);}
    .main-hero-image {max-width: 320px;}
}

@media (max-width: 480px) {
    .main-hero-image {max-width: 240px;}
    .main-hero-label {font-size: var(--font-size-ui);}
    .main-hero-title {font-size: 2.25rem;}
    .main-hero-cta {height: var(--button-height); padding: 0 var(--spacing-24); margin-top: var(--spacing-24);}
}

@media (max-width: 360px) {
    .main-hero-content {gap: var(--spacing-8);}
    .main-hero-title {font-size: 2.125rem;}
    .main-hero-label {font-size: var(--font-size-ui);}
    .main-hero-title {margin-top: 0;}
}

/* ============================================================
   11. main-page 변수 블록
============================================================ */
.main-page {
    --main-feature-gap: 72px;
    --main-feature-item-gap: 96px;
    --main-feature-content-max-width: 460px;
    --main-feature-item-title-size: 2.25rem;
    --main-feature-visual-max-width: 520px;
    --main-feature-visual-ratio: 1.2 / 1;
    --main-grid-cols-service: 4;
    --main-payment-service-content-width: 1120px;
    --main-payment-card-min-height: 100px;
    --main-service-card-min-height: 140px;
    --main-payment-service-card-radius: var(--radius-xl);
    --main-process-step-size: 52px;
}

/* ============================================================
   13. main-feature
============================================================ */
.main-feature {
    --main-feature-gap: 144px;
    background-color: var(--color-bg-white);
}

.main-feature-item {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: var(--main-feature-gap);
}
.main-feature-item + .main-feature-item {margin-top: var(--main-feature-item-gap);}
.main-feature-item.is-reverse .main-feature-visual {order: -1;}
.main-feature-item.is-reverse {grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);}

.main-feature-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-32);
    max-width: var(--main-feature-content-max-width);
}
.main-feature-item:not(.is-reverse) .main-feature-content {justify-self: end;}
.main-feature-item.is-reverse .main-feature-content {justify-self: start;}
.main-feature-item.is-reverse .main-feature-visual {justify-content: flex-end;}

.main-feature-item-title {
    font-size: var(--main-feature-item-title-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}
.main-feature-item-desc {
    max-width: 420px;
    font-size: var(--font-size-body-lg);
    line-height: var(--line-height-base);
    color: var(--color-gray-60);
}

.main-feature-visual {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.main-feature .img-placeholder {
    max-width: var(--main-feature-visual-max-width);
    aspect-ratio: var(--main-feature-visual-ratio);
    border-radius: var(--radius-2xl);
}
.main-feature-image {
    display: block;
    width: 100%;
    max-width: var(--main-feature-visual-max-width);
    aspect-ratio: 1.6 / 1;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-2xl);
}
.main-feature-item:not(.is-reverse) .img-placeholder {background-color: var(--color-primary-10);}
.main-feature-item.is-reverse .img-placeholder {background-color: var(--color-primary-5);}

/* ============================================================
   14. main-review
============================================================ */
.main-review {background-color: var(--color-bg-white);}

.main-review-list {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    overflow-x: visible;
}

.main-review-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-24);
}

.main-review-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    background-color: var(--color-bg-white);
    border-radius: var(--radius-xl);
    box-shadow: none;
    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow var(--transition-base);
}
.main-review-card:hover {box-shadow: var(--shadow-md);}

.main-review-link {
    display: flex;
    flex: 1;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}
.main-review-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.main-review-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1.18 / 1;
    overflow: hidden;
    background-color: var(--color-primary-10);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.main-review-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 0;
    transition: transform 0.35s ease;
}
.main-review-media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 20%,
        rgba(0, 0, 0, 0.45) 100%
    );
    pointer-events: none;
}
.main-review-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.main-review-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    max-width: 46%;
    max-height: 32%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

/* Hover / Focus (키보드 포커스에서도 동일 동작) */
.main-review-card:hover .main-review-image,
.main-review-link:focus-visible .main-review-image {
    transform: none;
}
.main-review-card:hover .main-review-media::after,
.main-review-link:focus-visible .main-review-media::after {
    opacity: 1;
}
.main-review-card:hover .main-review-logo,
.main-review-link:focus-visible .main-review-logo {
    opacity: 1;
}

.main-review-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px var(--spacing-24);
    border: 1px solid var(--color-gray-20);
    border-top: 0;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.main-review-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-8) var(--spacing-12);
    background-color: var(--color-gray-80);
    color: var(--color-text-white);
    border-radius: var(--radius-full);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    margin-bottom: var(--spacing-16);
}

.main-review-quote {
    font-size: 1.375rem;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    flex: 1;
}

.main-review-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: var(--spacing-20);
    min-height: var(--spacing-32);
    color: var(--color-text-secondary);
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
}
.main-review-arrow {
    width: 24px;
    height: 24px;
    padding: 0;
    flex-shrink: 0;
    color: var(--color-gray-40);
    transition: color var(--transition-base), transform var(--transition-base);
}
.main-review-card:hover .main-review-arrow,
.main-review-link:focus-visible .main-review-arrow {
    color: var(--color-primary);
    transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
    .main-review-card:hover .main-review-image,
    .main-review-link:focus-visible .main-review-image {transform: none; transition: none;}
    .main-review-card:hover .main-review-arrow,
    .main-review-link:focus-visible .main-review-arrow {transform: none;}
    .main-review-arrow {transition-property: color;}
}

.main-review-nav {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-12);
    margin-top: var(--spacing-24);
}
.main-review-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid var(--color-gray-20);
    border-radius: var(--radius-full);
    background-color: var(--color-bg-white);
    color: var(--color-text-secondary);
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.main-review-nav-btn svg {width: 18px; height: 18px;}
.main-review-nav-btn:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-white);
}
.main-review-nav-btn:focus-visible {outline: 2px solid var(--color-primary); outline-offset: 2px;}

/* ============================================================
   15. main-payment / main-service
============================================================ */
.main-payment-service-wrap {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--section-padding-y-mobile) var(--spacing-48);
    background: #FAFBFC;
    border-radius: var(--radius-2xl);
}

.main-payment-service-wrap .container {
    max-width: var(--main-payment-service-content-width);
    padding-right: 0;
    padding-left: 0;
}

.main-payment,
.main-service {
    padding: 0;
    background-color: transparent;
}

.main-service {margin-top: var(--spacing-100);}

.main-payment .section-header-eyebrow {background-color: var(--color-bg-white);}
.main-service .section-header-eyebrow {background-color: var(--color-bg-white);}

.main-payment-grid,
.main-service-grid {
    display: grid;
    gap: var(--spacing-24);
    margin-top: 0;
}

.main-payment-grid {grid-template-columns: repeat(6, 1fr);}
.main-payment-grid > .card {grid-column: span 2; min-height: var(--main-payment-card-min-height);}
.main-payment-grid > .card:nth-child(4),
.main-payment-grid > .card:nth-child(5) {
    grid-column: span 3;
}

.main-service-grid {grid-template-columns: repeat(var(--main-grid-cols-service), 1fr);}
.main-service-grid > .card {min-height: var(--main-service-card-min-height);}

.main-payment-grid .card,
.main-service-grid .card {
    border-color: var(--color-gray-20);
    border-radius: var(--main-payment-service-card-radius);
    box-shadow: none;
}
.main-page .main-payment-grid > .card.is-entered,
.main-page .main-service-grid > .card.is-entered {
    transition-delay: 0s;
}

.main-payment-grid .card:hover,
.main-service-grid .card:hover {
    box-shadow: var(--shadow-md);
}

.main-payment-grid .card-body,
.main-service-grid .card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.main-payment-grid .card-body {padding: var(--spacing-20) var(--spacing-24);}
.main-service-grid .card-body {padding: var(--spacing-16) var(--spacing-20);}

.main-payment-grid .card-body:focus-visible,
.main-service-grid .card-body:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.main-payment-grid .card-icon,
.main-service-grid .card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background-color: var(--service-accent-bg, var(--color-service-bg-blue));
    color: var(--service-accent-color, var(--color-service-blue));
}
.main-payment-grid [data-service-accent="blue"],
.main-service-grid [data-service-accent="blue"] {
    --service-accent-color: var(--color-service-blue);
    --service-accent-bg: var(--color-service-bg-blue);
}

.main-payment-grid [data-service-accent="amber"],
.main-service-grid [data-service-accent="amber"] {
    --service-accent-color: var(--color-service-amber);
    --service-accent-bg: var(--color-service-bg-amber);
}

.main-payment-grid [data-service-accent="mint"],
.main-service-grid [data-service-accent="mint"] {
    --service-accent-color: var(--color-service-mint);
    --service-accent-bg: var(--color-service-bg-mint);
}

.main-payment-grid [data-service-accent="pink"],
.main-service-grid [data-service-accent="pink"] {
    --service-accent-color: var(--color-service-pink);
    --service-accent-bg: var(--color-service-bg-pink);
}

.main-payment-grid [data-service-accent="violet"],
.main-service-grid [data-service-accent="violet"] {
    --service-accent-color: var(--color-service-violet);
    --service-accent-bg: var(--color-service-bg-violet);
}

.main-payment-grid .card-icon svg,
.main-service-grid .card-icon svg {
    width: 24px;
    height: 24px;
}

.main-payment-grid .card-title,
.main-service-grid .card-title {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    transition: color var(--transition-base);
}

.main-payment-grid .card-desc,
.main-service-grid .card-desc {
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.main-service-grid .card-icon {
    margin-bottom: 10px;
}
.main-service-grid .card-title {margin-bottom: 6px;}
.main-service-grid .card-desc {margin-bottom: 10px;}

.main-payment-grid .card-icon {
    margin-bottom: var(--spacing-12);
}
.main-payment-grid .card-desc {margin-bottom: var(--spacing-12);}

.main-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    align-self: flex-end;
    margin-top: auto;
    border-radius: var(--radius-full);
    background-color: var(--color-gray-5);
    color: var(--color-gray-40);
    transition: background-color var(--transition-base);
}
.main-card-link svg {width: 18px; height: 18px;}
.main-payment-grid .card:hover .main-card-link,
.main-service-grid .card:hover .main-card-link {
    background-color: var(--color-primary);
    color: var(--color-text-white);
}
.main-payment-grid .card:hover > .card-body .card-title,
.main-service-grid .card:hover > .card-body .card-title {
    color: var(--color-primary);
}

/* Credit Card Animated Icon */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .main-payment-grid .card-body:hover .main-credit-motion-body {
        transform-box: view-box;
        transform-origin: 12px 12px;
        animation: main-credit-card-response 650ms ease-in-out 1;
    }
    .main-payment-grid .card-body:hover .main-credit-motion-stripe {
        animation: main-credit-stripe-draw 650ms ease-in-out 1;
    }
    .main-payment-grid .card-body:hover .main-credit-motion-detail {
        animation: main-credit-detail-reveal 650ms ease-out 1;
    }

    @keyframes main-credit-card-response {
        0% {transform: translateY(0) rotate(0deg);}
        20% {transform: translateY(-0.5px) rotate(-4deg);}
        55% {transform: translateY(0) rotate(-1deg);}
        100% {transform: translateY(0) rotate(0deg);}
    }
    @keyframes main-credit-stripe-draw {
        0%, 14% {stroke-dasharray: 20 20; stroke-dashoffset: 20; opacity: 0;}
        15% {stroke-dasharray: 20 20; stroke-dashoffset: 20; opacity: 1;}
        55%, 100% {stroke-dasharray: 20 20; stroke-dashoffset: 0; opacity: 1;}
    }
    @keyframes main-credit-detail-reveal {
        0%, 40% {transform: translateX(-2px); opacity: 0;}
        75%, 100% {transform: translateX(0); opacity: 1;}
    }
}

/* Payment Method Animated Icons */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .main-payment-grid .card-body:hover .main-account-motion-frame {
        animation: main-account-frame-confirm 680ms ease-in-out 1;
    }
    .main-payment-grid .card-body:hover .main-account-motion-point {
        transform-box: view-box;
        transform-origin: 9px 12px;
        animation: main-account-point-confirm 680ms ease-in-out 1;
    }
    .main-payment-grid .card-body:hover .main-account-motion-line-top {
        animation: main-account-top-reveal 680ms ease-out 1;
    }
    .main-payment-grid .card-body:hover .main-account-motion-line-bottom {
        animation: main-account-bottom-reveal 680ms ease-out 1;
    }
    .main-payment-grid .card-body:hover .main-easy-motion-phone {
        transform-box: view-box;
        transform-origin: 12px 12px;
        animation: main-easy-phone-activate 640ms ease-in-out 1;
    }
    .main-payment-grid .card-body:hover .main-easy-motion-bolt {
        animation: main-easy-bolt-activate 640ms ease-out 1;
    }
    .main-payment-grid .card-body:hover .main-global-motion-outline {
        animation: main-global-outline-activate 700ms ease-in-out 1;
    }
    .main-payment-grid .card-body:hover .main-global-motion-meridian {
        animation: main-global-meridian-connect 700ms ease-in-out 1;
    }
    .main-payment-grid .card-body:hover .main-global-motion-equator {
        animation: main-global-equator-connect 700ms ease-in-out 1;
    }
    .main-payment-grid .card-body:hover .main-global-easy-motion-frame {
        animation: main-global-easy-frame-activate 660ms ease-in-out 1;
    }
    .main-payment-grid .card-body:hover .main-global-easy-motion-stripe {
        animation: main-global-easy-stripe-draw 660ms ease-in-out 1;
    }
    .main-payment-grid .card-body:hover .main-global-easy-motion-mark {
        animation: main-global-easy-mark-reveal 660ms ease-out 1;
    }

    @keyframes main-account-frame-confirm {
        0%, 100% {transform: translateY(0);}
        18% {transform: translateY(-0.6px);}
        38% {transform: translateY(0);}
    }
    @keyframes main-account-point-confirm {
        0%, 16%, 48%, 100% {transform: scale(1); opacity: 1;}
        30% {transform: scale(0.9); opacity: 0.7;}
    }
    @keyframes main-account-top-reveal {
        0%, 30% {stroke-dasharray: 2 2; stroke-dashoffset: 2; opacity: 0; transform: translateX(-0.5px);}
        31% {stroke-dasharray: 2 2; stroke-dashoffset: 2; opacity: 1; transform: translateX(-0.5px);}
        58%, 100% {stroke-dasharray: 2 2; stroke-dashoffset: 0; opacity: 1; transform: translateX(0);}
    }
    @keyframes main-account-bottom-reveal {
        0%, 45% {stroke-dasharray: 2 2; stroke-dashoffset: 2; opacity: 0; transform: translateX(-0.5px);}
        46% {stroke-dasharray: 2 2; stroke-dashoffset: 2; opacity: 1; transform: translateX(-0.5px);}
        76%, 100% {stroke-dasharray: 2 2; stroke-dashoffset: 0; opacity: 1; transform: translateX(0);}
    }
    @keyframes main-easy-phone-activate {
        0%, 100% {transform: rotate(0deg);}
        20% {transform: rotate(-2.5deg);}
        50% {transform: rotate(-0.5deg);}
    }
    @keyframes main-easy-bolt-activate {
        0%, 17% {stroke-dasharray: 16 16; stroke-dashoffset: 16; opacity: 0; transform: translateY(0);}
        18% {stroke-dasharray: 16 16; stroke-dashoffset: 16; opacity: 1; transform: translateY(0);}
        55% {stroke-dasharray: 16 16; stroke-dashoffset: 0; opacity: 1; transform: translateY(0);}
        66% {stroke-dasharray: 16 16; stroke-dashoffset: 0; opacity: 1; transform: translateY(-0.6px);}
        82%, 100% {stroke-dasharray: 16 16; stroke-dashoffset: 0; opacity: 1; transform: translateY(0);}
    }
    @keyframes main-global-outline-activate {
        0%, 38%, 100% {opacity: 1;}
        18% {opacity: 0.75;}
    }
    @keyframes main-global-meridian-connect {
        0%, 14% {stroke-dasharray: 48 48; stroke-dashoffset: 48; opacity: 0;}
        15% {stroke-dasharray: 48 48; stroke-dashoffset: 48; opacity: 1;}
        60%, 100% {stroke-dasharray: 48 48; stroke-dashoffset: 0; opacity: 1;}
    }
    @keyframes main-global-equator-connect {
        0%, 42% {stroke-dasharray: 20 20; stroke-dashoffset: 20; opacity: 0;}
        43% {stroke-dasharray: 20 20; stroke-dashoffset: 20; opacity: 1;}
        80%, 100% {stroke-dasharray: 20 20; stroke-dashoffset: 0; opacity: 1;}
    }
    @keyframes main-global-easy-frame-activate {
        0%, 100% {transform: translateX(0); opacity: 1;}
        18% {transform: translateX(-0.6px); opacity: 0.85;}
        42% {transform: translateX(0); opacity: 1;}
    }
    @keyframes main-global-easy-stripe-draw {
        0%, 21% {stroke-dasharray: 20 20; stroke-dashoffset: 20; opacity: 0;}
        22% {stroke-dasharray: 20 20; stroke-dashoffset: 20; opacity: 1;}
        58%, 100% {stroke-dasharray: 20 20; stroke-dashoffset: 0; opacity: 1;}
    }
    @keyframes main-global-easy-mark-reveal {
        0%, 52% {opacity: 0;}
        80%, 100% {opacity: 1;}
    }
}

/* Service Animated Icons */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .main-service-grid .card-body:hover .main-service-manual-motion-frame {
        animation: main-service-manual-frame 680ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-manual-motion-stripe {
        animation: main-service-manual-stripe 680ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-manual-motion-input {
        animation: main-service-manual-input 680ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-manual-motion-check {
        animation: main-service-manual-check 680ms ease-out 1;
    }
    .main-service-grid .card-body:hover .main-service-sms-motion-envelope {
        transform-box: view-box;
        transform-origin: 12px 12px;
        animation: main-service-sms-envelope 660ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-sms-motion-flap {
        animation: main-service-sms-flap 660ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-recurring-motion-calendar {
        animation: main-service-recurring-calendar 720ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-recurring-motion-header {
        animation: main-service-recurring-header 720ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-recurring-motion-clock {
        animation: main-service-recurring-clock 720ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-recurring-motion-hands {
        transform-box: view-box;
        transform-origin: 16px 16px;
        animation: main-service-recurring-hands 720ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-link-motion-left {
        animation: main-service-link-left 680ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-link-motion-right {
        animation: main-service-link-right 680ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-link-motion-bridge {
        animation: main-service-link-bridge 680ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-api-motion-left {
        animation: main-service-api-left 680ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-api-motion-data {
        animation: main-service-api-data 680ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-api-motion-right {
        animation: main-service-api-right 680ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-settlement-motion-frame {
        animation: main-service-settlement-frame 740ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-settlement-motion-display {
        animation: main-service-settlement-display 740ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-settlement-motion-keys-top {
        animation: main-service-settlement-keys-top 740ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-settlement-motion-keys-middle {
        animation: main-service-settlement-keys-middle 740ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-settlement-motion-keys-bottom {
        animation: main-service-settlement-keys-bottom 740ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-settlement-motion-total {
        animation: main-service-settlement-total 740ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-payout-motion-frame {
        animation: main-service-payout-frame 700ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-payout-motion-coin {
        transform-box: view-box;
        transform-origin: 12px 12px;
        animation: main-service-payout-coin 700ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-payout-motion-shaft {
        animation: main-service-payout-shaft 700ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-payout-motion-arrowhead {
        animation: main-service-payout-arrowhead 700ms ease-out 1;
    }
    .main-service-grid .card-body:hover .main-service-seller-motion-awning {
        animation: main-service-seller-awning 720ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-seller-motion-walls {
        animation: main-service-seller-walls 720ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-seller-motion-door {
        animation: main-service-seller-door 720ms ease-in-out 1;
    }

    @keyframes main-service-manual-frame {
        0%, 100% {transform: translateY(0);}
        18% {transform: translateY(-0.5px);}
        40% {transform: translateY(0);}
    }
    @keyframes main-service-manual-stripe {
        0%, 14% {stroke-dasharray: 20 20; stroke-dashoffset: 20; opacity: 0;}
        15% {stroke-dasharray: 20 20; stroke-dashoffset: 20; opacity: 1;}
        43%, 100% {stroke-dasharray: 20 20; stroke-dashoffset: 0; opacity: 1;}
    }
    @keyframes main-service-manual-input {
        0%, 32% {stroke-dasharray: 2 2; stroke-dashoffset: 2; opacity: 0;}
        33% {stroke-dasharray: 2 2; stroke-dashoffset: 2; opacity: 1;}
        58%, 100% {stroke-dasharray: 2 2; stroke-dashoffset: 0; opacity: 1;}
    }
    @keyframes main-service-manual-check {
        0%, 52% {stroke-dasharray: 9 9; stroke-dashoffset: 9; opacity: 0;}
        53% {stroke-dasharray: 9 9; stroke-dashoffset: 9; opacity: 1;}
        86%, 100% {stroke-dasharray: 9 9; stroke-dashoffset: 0; opacity: 1;}
    }
    @keyframes main-service-sms-envelope {
        0%, 100% {transform: rotate(0deg);}
        18% {transform: rotate(-2deg);}
        45% {transform: rotate(0deg);}
    }
    @keyframes main-service-sms-flap {
        0%, 19% {stroke-dasharray: 26 26; stroke-dashoffset: 26; opacity: 0; transform: translateY(0);}
        20% {stroke-dasharray: 26 26; stroke-dashoffset: 26; opacity: 1; transform: translateY(0);}
        56% {stroke-dasharray: 26 26; stroke-dashoffset: 0; opacity: 1; transform: translateY(0);}
        72% {stroke-dasharray: 26 26; stroke-dashoffset: 0; opacity: 1; transform: translateY(-0.6px);}
        100% {stroke-dasharray: 26 26; stroke-dashoffset: 0; opacity: 1; transform: translateY(0);}
    }
    @keyframes main-service-recurring-calendar {
        0%, 38%, 100% {opacity: 1;}
        16% {opacity: 0.75;}
    }
    @keyframes main-service-recurring-header {
        0%, 12% {stroke-dasharray: 6 6; stroke-dashoffset: 6; opacity: 0;}
        13% {stroke-dasharray: 6 6; stroke-dashoffset: 6; opacity: 1;}
        35%, 100% {stroke-dasharray: 6 6; stroke-dashoffset: 0; opacity: 1;}
    }
    @keyframes main-service-recurring-clock {
        0%, 22% {stroke-dasharray: 38 38; stroke-dashoffset: 38; opacity: 0;}
        23% {stroke-dasharray: 38 38; stroke-dashoffset: 38; opacity: 1;}
        52%, 100% {stroke-dasharray: 38 38; stroke-dashoffset: 0; opacity: 1;}
    }
    @keyframes main-service-recurring-hands {
        0%, 32% {transform: rotate(0deg);}
        84%, 100% {transform: rotate(360deg);}
    }
    @keyframes main-service-link-left {
        0%, 100% {transform: translateX(0);}
        20% {transform: translateX(-1px);}
        60% {transform: translateX(0);}
    }
    @keyframes main-service-link-right {
        0%, 100% {transform: translateX(0);}
        28% {transform: translateX(1px);}
        68% {transform: translateX(0);}
    }
    @keyframes main-service-link-bridge {
        0%, 35% {stroke-dasharray: 8 8; stroke-dashoffset: 8; opacity: 0;}
        36% {stroke-dasharray: 8 8; stroke-dashoffset: 8; opacity: 1;}
        78%, 100% {stroke-dasharray: 8 8; stroke-dashoffset: 0; opacity: 1;}
    }
    @keyframes main-service-api-left {
        0%, 90%, 100% {transform: translateX(0);}
        25%, 60% {transform: translateX(-1px);}
    }
    @keyframes main-service-api-data {
        0%, 25% {stroke-dasharray: 17 17; stroke-dashoffset: 17; opacity: 0;}
        26% {stroke-dasharray: 17 17; stroke-dashoffset: 17; opacity: 1;}
        60%, 100% {stroke-dasharray: 17 17; stroke-dashoffset: 0; opacity: 1;}
    }
    @keyframes main-service-api-right {
        0%, 90%, 100% {transform: translateX(0);}
        25%, 60% {transform: translateX(1px);}
    }
    @keyframes main-service-settlement-frame {
        0%, 22%, 100% {opacity: 1;}
        10% {opacity: 0.85;}
    }
    @keyframes main-service-settlement-display {
        0%, 48% {stroke-dasharray: 8 8; stroke-dashoffset: 8; opacity: 0;}
        49% {stroke-dasharray: 8 8; stroke-dashoffset: 8; opacity: 1;}
        74%, 100% {stroke-dasharray: 8 8; stroke-dashoffset: 0; opacity: 1;}
    }
    @keyframes main-service-settlement-keys-top {
        0%, 12%, 28%, 100% {opacity: 1;}
        20% {opacity: 0.55;}
    }
    @keyframes main-service-settlement-keys-middle {
        0%, 22%, 38%, 100% {opacity: 1;}
        30% {opacity: 0.55;}
    }
    @keyframes main-service-settlement-keys-bottom {
        0%, 32%, 48%, 100% {opacity: 1;}
        40% {opacity: 0.55;}
    }
    @keyframes main-service-settlement-total {
        0%, 74% {stroke-dasharray: 4 4; stroke-dashoffset: 4; opacity: 0;}
        75% {stroke-dasharray: 4 4; stroke-dashoffset: 4; opacity: 1;}
        92%, 100% {stroke-dasharray: 4 4; stroke-dashoffset: 0; opacity: 1;}
    }
    @keyframes main-service-payout-frame {
        0%, 35%, 100% {opacity: 1;}
        16% {opacity: 0.75;}
    }
    @keyframes main-service-payout-coin {
        0%, 15%, 48%, 100% {transform: scale(1); opacity: 1;}
        30% {transform: scale(0.9); opacity: 0.7;}
    }
    @keyframes main-service-payout-shaft {
        0%, 32% {stroke-dasharray: 6 6; stroke-dashoffset: 6; opacity: 0;}
        33% {stroke-dasharray: 6 6; stroke-dashoffset: 6; opacity: 1;}
        65%, 100% {stroke-dasharray: 6 6; stroke-dashoffset: 0; opacity: 1;}
    }
    @keyframes main-service-payout-arrowhead {
        0%, 48% {transform: translateY(-1px); opacity: 0;}
        80%, 100% {transform: translateY(0); opacity: 1;}
    }
    @keyframes main-service-seller-awning {
        0%, 100% {transform: translateY(0);}
        20% {transform: translateY(-0.5px);}
        45% {transform: translateY(0);}
    }
    @keyframes main-service-seller-walls {
        0%, 17% {stroke-dasharray: 39 39; stroke-dashoffset: 39; opacity: 0;}
        18% {stroke-dasharray: 39 39; stroke-dashoffset: 39; opacity: 1;}
        57%, 100% {stroke-dasharray: 39 39; stroke-dashoffset: 0; opacity: 1;}
    }
    @keyframes main-service-seller-door {
        0%, 45% {stroke-dasharray: 18 18; stroke-dashoffset: 18; opacity: 0;}
        46% {stroke-dasharray: 18 18; stroke-dashoffset: 18; opacity: 1;}
        84%, 100% {stroke-dasharray: 18 18; stroke-dashoffset: 0; opacity: 1;}
    }
}

/* ============================================================
   16. main-process
============================================================ */
.main-process {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
    background-color: var(--color-bg-white);
}

.main-process-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--spacing-80) + var(--spacing-8));
    max-width: 1100px;
    margin: 0 auto;
}

.main-process-content {width: 100%; max-width: none;}

.main-process .section-header {
    align-items: center;
    margin-bottom: 0;
    text-align: center;
    gap: var(--spacing-8);
}

.main-process .section-header-eyebrow {
    padding: 6px var(--spacing-16);
    border: 1px solid var(--color-primary-10);
    border-radius: var(--radius-full);
    outline: 0;
    background-color: var(--color-primary-light);
    box-shadow: none;
    color: var(--color-primary);
    font-size: var(--font-size-ui);
    text-align: center;
    user-select: none;
}
.main-process .section-header-eyebrow::selection {background-color: transparent;}

.main-process .section-header-title {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding-bottom: 0;
    text-align: center;
}

.main-process .section-header-title::after {display: none;}
.main-process-title-point {color: var(--color-primary);}

.main-process-flow {
    position: relative;
    width: 100%;
}

.main-process-bar {
    position: absolute;
    top: var(--spacing-4);
    right: 0;
    left: 0;
    height: 44px;
    overflow: hidden;
    border-radius: var(--radius-full);
    background: linear-gradient(
        90deg,
        #DCEAFF 0%,
        #BCD8FF 28%,
        #9EDBFA 52%,
        #82DDEB 76%,
        #9FE5E8 100%
    );
}

.main-process-bar-highlight {
    display: block;
    width: 34%;
    height: 100%;
    opacity: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.20) 30%,
        rgba(255, 255, 255, 0.72) 50%,
        rgba(255, 255, 255, 0.20) 70%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: translateX(-110%);
}

@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
    .main-process-flow.is-motion-active .main-process-bar-highlight {
        animation: main-process-bar-sweep 4s linear infinite;
    }
}

.main-process-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-24);
    margin: 0;
    list-style: none;
    padding: 0;
}

@media (min-width: 769px) {
    .main-process {
        padding-top: var(--spacing-100);
        padding-bottom: var(--spacing-100);
    }

    .main-process .section-header-title {white-space: nowrap;}
}

@media (min-width: 1025px) {
    .main-page {
        --main-pc-section-inset: 120px;
    }

    .main-page .main-stats,
    .main-page .main-feature,
    .main-page .main-review,
    .main-page .main-payment-service-wrap,
    .main-page .main-process,
    .main-page .main-trust {
        padding-top: var(--main-pc-section-inset);
        padding-bottom: var(--main-pc-section-inset);
    }

    .main-page .main-service {margin-top: var(--main-pc-section-inset);}

    .main-page .main-pricing {
        padding-top: var(--spacing-100);
        padding-bottom: var(--spacing-100);
    }

    .main-page .main-payment-service-wrap {
        max-width: none;
        padding-inline: max(var(--spacing-48), calc((100% - var(--container-max-width)) / 2 + var(--spacing-48)));
        border-radius: 0;
    }

    /* PC 요금 항목의 행 중앙 배치 유지 */
    .main-pricing-item {
        align-content: center;
    }

    /* PC 요금 라벨을 값의 줄 상자 상단에 정렬 */
    .main-pricing-label {
        align-self: start;
    }
}

.main-process-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-20);
    min-height: 0;
    padding: 0;
    background-color: transparent;
    text-align: center;
}

.main-process-step {
    width: var(--main-process-step-size);
    height: var(--main-process-step-size);
    border: 2px solid var(--color-primary-20);
    border-radius: var(--radius-full);
    background-color: var(--color-bg-white);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-body-lg);
    flex-shrink: 0;
}

@media (min-width: 769px) {
    .main-process-item:nth-child(1) .main-process-step {border-color: #76A9EA;}
    .main-process-item:nth-child(2) .main-process-step {border-color: #72B0E7;}
    .main-process-item:nth-child(3) .main-process-step {border-color: #6DB9E2;}
    .main-process-item:nth-child(4) .main-process-step {border-color: #68C0DD;}
}

.main-process-item-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4);
    min-width: 0;
}

.main-process-item-title {
    color: var(--color-text-primary);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.main-process-item-desc {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
}

@keyframes main-process-bar-sweep {
    0% {opacity: 0; transform: translateX(-110%);}
    4.2% {opacity: 0.7;}
    28.7% {opacity: 0.45;}
    35% {opacity: 0; transform: translateX(400%);}
    100% {opacity: 0; transform: translateX(400%);}
}

@keyframes main-process-bar-sweep-vertical {
    0% {opacity: 0; transform: translateY(-110%);}
    4.2% {opacity: 0.7;}
    28.7% {opacity: 0.45;}
    35% {opacity: 0; transform: translateY(400%);}
    100% {opacity: 0; transform: translateY(400%);}
}

@media (prefers-reduced-motion: reduce) {
    .main-process-bar-highlight {animation: none;}
}

/* ============================================================
   17. main-trust
============================================================ */

.main-trust {--main-trust-primary: #1A4FD6; --main-trust-card-border: #DCE3EE; --main-trust-panel-border: #E3E8F0; background-color: var(--color-bg-white);}
.main-trust-inner {max-width: 1120px; margin: 0 auto;}
.main-trust .section-header {text-align: center;}
.main-trust-list {display: grid;}

.main-trust-item {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(min-content, 1fr);
    row-gap: var(--spacing-8); height: auto; min-height: 284px; padding: 36px;
    border: 1px solid var(--main-trust-card-border); border-radius: var(--radius-2xl);
    background: #F8FAFE;
}
.main-trust-item-text {grid-row: 1; min-width: 0;}
.main-trust-item-title {
    display: flex; align-items: center; gap: var(--spacing-8); margin: 0 0 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);
}
.main-trust-item-desc {margin: 0; color: var(--color-text-secondary); font-size: 15px; font-weight: var(--font-weight-regular); line-height: 1.65; word-break: keep-all;}
.main-trust-item-check {display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--icon-size-sm); height: var(--icon-size-sm); border-radius: var(--radius-full); background-color: var(--color-text-primary); color: var(--color-text-white);}
.main-trust-item-check svg {width: 12px; height: 12px;}
.main-trust-item-visual {grid-row: 2; justify-self: end; align-self: end; max-width: 100%; min-width: 0; pointer-events: none;}
.main-trust-item:nth-child(even) {grid-template-rows: minmax(min-content, 1fr) auto;}
.main-trust-item:nth-child(even) .main-trust-item-text {grid-row: 2; align-self: end;}
.main-trust-item:nth-child(even) .main-trust-item-visual {grid-row: 1; align-self: start;}

.main-trust-monitor-panel,
.main-trust-code-window {position: relative; width: 248px; height: 104px; padding: var(--spacing-16); border: 1px solid var(--main-trust-panel-border); border-radius: var(--radius-xl); background-color: var(--color-bg-white); box-shadow: 0 8px 20px rgba(20, 40, 90, 0.06);}

.main-trust-monitor-panel {height: 118px; padding: var(--spacing-12) var(--spacing-16);}

.main-trust-code-window {display: flex; flex-direction: column; padding: 0; overflow: hidden;}
.main-trust-editor-toolbar {display: flex; align-items: center; gap: var(--spacing-12); height: 24px; flex-shrink: 0; padding: 0 var(--spacing-12); border-bottom: 1px solid var(--main-trust-panel-border); background-color: var(--color-gray-5);}
.main-trust-window-dots {display: flex; gap: var(--spacing-4);}
.main-trust-window-dots i {width: 5px; height: 5px; border-radius: var(--radius-full); background-color: var(--color-gray-30);}
.main-trust-editor-tab {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-8);
    border-right: 1px solid var(--main-trust-panel-border);
    border-left: 1px solid var(--main-trust-panel-border);
    background-color: var(--color-bg-white);
    color: var(--color-text-secondary);
    font-family: monospace;
    font-size: 9px;
}
.main-trust-code-content {display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--spacing-8); padding: 5px var(--spacing-12) 5px var(--spacing-8); font-family: monospace; font-size: 9px; line-height: 13px;}
.main-trust-line-numbers {display: flex; flex-direction: column; padding-right: 6px; border-right: 1px solid var(--main-trust-panel-border); color: var(--color-gray-40); text-align: right;}
.main-trust-line-numbers > span {height: 13px;}
.main-trust-code-lines {display: flex; flex-direction: column; min-width: 0;}

.main-trust-code-line {display: flex; align-items: center; gap: var(--spacing-4); height: 13px; flex-shrink: 0; transform-origin: left;}
.main-trust-code-mark {color: var(--color-text-secondary);}

.main-trust-chat-group {display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 248px; height: 124px; padding: 11px 13px;}
.main-trust-chat {display: block; padding: 5px 10px; border-radius: 12px 12px 12px 4px; font-size: 12px; line-height: 1.4;}
.main-trust-chat-primary {align-self: flex-end; border-radius: 12px 12px 4px 12px;}

@media (min-width: 1024px) {
    .main-trust-code-window {transform-origin: right bottom;}
    
    .main-trust-chat-group {position: relative;}
    .main-trust-chat {flex-shrink: 0;}
}

.main-trust [data-motion].is-ready:not(.is-visible) .main-trust-chat {opacity: 0;}
.main-trust [data-motion].is-ready:not(.is-visible) .main-trust-code-line {transform: scaleX(0);}
.main-trust [data-motion].is-ready:not(.is-visible) .main-trust-chat {transform: translateY(8px);}
.main-trust [data-motion].is-ready.is-visible .main-trust-code-line {animation: main-trust-code-show 0.4s ease both;}
.main-trust [data-motion].is-ready.is-visible .main-trust-code-line:nth-child(2) {animation-delay: 0.3s;}
.main-trust [data-motion].is-ready.is-visible .main-trust-code-line:nth-child(3) {animation-delay: 0.6s;}
.main-trust [data-motion].is-ready.is-visible .main-trust-code-line:nth-child(4) {animation-delay: 0.9s;}

.main-trust [data-motion].is-ready.is-visible .main-trust-code-line:nth-child(5) {animation-delay: 1.2s;}
.main-trust [data-motion].is-ready.is-visible .main-trust-chat {animation: main-trust-content-show 0.4s ease both;}
.main-trust [data-motion].is-ready.is-visible .main-trust-chat:nth-child(2) {animation-delay: 0.5s;}
.main-trust [data-motion].is-ready.is-visible .main-trust-chat:nth-child(3) {animation-delay: 1s;}
@keyframes main-trust-content-show {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes main-trust-code-show {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@media (max-width: 1023px) {
    .main-trust-item,
    .main-trust-item:nth-child(even) {height: auto; min-height: 296px; padding: var(--spacing-24); grid-template-rows: auto 1fr; row-gap: var(--spacing-24);}
    .main-trust-item:nth-child(even) .main-trust-item-text {grid-row: 1; align-self: start;}
    .main-trust-item:nth-child(even) .main-trust-item-visual {grid-row: 2; align-self: end;}
}
@media (max-width: 768px) {
    .main-trust {padding: var(--spacing-80) 0;}
}
@media (max-width: 480px) {
    .main-trust {padding: calc(var(--spacing-64) - var(--spacing-8)) 0;}
    .main-trust-item,
    .main-trust-item:nth-child(even) {padding: var(--spacing-24); min-height: 296px;}
}

@media (prefers-reduced-motion: reduce) {
    .main-page .main-trust [data-motion].is-ready .main-trust-chat {animation: none; opacity: 1; transform: none;}
    .main-page .main-trust [data-motion].is-ready .main-trust-code-line {animation: none; transform: none;}
}

@media (min-width:1024px){
    .main-trust-list{gap:16px}
    .main-trust-item,.main-trust-item:nth-child(even){display:block;min-height:0;height:auto;padding:24px;border-radius:10px;position:relative}
    .main-trust-item-monitor{grid-template-columns:250px minmax(0,1fr);grid-template-rows:auto!important;gap:24px;align-items:center}
    .main-trust-item-text,.main-trust-item:nth-child(even) .main-trust-item-text{grid-row:auto;align-self:auto}
    .main-trust-item-visual,.main-trust-item:nth-child(even) .main-trust-item-visual{grid-row:auto;align-self:auto}
    .main-trust-item-title{
        gap:9px;
        margin:0;
        letter-spacing:-.4px
    }
    .main-trust-item-desc{
        letter-spacing:-.35px
    }
    .main-trust-item-check{width:20px;height:20px;flex:0 0 20px}

    .main-trust-monitor-panel{left:auto;top:auto;width:100%;height:156px;padding:8px 12px;border-radius:8px;box-shadow:none}
    .main-trust-code-window{left:auto;top:auto;transform:none;width:100%;border-radius:6px;box-shadow:none}
    .main-trust-editor-toolbar{
        height:30px;
        gap:20px;
        padding:0 12px
    }
    .main-trust-window-dots{
        gap:6px
    }
    .main-trust-window-dots i{
        width:8px;
        height:8px;
        background:#ff786a
    }
    .main-trust-window-dots i:nth-child(2){
        background:var(--color-service-amber)
    }
    .main-trust-window-dots i:nth-child(3){
        background:var(--color-service-mint)
    }
    .main-trust-editor-tab{
        font-size:11px
    }
    .main-trust-code-content{
        padding:14px;
        gap:12px;
        font-size:12px;
        line-height:20px
    }
    .main-trust-line-numbers>span,.main-trust-code-line{
        height:20px
    }
    .main-trust-chat-group{
        left:auto;
        top:auto;
        width:100%;
        height:auto;
        padding:0;
        gap:10px
    }
    .main-trust-chat{
        padding:11px 18px;
        font-size:14px;
        border-radius:16px;
        white-space:nowrap
    }
    .main-trust-chat-left,.main-trust-chat-right{
        margin-left:0
    }
}

.main-trust-anomaly-graph{
    display:block;
    width:100%;
    height:100%;
    overflow:visible
}
.main-trust-anomaly-grid{
    stroke:var(--color-gray-10);
    stroke-width:1
}
.main-trust-normal-band{
    fill:var(--color-service-bg-violet)
}
.main-trust-transaction-line{
    stroke:color-mix(in srgb,var(--color-service-violet) 55%,var(--color-bg-white));
    stroke-width:2.5;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:1;
    stroke-dashoffset:0
}
.main-trust-warning-point{
    fill:var(--color-warning);
    stroke:var(--color-bg-white);
    stroke-width:2
}
.main-trust-warning-ring{
    fill:none;
    stroke:var(--color-warning);
    stroke-width:2;
    opacity:.4;
    transform-box:fill-box;
    transform-origin:center
}

.main-trust [data-motion].is-ready:not(.is-visible) .main-trust-transaction-line{
    stroke-dashoffset:1
}
.main-trust [data-motion].is-ready:not(.is-visible) .main-trust-warning-point,.main-trust [data-motion].is-ready:not(.is-visible) .main-trust-warning-ring{
    opacity:0
}
.main-trust [data-motion].is-ready.is-visible .main-trust-transaction-line{
    animation:main-trust-transaction-draw 2.2s ease-in-out both
}
.main-trust [data-motion].is-ready.is-visible .main-trust-warning-point{
    animation:main-trust-warning-show .2s ease 1.55s both
}
.main-trust [data-motion].is-ready.is-visible .main-trust-warning-ring{
    animation:main-trust-warning-pulse .65s ease-out 1.6s 2 both
}
@keyframes main-trust-transaction-draw{
    from{
        stroke-dashoffset:1
    }
    to{
        stroke-dashoffset:0
    }
}
@keyframes main-trust-warning-show{
    from{
        opacity:0
    }
    to{
        opacity:1
    }
}
@keyframes main-trust-warning-pulse{
    0%{
        transform:scale(.65);
        opacity:.75
    }
    80%{
        transform:scale(1.8);
        opacity:0
    }
    100%{
        transform:scale(1);
        opacity:.4
    }
}

@media(prefers-reduced-motion:reduce){
    .main-page .main-trust [data-motion].is-ready .main-trust-transaction-line{
        animation:none;
        stroke-dashoffset:0
    }
    .main-page .main-trust [data-motion].is-ready .main-trust-warning-point{
        animation:none;
        opacity:1
    }
    .main-page .main-trust [data-motion].is-ready .main-trust-warning-ring{
        animation:none;
        opacity:.4;
        transform:none
    }
}

@media(min-width:1024px){
    .main-trust{--main-trust-polish-surface:#FAFBFD;}
    .main-trust-item,.main-trust-item:nth-child(even){background:var(--main-trust-polish-surface);border-radius:var(--radius-2xl);padding:28px;}
    
    .main-trust-item-title{font-size:20px;line-height:1.1;margin-bottom:12px;}
    .main-trust-item-desc{font-size:16px;font-weight:var(--font-weight-regular);line-height:1.6;color:var(--color-text-body);}
    
    .main-trust-monitor-panel,.main-trust-code-window{border-radius:var(--radius-xl);}
    
    .main-trust-chat-group{margin-top:24px;}
}

@media(min-width:1024px){
    .main-trust-list{grid-template-columns:356px minmax(0,1fr) minmax(0,1fr);grid-template-rows:200px 312px;}
    .main-trust-item-register{grid-area:register;}
    .main-trust-item-custom{grid-area:development;grid-template-columns:250px minmax(0,1fr);grid-template-rows:auto;gap:24px;align-items:center;}
    .main-trust-item-monitor{grid-area:monitoring;display:block!important;}
    .main-trust-item-support{grid-area:support;}
    
    .main-trust-item-monitor .main-trust-monitor-panel{margin-top:24px;}
}

@media(min-width:1024px){
    .main-trust-list{grid-template-areas:"development register register" "development monitoring support";}
    .main-trust-item-register{display:grid;grid-template-columns:250px minmax(0,1fr);grid-template-rows:auto;align-items:center;gap:24px;}

    .main-trust-item-custom .main-trust-code-window{height:282px;}
    .main-trust-item-custom .main-trust-code-content{padding:18px 12px;gap:10px;line-height:26px;}
    .main-trust-item-custom .main-trust-code-line,.main-trust-item-custom .main-trust-line-numbers>span{height:26px;}
    
    .main-trust [data-motion].is-ready.is-visible .main-trust-code-line:nth-child(6){animation-delay:1.5s;}
    .main-trust [data-motion].is-ready.is-visible .main-trust-code-line:nth-child(7){animation-delay:1.8s;}
    .main-trust [data-motion].is-ready.is-visible .main-trust-code-line:nth-child(8){animation-delay:2.1s;}
}

@media(max-width:1023px){
    .main-trust-code-extra{
        display:none;
    }
}

@media(min-width:1024px){
    .main-trust-item-custom{display:flex;flex-direction:column;}
    
    .main-trust-item-custom .main-trust-item-text{align-self:stretch;text-align:left;}
    .main-trust-item-custom .main-trust-code-window{margin-top:auto;flex-shrink:0;}
}

@media(min-width:1024px) and (max-width:1199px){
    .main-trust-list{grid-template-columns:minmax(300px,.95fr) minmax(0,1fr) minmax(0,1fr);}
    .main-trust-item-register{grid-template-columns:minmax(0,1fr) auto;gap:16px;}
}

@media(max-width:1023px){
    .main-trust-list{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-template-areas:none;gap:24px;}
    .main-trust-item,.main-trust-item:nth-child(even){display:flex;flex-direction:column;grid-area:auto;grid-column:auto;grid-row:auto;height:auto;min-height:296px;padding:24px;border-radius:var(--radius-2xl);gap:24px;}
    .main-trust-item-text,.main-trust-item:nth-child(even) .main-trust-item-text{grid-row:auto;align-self:stretch;}
    .main-trust-item-visual,.main-trust-item:nth-child(even) .main-trust-item-visual{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;grid-row:auto;max-width:100%;}
    .main-trust-chat-group{height:auto;}
    .main-trust-chat-left,.main-trust-chat-right{margin-left:0;}
}

@media(max-width:1023px){
    .main-trust-item-text,.main-trust-item:nth-child(even) .main-trust-item-text{text-align:left;}
    .main-trust-item-visual,.main-trust-item:nth-child(even) .main-trust-item-visual{align-self:center;}
}
@media(min-width:768px) and (max-width:1023px){
    .main-trust-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media(max-width:767px){
    .main-trust-list{
        grid-template-columns:minmax(0,1fr);
    }
}

@media(max-width:1023px){
    .main-trust-item-visual,.main-trust-item:nth-child(even) .main-trust-item-visual{margin-top:auto;flex-shrink:0;}
    .main-trust-item-custom .main-trust-code-window{margin-top:auto;}
    
    .main-trust-chat-group{width:264px;padding:8px 8px;gap:6px;}
    .main-trust-chat{font-size:13px;padding:7px 14px;}
}

@media(max-width:480px){
    .main-trust-item-visual,.main-trust-item:nth-child(even) .main-trust-item-visual{align-self:flex-end;}
}

.main-trust-item-custom .main-trust-code-line:nth-child(n) {gap: 0; padding-left: 0; white-space: pre;}
.main-trust-item-custom .main-trust-code-line:nth-child(2),
.main-trust-item-custom .main-trust-code-line:nth-child(3),
.main-trust-item-custom .main-trust-code-line:nth-child(6),
.main-trust-item-custom .main-trust-code-line:nth-child(8) {padding-left: 2ch;}
.main-trust-item-custom .main-trust-code-line:nth-child(7) {padding-left: 4ch;}
.main-trust-code-line > span {flex-shrink: 0;}
.main-trust-code-window .main-trust-code-mark {color: var(--color-text-primary);}
.main-trust-code-window .main-trust-code-line .main-trust-code-token {color: var(--main-trust-primary);}
.main-trust-code-window .main-trust-code-line .main-trust-code-string {color: color-mix(in srgb, var(--color-service-mint) 60%, var(--color-text-primary));}
.main-trust-code-window .main-trust-code-line .main-trust-code-function {color: var(--color-service-violet);}
.main-trust-code-window .main-trust-code-line .main-trust-code-number {color: #B45309;}

.main-trust-chat-group .main-trust-chat {background-color: color-mix(in srgb, var(--color-primary-10) 65%, var(--color-bg-white)); color: var(--color-text-title-on-tint); white-space: nowrap;}
.main-trust-chat-group .main-trust-chat-primary {background-color: color-mix(in srgb, var(--color-service-mint) 27%, var(--color-bg-white)); color: var(--color-text-primary);}

.main-trust-item-register .main-trust-register-graphic {position: relative; width: min(100%, 340px); aspect-ratio: 340 / 168; container-type: inline-size; margin-top: 0;}

.main-trust-register-badge {position: absolute; left: calc(108 / 340 * 100%); top: calc(12 / 168 * 100%); width: calc(144 / 340 * 100%); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;}
.main-trust-register-badge::before {content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--color-primary-5); pointer-events: none; --main-trust-halo-pulse-scale: 1.08; --main-trust-halo-pulse-opacity: .86;}

.main-trust-register-inner {position: relative; display: grid; place-items: center; width: calc(104 / 144 * 100%); aspect-ratio: 1; border-radius: 50%;}
.main-trust-register-inner::before {content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--color-primary-10); pointer-events: none; --main-trust-halo-pulse-scale: 1.04; --main-trust-halo-pulse-opacity: .96;}

.main-trust-register-shield {position: relative; z-index: 1; display: block; width: calc(63 / 104 * 100%); height: auto; aspect-ratio: 1; filter: drop-shadow(0 calc(8 / 340 * 100cqw) calc(14 / 340 * 100cqw) rgba(26,79,214,.3));}

.main-trust-register-shield {color: var(--color-primary);}
.main-trust-register-shield > path:first-child {fill: currentColor;}
.main-trust-register-shield > path:last-child {stroke: var(--color-text-white);}

.main-trust-register-tile {position: absolute; display: grid; place-items: center; width: calc(58 / 340 * 100%); aspect-ratio: 1; border-radius: calc(16 / 340 * 100cqw); background: var(--color-bg-white); box-shadow: 0 calc(8 / 340 * 100cqw) calc(18 / 340 * 100cqw) rgba(20,40,90,.10);}

.main-trust-register-tile svg {display: block; width: calc(27 / 58 * 100%); height: auto; aspect-ratio: 1; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;}

.main-trust-register-tile-document {left: calc(66 / 340 * 100%); top: calc(58 / 168 * 100%); color: var(--color-icon-teal);}
.main-trust-register-tile-list {left: calc(221 / 340 * 100%); top: calc(1 / 168 * 100%); color: var(--color-service-violet);}
.main-trust-register-tile-lock {left: calc(221 / 340 * 100%); top: calc(115 / 168 * 100%); color: var(--color-warning);}

@media (min-width: 1024px) {
    .main-trust-item-register .main-trust-register-graphic {width: calc(142px * 340 / 168); justify-self: end;}
}

@media (max-width: 1023px) {
    .main-trust-item-register .main-trust-register-graphic {width: min(100%, 300px, calc(137px * 340 / 168)); align-self: center; margin-top: auto; flex-shrink: 0;}
}

@media (min-width: 481px) and (max-width: 768px) {
    .main-trust-item-register .main-trust-register-graphic {width: calc(137px * 360 / 168); aspect-ratio: 360 / 168; align-self: center; margin-inline: 0;}
    .main-trust-item-register .main-trust-register-badge {left: calc(108 / 360 * 100%); width: calc(144 / 360 * 100%);}
    .main-trust-item-register .main-trust-register-tile {width: calc(58 / 360 * 100%); border-radius: calc(16 / 360 * 100cqw); box-shadow: 0 calc(8 / 360 * 100cqw) calc(18 / 360 * 100cqw) rgba(20,40,90,.10);}
    .main-trust-item-register .main-trust-register-tile-document {left: calc(66 / 360 * 100%);}
    .main-trust-item-register .main-trust-register-tile-list,
    .main-trust-item-register .main-trust-register-tile-lock {left: calc(221 / 360 * 100%);}
    
    .main-trust-item-register .main-trust-register-shield {filter: drop-shadow(0 calc(8 / 360 * 100cqw) calc(14 / 360 * 100cqw) rgba(26,79,214,.3));}
}

@media (max-width: 480px) {
    .main-trust-item-register .main-trust-register-graphic {align-self: flex-end; margin-inline-end: calc(min(100%, 300px, calc(137px * 340 / 168)) * (279 - 340) / 340);}
    
    .main-trust-item-register {overflow-x: clip;}
}

.main-trust-register-graphic.is-ready:not(.is-visible) .main-trust-register-badge {opacity: 0; transform: scale(.9);}
.main-trust-register-graphic.is-ready:not(.is-visible) .main-trust-register-tile {opacity: 0; transform: translateY(10px);}

.main-trust-register-graphic.is-ready.is-visible .main-trust-register-badge {animation: main-trust-register-badge-show .5s ease both;}
.main-trust-register-graphic.is-ready.is-visible .main-trust-register-tile {animation: main-trust-register-tile-show .45s ease both;}
.main-trust-register-graphic.is-ready.is-visible .main-trust-register-tile-document {animation-delay: .25s;}
.main-trust-register-graphic.is-ready.is-visible .main-trust-register-tile-list {animation-delay: .4s;}
.main-trust-register-graphic.is-ready.is-visible .main-trust-register-tile-lock {animation-delay: .55s;}

@keyframes main-trust-register-badge-show {
    from {
        opacity: 0;
        transform: scale(.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes main-trust-register-tile-show {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.main-trust-register-graphic.is-ready.is-visible .main-trust-register-badge::before,
.main-trust-register-graphic.is-ready.is-visible .main-trust-register-inner::before {animation: main-trust-register-halo-pulse 3s ease-in-out 1.05s infinite;}
@keyframes main-trust-register-halo-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(var(--main-trust-halo-pulse-scale));
        opacity: var(--main-trust-halo-pulse-opacity);
    }
}

@media (prefers-reduced-motion: reduce) {
    .main-trust .main-trust-register-graphic[data-motion] .main-trust-register-badge,
    .main-trust .main-trust-register-graphic[data-motion] .main-trust-register-tile {animation: none; opacity: 1; transform: none;}
    
    .main-trust .main-trust-register-graphic[data-motion] .main-trust-register-badge::before,
    .main-trust .main-trust-register-graphic[data-motion] .main-trust-register-inner::before {animation: none; opacity: 1; transform: none;}
}

/* ============================================================
   18. main-pricing
============================================================ */
.main-pricing {padding: var(--section-padding-y) 0; background: linear-gradient(180deg, var(--color-primary-5) 0%, var(--color-primary-5) 46%, var(--color-bg-white) 100%);} 

.main-pricing-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.72fr);
    grid-template-areas: "heading pricing" "cta pricing";
    grid-template-rows: max-content minmax(0, 1fr);
    align-items: start;
    gap: var(--main-feature-gap);
    row-gap: 0;
}

.main-process .section-header-title,
.main-pricing .section-header-title {
    color: var(--color-text-primary);
}

.main-pricing .section-header {grid-area: heading; margin-bottom: 0;}
.main-pricing .section-header-content {position: relative; max-width: 560px;}

.main-pricing-cta {grid-area: cta; justify-self: start; margin-top: var(--spacing-24);}

@media (prefers-reduced-motion: reduce) {
    .main-pricing-cta {transition: none;}
}

.main-pricing-table {grid-area: pricing; margin-top: var(--spacing-20);}
.main-pricing-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
}
.main-pricing-item {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(180px, auto);
    align-items: center;
    min-height: 84px;
    padding: 0 0 var(--spacing-24);
    border-bottom: 1px solid var(--color-border-light);
}
.main-pricing-item + .main-pricing-item {padding-top: var(--spacing-24);}

.main-pricing-label {
    font-size: var(--font-size-body);
    line-height: 1.5;
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-regular);
}

.main-pricing-value {
    margin: 0;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    text-align: right;
    white-space: nowrap;
}
.main-pricing-item:nth-child(2) .main-pricing-value,
.main-pricing-item:nth-child(4) .main-pricing-value {
    color: var(--color-primary);
}
.main-pricing-value-discount {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-8);
}
.main-pricing-original {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-body);
    text-decoration: line-through;
}
.main-pricing-arrow {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}
.main-pricing-current {font-size: var(--font-size-h3); color: var(--color-primary);}

.main-pricing-note {
    margin-top: var(--spacing-8);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    text-align: right;
}
/* ============================================================
   20. 반응형
============================================================ */

@media (min-width: 769px) and (max-width: 1024px) {
    .main-stats,
    .main-feature,
    .main-review,
    .main-trust {
        padding-top: var(--section-padding-y-tablet);
        padding-bottom: var(--section-padding-y-tablet);
    }

    .main-pricing {padding-bottom: var(--section-padding-y-tablet);}
}

@media (max-width: 1024px) {
    .main-page {--main-grid-cols-service: 2;}
    .main-payment-service-wrap {padding: var(--spacing-64) var(--spacing-40) var(--spacing-80);}
    .main-payment-grid {grid-template-columns: repeat(2, 1fr);}
    .main-payment-grid > .card,
    .main-payment-grid > .card:nth-child(4) {
        grid-column: auto;
    }
    .main-payment-grid > .card:nth-child(5) {grid-column: span 2;}
    .main-payment-grid .card-title,
    .main-service-grid .card-title {
        font-size: var(--font-size-h6);
    }
    .main-payment-grid .card-desc,
    .main-service-grid .card-desc {
        font-size: var(--font-size-ui);
    }

    .main-feature {--main-feature-gap: 72px;}
    .main-feature-item-title {font-size: 1.75rem;}

    .main-review-quote {font-size: var(--font-size-h5);}

    .main-pricing {padding-top: var(--section-padding-y-tablet);}

    .main-process-item-title {font-size: var(--font-size-h6);}
    .main-process-item-desc {font-size: var(--font-size-ui);}

    .main-pricing-inner {grid-template-columns: 1fr; grid-template-areas: none; grid-template-rows: auto; gap: var(--spacing-32);}
    .main-pricing-label {font-size: var(--font-size-ui);}
    .main-pricing-value,
    .main-pricing-current {
        font-size: 1.75rem;
    }
    .main-pricing-original,
    .main-pricing-arrow {
        font-size: var(--font-size-h5);
    }
    .main-pricing .section-header {
        grid-area: auto;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .main-pricing .section-header-content {
        align-items: center;
        text-align: center;
        max-width: 100%;
    }
    
    .main-pricing-table {grid-area: auto; width: 100%; max-width: calc(var(--container-max-width) / 2); justify-self: center; margin-top: 0;}
    
    .main-pricing-cta {grid-area: auto; justify-self: center; margin-top: calc(var(--spacing-64) - var(--spacing-32));}
}

@media (max-width: 768px) {
    .main-stats {padding: var(--spacing-80) 0;}

    .main-payment-service-wrap {padding: var(--spacing-64) var(--spacing-40) 54px;}
    .main-payment-grid .card-desc {margin-bottom: var(--spacing-4);}

    /* 모바일 결제수단·결제서비스 설명의 지정 줄바꿈 유지 */
    .main-payment-grid .card-desc .desktop-break,
    .main-service-grid .card-desc .desktop-break {
        display: inline;
    }

    .main-review {padding: var(--spacing-80) 0;}
    .main-review-track {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: var(--spacing-16);
        scroll-behavior: auto;
    }
    .main-review-track::-webkit-scrollbar {display: none;}
    .main-review-card {
        width: 280px;
        min-width: 280px;
        flex-shrink: 0;
        height: auto;
    }
    .main-review-media {aspect-ratio: 1.25 / 1;}
    .main-review-quote {font-size: var(--font-size-h5);}
    .main-review-nav {display: flex;}

    .main-process {padding-top: var(--spacing-80); padding-bottom: var(--spacing-80);}
    .main-process-inner {max-width: none;}
    .main-process .section-header {align-items: center; text-align: center;}
    .main-process .section-header-eyebrow {padding: var(--spacing-4) var(--spacing-12); font-size: var(--font-size-body-sm);}
    .main-process .section-header-title {margin: 0 auto; text-align: center;}
    .main-process-flow {max-width: 560px; margin: 0 auto;}
    .main-process-list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .main-process-item {
        position: relative;
        display: grid;
        min-height: auto;
        padding: 0;
        gap: var(--spacing-24);
        text-align: left;
    }
    .main-process-item:last-child {padding-bottom: 0;}
    .main-process-step {
        width: 44px;
        height: 44px;
        font-size: var(--font-size-body);
    }
    .main-process-item-content {align-items: flex-start;}
    .main-process-item-title {font-size: var(--font-size-h6);}
    .main-process-item-desc {font-size: var(--font-size-ui);}

    .main-pricing {padding-top: var(--section-padding-y-tablet); padding-bottom: var(--spacing-64);}
    
    .main-pricing-item {min-height: 76px;}

    .main-feature {padding-top: var(--spacing-80); padding-bottom: var(--spacing-80);}
    .main-feature-item,
    .main-feature-item.is-reverse {
        grid-template-columns: 1fr;
        gap: var(--spacing-32);
    }
    .main-feature-visual {order: -1;}
    .main-feature-visual,
    .main-feature-item.is-reverse .main-feature-visual {justify-content: center;}
    .main-feature-item:not(.is-reverse) .main-feature-content,
    .main-feature-item.is-reverse .main-feature-content {justify-self: center;}
    .main-feature-content {
        max-width: 480px;
        align-items: center;
        text-align: center;
        gap: var(--spacing-12);
    }
    .main-page {--main-feature-visual-ratio: 1.6 / 1;}
    .main-feature .img-placeholder,
    .main-feature-image {max-width: 480px;}
    .main-feature-item + .main-feature-item {margin-top: var(--spacing-64);}
    .main-feature-item-title {font-size: var(--font-size-h5);}
    .main-feature-item-desc {font-size: var(--font-size-body);}
}

@media (max-width: 768px) {
    .main-process-inner {gap: calc(var(--spacing-64) + var(--spacing-8));}
    .main-process-bar {
        display: block;
        top: 22px;
        right: auto;
        bottom: 22px;
        left: 50%;
        width: 44px;
        height: auto;
        transform: translateX(-50%);
        background: linear-gradient(
            180deg,
            #DCEAFF 0%,
            #BCD8FF 28%,
            #9EDBFA 52%,
            #82DDEB 76%,
            #9FE5E8 100%
        );
    }
    .main-process-bar-highlight {
        width: 100%;
        height: 34%;
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.20) 30%,
            rgba(255, 255, 255, 0.72) 50%,
            rgba(255, 255, 255, 0.20) 70%,
            rgba(255, 255, 255, 0) 100%
        );
        transform: translateY(-110%);
    }
    .main-process-list::before {display: none;}
    .main-process-item {
        grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
        column-gap: var(--spacing-24);
        padding-bottom: 54px;
    }
    .main-process-step {
        grid-column: 2;
        grid-row: 1;
    }
    .main-process-item:nth-child(odd) .main-process-item-content {
        grid-column: 1;
        grid-row: 1;
        align-items: flex-end;
        text-align: right;
    }
    .main-process-item:nth-child(even) .main-process-item-content {
        grid-column: 3;
        grid-row: 1;
        align-items: flex-start;
        text-align: left;
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
    .main-process-flow.is-motion-active .main-process-bar-highlight {
        animation: main-process-bar-sweep-vertical 4s linear infinite;
    }
}

/* 700px 이하 결제수단·결제서비스 카드를 1열로 전환 */
@media (max-width: 700px) {
    .main-payment-grid,
    .main-service-grid {
        grid-template-columns: 1fr;
    }
    .main-payment-grid > .card,
    .main-payment-grid > .card:nth-child(5) {grid-column: auto;}
}

@media (max-width: 480px) {
    .main-stats,
    .main-review,
    .main-feature {padding: calc(var(--spacing-64) - var(--spacing-8)) 0;}
    .main-payment-service-wrap {padding: var(--spacing-64) var(--spacing-20) var(--spacing-64);}
    .main-service {margin-top: var(--spacing-80);}
    .main-payment-grid,
    .main-service-grid {
        gap: var(--spacing-16);
    }
    .main-page {--main-payment-service-card-radius: var(--radius-xl);}

    .main-process {padding-top: calc(var(--spacing-64) - var(--spacing-8)); padding-bottom: calc(var(--spacing-64) - var(--spacing-8));}

    .main-pricing {padding-top: var(--section-padding-y-mobile); padding-bottom: var(--spacing-64);}
    
    .main-pricing-cta {justify-self: stretch; margin-top: calc(var(--spacing-48) - var(--spacing-32));}
    .main-pricing-item {
        /* 모바일에서도 라벨과 값을 좌우 2열로 유지 */
        grid-template-columns: minmax(0, 1fr) max-content;
        min-height: 72px;
        gap: var(--spacing-8);
        padding-bottom: var(--spacing-16);
    }
    .main-pricing-item + .main-pricing-item {padding-top: var(--spacing-16);}
    
    .main-pricing-value,
    .main-pricing-current {
        font-size: var(--font-size-h4);
    }

    .main-review-card {width: 82%; min-width: 0;}

    .main-feature-item,
    .main-feature-item.is-reverse {
        gap: var(--spacing-24);
    }
}

@media (max-width: 360px) {
    .main-page {--main-payment-card-min-height: 76px; --main-service-card-min-height: 100px;}

    .main-feature-item,
    .main-feature-item.is-reverse {
        gap: var(--spacing-20);
    }
    .main-feature-content {gap: var(--spacing-8);}
    .main-feature-item-title {font-size: var(--font-size-h5);}

    .main-payment-grid .card-title,
    .main-service-grid .card-title {
        font-size: var(--font-size-h6);
    }

    .main-review-quote {font-size: var(--font-size-h6);}

    .main-pricing-value {font-size: 1.375rem;}
    .main-pricing-current {font-size: 1.375rem;}
    .main-pricing-item {
        min-height: 64px;
        gap: var(--spacing-4);
        padding-bottom: var(--spacing-8);
    }
    .main-pricing-item + .main-pricing-item {padding-top: var(--spacing-8);}
}

#main-hero-title,
#main-feature-title,
#main-payment-title,
#main-service-title {
    color: var(--color-text-primary);
}

/* ============================================================
   21. 메인 반응형 Section Title Scale
============================================================ */
.main-page .section-header-title {
    line-height: 1.4;
}

@media (max-width: 768px) {
    .main-page .section-header-title {font-size: 2.125rem;}
}

@media (max-width: 480px) {
    .main-page .section-header-title {font-size: 1.875rem; line-height: 1.35;}
    .main-page .section-header-title-mobile-multiline {line-height: 1.35;}
}

@media (max-width: 360px) {
    .main-page .section-header-title {font-size: 1.75rem;}
}

/* ============================================================
   21-1. 메인 공통 Section Header → Content 간격
============================================================ */
.main-page .section-header-center {
    margin-bottom: var(--spacing-64);
}
@media (max-width: 1024px) {
    .main-page .section-header-center {margin-bottom: var(--spacing-48);}
}
@media (max-width: 768px) {
    .main-page .section-header-center {margin-bottom: var(--spacing-32);}
}

/* ============================================================
   22. 메인 제목 줄바꿈 전용 break 클래스
============================================================ */

.main-process-title-br,
.main-section-title-br {display: none;}

@media (max-width: 389px) {
    .main-process-title-br {display: inline;}
    .main-process .section-header-title {line-height: 1.35;}
}

.main-360-break {display: none;}
@media (max-width: 360px) {
    .main-360-break {display: inline;}
}

@media (max-width: 480px) {
    .main-section-title-br {display: inline;}
}