/* =========================================================
   QNTSTACK
   PRICING PAGE
   ========================================================= */


/* =========================================================
   PAGE
   ========================================================= */

.pricing-page {
    width: 100%;
    min-height: calc(100vh - 60px);

    padding:
        42px 28px 60px;

    overflow-y: auto;

    background:
        var(--bg);

    color:
        var(--text);
}


/* =========================================================
   HEADER
   ========================================================= */

.pricing-header {
    width: 100%;
    max-width: 900px;

    margin:
        0 auto 34px;

    text-align: center;
}


.pricing-eyebrow {
    margin-bottom: 10px;

    color:
        var(--accent);

    font-size:
        calc(var(--font-size) * 0.82);

    font-weight: 750;

    letter-spacing:
        1.4px;
}


.pricing-title {
    margin: 0;

    color:
        var(--text);

    font-size:
        calc(var(--font-size) * 2.15);

    font-weight: 780;

    letter-spacing:
        -0.9px;

    line-height:
        1.25;
}


.pricing-description {
    max-width: 620px;

    margin:
        12px auto 0;

    color:
        var(--text-secondary);

    font-size:
        calc(var(--font-size) * 1.02);

    line-height:
        1.65;
}


/* =========================================================
   MONTHLY / YEARLY TOGGLE
   ========================================================= */

.pricing-billing-toggle {
    width: fit-content;

    display: flex;
    align-items: center;

    gap: 4px;

    margin:
        26px auto 0;

    padding: 4px;

    border:
        1px solid var(--border-soft);

    border-radius:
        12px;

    background:
        var(--panel);

    box-shadow:
        var(--shadow);
}


.pricing-billing-button {
    min-height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding:
        0 16px;

    border: 0;

    border-radius:
        9px;

    background:
        transparent;

    color:
        var(--text-secondary);

    font-size:
        calc(var(--font-size) * 0.92);

    font-weight:
        650;

    cursor:
        pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}


.pricing-billing-button:hover {
    color:
        var(--text);

    background:
        var(--panel-soft);
}


.pricing-billing-button.active {
    background:
        var(--accent-soft);

    color:
        var(--accent);
}


.pricing-save-badge {
    padding:
        3px 6px;

    border-radius:
        6px;

    background:
        var(--card-green-bg);

    color:
        var(--card-green-accent);

    font-size:
        calc(var(--font-size) * 0.72);

    font-weight:
        750;

    white-space:
        nowrap;
}


/* =========================================================
   PLAN GRID
   ========================================================= */

.pricing-plans {
    width: 100%;
    max-width: 1120px;

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;

    align-items:
        stretch;
}


/* =========================================================
   PLAN CARD
   ========================================================= */

.pricing-plan-card {
    position: relative;

    min-width: 0;

    display: flex;
    flex-direction: column;

    padding:
        25px 24px 24px;

    border:
        1px solid var(--border-soft);

    border-radius:
        16px;

    background:
        var(--panel);

    box-shadow:
        var(--shadow);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}


.pricing-plan-card:hover {
    transform:
        translateY(-2px);

    box-shadow:
        var(--shadow-hover);
}


/* =========================================================
   STANDARD
   ========================================================= */

.pricing-plan-standard {
    border-color:
        var(--card-blue-border);
}


/* =========================================================
   PREMIUM
   ========================================================= */

.pricing-plan-premium {
    border:
        1px solid var(--template-border);

    box-shadow:
        var(--shadow),
        0 0 0 1px
        color-mix(
            in srgb,
            var(--template-accent) 10%,
            transparent
        );
}


.pricing-plan-premium:hover {
    border-color:
        var(--template-accent);
}


.pricing-popular-badge {
    position: absolute;

    top: 14px;
    right: 14px;

    padding:
        5px 8px;

    border-radius:
        7px;

    background:
        var(--template-bg);

    border:
        1px solid var(--template-border);

    color:
        var(--template-accent);

    font-size:
        calc(var(--font-size) * 0.68);

    font-weight:
        800;

    letter-spacing:
        0.4px;
}


/* =========================================================
   PLAN HEADER
   ========================================================= */

