/* =========================================================
   TAROT LANGUAGE SWITCH BANNER · v84
========================================================= */

.tarot-language-switch-wrap {
    --language-switch-accent:
        var(
            --tarot-accent,
            var(
                --primary,
                #52b788
            )
        );

    position:
        fixed;

    z-index:
        2147482000;

    top:
        calc(
            env(
                safe-area-inset-top
            )
            +
            74px
        );

    left:
        50%;

    width:
        min(
            680px,
            calc(
                100vw
                -
                24px
            )
        );

    transform:
        translateX(
            -50%
        );

    pointer-events:
        none;
}


.tarot-language-switch-wrap[hidden] {
    display:
        none
        !important;
}


.tarot-language-switch {
    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

    padding:
        11px
        12px;

    border:
        1px
        solid
        color-mix(
            in srgb,
            var(
                --border,
                rgba(
                    74,
                    112,
                    92,
                    .16
                )
            )
            74%,
            var(
                --language-switch-accent
            )
            26%
        );

    border-radius:
        16px;

    background:
        color-mix(
            in srgb,
            var(
                --glass-solid,
                #ffffff
            )
            94%,
            var(
                --language-switch-accent
            )
            6%
        );

    color:
        var(
            --text,
            #28332e
        );

    box-shadow:
        0
        10px
        34px
        rgba(
            28,
            43,
            35,
            .14
        );

    -webkit-backdrop-filter:
        blur(
            18px
        );

    backdrop-filter:
        blur(
            18px
        );

    opacity:
        0;

    transform:
        translateY(
            -145%
        );

    pointer-events:
        auto;

    will-change:
        transform,
        opacity;
}


html[data-theme="dark"]
.tarot-language-switch {
    background:
        color-mix(
            in srgb,
            var(
                --glass-solid,
                #203229
            )
            92%,
            var(
                --language-switch-accent
            )
            8%
        );

    box-shadow:
        0
        12px
        38px
        rgba(
            0,
            0,
            0,
            .30
        );
}


.tarot-language-switch.is-in {
    animation:
        tarotLanguageBannerIn
        .62s
        cubic-bezier(
            .34,
            1.56,
            .64,
            1
        )
        forwards;
}


.tarot-language-switch.is-out {
    animation:
        tarotLanguageBannerOut
        .28s
        ease
        forwards;
}


@keyframes tarotLanguageBannerIn {

    0% {
        opacity:
            0;

        transform:
            translateY(
                -145%
            );
    }

    70% {
        opacity:
            1;

        transform:
            translateY(
                6px
            );
    }

    100% {
        opacity:
            1;

        transform:
            translateY(
                0
            );
    }

}


@keyframes tarotLanguageBannerOut {

    0% {
        opacity:
            1;

        transform:
            translateY(
                0
            );
    }

    100% {
        opacity:
            0;

        transform:
            translateY(
                -125%
            );
    }

}


