/* =========================================================
   Lunar Soopoolleaf
   FREE DRAW
========================================================= */

:root {

    --bg:
        #f4f1e8;

    --stage:
        #f7f4ec;

    --glass:
        rgba(255, 255, 255, .76);

    --glass-solid:
        #ffffff;

    --text:
        #28332e;

    --text-soft:
        #858d87;

    --primary:
        #52b788;

    --secondary:
        #5ac8bd;

    --tree:
        #a67c52;

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

    --shadow:
        0 8px 30px
        rgba(52, 70, 60, .10);

    --card-shadow:
        0 12px 30px
        rgba(40, 45, 42, .17);

}


/* =========================================================
   DARK
========================================================= */

html[data-theme="dark"] {

    --bg:
        #14211c;

    --stage:
        #17261f;

    --glass:
        rgba(31, 48, 40, .86);

    --glass-solid:
        #203229;

    --text:
        #eef5f1;

    --text-soft:
        #94a39b;

    --border:
        rgba(112, 168, 138, .18);

    --shadow:
        0 9px 30px
        rgba(0, 0, 0, .25);

    --card-shadow:
        0 15px 35px
        rgba(0, 0, 0, .34);

}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {

    box-sizing:
        border-box;

}

html,
body {

    width:
        100%;

    height:
        100%;

    padding:
        0;

    margin:
        0;

}

body {

    overflow:
        hidden;

    background:
        var(--bg);

    color:
        var(--text);

    font-family:
        "Pretendard",
        "Noto Sans KR",
        "Apple SD Gothic Neo",
        "Malgun Gothic",
        sans-serif;

}

button,
a {

    font:
        inherit;

}


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

.free-page {

    position:
        relative;

    width:
        100%;

    height:
        100dvh;

    overflow:
        hidden;

    background:
        var(--bg);

}


/* =========================================================
   TOOLBAR
========================================================= */

.free-toolbar {

    position:
        absolute;

    z-index:
        100000;

    top:
        15px;

    left:
        50%;

    width:
        calc(100% - 30px);

    max-width:
        1180px;

    min-height:
        48px;

    padding:
        5px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    transform:
        translateX(-50%);

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

    border-radius:
        17px;

    background:
        var(--glass);

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(18px);

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

}


.free-toolbar-right {

    display:
        flex;

    align-items:
        center;

    gap:
        3px;

}


.free-toolbar-button {

    min-height:
        38px;

    padding:
        0 12px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border:
        0;

    border-radius:
        12px;

    background:
        transparent;

    color:
        var(--text-soft);

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        background .18s ease,
        color .18s ease;

}


.free-toolbar-button:hover {

    background:
        rgba(82, 183, 136, .10);

    color:
        var(--text);

}


.free-toolbar-button svg {

    width:
        17px;

    height:
        17px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


.free-menu-button {

    color:
        var(--text);

    font-weight:
        600;

}


.free-theme-button {

    width:
        38px;

    height:
        38px;

    flex:
        0 0 auto;

    border:
        0;

    border-radius:
        50%;

    background:
        transparent;

    color:
        var(--text);

    cursor:
        pointer;

}


/* =========================================================
   STAGE
========================================================= */

.free-stage {

    position:
        absolute;

    z-index:
        1;

    inset:
        0;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 14% 15%,
            rgba(82, 183, 136, .07),
            transparent 31%
        ),

        radial-gradient(
            circle at 87% 83%,
            rgba(90, 200, 189, .065),
            transparent 30%
        ),

        repeating-linear-gradient(
            0deg,
            rgba(100, 82, 61, .012) 0,
            rgba(100, 82, 61, .012) 1px,
            transparent 1px,
            transparent 4px
        ),

        var(--stage);

}


/*
 * 아주 약한 종이 질감
 */
.free-stage::after {

    content:
        "";

    position:
        absolute;

    z-index:
        0;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        .32;

    background:

        radial-gradient(
            circle,
            rgba(30, 50, 40, .035) 0 1px,
            transparent 1.2px
        );

    background-size:
        8px 8px;

}


/* =========================================================
   COPYRIGHT
========================================================= */

.free-copyright {

    position:
        absolute;

    z-index:
        2;

    left:
        21px;

    bottom:
        16px;

    color:
        var(--text-soft);

    font-size:
        10px;

    letter-spacing:
        .15px;

    opacity:
        .64;

    pointer-events:
        none;

}


/* =========================================================
   EMPTY
========================================================= */

.free-empty {

    position:
        absolute;

    z-index:
        2;

    top:
        50%;

    left:
        50%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        4px;

    transform:
        translate(
            -50%,
            -50%
        );

    text-align:
        center;

    pointer-events:
        none;

    transition:
        opacity .2s ease;

}


.free-empty.is-hidden {

    opacity:
        0;

}


.free-empty-symbol {

    margin-bottom:
        6px;

    color:
        var(--primary);

    font-size:
        24px;

}


.free-empty strong {

    color:
        var(--text);

    font-size:
        16px;

    font-weight:
        650;

}


.free-empty span {

    color:
        var(--text-soft);

    font-size:
        12px;

}


/* =========================================================
   CARD LAYER
========================================================= */

.free-card-layer {

    position:
        absolute;

    z-index:
        10;

    inset:
        0;

}


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

.free-card {

    position:
        absolute;

    width:
        clamp(
            94px,
            10.6vw,
            148px
        );

    /*
     * 비율은 안쪽 <img> 가 갖습니다.
     * 바깥 박스에 8/13 을 주면 padding(4px)+border(1px) 때문에
     * 사진 상하에만 여백이 더 생기므로 높이는 auto 로 둡니다.
     */
    height:
        auto;

    padding:
        4px;

    border:
        1px solid
        rgba(255, 255, 255, .72);

    border-radius:
        9px;

    background:
        rgba(255, 255, 255, .88);

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

    cursor:
        grab;

    touch-action:
        none;

    user-select:
        none;

    -webkit-user-select:
        none;

    transition:
        box-shadow .15s ease,
        scale .15s ease;

    will-change:
        left,
        top;

}


.free-card:hover {

    scale:
        1.018;

    box-shadow:
        0 17px 36px
        rgba(39, 49, 43, .22);

}


.free-card.is-dragging {

    cursor:
        grabbing;

    scale:
        1.025;

    box-shadow:
        0 22px 48px
        rgba(28, 37, 32, .29);

}


.free-card img {

    display:
        block;

    width:
        100%;

    height:
        auto;

    /* RWS 카드 실제 비율 720x1170 = 8/13 */
    aspect-ratio:
        8 / 13;

    border-radius:
        5px;

    object-fit:
        contain;

    pointer-events:
        none;

    -webkit-user-drag:
        none;

}


/* =========================================================
   STATUS
========================================================= */

.free-status {

    position:
        absolute;

    z-index:
        100001;

    left:
        50%;

    bottom:
        20px;

    height:
        32px;

    padding:
        0 12px;

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    transform:
        translateX(-50%);

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

    border-radius:
        100px;

    background:
        var(--glass);

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, .07);

    backdrop-filter:
        blur(14px);

    color:
        var(--text-soft);

    font-size:
        11px;

}


.free-status strong {

    color:
        var(--text);

    font-weight:
        700;

}


/* =========================================================
   ADD BUTTON
========================================================= */

.free-add-button {

    position:
        absolute;

    z-index:
        100002;

    right:
        24px;

    bottom:
        22px;

    min-width:
        55px;

    height:
        55px;

    padding:
        0 17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    border:
        0;

    border-radius:
        100px;

    background:
        linear-gradient(
            135deg,
            var(
                --tarot-accent,
                var(--primary)
            ),
            var(
                --tarot-accent-strong,
                var(--secondary)
            )
        );

    box-shadow:
    0 12px 28px
    var(
        --tarot-accent-shadow,
        rgba(53, 154, 113, .30)
    );

    color:
        #ffffff;

    cursor:
        pointer;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        opacity .16s ease;

}


.free-add-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 17px 36px
        var(
            --tarot-accent-shadow,
            rgba(53, 154, 113, .36)
        );

}


.free-add-button:active {

    transform:
        scale(.97);

}


.free-add-button:disabled {

    cursor:
        default;

    opacity:
        .42;

}


.free-add-icon {

    margin-top:
        -2px;

    font-size:
        27px;

    font-weight:
        300;

    line-height:
        1;

}


.free-add-text {

    font-size:
        12px;

    font-weight:
        700;

}


/* =========================================================
   TOAST
========================================================= */

.free-toast {

    position:
        fixed;

    z-index:
        200000;

    top:
        82px;

    left:
        50%;

    max-width:
        calc(100% - 30px);

    padding:
        10px 15px;

    transform:
        translate(
            -50%,
            -10px
        );

    border-radius:
        100px;

    background:
        rgba(36, 47, 41, .88);

    color:
        white;

    font-size:
        12px;

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity .2s ease,
        transform .2s ease;

}


.free-toast.is-visible {

    opacity:
        1;

    transform:
        translate(
            -50%,
            0
        );

}


/* =========================================================
   저장 중에는 UI 제외
========================================================= */

body.free-exporting
.free-empty {

    display:
        none;

}


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

