.asol-transaction-tgl-group {
    padding-block: clamp(1.5rem, 4vw, 2.25rem);
    display: flex;
    flex-direction: column;
    gap: clamp(0.715rem, 1.56vw, 0.975rem);
}

.asol-transaction-tgl {
    position: relative;
    z-index: 0;
    color: var(--publish_starter_text, #dce7f7);
    background: transparent;
    --asol-txn-grad-scale: 1.3;
    --asol-txn-grad-text-scale: 1;
        --asol-txn-grad-radius: calc(4.17rem * var(--asol-txn-grad-scale));
        --asol-txn-grad-toggle: calc(6.11rem * var(--asol-txn-grad-scale));
        --asol-txn-grad-toggle-inner: calc(var(--asol-txn-grad-toggle) - calc(1rem * var(--asol-txn-grad-scale)));
        --asol-txn-grad-toggle-open: calc(14rem * var(--asol-txn-grad-scale));
        --asol-txn-grad-inset: calc(0.5rem * var(--asol-txn-grad-scale));
        --asol-txn-grad-border: color-mix(in srgb, var(--publish_starter_text, #dce7f7) 14%, transparent);
        --asol-txn-grad-panel: color-mix(in srgb, var(--publish_starter_bg, #0b1220) 88%, #fff 4%);
        --asol-txn-grad-green: #4ade80;
        --asol-txn-grad-yellow: #fbbf24;
        --asol-txn-grad-blue: #818cf8;
        --asol-txn-grad-pink: #f472b6;
        --asol-txn-grad-cyan: #22d3ee;
        --asol-txn-grad-ease: cubic-bezier(0.22, 1, 0.36, 1);
        /* 슬라이드: 앞은 느리게 → 끝에서 자석 스냅 (시작 유지, 스냅만 ~20% 완화) */
        --asol-txn-grad-slide-ease: cubic-bezier(0.72, 0, 0.90, 0.11);
        /* 닫힐 때: 우측에서 빠르게 출발 → 좌측에 천천히 진입 (열림 slide 역행) */
        --asol-txn-grad-slide-ease-close: cubic-bezier(0.10, 0.89, 0.28, 1);
        --asol-txn-grad-fade: 1s;
        --asol-txn-grad-expand: 1s;
        --asol-txn-grad-slide-gap: 0s;
        /* expand easing 꼬리 구간 — 슬라이드를 조금 일찍 시작 (0s = width transitionend 직후) */
        --asol-txn-grad-slide-overlap: 0.85s;
        --asol-txn-grad-slide: 1s;
        --asol-txn-grad-radial: ellipse 100% 185% at 0% 50%;
        /* idle peek: 살짝 어둡게 — “뭔가 있다” 정도 */
        --asol-txn-grad-idle-bg-opacity: 0.4;
        --asol-txn-grad-idle-bg-blur: 14px;
        --asol-txn-grad-idle-header-opacity: 0.92;
        --asol-txn-grad-idle-desc-opacity: 0.34;
        /* 클릭 토글 전체(expand + slide, overlap 반영) */
        --asol-txn-grad-activate: calc(var(--asol-txn-grad-expand) + var(--asol-txn-grad-slide) - var(--asol-txn-grad-slide-overlap));
    }

.asol-transaction-tgl .button__gradient__item {
        --asol-txn-grad-accent: var(--asol-txn-grad-green);
        min-height: var(--asol-txn-grad-toggle);
        border: 2px solid var(--asol-txn-grad-border);
        background: var(--asol-txn-grad-panel);
        color: var(--publish_starter_text, #fff);
        border-radius: var(--asol-txn-grad-radius);
        position: relative;
        overflow: hidden;
        isolation: isolate;
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        /* Chromium 모바일: filter:blur 가 overflow:hidden 을 뚫고 나가는 것 방지 */
        clip-path: inset(0 round var(--asol-txn-grad-radius));
        -webkit-clip-path: inset(0 round var(--asol-txn-grad-radius));
        box-shadow: inset 2px 4px 8px color-mix(in srgb, #000 50%, transparent);
        cursor: pointer;
    }

    .asol-transaction-tgl .button__gradient__item.is-yellow {
        --asol-txn-grad-accent: var(--asol-txn-grad-yellow);
    }

    .asol-transaction-tgl .button__gradient__item.is-blue {
        --asol-txn-grad-accent: var(--asol-txn-grad-blue);
    }

    .asol-transaction-tgl .button__gradient__item.is-pink {
        --asol-txn-grad-accent: var(--asol-txn-grad-pink);
    }

    .asol-transaction-tgl .button__gradient__item.is-cyan {
        --asol-txn-grad-accent: var(--asol-txn-grad-cyan);
    }

    .asol-transaction-tgl .button__gradient__item.is-telegram {
        --asol-txn-grad-accent: #229ed9;
    }

    .asol-transaction-tgl .button__gradient__text__wrapper {
        position: absolute;
        inset: 0;
        z-index: 1;
        padding: 0 clamp(0.85rem, 2vw, 1.35rem) 0 calc(var(--asol-txn-grad-toggle) + 0.35rem);
        display: flex;
        align-items: center;
        gap: clamp(1rem, 2.5vw, 2rem);
        pointer-events: none;
        color: #131313;
        opacity: 0;
        transition:
            opacity var(--asol-txn-grad-fade) ease,
            padding-right var(--asol-txn-grad-slide) var(--asol-txn-grad-slide-ease) 0s;
    }

    /* idle: 상시 peek — glow/cover 밝기 유지, 헤더만 더 진하게 */
    .asol-transaction-tgl .button__gradient__item:not(.is-active) .button__gradient__text__wrapper {
        opacity: 1;
    }

    .asol-transaction-tgl .button__gradient__item:not(.is-active) .button__gradient__text-header {
        color: color-mix(in srgb, var(--asol-txn-grad-accent) 42%, #0a0a0a);
        opacity: var(--asol-txn-grad-idle-header-opacity);
    }

    .asol-transaction-tgl .button__gradient__item:not(.is-active) .button__gradient__text-desc {
        opacity: var(--asol-txn-grad-idle-desc-opacity);
    }

    .asol-transaction-tgl .button__gradient__item:not(.is-active):hover .button__gradient__text-header,
    .asol-transaction-tgl .button__gradient__item.is-peek:not(.is-active) .button__gradient__text-header,
    .asol-transaction-tgl .button__gradient__item:not(.is-active):focus-within .button__gradient__text-header {
        color: #131313;
        opacity: 1;
    }

    .asol-transaction-tgl .button__gradient__item:not(.is-active):hover .button__gradient__text-desc,
    .asol-transaction-tgl .button__gradient__item.is-peek:not(.is-active) .button__gradient__text-desc,
    .asol-transaction-tgl .button__gradient__item:not(.is-active):focus-within .button__gradient__text-desc {
        opacity: 1;
    }

    .asol-transaction-tgl .button__gradient__item:not(.is-active):hover .button__gradient__text__wrapper,
    .asol-transaction-tgl .button__gradient__item.is-peek:not(.is-active) .button__gradient__text__wrapper,
    .asol-transaction-tgl .button__gradient__item:not(.is-active):focus-within .button__gradient__text__wrapper {
        opacity: 1;
    }

    /* 토글 중: 컨텐츠 노출 유지 + opacity 페이드 방지 (버튼보다 아래 z-index 1) */
    .asol-transaction-tgl .button__gradient__item.is-active:not(.is-retracting) .button__gradient__text__wrapper {
        opacity: 1;
        transition: padding-right var(--asol-txn-grad-slide) var(--asol-txn-grad-slide-ease) 0s;
    }

    .asol-transaction-tgl .button__gradient__item.is-active.is-retracting .button__gradient__text__wrapper {
        opacity: 1;
        padding-right: clamp(0.85rem, 2vw, 1.35rem);
        transition: padding-right var(--asol-txn-grad-slide) var(--asol-txn-grad-slide-ease-close) 0s;
    }

    /* panel cover — 기본 전체 가림 / idle·peek 시 왼쪽 radial 구멍 */
    .asol-transaction-tgl .button__gradient__cover {
        position: absolute;
        inset: 0;
        z-index: 2;
        background: var(--asol-txn-grad-panel);
        pointer-events: none;
        -webkit-mask-image: linear-gradient(#000, #000);
        mask-image: linear-gradient(#000, #000);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        transition: opacity var(--asol-txn-grad-fade) ease;
    }

    /* idle: 좁은 radial — 힌트만 */
    .asol-transaction-tgl .button__gradient__item:not(.is-active) .button__gradient__cover {
        -webkit-mask-image: radial-gradient(var(--asol-txn-grad-radial), transparent 0%, transparent 12%, rgba(0, 0, 0, 0.14) 28%, rgba(0, 0, 0, 0.46) 40%, #000 54%);
        mask-image: radial-gradient(var(--asol-txn-grad-radial), transparent 0%, transparent 12%, rgba(0, 0, 0, 0.14) 28%, rgba(0, 0, 0, 0.46) 40%, #000 54%);
        transition:
            opacity var(--asol-txn-grad-fade) ease,
            -webkit-mask-image var(--asol-txn-grad-fade) ease,
            mask-image var(--asol-txn-grad-fade) ease;
    }

    /* hover / peek: 기존 밝기 radial */
    .asol-transaction-tgl .button__gradient__item:not(.is-active):hover .button__gradient__cover,
    .asol-transaction-tgl .button__gradient__item.is-peek:not(.is-active) .button__gradient__cover,
    .asol-transaction-tgl .button__gradient__item:not(.is-active):focus-within .button__gradient__cover,
    .asol-transaction-tgl .button__gradient__item.is-active .button__gradient__cover {
        -webkit-mask-image: radial-gradient(var(--asol-txn-grad-radial), transparent 0%, transparent 24%, rgba(0, 0, 0, 0.22) 38%, rgba(0, 0, 0, 0.58) 50%, #000 64%);
        mask-image: radial-gradient(var(--asol-txn-grad-radial), transparent 0%, transparent 24%, rgba(0, 0, 0, 0.22) 38%, rgba(0, 0, 0, 0.58) 50%, #000 64%);
    }

    /* 클릭 시 hover radial cover 유지 → 토글 시간에 맞춰 전체 노출 */
    .asol-transaction-tgl .button__gradient__item.is-active:not(.is-retracting):not(.is-shrinking) .button__gradient__cover {
        opacity: 0;
        transition: opacity var(--asol-txn-grad-activate) var(--asol-txn-grad-slide-ease) 0s;
    }

    /* 닫힐 때: solid → radial cover 복귀 (열림 activate 역행) */
    .asol-transaction-tgl .button__gradient__item.is-active.is-retracting .button__gradient__cover,
    .asol-transaction-tgl .button__gradient__item.is-active.is-shrinking .button__gradient__cover {
        opacity: 1;
        transition: opacity var(--asol-txn-grad-activate) var(--asol-txn-grad-slide-ease-close) 0s;
    }

    /* accent glow — hover radial + 클릭 시 solid 오버레이로 전체 밝기 전환 */
    .asol-transaction-tgl .button__gradient__bg {
        z-index: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0;
        border-radius: inherit;
        overflow: hidden;
        opacity: 0;
        /* blur 대신 큰 soft radial — 모바일에서 박스 밖으로 번지지 않음 */
        filter: none;
        background: radial-gradient(
            var(--asol-txn-grad-radial),
            var(--asol-txn-grad-accent) 0%,
            var(--asol-txn-grad-accent) 18%,
            color-mix(in srgb, var(--asol-txn-grad-accent) 70%, transparent) 32%,
            color-mix(in srgb, var(--asol-txn-grad-accent) 28%, transparent) 46%,
            transparent 64%
        );
        transition: opacity var(--asol-txn-grad-fade) ease;
        box-shadow: none;
        pointer-events: none;
    }

    .asol-transaction-tgl .button__gradient__bg::after {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0;
        background: var(--asol-txn-grad-accent);
        box-shadow: inset -2px 4px 8px color-mix(in srgb, #000 50%, transparent);
        transition: opacity var(--asol-txn-grad-activate) var(--asol-txn-grad-slide-ease) 0s;
        pointer-events: none;
    }

    .asol-transaction-tgl .button__gradient__item:not(.is-active) .button__gradient__bg {
        opacity: var(--asol-txn-grad-idle-bg-opacity);
    }

    .asol-transaction-tgl .button__gradient__item:not(.is-active):hover .button__gradient__bg,
    .asol-transaction-tgl .button__gradient__item.is-peek:not(.is-active) .button__gradient__bg,
    .asol-transaction-tgl .button__gradient__item:not(.is-active):focus-within .button__gradient__bg {
        opacity: 1;
    }

    .asol-transaction-tgl .button__gradient__item.is-active .button__gradient__bg {
        opacity: 1;
    }

    .asol-transaction-tgl .button__gradient__item.is-active .button__gradient__bg {
        transition: opacity 0s;
    }

    .asol-transaction-tgl .button__gradient__item.is-active:not(.is-retracting):not(.is-shrinking) .button__gradient__bg::after {
        opacity: 1;
    }

    .asol-transaction-tgl .button__gradient__item.is-active.is-retracting .button__gradient__bg::after,
    .asol-transaction-tgl .button__gradient__item.is-active.is-shrinking .button__gradient__bg::after {
        opacity: 0;
        transition: opacity var(--asol-txn-grad-activate) var(--asol-txn-grad-slide-ease-close) 0s;
    }

    .asol-transaction-tgl .button__gradient__link {
        position: absolute;
        z-index: 6;
        top: var(--asol-txn-grad-inset);
        left: var(--asol-txn-grad-inset);
        right: auto;
        bottom: var(--asol-txn-grad-inset);
        width: var(--asol-txn-grad-toggle-inner);
        text-decoration: none;
        color: inherit;
        transition:
            left var(--asol-txn-grad-slide) var(--asol-txn-grad-slide-ease-close) 0s,
            width var(--asol-txn-grad-expand) var(--asol-txn-grad-ease) 0s;
    }

    /* 닫힐 때 1단계: 우측 → 좌측 슬라이드 (width 유지) */
    .asol-transaction-tgl .button__gradient__item.is-active.is-retracting:not(.is-shrinking) .button__gradient__link {
        left: var(--asol-txn-grad-inset);
        width: var(--asol-txn-grad-toggle-open);
        transition:
            left var(--asol-txn-grad-slide) var(--asol-txn-grad-slide-ease-close) 0s,
            width 0s;
    }

    /* 닫힐 때 2단계: expand와 동일 시간으로 원형 축소 */
    .asol-transaction-tgl .button__gradient__item.is-active.is-shrinking .button__gradient__link {
        left: var(--asol-txn-grad-inset);
        width: var(--asol-txn-grad-toggle-inner);
        transition:
            left 0s,
            width var(--asol-txn-grad-expand) var(--asol-txn-grad-ease) 0s;
    }

    /* 열릴 때 1단계: width만 확장 (왼쪽 고정) — is-sliding은 JS가 expand+gap 후 추가 */
    .asol-transaction-tgl .button__gradient__item.is-active:not(.is-sliding):not(.is-retracting):not(.is-shrinking) .button__gradient__link {
        left: var(--asol-txn-grad-inset);
        width: var(--asol-txn-grad-toggle-open);
        transition:
            left var(--asol-txn-grad-slide) var(--asol-txn-grad-slide-ease) 0s,
            width var(--asol-txn-grad-expand) var(--asol-txn-grad-ease) 0s;
    }

    /* 열릴 때 2단계: 오른쪽 슬라이드 */
    .asol-transaction-tgl .button__gradient__item.is-active.is-sliding:not(.is-retracting) .button__gradient__link {
        left: calc(100% - var(--asol-txn-grad-toggle-open) - var(--asol-txn-grad-inset));
        width: var(--asol-txn-grad-toggle-open);
        transition:
            width var(--asol-txn-grad-expand) var(--asol-txn-grad-ease) 0s,
            left var(--asol-txn-grad-slide) var(--asol-txn-grad-slide-ease) 0s;
    }

    .asol-transaction-tgl .button__gradient__toggle {
        width: 100%;
        height: 100%;
        border-radius: var(--asol-txn-grad-radius);
        background: color-mix(in srgb, var(--publish_starter_bg, #131313) 92%, #000);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        box-shadow: inset -2px 2px 2px color-mix(in srgb, #fff 25%, transparent), 2px 4px 8px color-mix(in srgb, #000 50%, transparent);
    }

    .asol-transaction-tgl .button__gradient__logo {
        width: calc(2.5rem * var(--asol-txn-grad-scale));
        height: calc(2.5rem * var(--asol-txn-grad-scale));
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--asol-txn-grad-accent);
        font-size: calc(1.15rem * var(--asol-txn-grad-scale) * var(--asol-txn-grad-text-scale));
        transition:
            opacity var(--asol-txn-grad-expand) var(--asol-txn-grad-ease) calc(var(--asol-txn-grad-slide) + var(--asol-txn-grad-expand)),
            transform var(--asol-txn-grad-expand) var(--asol-txn-grad-ease) calc(var(--asol-txn-grad-slide) + var(--asol-txn-grad-expand));
    }

    .asol-transaction-tgl .button__gradient__button-text__wrapper {
        position: absolute;
        inset: 0;
        opacity: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        padding-inline: 1rem;
        transition: opacity var(--asol-txn-grad-expand) var(--asol-txn-grad-ease) calc(var(--asol-txn-grad-slide) + var(--asol-txn-grad-expand));
    }

    .asol-transaction-tgl .button__gradient__item.is-active:not(.is-shrinking) .button__gradient__logo {
        opacity: 0;
        transform: scale(0.85);
        transition:
            opacity var(--asol-txn-grad-expand) var(--asol-txn-grad-ease) 0s,
            transform var(--asol-txn-grad-expand) var(--asol-txn-grad-ease) 0s;
    }

    .asol-transaction-tgl .button__gradient__item.is-active.is-shrinking .button__gradient__logo {
        opacity: 1;
        transform: scale(1);
        transition:
            opacity var(--asol-txn-grad-expand) var(--asol-txn-grad-ease) 0s,
            transform var(--asol-txn-grad-expand) var(--asol-txn-grad-ease) 0s;
    }

    .asol-transaction-tgl .button__gradient__item.is-active:not(.is-shrinking) .button__gradient__button-text__wrapper {
        opacity: 1;
        transition: opacity var(--asol-txn-grad-expand) var(--asol-txn-grad-ease) 0s;
    }

    .asol-transaction-tgl .button__gradient__item.is-active.is-shrinking .button__gradient__button-text__wrapper {
        opacity: 0;
        transition: opacity var(--asol-txn-grad-expand) var(--asol-txn-grad-ease) 0s;
    }

    .asol-transaction-tgl .button__gradient__text {
        font-size: calc(0.92rem * var(--asol-txn-grad-scale) * var(--asol-txn-grad-text-scale));
        font-weight: 700;
        letter-spacing: -0.01em;
        color: #fff;
        white-space: nowrap;
    }

    .asol-transaction-tgl .icon-arrow {
        width: calc(1rem * var(--asol-txn-grad-scale));
        height: calc(1rem * var(--asol-txn-grad-scale));
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .asol-transaction-tgl .icon-arrow svg {
        display: block;
        width: 100%;
        height: 100%;
    }

    .asol-transaction-tgl .button__gradient__text-header {
        margin: 0;
        font-size: clamp(1.55rem, 3vw, 2.35rem);
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.15;
    }

    .asol-transaction-tgl .button__gradient__text-header strong {
        font-weight: inherit;
    }

    .asol-transaction-tgl .button__gradient__text-desc {
        margin: 0;
        min-width: 0;
        font-size: clamp(calc(1.014rem * var(--asol-txn-grad-text-scale)), calc(1.56vw * var(--asol-txn-grad-text-scale)), calc(1.196rem * var(--asol-txn-grad-text-scale)));
        line-height: 1.35;
        color: color-mix(in srgb, currentColor 72%, transparent);
    }

    @media (min-width: 1200px) {
        .asol-transaction-tgl .button__gradient__text-desc {
            border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent);
            padding-left: 1rem;
        }
    }

    @media (max-width: 1199.98px) {
        .asol-transaction-tgl .button__gradient__text-desc {
            display: none;
        }
    }

    .asol-transaction-tgl .button__gradient__item.is-active.is-sliding:not(.is-retracting) .button__gradient__text__wrapper {
        color: #131313;
        padding-right: calc(var(--asol-txn-grad-toggle-open) + 1rem);
    }

    html[data-ps-preset="white"] .asol-transaction-tgl .button__gradient__item,
    :root[data-theme="light"] .asol-transaction-tgl .button__gradient__item {
        --asol-txn-grad-panel: #fff;
        --asol-txn-grad-border: color-mix(in srgb, var(--publish_starter_text, #1e293b) 12%, transparent);
        box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 80%, transparent), 0 1px 2px color-mix(in srgb, #000 6%, transparent);
        color: var(--publish_starter_text, #0f172a);
    }

    html[data-ps-preset="white"] .asol-transaction-tgl .button__gradient__toggle,
    :root[data-theme="light"] .asol-transaction-tgl .button__gradient__toggle {
        background: #131313;
    }

    @media (max-width: 999.98px) {
        .asol-transaction-tgl {
            --asol-txn-grad-toggle-open: calc(12rem * var(--asol-txn-grad-scale));
        }

        .asol-transaction-tgl .button__gradient__button-text__wrapper {
            padding-inline: 0.65rem;
            gap: 0.35rem;
        }
    }

    @media (max-width: 1399.98px) {
        .asol-transaction-tgl {
            --asol-txn-grad-text-scale: 0.86;
        }

        .asol-transaction-tgl .button__gradient__text-header {
            font-size: clamp(1.45rem, 2.75vw, 2.1rem);
        }

        .asol-transaction-tgl .button__gradient__text__wrapper {
            gap: clamp(0.75rem, 1.8vw, 1.35rem);
        }
    }

    @media (max-width: 767.98px) {
        .asol-transaction-tgl-group {
            gap: clamp(0.5rem, 2vw, 0.65rem);
        }

        .asol-transaction-tgl {
            --asol-txn-grad-scale: 1;
            --asol-txn-grad-toggle-open: calc(10.5rem * var(--asol-txn-grad-scale));
            --asol-txn-grad-text-scale: 0.92;
        }

        .asol-transaction-tgl .button__gradient__text-header {
            font-size: clamp(1.12rem, 4.2vw, 1.4rem);
        }

        .asol-transaction-tgl .button__gradient__text__wrapper {
            flex-direction: row;
            align-items: center;
            gap: 0.35rem;
            padding: 0 0.5rem 0 30px;
        }

        .asol-transaction-tgl .button__gradient__button-text__wrapper {
            padding-inline: 0.5rem;
            gap: 0.3rem;
        }

        .asol-transaction-tgl .button__gradient__item:not(.is-active) .button__gradient__cover {
            -webkit-mask-image: radial-gradient(ellipse 110% 200% at 0% 50%, transparent 0%, transparent 10%, rgba(0, 0, 0, 0.14) 24%, rgba(0, 0, 0, 0.46) 36%, #000 50%);
            mask-image: radial-gradient(ellipse 110% 200% at 0% 50%, transparent 0%, transparent 10%, rgba(0, 0, 0, 0.14) 24%, rgba(0, 0, 0, 0.46) 36%, #000 50%);
        }

        .asol-transaction-tgl .button__gradient__item:not(.is-active):hover .button__gradient__cover,
        .asol-transaction-tgl .button__gradient__item.is-peek:not(.is-active) .button__gradient__cover,
        .asol-transaction-tgl .button__gradient__item:not(.is-active):focus-within .button__gradient__cover,
        .asol-transaction-tgl .button__gradient__item.is-active .button__gradient__cover {
            -webkit-mask-image: radial-gradient(ellipse 110% 200% at 0% 50%, transparent 0%, transparent 22%, rgba(0, 0, 0, 0.22) 36%, rgba(0, 0, 0, 0.58) 48%, #000 62%);
            mask-image: radial-gradient(ellipse 110% 200% at 0% 50%, transparent 0%, transparent 22%, rgba(0, 0, 0, 0.22) 36%, rgba(0, 0, 0, 0.58) 48%, #000 62%);
        }
    }

    /* 일반 스마트폰 (~360–430px, 400px 기준) */
    @media (max-width: 429.98px) {
        .asol-transaction-tgl {
            --asol-txn-grad-scale: 0.88;
            --asol-txn-grad-toggle-open: calc(9rem * var(--asol-txn-grad-scale));
        }

        .asol-transaction-tgl .button__gradient__text-header {
            font-size: clamp(1rem, 4.8vw, 1.18rem);
        }

        .asol-transaction-tgl .button__gradient__text__wrapper {
            padding: 0 0.4rem 0 40px;
        }

        .asol-transaction-tgl .button__gradient__button-text__wrapper {
            padding-inline: 0.4rem;
        }

        .asol-transaction-tgl .button__gradient__text {
            font-size: calc(0.86rem * var(--asol-txn-grad-scale));
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .asol-transaction-tgl .button__gradient__logo,
        .asol-transaction-tgl .button__gradient__button-text__wrapper {
            transition: none;
        }
    }

    /* index: section banner ↔ transaction toggles @ 1000px */
    @media (max-width: 999.98px) {
        .asol-index-section-banner {
            display: none !important;
        }
    }

    @media (min-width: 1000px) {
        .asol-index-transaction-tgl {
            display: none !important;
        }
    }