.tarot-language-switch-main {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.tarot-language-switch-icon {
    width:
        30px;

    height:
        30px;

    flex:
        0
        0
        30px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        color-mix(
            in srgb,
            var(
                --language-switch-accent
            )
            15%,
            transparent
        );

    color:
        var(
            --language-switch-accent
        );
}


.tarot-language-switch-icon svg {
    width:
        16px;

    height:
        16px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.tarot-language-switch-title {
    flex:
        1
        1
        auto;

    min-width:
        0;

    margin:
        0;

    color:
        var(
            --text,
            #28332e
        );

    font-size:
        14px;

    font-weight:
        800;

    line-height:
        1.35;

    letter-spacing:
        -.25px;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.tarot-language-switch-actions {
    flex:
        0
        0
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        6px;
}


.tarot-language-switch-button {
    min-width:
        54px;

    height:
        32px;

    padding:
        0
        13px;

    border:
        0;

    border-radius:
        10px;

    font:
        inherit;

    font-size:
        12px;

    font-weight:
        750;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        transform
        .16s
        ease,
        filter
        .16s
        ease,
        background
        .16s
        ease,
        color
        .16s
        ease;
}


.tarot-language-switch-button:hover {
    filter:
        brightness(
            1.03
        );
}


.tarot-language-switch-button:active {
    transform:
        scale(
            .96
        );
}


.tarot-language-switch-button:focus-visible,
.tarot-language-switch-check input:focus-visible {
    outline:
        2px
        solid
        color-mix(
            in srgb,
            var(
                --language-switch-accent
            )
            78%,
            white
            22%
        );

    outline-offset:
        2px;
}


.tarot-language-switch-button.is-primary {
    background:
        var(
            --language-switch-accent
        );

    color:
        #ffffff;
}


.tarot-language-switch-button.is-secondary {
    background:
        color-mix(
            in srgb,
            var(
                --text,
                #28332e
            )
            9%,
            transparent
        );

    color:
        var(
            --text-soft,
            #858d87
        );
}


html[data-theme="dark"]
.tarot-language-switch-button.is-secondary {
    background:
        rgba(
            255,
            255,
            255,
            .075
        );
}


.tarot-language-switch-divider {
    height:
        1px;

    margin:
        0
        -12px;

    background:
        var(
            --border,
            rgba(
                74,
                112,
                92,
                .16
            )
        );
}


.tarot-language-switch-bottom {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    padding-left:
        40px;
}


.tarot-language-switch-check {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(
            --text-soft,
            #858d87
        );

    font-size:
        11.5px;

    line-height:
        1.3;

    cursor:
        pointer;

    user-select:
        none;

    -webkit-user-select:
        none;
}


.tarot-language-switch-check input {
    width:
        15px;

    height:
        15px;

    flex:
        0
        0
        auto;

    margin:
        0;

    accent-color:
        var(
            --language-switch-accent
        );

    cursor:
        pointer;
}


.tarot-language-switch-hint {
    flex:
        0
        0
        auto;

    color:
        var(
            --text-soft,
            #858d87
        );

    font-size:
        10.5px;

    font-weight:
        650;

    opacity:
        .78;

    white-space:
        nowrap;
}


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

@media (
    max-width:
    640px
) {

    .tarot-language-switch-wrap {
        top:
            calc(
                env(
                    safe-area-inset-top
                )
                +
                68px
            );

        width:
            calc(
                100vw
                -
                18px
            );
    }


    .tarot-language-switch {
        gap:
            8px;

        padding:
            10px
            10px;

        border-radius:
            15px;
    }


    .tarot-language-switch-main {
        gap:
            8px;
    }


    .tarot-language-switch-icon {
        width:
            28px;

        height:
            28px;

        flex-basis:
            28px;
    }


    .tarot-language-switch-title {
        font-size:
            13px;
    }


    .tarot-language-switch-button {
        min-width:
            45px;

        height:
            30px;

        padding:
            0
            10px;

        border-radius:
            9px;

        font-size:
            11.5px;
    }


    .tarot-language-switch-divider {
        margin:
            0
            -10px;
    }


    .tarot-language-switch-bottom {
        padding-left:
            36px;
    }


    .tarot-language-switch-check {
        font-size:
            10.5px;
    }


    .tarot-language-switch-hint {
        font-size:
            9.5px;
    }

}


/* 아주 좁은 모바일: 제목과 버튼을 억지로 한 줄에 압축하지 않음 */

@media (
    max-width:
    390px
) {

    .tarot-language-switch-main {
        display:
            grid;

        grid-template-columns:
            28px
            minmax(
                0,
                1fr
            )
            auto;
    }


    .tarot-language-switch-actions {
        gap:
            4px;
    }


    .tarot-language-switch-button {
        min-width:
            40px;

        padding:
            0
            8px;
    }


    .tarot-language-switch-bottom {
        padding-left:
            36px;

        gap:
            6px;
    }

}


/* 모션 최소화 설정 존중 */

@media (
    prefers-reduced-motion:
    reduce
) {

    .tarot-language-switch.is-in,
    .tarot-language-switch.is-out {
        animation-duration:
            .01ms;
    }

}