@media (max-width: 640px) {

    .free-toolbar {

        top:
            8px;

        width:
            calc(100% - 16px);

        min-height:
            44px;

        border-radius:
            14px;

    }


    .free-toolbar-button {

        min-height:
            34px;

        padding:
            0 8px;

    }


    .free-toolbar-button span {

        display:
            none;

    }


    .free-menu-button span {

        display:
            inline;

        font-size:
            11px;

    }


    .free-theme-button {

        width:
            34px;

        height:
            34px;

    }


    .free-card {

        width:
            clamp(
                72px,
                23vw,
                100px
            );

        padding:
            3px;

        border-radius:
            7px;

    }


    .free-add-button {

        right:
            13px;

        bottom:
            14px;

        width:
            50px;

        min-width:
            50px;

        height:
            50px;

        padding:
            0;

    }


    .free-add-text {

        display:
            none;

    }


    .free-status {

        bottom:
            15px;

    }


    .free-copyright {

        left:
            12px;

        bottom:
            10px;

        font-size:
            8px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .free-card,
    .free-add-button,
    .free-toast {

        transition:
            none;

    }

}

/* =========================================================
   FREE DRAW TOOLBAR TITLE
========================================================= */

.free-toolbar-title {

    position: absolute;

    top: 50%;
    left: 50%;

    max-width: 34%;

    margin: 0;

    overflow: hidden;

    transform:
        translate(
            -50%,
            -50%
        );

    color:
        var(--text);

    font-size: 13px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: -.3px;

    text-align: center;

    white-space: nowrap;

    text-overflow: ellipsis;

    pointer-events: none;

    user-select: none;

    -webkit-user-select: none;

}


/*
 * 색상을 변경하면 제목도
 * 선택한 배경에 맞는 text 색을 사용하므로
 * 자동으로 가독성이 유지됨
 */


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

@media (max-width: 640px) {

    .free-toolbar-title {

        max-width: 33vw;

        font-size: 12px;

    }


    /*
     * 모바일에서는 왼쪽 '타로 메뉴' 글자를 감춰
     * 가운데 자유 드로우 제목 공간 확보.
     *
     * 메뉴 아이콘은 그대로 남음.
     */

    .free-menu-button span {

        display: none !important;

    }

}


/*
 * 정말 좁은 모바일
 */

@media (max-width: 390px) {

    .free-toolbar-title {

        max-width: 30vw;

        font-size: 11px;

    }

}

/* =========================================================
   MAX CARD STATE
========================================================= */

.free-add-button.is-maxed {

    opacity: .72;

    cursor: pointer;

}


.free-add-button.is-maxed:hover {

    transform: translateY(-1px);

}


.free-add-button.is-maxed .free-add-icon {

    transform: rotate(45deg);

    transition: transform .2s ease;

}

/* =========================================================
   FREE TOOLBAR LEFT
========================================================= */

.free-toolbar-left {

    display: flex;

    align-items: center;

    gap: 2px;

    min-width: 0;

}


/* =========================================================
   CARD SIZE CYCLE BUTTON
   후보 3
========================================================= */

.free-card-size-cycle {

    min-height: 34px;

    padding:
        0
        10px
        0
        8px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    border: 0;

    border-radius: 11px;

    background: transparent;

    color: var(--text-soft);

    font-family: inherit;

    cursor: pointer;

    white-space: nowrap;

    transition:
        background .18s ease,
        color .18s ease,
        transform .16s ease;

}


.free-card-size-cycle:hover {

    background:
        var(
            --tarot-accent-hover,
            rgba(82, 183, 136, .10)
        );

    color:
        var(--text);

}


.free-card-size-cycle:active {

    transform:
        scale(.95);

}


/* =========================================================
   카드 모양 아이콘 공간
========================================================= */

.free-card-size-icon {

    width: 18px;
    height: 23px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 18px;

}


/* 실제 카드 모양 */

.free-card-size-icon > span {

    display: block;

    width: 11px;

    /* RWS 카드 실제 비율 720x1170 = 8/13 */
    aspect-ratio:
        8 / 13;

    border-radius:
        2.5px;

    background:
        currentColor;

    box-shadow:
        inset
        0
        0
        0
        1px
        rgba(255, 255, 255, .14);

    transition:
        width .20s
        cubic-bezier(.2, .8, .2, 1),
        background .18s ease;

}


/* =========================================================
   현재 크기에 따라 아이콘도 변경
========================================================= */

.free-card-size-cycle[data-size="s"]
.free-card-size-icon > span {

    width: 8px;

}


.free-card-size-cycle[data-size="m"]
.free-card-size-icon > span {

    width: 11px;

}


.free-card-size-cycle[data-size="l"]
.free-card-size-icon > span {

    width: 14px;

}


.free-card-size-cycle[data-size="xl"]
.free-card-size-icon > span {

    width: 17px;

}


/* 선택된 크기 아이콘에 현재 테마 accent */

.free-card-size-cycle
.free-card-size-icon > span {

    background:
        var(
            --tarot-accent,
            currentColor
        );

}


/* =========================================================
   SIZE LABEL
========================================================= */

.free-card-size-label {

    min-width: 20px;

    color: var(--text-soft);

    font-size: 12px;

    font-weight: 650;

    line-height: 1;

    text-align: center;

}


.free-card-size-cycle:hover
.free-card-size-label {

    color: var(--text);

}


/* =========================================================
   ACTUAL TAROT CARD SIZE

   현재 중 사이즈를 100% 기준으로 사용

   중요:
   기존 .free-card의 width를 직접 지우지 않아도 됩니다.
   scale을 이용해 기존 크기를 기준으로 변경합니다.
========================================================= */





/* =========================================================
   SIZE CHANGE ANIMATION

   zoom 자체 transition은 지원이 일정하지 않아
   카드에 짧은 pop 애니메이션 적용
========================================================= */

.free-card.is-size-changing {

    animation:
        freeCardSizePop
        .24s
        cubic-bezier(.2, .8, .2, 1);

}


@keyframes freeCardSizePop {

    0% {

        opacity: .86;

    }

    50% {

        opacity: 1;

        filter:
            brightness(1.04);

    }

    100% {

        opacity: 1;

        filter:
            none;

    }

}


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

@media (max-width: 640px) {

    /*
     * 타로 메뉴 글자와 마찬가지로
     * 카드 크기 텍스트도 숨기고
     * 아이콘만 남깁니다.
     */

    .free-card-size-label {

        display: none;

    }


    .free-card-size-cycle {

        width: 34px;

        height: 34px;

        min-height: 34px;

        padding: 0;

        border-radius: 50%;

    }


    .free-card-size-icon {

        width: 18px;

        flex-basis: 18px;

    }

}

/* =========================================================
   REAL CARD SIZE
   zoom 사용하지 않음
   실제 width를 변경해서 드래그 좌표와 화면을 일치시킴
========================================================= */

.free-page {

    /*
     * PC 기준 현재 기존 카드 크기 = 중
     */

    --free-card-width:
        clamp(
            94px,
            10.6vw,
            148px
        );

}


/* 소 */

.free-page[data-card-size="s"] {

    --free-card-width:
        clamp(
            73px,
            8.25vw,
            115px
        );

}


/* 중 */

.free-page[data-card-size="m"] {

    --free-card-width:
        clamp(
            94px,
            10.6vw,
            148px
        );

}


/* 대 */

.free-page[data-card-size="l"] {

    --free-card-width:
        clamp(
            119px,
            13.45vw,
            188px
        );

}


/* 특대 */

.free-page[data-card-size="xl"] {

    --free-card-width:
        clamp(
            146px,
            16.45vw,
            229px
        );

}


/* 실제 카드 */

.free-card {

    width:
        var(--free-card-width)
        !important;

    height:
        auto !important;

    aspect-ratio:
        auto !important;

}


/* 카드 이미지 */

.free-card img {

    display:
        block;

    width:
        100%;

    height:
        auto;

    /* RWS 카드 실제 비율 720x1170 = 8/13 */
    aspect-ratio:
        8 / 13;

    object-fit:
        contain;

    pointer-events:
        none;

    user-select:
        none;

    -webkit-user-drag:
        none;

}


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

@media (max-width: 640px) {

    /*
     * 모바일 중 사이즈는
     * 지금 사용하던 기존 크기를 그대로 기준으로 함
     */

    .free-page {

        --free-card-width:
            clamp(
                72px,
                23vw,
                100px
            );

    }


    .free-page[data-card-size="s"] {

        --free-card-width:
            clamp(
                56px,
                18vw,
                78px
            );

    }


    .free-page[data-card-size="m"] {

        --free-card-width:
            clamp(
                72px,
                23vw,
                100px
            );

    }


    .free-page[data-card-size="l"] {

        --free-card-width:
            clamp(
                91px,
                29vw,
                127px
            );

    }


    .free-page[data-card-size="xl"] {

        --free-card-width:
            clamp(
                112px,
                35.5vw,
                155px
            );

    }

}


/* =========================================================
   FREE DRAW · BLOCK / MULTI SELECTION
   빈 공간 드래그 → 여러 카드 선택
   선택된 카드 드래그 → 전체 이동
========================================================= */

/*
 * 모바일에서도 빈 공간 드래그 선택이
 * 브라우저 스크롤 제스처로 끊기지 않게 합니다.
 */
.free-stage {
    touch-action: none;
}


/* ---------------------------------------------------------
   드래그 중 나타나는 선택 사각형
--------------------------------------------------------- */

.free-selection-marquee {
    position: absolute;

    z-index: 9000;

    left: 0;
    top: 0;

    width: 0;
    height: 0;

    display: block;

    border:
        1.5px dashed
        var(
            --tarot-accent,
            var(--primary)
        );

    border-radius: 10px;

    background:
        var(
            --tarot-accent-soft,
            rgba(82, 183, 136, .10)
        );

    box-shadow:
        0 0 0 1px
        var(
            --tarot-accent-shadow,
            rgba(82, 183, 136, .10)
        ),
        inset 0 0 22px
        var(
            --tarot-accent-soft,
            rgba(82, 183, 136, .08)
        );

    opacity: 0;

    pointer-events: none;

    transform: scale(.985);

    transform-origin: center;

    transition:
        opacity .08s ease,
        transform .08s ease;
}


.free-selection-marquee.is-visible {
    opacity: 1;

    transform: scale(1);
}


/* ---------------------------------------------------------
   선택 완료 후 남는 그룹 프레임
--------------------------------------------------------- */

.free-selection-group {
    position: absolute;

    z-index: 9100;

    left: 0;
    top: 0;

    width: 0;
    height: 0;

    border:
        1.5px dashed
        var(
            --tarot-accent,
            var(--primary)
        );

    border-radius: 12px;

    background:
        transparent;

    box-shadow:
        0 0 0 3px
        var(
            --tarot-accent-soft,
            rgba(82, 183, 136, .08)
        );

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .14s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


.free-selection-group.is-visible {
    opacity: 1;
}


.free-selection-group.is-moving {
    border-style: solid;

    box-shadow:
        0 0 0 4px
        var(
            --tarot-accent-soft,
            rgba(82, 183, 136, .12)
        ),
        0 10px 26px
        var(
            --tarot-accent-shadow,
            rgba(0, 0, 0, .12)
        );
}


/* 선택된 장수 + 전체 이동 안내 */

.free-selection-count {
    position: absolute;

    top: 6px;
    right: 6px;

    min-height: 25px;

    padding: 0 9px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        var(
            --tarot-accent-border,
            var(--border)
        );

    border-radius: 999px;

    background:
        var(
            --glass-solid,
            var(--surface)
        );

    color:
        var(
            --tarot-accent-strong,
            var(--text)
        );

    box-shadow:
        0 5px 14px
        rgba(0, 0, 0, .10);

    font-size: 10.5px;

    font-weight: 750;

    line-height: 1;

    letter-spacing: -.15px;

    white-space: nowrap;

    pointer-events: none;
}


/* ---------------------------------------------------------
   실제로 선택된 카드
--------------------------------------------------------- */

.free-card.is-selected {
    outline:
        3px solid
        var(
            --tarot-accent,
            var(--primary)
        );

    outline-offset: 3px;

    box-shadow:
        0 0 0 5px
        var(
            --tarot-accent-soft,
            rgba(82, 183, 136, .11)
        ),
        var(
            --card-shadow,
            0 12px 30px rgba(40, 45, 42, .17)
        )
        !important;

    cursor: move;
}


.free-card.is-selected:not(.is-group-dragging) {
    animation:
        freeSelectedCardPulse
        1.55s
        ease-in-out
        infinite;
}


@keyframes freeSelectedCardPulse {

    0%,
    100% {
        outline-color:
            var(
                --tarot-accent,
                var(--primary)
            );
    }

    50% {
        outline-color:
            var(
                --tarot-accent-strong,
                var(--primary)
            );
    }

}


/* 여러 장 전체 이동 중 */

.free-card.is-group-dragging {
    cursor: grabbing !important;

    transition: none !important;

    animation: none !important;
}


.free-stage.is-marquee-selecting {
    cursor: crosshair;
}


/* ---------------------------------------------------------
   선택 UI는 저장 PNG에는 포함하지 않음
--------------------------------------------------------- */

body.free-exporting
.free-selection-marquee,

body.free-exporting
.free-selection-group {

    display: none !important;

}


body.free-exporting
.free-card.is-selected {

    outline: none !important;

    animation: none !important;

    box-shadow:
        var(
            --card-shadow,
            0 12px 30px rgba(40, 45, 42, .17)
        )
        !important;

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 640px) {

    .free-selection-group {
        border-radius: 10px;
    }


    .free-selection-count {
        min-height: 22px;

        padding: 0 7px;

        font-size: 9.5px;
    }


    .free-card.is-selected {
        outline-width: 2px;

        outline-offset: 2px;
    }

}


/* ---------------------------------------------------------
   ACCESSIBILITY
--------------------------------------------------------- */

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

    .free-selection-marquee,
    .free-selection-group,
    .free-card.is-selected {

        animation: none !important;

        transition: none !important;
    }

}


/* =========================================================
   FREE DRAW v14 · ACTIVE CARD + REVERSE
   기존 tarot-free-draw.css 맨 아래에 추가
========================================================= */


/* =========================================================
   활성 카드
   한 번 클릭/터치한 카드임을 아주 약하게 표시
========================================================= */

.free-card.is-card-active:not(.is-selected) {
    outline:
        2px solid
        var(
            --tarot-accent-border,
            rgba(82, 183, 136, .55)
        );

    outline-offset:
        3px;

    box-shadow:
        0 0 0 4px
        var(
            --tarot-accent-soft,
            rgba(82, 183, 136, .10)
        ),
        var(
            --card-shadow,
            0 12px 30px rgba(40, 45, 42, .17)
        )
        !important;
}


/* =========================================================
   역방향 카드

   카드 컨테이너 자체는 돌리지 않고
   이미지에만 180° 회전을 적용합니다.
   따라서 드래그 좌표/선택 영역 계산은 그대로 유지됩니다.
========================================================= */

/* =========================================================
   역방향 카드
   이미지뿐 아니라 흰 카드 박스 전체를 180° 회전
========================================================= */

.free-card {
    --free-card-rotation: 0deg;

    transform:
        rotate(
            var(--free-card-rotation)
        );

    transform-origin:
        center center;

    transition:
        transform .24s cubic-bezier(.2, .8, .2, 1);
}


/* 역방향 */

.free-card.is-reversed {
    --free-card-rotation: 180deg;
}


/* 드래그 중에는 회전 transition 제거 */

.free-card.is-dragging,
.free-card.is-group-dragging {
    transition:
        none;
}


/* 이미지에는 별도 회전을 주지 않음 */

.free-card > img {
    transform:
        none !important;
}

/* =========================================================
   역방향 버튼

   카드 클릭/터치 후 카드 아래 가운데에 나타납니다.
   아래 공간이 없으면 JS가 자동으로 카드 위에 배치합니다.
========================================================= */

.free-reverse-card-button {
    position:
        absolute;

    z-index:
        350000;

    left:
        0;

    top:
        0;

    min-height:
        32px;

    padding:
        0 10px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    border:
        1px solid
        var(
            --tarot-accent-border,
            var(--border)
        );

    border-radius:
        999px;

    background:
        var(
            --glass,
            rgba(255, 255, 255, .72)
        );

    color:
        var(--text);

    box-shadow:
        0 6px 20px
        rgba(0, 0, 0, .13);

    backdrop-filter:
        blur(14px);

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

    font:
        inherit;

    font-size:
        10.5px;

    font-weight:
        750;

    white-space:
        nowrap;

    cursor:
        pointer;

    touch-action:
        manipulation;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translate(-50%, -4px)
        scale(.94);

    transition:
        opacity .15s ease,
        transform .17s cubic-bezier(.2, .8, .2, 1),
        background .15s ease,
        color .15s ease,
        border-color .15s ease;
}


.free-reverse-card-button.is-visible {
    opacity:
        .82;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translate(-50%, 0)
        scale(1);
}


/*
 * 카드 위쪽에 표시되는 경우
 */

.free-reverse-card-button.is-visible.is-above {
    transform:
        translate(-50%, -100%)
        scale(1);
}


.free-reverse-card-button:hover,
.free-reverse-card-button:focus-visible {
    outline:
        none;

    opacity:
        1;

    background:
        var(
            --glass-solid,
            var(--surface)
        );

    border-color:
        var(
            --tarot-accent,
            var(--primary)
        );

    color:
        var(
            --tarot-accent-strong,
            var(--text)
        );
}


.free-reverse-card-button:active {
    transform:
        translate(-50%, 0)
        scale(.92);
}


.free-reverse-card-button.is-above:active {
    transform:
        translate(-50%, -100%)
        scale(.92);
}


/* 아이콘 */

.free-reverse-card-button svg {
    width:
        15px;

    height:
        15px;

    flex:
        0 0 15px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform .22s ease;
}


/*
 * 현재 카드가 역방향이면 아이콘도 반대로 회전시켜
 * "정방향으로 되돌릴 수 있음"을 표현
 */

.free-reverse-card-button.is-reversed-state svg {
    transform:
        rotate(180deg);
}


/* =========================================================
   기존 v13 레이어 메뉴 CSS가 남아 있어도 사용하지 않음
========================================================= */

.free-layer-menu {
    display:
        none !important;
}


/* =========================================================
   PNG 저장에서는 편집 UI 제거
========================================================= */

body.free-exporting
.free-reverse-card-button {
    display:
        none !important;
}


body.free-exporting
.free-card.is-card-active:not(.is-selected) {
    outline:
        none !important;

    box-shadow:
        var(
            --card-shadow,
            0 12px 30px rgba(40, 45, 42, .17)
        )
        !important;
}


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

@media (max-width: 640px) {

    .free-reverse-card-button {
        width:
            34px;

        min-width:
            34px;

        height:
            34px;

        min-height:
            34px;

        padding:
            0;

        border-radius:
            50%;

        gap:
            0;

        opacity:
            .86;
    }


    /*
     * 모바일에서는 아이콘만 남깁니다.
     */

    .free-reverse-card-button > span {
        display:
            none;
    }


    .free-reverse-card-button svg {
        width:
            17px;

        height:
            17px;
    }


    .free-card.is-card-active:not(.is-selected) {
        outline-width:
            2px;

        outline-offset:
            2px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .free-card > img,
    .free-reverse-card-button,
    .free-reverse-card-button svg {
        animation:
            none !important;

        transition:
            none !important;
    }

}


/* =========================================================
   FREE DRAW v15
   UNDO / REDO + SNAP GUIDES + EXPORT-ONLY COPYRIGHT

   public/css/tarot-free-draw.css 맨 아래에 추가
========================================================= */


/* =========================================================
   COPYRIGHT
   평소 화면에서는 숨기고 PNG 저장할 때만 표시
========================================================= */

body:not(.free-exporting) .free-copyright {
    display: none !important;
}

body.free-exporting .free-copyright {
    display: block !important;
}


/* =========================================================
   CARD COUNT
   아래 가운데 → 아래 왼쪽
========================================================= */

.free-status {
    position: fixed !important;

    z-index: 200100;

    left: 16px !important;
    right: auto !important;

    bottom: 16px !important;

    transform: none !important;

    margin: 0 !important;
}


/* =========================================================
   UNDO / REDO
   아래 가운데
========================================================= */

.free-history-controls {
    position: fixed !important;

    z-index: 200200;

    left: 50% !important;
    right: auto !important;

    bottom: 14px !important;

    min-height: 42px;

    padding: 4px;

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    gap: 2px;

    transform: translateX(-50%) !important;

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

    border-radius: 14px;

    background:
        var(
            --glass,
            rgba(255,255,255,.78)
        );

    box-shadow:
        0 9px 28px
        rgba(0,0,0,.12);

    backdrop-filter:
        blur(18px);

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

    user-select:
        none;

    -webkit-user-select:
        none;
}


.free-history-button {
    min-width: 92px;

    height: 34px;

    padding:
        0
        10px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    border: 0;

    border-radius: 10px;

    background:
        transparent;

    color:
        var(--text-soft);

    font:
        inherit;

    font-size:
        11px;

    font-weight:
        700;

    white-space:
        nowrap;

    cursor:
        pointer;

    touch-action:
        manipulation;

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


.free-history-button svg {
    width: 16px;

    height: 16px;

    flex:
        0
        0
        auto;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.free-history-button:not(:disabled):hover,
.free-history-button:not(:disabled):focus-visible {
    outline:
        none;

    background:
        var(
            --tarot-accent-hover,
            rgba(82,183,136,.10)
        );

    color:
        var(
            --tarot-accent-strong,
            var(--text)
        );
}


.free-history-button:not(:disabled):active {
    transform:
        scale(.94);
}


.free-history-button:disabled {
    opacity:
        .32;

    cursor:
        default;
}


.free-history-divider {
    width:
        1px;

    height:
        20px;

    flex:
        0
        0
        1px;

    background:
        var(--border);

    opacity:
        .9;
}


/* =========================================================
   SNAP / ALIGNMENT GUIDES

   다른 카드의 좌/중앙/우 또는 상/중앙/하 위치와
   맞춰질 때 나타납니다.
========================================================= */

.free-snap-guide {
    position:
        absolute;

    z-index:
        340000;

    display:
        block;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    background:
        var(
            --tarot-accent,
            var(--primary)
        );

    box-shadow:
        0 0 0 1px
        var(
            --tarot-accent-soft,
            rgba(82,183,136,.12)
        ),
        0 0 8px
        var(
            --tarot-accent-shadow,
            rgba(82,183,136,.18)
        );

    transition:
        opacity .10s ease;
}


.free-snap-guide.is-visible {
    opacity:
        .72;

    visibility:
        visible;
}


/* 세로 정렬선 */

.free-snap-guide-vertical {
    top:
        0;

    bottom:
        0;

    width:
        1px;

    transform:
        translateX(-.5px);
}


/* 가로 정렬선 */

.free-snap-guide-horizontal {
    left:
        0;

    right:
        0;

    height:
        1px;

    transform:
        translateY(-.5px);
}


/*
 * 카드 드래그 중에는 가이드가 좀 더 또렷하게
 */

.free-stage:has(.free-card.is-dragging)
.free-snap-guide.is-visible,

.free-stage:has(.free-card.is-group-dragging)
.free-snap-guide.is-visible {
    opacity:
        .92;
}


/* =========================================================
   PNG EXPORT

   실행 취소 / 다시 실행, 스냅 가이드 등 편집 UI는 저장 안 함
========================================================= */

body.free-exporting
.free-history-controls,

body.free-exporting
.free-snap-guide {
    display:
        none !important;
}


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

@media (max-width: 640px) {

    .free-status {
        left:
            10px !important;

        bottom:
            11px !important;
    }


    .free-history-controls {
        bottom:
            9px !important;

        min-height:
            42px;

        padding:
            3px;

        border-radius:
            13px;
    }


    .free-history-button {
        width:
            42px;

        min-width:
            42px;

        height:
            36px;

        padding:
            0;

        border-radius:
            10px;
    }


    /*
     * 모바일은 하단 공간을 적게 사용하도록
     * Undo / Redo 글자를 숨기고 아이콘만 표시
     */

    .free-history-button > span {
        display:
            none;
    }


    .free-history-button svg {
        width:
            18px;

        height:
            18px;
    }


    /*
     * 모바일에서는 가이드를 약간 더 잘 보이게
     */

    .free-snap-guide.is-visible {
        opacity:
            .88;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .free-history-button,
    .free-snap-guide {
        animation:
            none !important;

        transition:
            none !important;
    }

}

/* =========================================================
   FREE DRAW v16
   ACTIVE CARD TOOLS · REVERSE + DELETE

   public/css/tarot-free-draw.css 맨 아래에 추가
========================================================= */


/* =========================================================
   역방향 카드

   이미지 한 장만 돌리지 않고 카드 컨테이너 전체를 돌립니다.
   CSS individual transform 속성인 rotate를 사용해서
   기존 transform 기반 애니메이션과 충돌을 줄입니다.
========================================================= */

.free-card {
    rotate: 0deg;

    transform-origin:
        center center;

    transition:
        rotate .24s cubic-bezier(.2, .8, .2, 1);
}


.free-card.is-reversed {
    rotate: 180deg;
}


/*
 * 이전 v14 CSS의 이미지 단독 회전을 무효화
 */

.free-card > img,
.free-card.is-reversed > img {
    transform:
        none !important;
}


.free-card.is-dragging,
.free-card.is-group-dragging {
    transition:
        none;
}


/* =========================================================
   활성 카드 도구 묶음
   왼쪽: 역방향
   오른쪽: 삭제
========================================================= */

.free-card-tools {
    position:
        absolute;

    z-index:
        350000;

    left:
        0;

    top:
        0;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translate(-50%, -4px)
        scale(.94);

    transition:
        opacity .15s ease,
        transform .17s cubic-bezier(.2, .8, .2, 1);

    user-select:
        none;

    -webkit-user-select:
        none;
}


.free-card-tools.is-visible {
    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translate(-50%, 0)
        scale(1);
}


/* 카드 위쪽에 표시되는 경우 */

.free-card-tools.is-visible.is-above {
    transform:
        translate(-50%, -100%)
        scale(1);
}


/* =========================================================
   역방향 버튼

   기존 v14의 absolute positioning을 해제하고
   도구 묶음 안에서 자연스럽게 배치합니다.
========================================================= */

.free-card-tools .free-reverse-card-button {
    position:
        relative !important;

    z-index:
        auto !important;

    left:
        auto !important;

    top:
        auto !important;

    min-height:
        32px;

    padding:
        0 10px;

    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    border:
        1px solid
        var(
            --tarot-accent-border,
            var(--border)
        );

    border-radius:
        999px;

    background:
        var(
            --glass,
            rgba(255, 255, 255, .72)
        );

    color:
        var(--text);

    box-shadow:
        0 6px 20px
        rgba(0, 0, 0, .13);

    backdrop-filter:
        blur(14px);

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

    font:
        inherit;

    font-size:
        10.5px;

    font-weight:
        750;

    white-space:
        nowrap;

    cursor:
        pointer;

    touch-action:
        manipulation;

    opacity:
        .84 !important;

    visibility:
        visible !important;

    pointer-events:
        auto !important;

    transform:
        none !important;

    transition:
        opacity .15s ease,
        background .15s ease,
        color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}


.free-card-tools .free-reverse-card-button:hover,
.free-card-tools .free-reverse-card-button:focus-visible {
    outline:
        none;

    opacity:
        1 !important;

    background:
        var(
            --glass-solid,
            var(--surface)
        );

    border-color:
        var(
            --tarot-accent,
            var(--primary)
        );

    color:
        var(
            --tarot-accent-strong,
            var(--text)
        );
}


.free-card-tools .free-reverse-card-button:active {
    transform:
        scale(.92) !important;
}


/* =========================================================
   삭제 버튼

   "삭제"라는 기능임이 바로 보이도록 붉은 계열을 사용하지만
   버튼 안쪽은 채우지 않고 투명하게 유지합니다.
========================================================= */

.free-delete-card-button {
    --free-delete-color:
        #b94f58;

    --free-delete-border:
        rgba(185, 79, 88, .58);

    --free-delete-shadow:
        rgba(185, 79, 88, .14);

    min-height:
        32px;

    padding:
        0 10px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

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

    border-radius:
        999px;

    /*
     * 요청대로 안쪽을 채우지 않음
     */
    background:
        transparent !important;

    color:
        var(--free-delete-color);

    box-shadow:
        0 0 0 0
        transparent;

    font:
        inherit;

    font-size:
        10.5px;

    font-weight:
        760;

    white-space:
        nowrap;

    cursor:
        pointer;

    touch-action:
        manipulation;

    opacity:
        .88;

    transition:
        opacity .15s ease,
        color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        transform .14s ease;
}


.free-delete-card-button:hover,
.free-delete-card-button:focus-visible {
    outline:
        none;

    opacity:
        1;

    /* hover에서도 내부는 투명 유지 */
    background:
        transparent !important;

    color:
        #a83f48;

    border-color:
        rgba(185, 79, 88, .92);

    box-shadow:
        0 0 0 3px
        var(--free-delete-shadow),
        0 5px 16px
        rgba(0, 0, 0, .08);
}


.free-delete-card-button:active {
    transform:
        scale(.92);
}


.free-delete-card-button svg {
    width:
        15px;

    height:
        15px;

    flex:
        0 0 15px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* 다크 테마에서는 붉은색이 너무 탁해지지 않게 조금 밝게 */

html[data-theme="dark"]
.free-delete-card-button {
    --free-delete-color:
        #e17a82;

    --free-delete-border:
        rgba(225, 122, 130, .62);

    --free-delete-shadow:
        rgba(225, 122, 130, .16);
}


html[data-theme="dark"]
.free-delete-card-button:hover,
html[data-theme="dark"]
.free-delete-card-button:focus-visible {
    color:
        #f08c94;

    border-color:
        rgba(240, 140, 148, .96);
}


/* =========================================================
   PNG 저장에서는 편집 도구가 나오지 않음
========================================================= */

body.free-exporting
.free-card-tools {
    display:
        none !important;
}


body.free-exporting
.free-card.is-card-active:not(.is-selected) {
    outline:
        none !important;

    box-shadow:
        var(
            --card-shadow,
            0 12px 30px rgba(40, 45, 42, .17)
        )
        !important;
}


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

@media (max-width: 640px) {

    .free-card-tools {
        gap:
            5px;
    }


    .free-card-tools .free-reverse-card-button,
    .free-delete-card-button {
        width:
            34px;

        min-width:
            34px;

        height:
            34px;

        min-height:
            34px;

        padding:
            0;

        border-radius:
            50%;

        gap:
            0;
    }


    /* 모바일에서는 두 버튼 모두 아이콘만 표시 */

    .free-card-tools .free-reverse-card-button > span,
    .free-delete-card-button > span {
        display:
            none;
    }


    .free-card-tools .free-reverse-card-button svg,
    .free-delete-card-button svg {
        width:
            17px;

        height:
            17px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .free-card,
    .free-card-tools,
    .free-card-tools .free-reverse-card-button,
    .free-delete-card-button {
        animation:
            none !important;

        transition:
            none !important;
    }

}

/* =========================================================
   FREE DRAW v17
   ALL TAROT CARDS · BOTTOM SHEET

   사용자가 제공한 bottom_sheet_suit_icon_filter.html의 UI를
   실제 자유 드로우 화면에 맞춰 적용한 추가 CSS입니다.

   public/css/tarot-free-draw.css 맨 아래에 추가하세요.
========================================================= */


/* =========================================================
   SUIT COLORS
========================================================= */

.free-page {
    --deck-suit-major:
        #b8873f;

    --deck-suit-wands:
        #c9713a;

    --deck-suit-cups:
        #3f7cbf;

    --deck-suit-swords:
        #5f6c78;

    --deck-suit-pentacles:
        #3f9c6d;
}


/* =========================================================
   TOP TOOLBAR · 전체 카드 버튼
========================================================= */

.free-deck-picker-trigger {
    color:
        var(
            --tarot-accent-strong,
            var(--primary)
        ) !important;

    font-weight:
        720;
}


.free-deck-picker-trigger svg {
    width:
        15px;

    height:
        15px;

    stroke:
        currentColor;

    fill:
        none;

    stroke-width:
        1.65;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.free-deck-picker-trigger:hover,
.free-deck-picker-trigger:focus-visible {
    background:
        var(
            --tarot-accent-hover,
            rgba(82, 183, 136, .10)
        );

    color:
        var(
            --tarot-accent-strong,
            var(--primary)
        ) !important;
}


/* =========================================================
   BACKDROP
========================================================= */

.free-deck-sheet-backdrop {
    position:
        fixed;

    inset:
        0;

    z-index:
        400000;

    background:
        rgba(20, 28, 24, .12);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity .24s ease,
        visibility .24s ease;
}


html[data-theme="dark"] .free-deck-sheet-backdrop {
    background:
        rgba(0, 0, 0, .28);
}


.free-deck-sheet-backdrop.is-open {
    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;
}


body.free-deck-picker-open {
    overflow:
        hidden;
}


/* =========================================================
   BOTTOM SHEET
========================================================= */

.free-deck-sheet {
    position:
        fixed;

    left:
        50%;

    right:
        auto;

    bottom:
        0;

    z-index:
        410000;

    width:
        min(840px, 100%);

    height:
        min(66dvh, 610px);

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

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

    border-bottom:
        0;

    border-radius:
        22px 22px 0 0;

    background:
        var(--stage);

    box-shadow:
        0 -18px 48px
        rgba(25, 35, 30, .18);

    transform:
        translate(-50%, 102%);

    opacity:
        .98;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        transform .30s cubic-bezier(.2, .8, .2, 1),
        height .28s ease,
        visibility .30s ease;
}


html[data-theme="dark"] .free-deck-sheet {
    box-shadow:
        0 -18px 52px
        rgba(0, 0, 0, .42);
}


.free-deck-sheet.is-open {
    transform:
        translate(-50%, 0);

    visibility:
        visible;

    pointer-events:
        auto;
}


.free-deck-sheet.is-expanded {
    height:
        min(93dvh, 900px);
}


/* =========================================================
   HANDLE
========================================================= */

.free-deck-sheet-handle {
    width:
        100%;

    min-height:
        19px;

    padding:
        7px 0 4px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        0;

    background:
        transparent;

    cursor:
        pointer;

    touch-action:
        manipulation;
}


.free-deck-sheet-handle i {
    display:
        block;

    width:
        35px;

    height:
        4px;

    border-radius:
        999px;

    background:
        var(--border);

    transition:
        width .16s ease,
        background .16s ease;
}


.free-deck-sheet-handle:hover i,
.free-deck-sheet-handle:focus-visible i {
    width:
        42px;

    background:
        var(
            --tarot-accent-border,
            rgba(82, 183, 136, .36)
        );
}


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

.free-deck-sheet-head {
    min-height:
        38px;

    padding:
        1px 15px 8px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;
}


.free-deck-sheet-head strong {
    min-width:
        0;

    color:
        var(--text);

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        -.2px;

    white-space:
        nowrap;
}


.free-deck-sheet-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        5px;
}


.free-deck-expand-button,
.free-deck-close-button {
    border:
        0;

    background:
        transparent;

    color:
        var(--text-soft);

    cursor:
        pointer;

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


.free-deck-expand-button {
    min-height:
        28px;

    padding:
        0 8px;

    border-radius:
        8px;

    font-size:
        10.5px;

    font-weight:
        650;
}


.free-deck-close-button {
    width:
        29px;

    height:
        29px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;
}


.free-deck-close-button svg {
    width:
        15px;

    height:
        15px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;
}


.free-deck-expand-button:hover,
.free-deck-expand-button:focus-visible,
.free-deck-close-button:hover,
.free-deck-close-button:focus-visible {
    outline:
        none;

    color:
        var(--text);

    background:
        var(
            --tarot-accent-hover,
            rgba(82, 183, 136, .10)
        );
}


.free-deck-expand-button:active,
.free-deck-close-button:active {
    transform:
        scale(.94);
}


/* =========================================================
   FILTER ROW
========================================================= */

.free-deck-filter-row {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        0 14px 10px;

    overflow-x:
        auto;

    scrollbar-width:
        none;

    -webkit-overflow-scrolling:
        touch;
}


.free-deck-filter-row::-webkit-scrollbar {
    display:
        none;
}


.free-deck-filter-text,
.free-deck-filter-icon {
    flex:
        0 0 auto;

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

    background:
        var(--glass-solid);

    color:
        var(--text-soft);

    cursor:
        pointer;

    transition:
        background .16s ease,
        color .16s ease,
        border-color .16s ease,
        transform .16s ease,
        box-shadow .16s ease;
}


.free-deck-filter-text {
    height:
        27px;

    padding:
        0 11px;

    border-radius:
        999px;

    font-size:
        10.5px;

    font-weight:
        680;

    white-space:
        nowrap;
}


.free-deck-filter-icon {
    width:
        27px;

    height:
        27px;

    padding:
        0;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;
}


.free-deck-filter-icon:hover,
.free-deck-filter-text:hover {
    transform:
        translateY(-1px);
}


.free-deck-filter-icon svg {
    width:
        14px;

    height:
        14px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.9;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.free-deck-filter-pentacles svg {
    stroke-width:
        1.5;
}


.free-deck-filter-separator {
    width:
        1px;

    height:
        17px;

    margin:
        0 1px;

    flex:
        0 0 auto;

    background:
        var(--border);
}


.free-deck-filter-text[data-suit="all"].is-active {
    color:
        #fff;

    background:
        var(
            --tarot-accent,
            var(--primary)
        );

    border-color:
        var(
            --tarot-accent,
            var(--primary)
        );
}


.free-deck-filter-text[data-suit="major"].is-active {
    color:
        #fff;

    background:
        var(--deck-suit-major);

    border-color:
        var(--deck-suit-major);
}


.free-deck-filter-icon[data-suit="wands"].is-active {
    color:
        #fff;

    background:
        var(--deck-suit-wands);

    border-color:
        var(--deck-suit-wands);
}


.free-deck-filter-icon[data-suit="cups"].is-active {
    color:
        #fff;

    background:
        var(--deck-suit-cups);

    border-color:
        var(--deck-suit-cups);
}


.free-deck-filter-icon[data-suit="swords"].is-active {
    color:
        #fff;

    background:
        var(--deck-suit-swords);

    border-color:
        var(--deck-suit-swords);
}


.free-deck-filter-icon[data-suit="pentacles"].is-active {
    color:
        #fff;

    background:
        var(--deck-suit-pentacles);

    border-color:
        var(--deck-suit-pentacles);
}


.free-deck-filter-icon[data-suit="pentacles"].is-active svg {
    fill:
        currentColor;
}


/* =========================================================
   ACTUAL 78 CARD GRID
========================================================= */

.free-deck-grid {
    position:
        relative;

    flex:
        1 1 auto;

    min-height:
        0;

    overflow-x:
        hidden;

    overflow-y:
        auto;

    padding:
        2px 13px 54px;

    display:
        grid;

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

    gap:
        6px;

    align-content:
        start;

    overscroll-behavior:
        contain;

    -webkit-overflow-scrolling:
        touch;
}


.free-deck-card {
    position:
        relative;

    width:
        100%;

    padding:
        0;

    /* RWS 카드 실제 비율 720x1170 = 8/13 */
    aspect-ratio:
        8 / 13;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255, 255, 255, .38);

    border-radius:
        5px;

    background:
        rgba(40, 50, 45, .08);

    box-shadow:
        0 3px 9px
        rgba(20, 25, 22, .14);

    outline:
        2px solid transparent;

    outline-offset:
        1.5px;

    cursor:
        pointer;

    transform:
        translateY(0)
        scale(1);

    transition:
        transform .14s ease,
        outline-color .14s ease,
        opacity .14s ease,
        box-shadow .14s ease;

    touch-action:
        manipulation;
}


.free-deck-card[hidden] {
    display:
        none !important;
}


.free-deck-card:hover,
.free-deck-card:focus-visible {
    outline:
        2px solid
        var(
            --tarot-accent-border,
            rgba(82, 183, 136, .42)
        );

    outline-offset:
        1.5px;

    transform:
        translateY(-2px);

    box-shadow:
        0 7px 18px
        rgba(20, 25, 22, .20);
}


.free-deck-card.is-selected {
    outline-color:
        var(
            --tarot-accent,
            var(--primary)
        );

    transform:
        translateY(-1px)
        scale(.985);
}


.free-deck-card.is-selected:hover,
.free-deck-card.is-selected:focus-visible {
    outline-color:
        var(
            --tarot-accent-strong,
            var(--primary)
        );
}


.free-deck-card.is-busy {
    cursor:
        wait;
}


.free-deck-card img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    /* 좌우가 잘리지 않도록 cover -> contain */
    object-fit:
        contain;

    pointer-events:
        none;

    user-select:
        none;

    -webkit-user-drag:
        none;
}


.free-deck-card-number {
    position:
        absolute;

    left:
        3px;

    bottom:
        3px;

    min-width:
        16px;

    height:
        15px;

    padding:
        0 4px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        999px;

    background:
        rgba(20, 25, 22, .58);

    color:
        #fff;

    font-size:
        8px;

    font-weight:
        750;

    line-height:
        1;

    pointer-events:
        none;

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);
}


.free-deck-card-used-mark {
    position:
        absolute;

    top:
        3px;

    right:
        3px;

    width:
        18px;

    height:
        18px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(
            --tarot-accent,
            var(--primary)
        );

    color:
        #fff;

    box-shadow:
        0 2px 7px
        rgba(0, 0, 0, .22);

    opacity:
        0;

    transform:
        scale(.75);

    pointer-events:
        none;

    transition:
        opacity .14s ease,
        transform .14s ease;
}


.free-deck-card-used-mark svg {
    width:
        11px;

    height:
        11px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        2.4;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.free-deck-card.is-selected .free-deck-card-used-mark {
    opacity:
        1;

    transform:
        scale(1);
}


.free-deck-card.is-image-error img {
    display:
        none;
}


.free-deck-card.is-image-error::before {
    content:
        attr(data-card-id);

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--text-soft);

    font-size:
        12px;

    font-weight:
        800;
}


/* =========================================================
   VISIBLE COUNT
========================================================= */

.free-deck-visible-count {
    position:
        absolute;

    left:
        12px;

    bottom:
        11px;

    z-index:
        3;

    min-height:
        25px;

    padding:
        0 10px;

    display:
        inline-flex;

    align-items:
        center;

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

    border-radius:
        999px;

    background:
        var(--glass-solid);

    color:
        var(--text-soft);

    box-shadow:
        0 5px 16px
        rgba(30, 40, 34, .12);

    font-size:
        9.5px;

    font-weight:
        620;

    pointer-events:
        none;
}


.free-deck-visible-count b {
    margin:
        0 2px;

    color:
        var(
            --tarot-accent-strong,
            var(--primary)
        );

    font-weight:
        850;
}


/* =========================================================
   EXPORT
   바텀시트/배경은 편집 UI이므로 이미지 저장에는 포함하지 않음
========================================================= */

body.free-exporting .free-deck-sheet,
body.free-exporting .free-deck-sheet-backdrop {
    display:
        none !important;
}


/* =========================================================
   MOBILE
   첨부한 UI처럼 7열 그리드
========================================================= */

@media (max-width: 640px) {

    .free-deck-picker-trigger {
        width:
            34px;

        height:
            34px;

        min-height:
            34px;

        padding:
            0 !important;

        justify-content:
            center;

        border-radius:
            50%;
    }


    .free-deck-picker-trigger-label {
        display:
            none !important;
    }


    .free-deck-picker-trigger svg {
        width:
            16px;

        height:
            16px;
    }


    .free-deck-sheet {
        left:
            0;

        right:
            0;

        width:
            100%;

        height:
            66dvh;

        border-left:
            0;

        border-right:
            0;

        border-radius:
            20px 20px 0 0;

        transform:
            translateY(102%);
    }


    .free-deck-sheet.is-open {
        transform:
            translateY(0);
    }


    .free-deck-sheet.is-expanded {
        height:
            93dvh;
    }


    .free-deck-sheet-head {
        padding-left:
            14px;

        padding-right:
            10px;
    }


    .free-deck-grid {
        grid-template-columns:
            repeat(7, minmax(0, 1fr));

        gap:
            4px;

        padding-left:
            11px;

        padding-right:
            11px;
    }


    .free-deck-card {
        border-radius:
            4px;
    }


    .free-deck-card-number {
        left:
            2px;

        bottom:
            2px;

        min-width:
            14px;

        height:
            13px;

        padding:
            0 3px;

        font-size:
            7px;
    }


    .free-deck-card-used-mark {
        top:
            2px;

        right:
            2px;

        width:
            16px;

        height:
            16px;
    }

}


@media (max-width: 390px) {

    .free-deck-filter-row {
        gap:
            5px;

        padding-left:
            11px;

        padding-right:
            11px;
    }


    .free-deck-filter-text {
        padding:
            0 9px;
    }


    .free-deck-filter-icon {
        width:
            26px;

        height:
            26px;
    }

}

/* =========================================================
   FREE DRAW · REVERSED CARD FIX v18
   반드시 public/css/tarot-free-draw.css 맨 마지막에 추가
========================================================= */

/*
 * 중요:
 * 예전 버전에는 .free-card.is-reversed > img 에
 * rotate(180deg)가 남아 있을 수 있습니다.
 *
 * 카드 컨테이너 180° + 이미지 180°가 동시에 적용되면
 * 실제 그림은 합계 360°가 되어 정방향처럼 보입니다.
 *
 * 따라서 카드 전체만 회전시키고,
 * img 자체 transform은 항상 제거합니다.
 */

.free-card {
    --free-card-rotation: 0deg;

    transform:
        rotate(
            var(--free-card-rotation)
        );

    transform-origin:
        center center;

    transition:
        transform .24s cubic-bezier(.2, .8, .2, 1);
}

.free-card.is-reversed {
    --free-card-rotation: 180deg;
}

/* 과거 이미지 단독 회전 규칙을 확실하게 무효화 */
.free-card > img,
.free-card.is-reversed > img {
    transform: none !important;
    transform-origin: center center !important;
}

/* 드래그 중 불필요한 회전 보간 제거 */
.free-card.is-dragging,
.free-card.is-group-dragging {
    transition: none;
}

/*
 * 크기 변경 애니메이션이 transform을 직접 덮어쓰는 경우를 피하기 위해
 * 역방향 상태에서는 최종 회전값을 명시합니다.
 */
.free-card.is-reversed.is-size-changing {
    --free-card-rotation: 180deg;
}

/* PNG 저장에서도 동일한 방향 유지 */
.free-exporting .free-card.is-reversed {
    --free-card-rotation: 180deg;
}

.free-exporting .free-card > img,
.free-exporting .free-card.is-reversed > img {
    transform: none !important;
}

/* =========================================================
   FREE DRAW · REVERSE HARD FIX v19
   public/css/tarot-free-draw.css 맨 마지막에 추가
========================================================= */

/*
 * JS가 .free-card 자체에 inline rotate: 180deg !important를 넣습니다.
 * 여기서는 과거 CSS가 이미지까지 별도로 회전시키는 것만 확실히 차단합니다.
 */
.free-card > img,
.free-card.is-reversed > img {
    transform: none !important;
    rotate: 0deg !important;
    transform-origin: center center !important;
}

/* 카드 전체 회전은 CSS의 transform을 사용하지 않습니다. */
.free-card.is-reversed {
    transform-origin: center center !important;
}

/*
 * 과거 v18의 --free-card-rotation / transform:rotate(...) 규칙이 있어도
 * JS의 individual rotate 속성과 중복 회전되지 않도록 제거합니다.
 */
.free-card,
.free-card.is-reversed,
.free-card.is-reversed.is-size-changing,
.free-exporting .free-card.is-reversed {
    --free-card-rotation: 0deg !important;
}

/* 드래그 중에도 현재 방향 자체는 유지 */
.free-card.is-dragging,
.free-card.is-group-dragging {
    transform-origin: center center !important;
}

/* =========================================================
   전체 카드 필터 메뉴 잘림 수정
========================================================= */

.free-deck-filter-row {
    flex: 0 0 auto !important;

    min-height: 50px !important;

    padding:
        5px
        14px
        14px
        !important;

    display: flex !important;
    align-items: center !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-padding-left: 14px;
    scroll-padding-right: 14px;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
}

.free-deck-filter-row::-webkit-scrollbar {
    display: none;
}


/* 버튼 자체 높이도 확실히 고정 */

.free-deck-filter-text {
    height: 30px !important;
    min-height: 30px !important;

    padding:
        0
        12px
        !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    line-height: 1 !important;

    flex-shrink: 0 !important;
}


.free-deck-filter-icon {
    width: 30px !important;
    height: 30px !important;

    min-width: 30px !important;
    min-height: 30px !important;

    flex: 0 0 30px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* 구분선도 가운데 정렬 */

.free-deck-filter-separator {
    flex: 0 0 1px !important;

    height: 18px !important;

    margin:
        0
        2px
        !important;
}


/* 바로 아래 카드 그리드가 필터를 침범하지 않도록 */

.free-deck-grid {
    min-height: 0;
}


/* 작은 화면 */

@media (max-width: 640px) {

    .free-deck-filter-row {
        min-height: 48px !important;

        gap: 6px !important;

        padding:
            4px
            12px
            13px
            !important;
    }

}


@media (max-width: 390px) {

    .free-deck-filter-row {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

}

/* =========================================================
   FREE DRAW v20 · BLOCK SELECTION DELETE BUTTON
   public/css/tarot-free-draw.css 맨 마지막에 추가
========================================================= */

/*
 * 선택 프레임 바깥쪽(아래)에 도구가 나올 수 있도록 허용
 */
.free-selection-group {
    overflow: visible !important;
}

/*
 * 블록 선택 삭제 버튼
 * 개별 카드의 삭제 버튼과 같은 계열:
 * 투명 배경 + 붉은 테두리 + 붉은 아이콘/텍스트
 */
.free-selection-delete-button {
    --free-delete-color: #b94f58;
    --free-delete-border: rgba(185, 79, 88, .58);
    --free-delete-shadow: rgba(185, 79, 88, .14);

    position: absolute !important;
    z-index: 6 !important;

    left: 50% !important;
    top: calc(100% + 9px) !important;

    min-height: 32px;
    padding: 0 10px;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;

    border: 1px solid var(--free-delete-border) !important;
    border-radius: 999px !important;

    background: transparent !important;
    color: var(--free-delete-color) !important;

    box-shadow: none;

    font: inherit;
    font-size: 10.5px;
    font-weight: 760;
    line-height: 1;
    white-space: nowrap;

    cursor: pointer;
    pointer-events: auto !important;
    touch-action: manipulation;

    opacity: .9;

    transform: translateX(-50%) !important;

    transition:
        opacity .15s ease,
        color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        transform .14s ease;
}

.free-selection-delete-button:hover,
.free-selection-delete-button:focus-visible {
    outline: none;
    opacity: 1;

    background: transparent !important;
    color: #a83f48 !important;
    border-color: rgba(185, 79, 88, .92) !important;

    box-shadow:
        0 0 0 3px var(--free-delete-shadow),
        0 5px 16px rgba(0, 0, 0, .08);
}

.free-selection-delete-button:active {
    transform: translateX(-50%) scale(.92) !important;
}

.free-selection-delete-button svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 블록을 실제 이동 중일 때는 버튼을 잠깐 감춤 */
.free-selection-group.is-moving .free-selection-delete-button {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 다크 모드 */
html[data-theme="dark"] .free-selection-delete-button {
    --free-delete-color: #e17a82;
    --free-delete-border: rgba(225, 122, 130, .62);
    --free-delete-shadow: rgba(225, 122, 130, .16);
}

/* PNG 저장에는 선택/삭제 편집 UI가 포함되지 않음 */
body.free-exporting .free-selection-delete-button {
    display: none !important;
}

/* 모바일에서는 기존 카드 삭제 버튼처럼 아이콘만 */
@media (max-width: 640px) {
    .free-selection-delete-button {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 50% !important;
    }

    .free-selection-delete-button > span {
        display: none !important;
    }

    .free-selection-delete-button svg {
        width: 17px;
        height: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .free-selection-delete-button {
        transition: none !important;
    }
}

/* =========================================================
   FREE DRAW v22
   1) 삭제 버튼 = 아이콘만
   2) 카드 이름 커스텀 툴팁
   public/css/tarot-free-draw.css 맨 마지막에 추가
========================================================= */


/* =========================================================
   DELETE BUTTON · ICON ONLY
========================================================= */

/*
 * 개별 카드 삭제 / 블록 선택 삭제 모두
 * "삭제" 글자는 숨기고 휴지통 아이콘만 남깁니다.
 *
 * aria-label / title은 HTML/JS에 그대로 남아 있으므로
 * 접근성 정보는 유지됩니다.
 */
.free-delete-card-button > span,
.free-selection-delete-button > span {
    display: none !important;
}


/* 개별 카드 삭제 버튼 */
.free-card-tools .free-delete-card-button {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;

    padding: 0 !important;
    gap: 0 !important;

    border-radius: 50% !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* 블록 선택 삭제 버튼 */
.free-selection-delete-button {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;

    padding: 0 !important;
    gap: 0 !important;

    border-radius: 50% !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* 휴지통 아이콘 크기 통일 */
.free-card-tools .free-delete-card-button svg,
.free-selection-delete-button svg {
    width: 16px !important;
    height: 16px !important;

    flex: 0 0 16px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}


/* =========================================================
   CARD NAME TOOLTIP
========================================================= */

.free-card-name-tooltip {
    position: absolute;

    z-index: 390000;

    left: 0;
    top: 0;

    max-width: min(240px, calc(100vw - 28px));

    padding:
        6px
        10px;

    border:
        1px solid
        var(
            --tarot-accent-border,
            var(--border)
        );

    border-radius: 999px;

    background:
        var(
            --glass-solid,
            rgba(255, 255, 255, .94)
        );

    color:
        var(--text);

    box-shadow:
        0 8px 24px
        rgba(24, 39, 31, .14);

    backdrop-filter:
        blur(14px);

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

    font-family: inherit;

    font-size: 11px;

    font-weight: 760;

    line-height: 1.2;

    letter-spacing: -.15px;

    text-align: center;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    user-select: none;

    -webkit-user-select: none;

    transform:
        translate(-50%, -100%)
        translateY(-3px)
        scale(.96);

    transform-origin:
        center bottom;

    transition:
        opacity .14s ease,
        transform .16s cubic-bezier(.2, .8, .2, 1),
        visibility .14s ease;
}


/* 카드 위에 표시 */
.free-card-name-tooltip.is-visible {
    opacity: 1;

    visibility: visible;

    transform:
        translate(-50%, -100%)
        translateY(0)
        scale(1);
}


/*
 * 카드가 스테이지 최상단에 붙어
 * 위 공간이 전혀 없을 때만 JS가 아래로 전환합니다.
 */
.free-card-name-tooltip.is-below {
    transform:
        translate(-50%, 0)
        translateY(3px)
        scale(.96);

    transform-origin:
        center top;
}


.free-card-name-tooltip.is-visible.is-below {
    transform:
        translate(-50%, 0)
        translateY(0)
        scale(1);
}


/* 작은 말풍선 꼬리 */
.free-card-name-tooltip::after {
    content: '';

    position: absolute;

    left: 50%;
    bottom: -4px;

    width: 7px;
    height: 7px;

    background:
        var(
            --glass-solid,
            rgba(255, 255, 255, .94)
        );

    border-right:
        1px solid
        var(
            --tarot-accent-border,
            var(--border)
        );

    border-bottom:
        1px solid
        var(
            --tarot-accent-border,
            var(--border)
        );

    transform:
        translateX(-50%)
        rotate(45deg);
}


.free-card-name-tooltip.is-below::after {
    top: -4px;
    bottom: auto;

    border-right: 0;

    border-bottom: 0;

    border-left:
        1px solid
        var(
            --tarot-accent-border,
            var(--border)
        );

    border-top:
        1px solid
        var(
            --tarot-accent-border,
            var(--border)
        );
}


/*
 * 모바일에서 탭해서 고정 표시되는 이름은
 * PC hover보다 조금 더 또렷하게.
 */
.free-card-name-tooltip.is-touch {
    padding:
        7px
        11px;

    font-size: 11.5px;

    box-shadow:
        0 9px 26px
        rgba(24, 39, 31, .17);
}


/* 다크 모드 */
html[data-theme="dark"] .free-card-name-tooltip {
    box-shadow:
        0 10px 28px
        rgba(0, 0, 0, .30);
}


/* PNG 저장에는 편집용 카드 이름을 포함하지 않음 */
body.free-exporting .free-card-name-tooltip {
    display: none !important;
}


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

@media (max-width: 640px) {

    .free-card-name-tooltip {
        max-width:
            calc(100vw - 24px);

        padding:
            6px
            10px;

        font-size:
            11px;
    }


    .free-card-name-tooltip.is-touch {
        padding:
            7px
            11px;

        font-size:
            11.5px;
    }


    .free-card-tools .free-delete-card-button,
    .free-selection-delete-button {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
    }

}


/* 모션 최소화 설정 */
@media (prefers-reduced-motion: reduce) {

    .free-card-name-tooltip {
        transition:
            none !important;
    }

}

/* =========================================================
   FREE DRAW v48 · ALL CARD PICKER ICON

   public/css/tarot-free-draw.css 맨 마지막에 추가

   변경:
   - 기존 4칸 네모 SVG 삭제
   - /img/tarot-card.png 사용
   - 모바일은 이미지 오른쪽에 아래 화살표 표시
========================================================= */


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

.free-deck-picker-trigger-v48 {
    display:
        inline-flex
        !important;

    align-items:
        center
        !important;

    justify-content:
        center
        !important;

    gap:
        7px
        !important;
}


/* =========================================================
   TAROT CARD IMAGE
========================================================= */

.free-deck-picker-trigger-v48
.free-deck-picker-trigger-image-v48 {
    width:
        25px
        !important;

    height:
        31px
        !important;

    flex:
        0 0 25px;

    display:
        block
        !important;

    object-fit:
        contain
        !important;

    padding:
        0
        !important;

    margin:
        0
        !important;

    border:
        0
        !important;

    border-radius:
        0
        !important;

    background:
        transparent
        !important;

    box-shadow:
        none
        !important;

    user-select:
        none;

    -webkit-user-drag:
        none;

    pointer-events:
        none;
}


/* =========================================================
   MOBILE CHEVRON
   PC에서는 label만으로 충분하므로 숨김
========================================================= */

.free-deck-picker-chevron-v48 {
    display:
        none;

    width:
        14px;

    height:
        14px;

    flex:
        0 0 14px;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--text-soft);

    opacity:
        .82;

    pointer-events:
        none;
}


.free-deck-picker-chevron-v48 svg {
    width:
        14px
        !important;

    height:
        14px
        !important;

    fill:
        none
        !important;

    stroke:
        currentColor
        !important;

    stroke-width:
        1.9
        !important;

    stroke-linecap:
        round
        !important;

    stroke-linejoin:
        round
        !important;
}


/* sheet가 열려 있을 때 화살표 방향도 직관적으로 반전 */

.free-deck-picker-trigger-v48[aria-expanded="true"]
.free-deck-picker-chevron-v48 svg {
    transform:
        rotate(180deg);
}


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

@media (max-width: 640px) {

    .free-deck-picker-trigger-v48 {
        /*
         * 기존 모바일 원형 버튼보다
         * 카드 이미지 + 화살표가 함께 들어갈 수 있도록
         * 살짝 가로로 긴 pill.
         */
        width:
            auto
            !important;

        min-width:
            52px
            !important;

        height:
            38px
            !important;

        min-height:
            38px
            !important;

        padding:
            0 7px
            !important;

        gap:
            3px
            !important;

        border-radius:
            12px
            !important;
    }


    .free-deck-picker-trigger-v48
    .free-deck-picker-trigger-image-v48 {
        width:
            23px
            !important;

        height:
            29px
            !important;

        flex-basis:
            23px;
    }


    /*
     * 모바일에서는 텍스트를 숨기고:
     * [타로 카드 이미지] [⌄]
     * 만 보여줍니다.
     */

    .free-deck-picker-trigger-v48
    .free-deck-picker-trigger-label {
        display:
            none
            !important;
    }


    .free-deck-picker-chevron-v48 {
        display:
            inline-flex
            !important;
    }

}


/* 아주 작은 모바일 */

@media (max-width: 390px) {

    .free-deck-picker-trigger-v48 {
        min-width:
            49px
            !important;

        height:
            36px
            !important;

        min-height:
            36px
            !important;

        padding:
            0 6px
            !important;
    }


    .free-deck-picker-trigger-v48
    .free-deck-picker-trigger-image-v48 {
        width:
            21px
            !important;

        height:
            27px
            !important;

        flex-basis:
            21px;
    }

}

/* =========================================================
   FREE DRAW v49 · PALETTE CLIPPING FIX
   public/css/tarot-free-draw.css 맨 마지막에 추가
========================================================= */

/* 상단 툴바/우측 영역이 팔레트를 잘라내지 않도록 */
body.free-draw-page-v49 .free-toolbar {
    position: relative !important;
    z-index: 50000 !important;
    overflow: visible !important;
    clip-path: none !important;
    contain: none !important;
}

body.free-draw-page-v49 .free-toolbar-left,
body.free-draw-page-v49 .free-toolbar-right {
    overflow: visible !important;
    clip-path: none !important;
    contain: none !important;
}

body.free-draw-page-v49 .free-toolbar-right {
    position: relative !important;
    z-index: 50010 !important;
}

body.free-draw-page-v49
.free-toolbar-right > .tarot-theme-control {
    position: relative !important;
    z-index: 50020 !important;
    overflow: visible !important;
}

/* 카드/stage보다 팔레트가 항상 위 */
body.free-draw-page-v49 .free-stage,
body.free-draw-page-v49 .free-card-layer {
    z-index: 1 !important;
}

/* 데스크톱: viewport 기준 우측 상단 fixed */
body.free-draw-page-v49
.tarot-theme-control
.tarot-palette-drop-v35 {
    position: fixed !important;
    z-index: 999999 !important;

    top: 74px !important;
    right: 14px !important;
    bottom: auto !important;
    left: auto !important;

    width: min(360px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;

    max-height: calc(100dvh - 90px) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior: contain;
    scrollbar-width: thin;

    transform-origin: top right !important;
}

/* 81색이 닫혀 있을 때 실제 공간 0 */
body.free-draw-page-v49
.tarot-palette-full-v35:not(.is-expanded) {
    display: block !important;

    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.free-draw-page-v49
.tarot-palette-full-v35.is-expanded {
    height: auto !important;
    max-height: none !important;

    margin-top: 12px !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* 태블릿/모바일: bottom-sheet */
@media (max-width: 900px) {

    body.free-draw-page-v49
    .tarot-theme-control
    .tarot-palette-drop-v35 {
        position: fixed !important;

        top: auto !important;
        right: 10px !important;
        left: 10px !important;

        bottom:
            calc(
                10px
                +
                env(safe-area-inset-bottom)
            )
            !important;

        width: auto !important;
        max-width: none !important;

        max-height:
            min(
                72dvh,
                calc(100dvh - 84px)
            )
            !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        border-radius: 22px !important;

        transform-origin: center bottom !important;

        transform:
            translateY(
                calc(100% + 28px)
            )
            !important;
    }

    body.free-draw-page-v49
    .tarot-theme-control
    .tarot-palette-drop-v35.is-open {
        transform: translateY(0) !important;
    }

}

/* 작은 모바일 */
@media (max-width: 640px) {

    body.free-draw-page-v49
    .tarot-theme-control
    .tarot-palette-drop-v35 {
        right: 7px !important;
        left: 7px !important;

        bottom:
            calc(
                7px
                +
                env(safe-area-inset-bottom)
            )
            !important;

        max-height:
            min(
                76dvh,
                calc(100dvh - 76px)
            )
            !important;

        border-radius: 20px !important;
    }

}

/* 화면 높이가 낮을 때 */
@media (max-height: 620px) {

    body.free-draw-page-v49
    .tarot-theme-control
    .tarot-palette-drop-v35 {
        top: auto !important;

        bottom:
            calc(
                6px
                +
                env(safe-area-inset-bottom)
            )
            !important;

        max-height: calc(100dvh - 70px) !important;
    }

}

/* open 상태는 항상 최상단 */
body.free-draw-page-v49
.tarot-theme-control.is-palette-open {
    z-index: 999998 !important;
}

body.free-draw-page-v49
.tarot-theme-control.is-palette-open
.tarot-palette-drop-v35 {
    z-index: 999999 !important;
}

@media (prefers-reduced-motion: reduce) {
    body.free-draw-page-v49
    .tarot-palette-drop-v35 {
        transition: none !important;
    }
}

/* =========================================================
   FREE DRAW v50 · MOBILE PALETTE OPEN-FROM-TOP FIX

   public/css/tarot-free-draw.css 맨 마지막에 추가

   v49에서 panel 자체는 viewport 안으로 들어왔지만,
   모바일에서 이전 scrollTop이 남아 있으면 재오픈할 때
   아래쪽의 "81색 전체 팔레트"부터 보일 수 있었습니다.

   v50:
   - panel의 실제 높이/overflow를 명시
   - 내부 레이아웃을 위에서부터 시작
   - 모바일 bottom sheet가 viewport 밖으로 밀리지 않게 강제
   - JS에서 열릴 때마다 scrollTop=0
========================================================= */


/* =========================================================
   TOOLBAR OVERFLOW / STACKING
========================================================= */

body.free-draw-page-v50 .free-toolbar,
body.free-draw-page-v50 .free-toolbar-left,
body.free-draw-page-v50 .free-toolbar-right {
    overflow: visible !important;
    clip-path: none !important;
    contain: none !important;
}


body.free-draw-page-v50 .free-toolbar {
    position: relative !important;
    z-index: 50000 !important;
}


body.free-draw-page-v50 .free-toolbar-right {
    position: relative !important;
    z-index: 50010 !important;
}


body.free-draw-page-v50
.free-toolbar-right > .tarot-theme-control {
    position: relative !important;
    z-index: 50020 !important;
    overflow: visible !important;
}


/* =========================================================
   PALETTE PANEL · COMMON
========================================================= */

body.free-draw-page-v50
.tarot-theme-control
.tarot-palette-drop-v35 {
    z-index: 999999 !important;

    box-sizing: border-box !important;

    min-height: 0 !important;
    height: auto !important;

    /*
     * flex/grid 관련 과거 규칙 때문에 내용이 아래 정렬되는 것을 차단.
     */
    align-content: start !important;
    justify-content: start !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior: contain !important;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 901px) {

    body.free-draw-page-v50
    .tarot-theme-control
    .tarot-palette-drop-v35 {
        position: fixed !important;

        top: 72px !important;
        right: 14px !important;
        bottom: auto !important;
        left: auto !important;

        width: min(360px, calc(100vw - 28px)) !important;

        max-height: calc(100dvh - 88px) !important;

        transform-origin: top right !important;
    }

}


/* =========================================================
   MOBILE / TABLET BOTTOM SHEET
========================================================= */

@media (max-width: 900px) {

    body.free-draw-page-v50
    .tarot-theme-control
    .tarot-palette-drop-v35 {
        position: fixed !important;

        top: auto !important;
        right: 8px !important;
        bottom:
            calc(
                8px
                +
                env(safe-area-inset-bottom)
            )
            !important;
        left: 8px !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        /*
         * 자연 높이를 쓰되 화면의 80%를 절대 넘지 않음.
         * 중요: min-height가 남아 panel이 화면 위로 튀어나오는 것을 차단.
         */
        height: auto !important;
        min-height: 0 !important;
        max-height:
            min(
                80dvh,
                calc(100dvh - 76px)
            )
            !important;

        margin: 0 !important;

        padding:
            9px
            14px
            calc(15px + env(safe-area-inset-bottom))
            !important;

        border-radius: 22px !important;

        transform-origin: center bottom !important;

        /*
         * 닫힘 위치
         */
        transform:
            translate3d(
                0,
                calc(100% + 30px),
                0
            )
            !important;
    }


    body.free-draw-page-v50
    .tarot-theme-control
    .tarot-palette-drop-v35.is-open {
        transform:
            translate3d(
                0,
                0,
                0
            )
            !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }


    /*
     * 첫 행(모바일 handle)이 항상 panel 맨 위에 붙음.
     */
    body.free-draw-page-v50
    .tarot-palette-mobile-head-v35 {
        position: sticky !important;
        top: 0 !important;
        z-index: 20 !important;

        margin:
            -2px
            -2px
            7px
            !important;
    }


    /*
     * Light/Dark가 81색 버튼보다 항상 앞에 정상 배치.
     */
    body.free-draw-page-v50
    .tarot-normal-theme-row-v35 {
        position: relative !important;
        order: 0 !important;
    }


    body.free-draw-page-v50
    .tarot-palette-copy-v35 {
        position: relative !important;
        order: 1 !important;
    }


    body.free-draw-page-v50
    .tarot-palette-quick-v35 {
        position: relative !important;
        order: 2 !important;
    }


    body.free-draw-page-v50
    .tarot-palette-expand-v35 {
        position: relative !important;
        order: 3 !important;
    }


    body.free-draw-page-v50
    .tarot-palette-full-v35 {
        position: relative !important;
        order: 4 !important;
    }

}


/* =========================================================
   81 COLORS · CLOSED MUST TAKE ZERO SPACE
========================================================= */

body.free-draw-page-v50
.tarot-palette-full-v35:not(.is-expanded) {
    display: block !important;

    width: 100% !important;

    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: none !important;
}


body.free-draw-page-v50
.tarot-palette-full-v35.is-expanded {
    display: block !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin-top: 12px !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: none !important;
}


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

@media (max-width: 640px) {

    body.free-draw-page-v50
    .tarot-theme-control
    .tarot-palette-drop-v35 {
        right: 6px !important;
        left: 6px !important;

        bottom:
            calc(
                6px
                +
                env(safe-area-inset-bottom)
            )
            !important;

        max-height:
            min(
                82dvh,
                calc(100dvh - 70px)
            )
            !important;

        border-radius: 20px !important;
    }

}


/* 낮은 가로 화면 */
@media (max-height: 600px) {

    body.free-draw-page-v50
    .tarot-theme-control
    .tarot-palette-drop-v35 {
        max-height: calc(100dvh - 58px) !important;
        bottom: 4px !important;
    }

}

/* =========================================================
   FREE DRAW v52 · MOBILE PALETTE CLEAN FIX

   public/css/tarot-free-draw.css 맨 마지막에 추가

   핵심:
   - v49/v50 bottom-sheet 방식 사용 안 함
   - 모바일 팔레트를 "화면 상단 툴바 바로 아래"에 고정
   - 열릴 때 위에서 아래로 살짝 내려오는 애니메이션
   - 81색 영역은 매번 기본적으로 접힌 상태
   - Light/Dark → 설명 → 대표 8색 → 81색 버튼 순서 보장
========================================================= */


/* =========================================================
   1. TOOLBAR / STACKING
========================================================= */

body.free-draw-page-v52 .free-toolbar,
body.free-draw-page-v52 .free-toolbar-left,
body.free-draw-page-v52 .free-toolbar-right {
    overflow: visible !important;
    clip-path: none !important;
    contain: none !important;
}

body.free-draw-page-v52 .free-toolbar {
    position: relative !important;
    z-index: 70000 !important;
}

body.free-draw-page-v52 .free-toolbar-right {
    position: relative !important;
    z-index: 70010 !important;
}

body.free-draw-page-v52
.free-toolbar-right > .tarot-theme-control {
    position: relative !important;
    z-index: 70020 !important;
    overflow: visible !important;
}


/* =========================================================
   2. MOBILE/TABLET PALETTE
   bottom-sheet를 버리고 상단 고정 dropdown으로 변경
========================================================= */

@media (max-width: 900px) {

    body.free-draw-page-v52
    .tarot-theme-control
    .tarot-palette-drop-v35 {
        /*
         * 과거 bottom/top 계산을 모두 무효화
         */
        position: fixed !important;

        z-index: 999999 !important;

        top:
            calc(
                66px
                +
                env(safe-area-inset-top)
            )
            !important;

        right: 8px !important;
        bottom: auto !important;
        left: 8px !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        height: auto !important;
        min-height: 0 !important;

        /*
         * 화면 밖으로 나가지 않으며 길면 패널 안에서 스크롤
         */
        max-height:
            calc(
                100dvh
                -
                78px
                -
                env(safe-area-inset-top)
            )
            !important;

        margin: 0 !important;
        padding:
            10px
            14px
            14px
            !important;

        display: block !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch;

        border-radius: 20px !important;

        /*
         * 닫힌 상태:
         * 아래에서 위로 솟는 애니메이션을 완전히 제거.
         */
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transform:
            translate3d(
                0,
                -10px,
                0
            )
            scale(.985)
            !important;

        transform-origin: top center !important;

        transition:
            opacity .17s ease,
            transform .20s cubic-bezier(.2,.8,.2,1),
            visibility .17s ease
            !important;
    }


    body.free-draw-page-v52
    .tarot-theme-control
    .tarot-palette-drop-v35.is-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1)
            !important;
    }


    /*
     * 과거 CSS에서 panel child에 absolute / order / transform이
     * 걸려 있어도 DOM 원래 순서 그대로 위에서부터 배치.
     */
    body.free-draw-page-v52
    .tarot-palette-mobile-head-v35,
    body.free-draw-page-v52
    .tarot-palette-copy-v35,
    body.free-draw-page-v52
    .tarot-palette-quick-v35,
    body.free-draw-page-v52
    .tarot-palette-expand-v35,
    body.free-draw-page-v52
    .tarot-palette-full-v35 {
        position: static !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        float: none !important;

        transform: none !important;
    }


    /*
     * v53 FIX
     *
     * Light/Dark slider row는 절대로 position:static이면 안 됩니다.
     *
     * slider 안의 움직이는 배경
     * .tarot-theme-slider-indicator-v38 가 position:absolute이므로
     * row가 static이면 indicator의 기준 박스가 팔레트 전체 panel로
     * 바뀌어 81색을 펼쳤을 때 화면 세로 전체로 길어집니다.
     *
     * row 자체를 다시 containing block으로 만들어 해결합니다.
     */
    body.free-draw-page-v52
    .tarot-normal-theme-row-v35,
    body.free-draw-page-v52
    .tarot-theme-slider-row-v38 {
        position: relative !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        float: none !important;

        transform: none !important;

        overflow: hidden !important;

        isolation: isolate;
    }


    /*
     * 움직이는 선택 배경을 slider row 내부에만 가둡니다.
     * 81색 영역 높이가 커져도 이 indicator 높이는
     * Light/Dark 줄 높이만 사용합니다.
     */
    body.free-draw-page-v52
    .tarot-theme-slider-row-v38
    .tarot-theme-slider-indicator-v38 {
        position: absolute !important;

        top: 4px !important;
        bottom: 4px !important;

        height: auto !important;
        max-height: none !important;

        z-index: 0 !important;
    }


    body.free-draw-page-v52
    .tarot-theme-slider-row-v38
    .tarot-theme-slider-button-v38 {
        position: relative !important;

        z-index: 1 !important;
    }


    /*
     * 모바일 head는 별도 sticky가 필요하지 않음.
     * 상단부터 항상 보여야 하므로 일반 block 처리.
     */
    body.free-draw-page-v52
    .tarot-palette-mobile-head-v35 {
        display: flex !important;
        position: relative !important;
    }

}


/* =========================================================
   3. 81 COLORS
   기본 닫힘은 실제 레이아웃 공간 0
========================================================= */

body.free-draw-page-v52
.tarot-palette-full-v35:not(.is-expanded) {
    display: block !important;

    width: 100% !important;

    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: none !important;
}


body.free-draw-page-v52
.tarot-palette-full-v35.is-expanded {
    display: block !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin-top: 12px !important;
    padding: 0 !important;

    overflow: visible !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: none !important;
}


/* =========================================================
   4. ENSURE TOP CONTENT IS VISIBLE
========================================================= */

@media (max-width: 900px) {

    body.free-draw-page-v52
    .tarot-normal-theme-row-v35,
    body.free-draw-page-v52
    .tarot-theme-slider-row-v38 {
        width: 100% !important;
        margin-top: 0 !important;
    }

    body.free-draw-page-v52
    .tarot-palette-copy-v35 {
        width: 100% !important;
    }

    body.free-draw-page-v52
    .tarot-palette-quick-v35 {
        width: 100% !important;
    }

    body.free-draw-page-v52
    .tarot-palette-expand-v35 {
        width: 100% !important;
    }

}


/* =========================================================
   5. SMALL MOBILE
========================================================= */

@media (max-width: 640px) {

    body.free-draw-page-v52
    .tarot-theme-control
    .tarot-palette-drop-v35 {
        top:
            calc(
                62px
                +
                env(safe-area-inset-top)
            )
            !important;

        right: 6px !important;
        left: 6px !important;

        max-height:
            calc(
                100dvh
                -
                70px
                -
                env(safe-area-inset-top)
            )
            !important;

        border-radius: 18px !important;
    }

}


/* =========================================================
   6. LOW HEIGHT / LANDSCAPE
========================================================= */

@media (max-height: 600px) and (max-width: 900px) {

    body.free-draw-page-v52
    .tarot-theme-control
    .tarot-palette-drop-v35 {
        top:
            calc(
                56px
                +
                env(safe-area-inset-top)
            )
            !important;

        max-height:
            calc(
                100dvh
                -
                62px
                -
                env(safe-area-inset-top)
            )
            !important;
    }

}


/* =========================================================
   7. REDUCED MOTION
========================================================= */

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

    body.free-draw-page-v52
    .tarot-theme-control
    .tarot-palette-drop-v35 {
        transition: none !important;
    }

}


/* =========================================================
   FREE DRAW v53 · LIGHT/DARK SLIDER HEIGHT FIX

   원인:
   v52에서 .tarot-theme-slider-row-v38까지 position:static으로
   바꾸면서 absolute indicator가 팔레트 전체 높이를 기준으로 삼았습니다.
   81색을 펼치면 선택 배경이 세로로 길어진 이유입니다.

   이 최종 override는 slider row를 다시 containing block으로 고정합니다.
========================================================= */

@media (max-width: 900px) {

    body.free-draw-page-v52
    .tarot-normal-theme-row-v35.tarot-theme-slider-row-v38,
    body.free-draw-page-v52
    .tarot-theme-slider-row-v38 {
        position: relative !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: hidden !important;

        transform: none !important;

        isolation: isolate;
    }


    body.free-draw-page-v52
    .tarot-theme-slider-row-v38
    .tarot-theme-slider-indicator-v38 {
        position: absolute !important;

        top: 4px !important;
        bottom: 4px !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        z-index: 0 !important;
    }


    body.free-draw-page-v52
    .tarot-theme-slider-row-v38
    .tarot-theme-slider-button-v38 {
        position: relative !important;

        z-index: 1 !important;
    }

}


/* =========================================================
   FREE DRAW v54 · PALETTE STACKING FIX

   문제:
   팔레트 자체 z-index는 높아도,
   팔레트가 들어있는 .free-toolbar가 하나의 stacking context라서
   하단의 카드 수 / Undo·Redo / 카드 추가 버튼보다 아래에서 그려질 수 있음.

   해결:
   팔레트가 열려 있을 때에만 toolbar stacking context 전체를
   하단 편집 UI보다 위로 올립니다.
========================================================= */


/* =========================================================
   1. PALETTE OPEN → TOOLBAR STACKING CONTEXT UP
========================================================= */

body.free-draw-page-v52:has(
    .tarot-palette-drop-v35.is-open
)
.free-toolbar {
    z-index:
        1200000
        !important;
}


body.free-draw-page-v52:has(
    .tarot-palette-drop-v35.is-open
)
.free-toolbar-right {
    z-index:
        1200010
        !important;
}


body.free-draw-page-v52:has(
    .tarot-palette-drop-v35.is-open
)
.free-toolbar-right
> .tarot-theme-control {
    z-index:
        1200020
        !important;
}


body.free-draw-page-v52:has(
    .tarot-palette-drop-v35.is-open
)
.tarot-theme-control
.tarot-palette-drop-v35 {
    z-index:
        1200030
        !important;
}


/* =========================================================
   2. BOTTOM CONTROLS STAY UNDER THE PALETTE
========================================================= */

body.free-draw-page-v52:has(
    .tarot-palette-drop-v35.is-open
)
.free-status,

body.free-draw-page-v52:has(
    .tarot-palette-drop-v35.is-open
)
.free-history-controls,

body.free-draw-page-v52:has(
    .tarot-palette-drop-v35.is-open
)
.free-add-button {
    z-index:
        100
        !important;

    pointer-events:
        none
        !important;
}


/*
 * 팔레트 뒤에서 버튼이 강하게 비쳐 보이지 않도록
 * 모바일에서만 살짝 흐리게.
 */
@media (max-width: 900px) {

    body.free-draw-page-v52:has(
        .tarot-palette-drop-v35.is-open
    )
    .free-status,

    body.free-draw-page-v52:has(
        .tarot-palette-drop-v35.is-open
    )
    .free-history-controls,

    body.free-draw-page-v52:has(
        .tarot-palette-drop-v35.is-open
    )
    .free-add-button {
        opacity:
            .16
            !important;
    }

}


/* =========================================================
   3. OTHER EDITING UI ALSO STAYS BELOW PALETTE
========================================================= */

body.free-draw-page-v52:has(
    .tarot-palette-drop-v35.is-open
)
.free-card-tools,

body.free-draw-page-v52:has(
    .tarot-palette-drop-v35.is-open
)
.free-selection-group,

body.free-draw-page-v52:has(
    .tarot-palette-drop-v35.is-open
)
.free-selection-marquee,

body.free-draw-page-v52:has(
    .tarot-palette-drop-v35.is-open
)
.free-snap-guide {
    z-index:
        50
        !important;

    pointer-events:
        none
        !important;
}


/* =========================================================
   4. PALETTE PANEL MUST HAVE OPAQUE ENOUGH SURFACE
========================================================= */

@media (max-width: 900px) {

    body.free-draw-page-v52
    .tarot-theme-control
    .tarot-palette-drop-v35.is-open {
        /*
         * 기존 팔레트 색/다크모드 디자인은 유지하면서
         * 뒤쪽 UI가 시각적으로 섞이지 않도록.
         */
        backdrop-filter:
            blur(22px)
            !important;

        -webkit-backdrop-filter:
            blur(22px)
            !important;
    }

}


/* =========================================================
   5. FALLBACK FOR BROWSERS WITHOUT :has()
   현재 Chrome/Safari/최신 Android는 :has() 지원.
   미지원 브라우저에서는 기존 z-index를 약간 높여 안전하게 처리.
========================================================= */

@supports not selector(
    body:has(.tarot-palette-drop-v35.is-open)
) {

    body.free-draw-page-v52
    .free-toolbar {
        z-index:
            600000
            !important;
    }

}


/* =========================================================
   MISSING TOKENS

   이 파일에는 --surface 와 --tarot-accent-* 가 없었습니다.

   질문 창은 테두리와 배경을 이렇게 만듭니다.

       border: 1px solid color-mix(in srgb,
           var(--border) 82%, var(--tarot-accent-border) 18%);

       background: color-mix(in srgb,
           var(--surface) 94%, var(--stage) 6%);

   color-mix 는 섞을 색 중 하나라도 없으면
   그 줄 전체가 무효가 됩니다.
   그래서 기본 라이트 · 다크에서는 질문 창의 테두리와 배경이
   통째로 사라져 뒤 화면이 그대로 비쳐 보였습니다.

   81색 팔레트를 고르면 자바스크립트가 이 값들을 인라인으로 넣어 주기 때문에
   그때만 멀쩡해 보였던 것입니다.
========================================================= */

:root {
    --surface: rgba(255, 255, 255, .80);
    --surface-hover: rgba(255, 255, 255, .92);

    --tarot-accent: #52b788;
    --tarot-accent-strong: #317a58;
    --tarot-accent-soft: rgba(82, 183, 136, .12);
    --tarot-accent-border: rgba(82, 183, 136, .28);
    --tarot-accent-hover: rgba(82, 183, 136, .09);
    --tarot-accent-shadow: rgba(82, 183, 136, .17);
}


html[data-theme="dark"] {
    --surface: #223029;
    --surface-hover: #293a32;

    --tarot-accent: #52b788;
    --tarot-accent-strong: #6fd6a4;
    --tarot-accent-soft: rgba(82, 183, 136, .16);
    --tarot-accent-border: rgba(111, 214, 164, .30);
    --tarot-accent-hover: rgba(82, 183, 136, .12);
    --tarot-accent-shadow: rgba(0, 0, 0, .28);
}