.pricing-plan-header {
    min-height: 78px;

    padding-right: 4px;
}


.pricing-plan-premium
.pricing-plan-header {
    padding-right: 90px;
}


.pricing-plan-name {
    color:
        var(--text);

    font-size:
        calc(var(--font-size) * 1.35);

    font-weight:
        750;

    letter-spacing:
        -0.3px;
}


.pricing-plan-description {
    margin-top: 7px;

    color:
        var(--text-muted);

    font-size:
        calc(var(--font-size) * 0.9);

    line-height:
        1.5;
}


/* =========================================================
   PRICE
   ========================================================= */

.pricing-price-area {
    min-height: 83px;

    margin-top: 14px;
}


.pricing-price {
    display: flex;
    align-items: baseline;

    gap: 5px;
}


.pricing-price strong {
    color:
        var(--text);

    font-size:
        calc(var(--font-size) * 2.25);

    font-weight:
        780;

    letter-spacing:
        -1px;

    line-height:
        1.1;
}


.pricing-price span {
    color:
        var(--text-muted);

    font-size:
        calc(var(--font-size) * 0.9);

    font-weight:
        550;
}


.pricing-price-note {
    margin-top: 7px;

    color:
        var(--text-muted);

    font-size:
        calc(var(--font-size) * 0.82);
}


/* =========================================================
   MONTHLY / YEARLY PRICE SWITCH
   ========================================================= */

.pricing-price-yearly {
    display: none;
}


.pricing-page[data-billing-cycle="monthly"]
.pricing-price-monthly {
    display: block;
}


.pricing-page[data-billing-cycle="monthly"]
.pricing-price-yearly {
    display: none;
}


.pricing-page[data-billing-cycle="yearly"]
.pricing-price-monthly {
    display: none;
}


.pricing-page[data-billing-cycle="yearly"]
.pricing-price-yearly {
    display: block;
}


/* =========================================================
   PLAN BUTTON
   ========================================================= */

.pricing-plan-button {
    width: 100%;
    height: 43px;

    flex-shrink: 0;

    border:
        1px solid var(--border);

    border-radius:
        10px;

    background:
        var(--panel-soft);

    color:
        var(--text);

    font-size:
        calc(var(--font-size) * 0.94);

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.1s ease,
        box-shadow 0.15s ease;
}


.pricing-plan-button:hover {
    border-color:
        var(--accent);

    box-shadow:
        var(--shadow-hover);
}


.pricing-plan-button:active {
    transform:
        scale(0.99);
}


/* FREE */

.pricing-plan-button-free {
    background:
        var(--panel-soft);

    color:
        var(--text-secondary);
}


/* STANDARD */

.pricing-plan-button-standard {
    background:
        var(--card-blue-bg);

    border-color:
        var(--card-blue-border);

    color:
        var(--card-blue-accent);
}


.pricing-plan-button-standard:hover {
    border-color:
        var(--card-blue-accent);
}


/* PREMIUM */

.pricing-plan-button-premium {
    background:
        var(--template-bg);

    border-color:
        var(--template-border);

    color:
        var(--template-accent);
}


.pricing-plan-button-premium:hover {
    border-color:
        var(--template-accent);
}


/* =========================================================
   FEATURES
   ========================================================= */

.pricing-feature-divider {
    width: 100%;
    height: 1px;

    margin:
        21px 0 18px;

    background:
        var(--border-soft);
}


.pricing-feature-list {
    display: flex;
    flex-direction: column;

    gap: 12px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.pricing-feature-list li {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    color:
        var(--text-secondary);

    font-size:
        calc(var(--font-size) * 0.9);

    line-height:
        1.45;
}


.pricing-feature-check {
    flex-shrink: 0;

    color:
        var(--card-green-accent);

    font-weight:
        800;
}


/* =========================================================
   TOKEN SECTION
   ========================================================= */

.pricing-token-section {
    width: 100%;
    max-width: 920px;

    margin:
        56px auto 0;
}


.pricing-section-header {
    text-align:
        center;
}


.pricing-section-title {
    margin: 0;

    color:
        var(--text);

    font-size:
        calc(var(--font-size) * 1.55);

    font-weight:
        750;

    letter-spacing:
        -0.4px;
}


.pricing-section-description {
    max-width: 560px;

    margin:
        8px auto 0;

    color:
        var(--text-secondary);

    font-size:
        calc(var(--font-size) * 0.92);

    line-height:
        1.6;
}


/* =========================================================
   TOKEN GRID
   ========================================================= */

.pricing-token-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 14px;

    margin-top: 24px;

    justify-content:
        center;
}


/* =========================================================
   TOKEN CARD
   ========================================================= */

.pricing-token-card {
    position: relative;

    min-width: 0;

    padding:
        22px 20px 20px;

    border:
        1px solid var(--border-soft);

    border-radius:
        14px;

    background:
        var(--panel);

    box-shadow:
        var(--shadow);

    text-align:
        center;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}


.pricing-token-card:hover {
    transform:
        translateY(-2px);

    box-shadow:
        var(--shadow-hover);
}


.pricing-token-card-featured {
    border-color:
        var(--template-border);
}


.pricing-token-best {
    position: absolute;

    top: 10px;
    right: 10px;

    padding:
        4px 7px;

    border-radius:
        6px;

    background:
        var(--template-bg);

    color:
        var(--template-accent);

    font-size:
        calc(var(--font-size) * 0.65);

    font-weight:
        800;

    letter-spacing:
        0.3px;
}


.pricing-token-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin:
        2px auto 11px;

    border:
        1px solid var(--template-border);

    border-radius:
        11px;

    background:
        var(--template-bg);

    color:
        var(--template-accent);

    font-size:
        calc(var(--font-size) * 1.15);
}


.pricing-token-amount {
    color:
        var(--text);

    font-size:
        calc(var(--font-size) * 1.55);

    font-weight:
        780;

    letter-spacing:
        -0.4px;
}


.pricing-token-label {
    margin-top: 2px;

    color:
        var(--text-muted);

    font-size:
        calc(var(--font-size) * 0.85);
}


.pricing-token-price {
    min-height: 24px;

    margin-top: 12px;

    color:
        var(--text-secondary);

    font-size:
        calc(var(--font-size) * 1.02);

    font-weight:
        700;
}


/* =========================================================
   TOKEN BUTTON
   ========================================================= */

.pricing-token-button {
    width: 100%;
    height: 39px;

    margin-top: 14px;

    border:
        1px solid var(--template-border);

    border-radius:
        9px;

    background:
        var(--template-bg);

    color:
        var(--template-accent);

    font-size:
        calc(var(--font-size) * 0.88);

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        border-color 0.15s ease,
        transform 0.1s ease,
        box-shadow 0.15s ease;
}


.pricing-token-button:hover {
    border-color:
        var(--template-accent);

    box-shadow:
        var(--shadow-hover);
}


.pricing-token-button:active {
    transform:
        scale(0.99);
}


/* =========================================================
   PRICE NOTICE
   ========================================================= */

.pricing-price-notice {
    width: 100%;
    max-width: 900px;

    margin:
        30px auto 0;

    padding-top:
        18px;

    border-top:
        1px solid var(--border-soft);

    color:
        var(--text-muted);

    font-size:
        calc(var(--font-size) * 0.8);

    line-height:
        1.6;

    text-align:
        center;
}


/* =========================================================
   TABLET

   플랜 / 토큰 모두
   카드 자체를 가운데 정렬
   ========================================================= */

@media (max-width: 900px) {

    .pricing-page {
        padding:
            34px 20px 50px;
    }


    .pricing-title {
        font-size:
            calc(var(--font-size) * 1.85);
    }


    /* -------------------------
       PLAN
       ------------------------- */

    .pricing-plans {
        grid-template-columns:
            repeat(
                2,
                minmax(260px, 340px)
            );

        justify-content:
            center;
    }


    .pricing-plan-card:last-child {
        grid-column:
            1 / -1;

        width: 100%;
        max-width: 340px;

        justify-self:
            center;
    }


    /* -------------------------
       TOKEN
       ------------------------- */

    .pricing-token-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(220px, 280px)
            );

        justify-content:
            center;
    }


    .pricing-token-card:last-child {
        grid-column:
            1 / -1;

        width: 100%;
        max-width: 280px;

        justify-self:
            center;
    }

}



/* =========================================
   Token Badges
   ========================================= */

/* BEST VALUE */
.pricing-token-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;

    padding: 5px 10px;
    border-radius: 999px;

    background: var(--accent);
    color: #ffffff;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.04em;
    white-space: nowrap;
}




.pricing-token-price-row {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;
    margin-top: 12px;
}

.pricing-token-price-row .pricing-token-price {
    margin-top: 0;
}

.pricing-token-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 4px 8px;
    border-radius: 999px;

    background: var(--accent-soft);
    color: var(--accent);

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

    .pricing-page {
        padding:
            28px 14px 44px;
    }


    .pricing-header {
        margin-bottom:
            26px;
    }


    .pricing-title {
        font-size:
            calc(var(--font-size) * 1.65);

        letter-spacing:
            -0.5px;
    }


    .pricing-description {
        font-size:
            calc(var(--font-size) * 0.92);
    }


    /* -------------------------
       BILLING TOGGLE
       ------------------------- */

    .pricing-billing-toggle {
        width: 100%;
        max-width: 330px;
    }


    .pricing-billing-button {
        flex: 1;

        padding:
            0 10px;
    }


    /* -------------------------
       PLANS
       ------------------------- */

    .pricing-plans {
        grid-template-columns:
            minmax(0, 360px);

        justify-content:
            center;

        gap:
            14px;
    }


    .pricing-plan-card,
    .pricing-plan-card:last-child {
        grid-column:
            auto;

        width: 100%;
        max-width: 360px;

        justify-self:
            center;
    }


    .pricing-plan-card {
        padding:
            22px 20px;
    }


    .pricing-plan-header {
        min-height:
            auto;

        margin-bottom:
            6px;
    }


    .pricing-plan-premium
    .pricing-plan-header {
        padding-right:
            85px;
    }


    /* -------------------------
       TOKEN SECTION
       ------------------------- */

    .pricing-token-section {
        margin-top:
            44px;
    }


    .pricing-token-grid {
        grid-template-columns:
            minmax(0, 300px);

        justify-content:
            center;

        gap:
            12px;
    }


    .pricing-token-card,
    .pricing-token-card:last-child {
        grid-column:
            auto;

        width: 100%;
        max-width: 300px;

        justify-self:
            center;
    }


    /* -------------------------
       NOTICE
       ------------------------- */

    .pricing-price-notice {
        margin-top:
            26px;
    }

}


/* =========================================================
   SUBSCRIPTION AND REFUND POLICY
   ========================================================= */

   .pricing-policy-section {
    width: 100%;
    max-width: 900px;

    margin: 36px auto 0;
    padding: 24px 28px;

    background: var(--panel);

    border: 1px solid var(--border-soft);
    border-radius: 14px;
}

.pricing-policy-title {
    margin: 0 0 18px;

    color: var(--text);

    font-size: calc(var(--font-size) * 1.05);
    font-weight: 700;
}

.pricing-policy-list {
    margin: 0;
    padding-left: 20px;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pricing-policy-list li {
    padding-left: 4px;

    color: var(--text-secondary);

    font-size: calc(var(--font-size) * 0.85);
    line-height: 1.7;
}

.pricing-policy-list li::marker {
    color: var(--text-muted);
    font-weight: 600;
}

/* MOBILE */

@media (max-width: 620px) {
    .pricing-policy-section {
        margin-top: 28px;
        padding: 20px 18px;
    }

    .pricing-policy-title {
        font-size: calc(var(--font-size) * 1);
    }

    .pricing-policy-list {
        padding-left: 18px;
        gap: 12px;
    }

    .pricing-policy-list li {
        font-size: calc(var(--font-size) * 0.82);
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .pricing-save-badge {
        display:
            none;
    }


    .pricing-plan-premium
    .pricing-plan-header {
        padding-right:
            0;
    }


    .pricing-popular-badge {
        position:
            static;

        width:
            fit-content;

        margin-bottom:
            12px;
    }

}