@charset "UTF-8";

/* =========================================================
   SOOPOOLLEAF TAROT AI SHEET · v63

   Layout:
   A · bottom sheet

   Composition graph:
   B · dot grid

   Fixed spreads only.
========================================================= */


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

.tarot-ai-dock {
    --ai-major: #8b6bb1;
    --ai-wands: #df7d62;
    --ai-cups: #668fd0;
    --ai-swords: #5aa8a0;
    --ai-pentacles: #c6a25d;
}


/* =========================================================
   DOCK
========================================================= */

.tarot-ai-dock[hidden] {
    display: none !important;
}


.tarot-ai-dock {
    position: fixed;

    z-index: 180000;

    left: 0;
    right: 0;
    bottom: 0;

    transform:
        translateY(
            calc(
                100%
                -
                68px
                -
                env(safe-area-inset-bottom)
            )
        );

    transition:
        transform .36s
        cubic-bezier(.3,.9,.25,1);
}


.tarot-ai-dock.is-open {
    transform:
        translateY(0);
}


.tarot-ai-panel {
    width:
        min(
            100%,
            860px
        );

    max-height:
        min(
            82dvh,
            760px
        );

    margin: 0 auto;

    overflow: hidden;

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

    border-bottom: 0;

    border-radius:
        24px
        24px
        0
        0;

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

    color:
        var(--text);

    box-shadow:
        0 -15px 48px
        rgba(18, 35, 29, .18);

    backdrop-filter:
        blur(22px);

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


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

.tarot-ai-handle {
    position: relative;

    z-index: 2;

    width: 100%;
    height: 68px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding:
        0
        18px;

    border: 0;

    background:
        color-mix(
            in srgb,
            var(--surface) 96%,
            var(--tarot-accent-soft) 4%
        );

    color:
        var(--text);

    text-align: left;

    cursor: pointer;
}


.tarot-ai-handle-copy {
    min-width: 0;

    display: block;
}


.tarot-ai-handle-copy strong {
    display: block;

    font-size: 13.5px;
    font-weight: 850;

    line-height: 1.18;

    letter-spacing: -.03em;
}


.tarot-ai-handle-copy > span {
    display: block;

    margin-top: 3px;

    overflow: hidden;

    color:
        var(--text-soft);

    font-size: 10.5px;
    font-weight: 600;

    line-height: 1.2;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.tarot-ai-handle-dots {
    margin-left: auto;

    display: inline-flex;
    align-items: center;

    gap: 4px;

    flex-shrink: 0;
}


.tarot-ai-handle-dot {
    width: 8px;
    height: 8px;

    border-radius: 3px;

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

    box-shadow:
        inset 0 0 0 1px
        color-mix(
            in srgb,
            var(--border) 78%,
            transparent
        );
}


.tarot-ai-chevron {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    color:
        var(--text-soft);

    transition:
        transform .28s ease;
}


.tarot-ai-dock.is-open
.tarot-ai-chevron {
    transform:
        rotate(180deg);
}


/* =========================================================
   BODY / SCROLL
========================================================= */

.tarot-ai-body {
    max-height:
        calc(
            min(
                82dvh,
                760px
            )
            -
            68px
        );

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

    overscroll-behavior: contain;

    -webkit-overflow-scrolling: touch;
}


.tarot-ai-inner {
    padding:
        3px
        20px
        calc(
            24px
            +
            env(safe-area-inset-bottom)
        );
}


/* =========================================================
   HEAD
========================================================= */

.tarot-ai-head {
    padding:
        16px
        0
        2px;
}


.tarot-ai-head h2 {
    margin: 0;

    color:
        var(--text);

    font-size: 15px;
    font-weight: 850;

    line-height: 1.25;

    letter-spacing: -.035em;
}


.tarot-ai-head p {
    margin:
        4px
        0
        0;

    color:
        var(--text-soft);

    font-size: 11px;
    font-weight: 530;

    line-height: 1.5;
}


/* =========================================================
   BLOCK
========================================================= */

.tarot-ai-block {
    margin-top: 18px;
}


.tarot-ai-block-head {
    min-height: 20px;

    margin-bottom: 9px;

    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 12px;
}


.tarot-ai-block-head h3 {
    margin: 0;

    color:
        var(--text);

    font-size: 12px;
    font-weight: 820;

    line-height: 1.3;

    letter-spacing: -.02em;
}


.tarot-ai-block-head > span {
    color:
        var(--text-soft);

    font-size: 10px;
    font-weight: 670;

    white-space: nowrap;
}


/* =========================================================
   B · DOT GRID
========================================================= */

.tarot-ai-dots {
    display: flex;
    flex-direction: column;

    gap: 10px;
}


.tarot-ai-dot-row {
    min-height: 20px;

    display: flex;
    align-items: center;

    gap: 10px;
}


.tarot-ai-dot-row.is-split-before {
    position: relative;

    margin-top: 7px;
    padding-top: 9px;
}


.tarot-ai-dot-row.is-split-before::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 1px;

    background:
        var(--border);
}


.tarot-ai-dot-label {
    width: 54px;

    flex: 0 0 54px;

    color:
        var(--text);

    font-size: 10.5px;
    font-weight: 790;

    line-height: 1;

    letter-spacing: -.02em;
}


.tarot-ai-dot-track {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 5px;

    flex: 1;
}


.tarot-ai-dot {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    border-radius: 6px;

    background:
        color-mix(
            in srgb,
            var(--surface-hover) 76%,
            var(--bg) 24%
        );

    box-shadow:
        inset 0 0 0 1px
        var(--border);

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


.tarot-ai-dot.is-on {
    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.16);
}


.tarot-ai-dot-num {
    width: 34px;

    flex: 0 0 34px;

    color:
        var(--text-soft);

    font-size: 10.5px;
    font-weight: 780;

    text-align: right;

    font-variant-numeric:
        tabular-nums;
}


.tarot-ai-note {
    margin:
        10px
        0
        0;

    padding:
        9px
        11px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--border) 78%,
            transparent
        );

    border-radius: 10px;

    background:
        color-mix(
            in srgb,
            var(--surface-hover) 70%,
            transparent
        );

    color:
        var(--text-soft);

    font-size: 10.5px;
    font-weight: 590;

    line-height: 1.5;
}


/* =========================================================
   PRESET CHIPS · A STYLE
========================================================= */

.tarot-ai-presets {
    display: flex;

    gap: 6px;

    overflow-x: auto;

    padding-bottom: 3px;

    scrollbar-width: none;
}


.tarot-ai-presets::-webkit-scrollbar {
    display: none;
}


.tarot-ai-preset {
    min-height: 33px;

    padding:
        0
        13px;

    flex: 0 0 auto;

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

    border-radius: 999px;

    background:
        transparent;

    color:
        var(--text-soft);

    font-size: 11px;
    font-weight: 710;

    line-height: 1;

    white-space: nowrap;

    cursor: pointer;

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


.tarot-ai-preset:hover {
    border-color:
        var(--tarot-accent-border);
}


.tarot-ai-preset.is-selected {
    border-color:
        var(--tarot-accent);

    background:
        var(--tarot-accent);

    color:
        #fff;
}


.tarot-ai-preset:active {
    transform:
        scale(.97);
}


/* =========================================================
   CUSTOM
========================================================= */

.tarot-ai-custom {
    display: none;

    width: 100%;
    min-height: 78px;

    margin-top: 8px;

    padding:
        11px
        12px;

    resize: vertical;

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

    border-radius: 12px;

    outline: none;

    background:
        color-mix(
            in srgb,
            var(--surface-hover) 88%,
            var(--bg) 12%
        );

    color:
        var(--text);

    font-family: inherit;

    font-size: 11.5px;
    font-weight: 560;

    line-height: 1.55;
}


.tarot-ai-dock.is-custom
.tarot-ai-custom {
    display: block;
}


.tarot-ai-custom:focus {
    border-color:
        var(--tarot-accent);

    box-shadow:
        0 0 0 3px
        var(--tarot-accent-soft);
}


.tarot-ai-custom-note {
    display: none;

    margin:
        7px
        0
        0;

    color:
        var(--text-soft);

    font-size: 9.5px;
    font-weight: 560;

    line-height: 1.45;
}


.tarot-ai-dock.is-custom
.tarot-ai-custom-note {
    display: block;
}


/* =========================================================
   OPTIONS
========================================================= */

.tarot-ai-options {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}


.tarot-ai-option {
    min-height: 31px;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding:
        0
        11px;

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

    border-radius: 999px;

    background:
        transparent;

    color:
        var(--text-soft);

    font-size: 10.5px;
    font-weight: 680;

    cursor: pointer;
}


.tarot-ai-option-mark {
    width: 13px;
    height: 13px;

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

    border:
        1.5px solid
        color-mix(
            in srgb,
            var(--text-soft) 68%,
            transparent
        );

    border-radius: 4px;

    color:
        transparent;

    font-size: 9px;
    font-weight: 800;
}


.tarot-ai-option.is-selected {
    border-color:
        var(--tarot-accent-border);

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


.tarot-ai-option.is-selected
.tarot-ai-option-mark {
    border-color:
        var(--tarot-accent);

    background:
        var(--tarot-accent);

    color:
        #fff;
}


.tarot-ai-option[disabled] {
    opacity: .38;

    cursor: not-allowed;
}


/* =========================================================
   PREVIEW
========================================================= */

.tarot-ai-preview {
    width: 100%;
    max-height: 210px;

    margin: 0;

    padding:
        13px
        14px;

    overflow: auto;

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

    border-radius: 13px;

    background:
        color-mix(
            in srgb,
            var(--surface-hover) 90%,
            var(--bg) 10%
        );

    color:
        var(--text);

    font-family:
        "SFMono-Regular",
        Consolas,
        Menlo,
        monospace;

    font-size: 10.5px;

    line-height: 1.62;

    white-space: pre-wrap;

    overflow-wrap: anywhere;
}


/* =========================================================
   ACTIONS
========================================================= */

.tarot-ai-actions {
    margin-top: 13px;

    display: grid;

    grid-template-columns:
        1.8fr
        1fr;

    gap: 7px;
}


.tarot-ai-button {
    min-height: 46px;

    border: 0;

    border-radius: 13px;

    font-family: inherit;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform .14s ease,
        box-shadow .14s ease,
        background .14s ease;
}


.tarot-ai-button-main {
    background:
        var(--tarot-accent);

    color:
        #fff;

    box-shadow:
        0 4px 0
        color-mix(
            in srgb,
            var(--tarot-accent-strong) 82%,
            #172820 18%
        );
}


.tarot-ai-button-main:active {
    transform:
        translateY(3px);

    box-shadow:
        0 1px 0
        var(--tarot-accent-strong);
}


.tarot-ai-button-main.is-done {
    background:
        var(--text);

    box-shadow:
        0 4px 0
        color-mix(
            in srgb,
            var(--text) 62%,
            #000 38%
        );
}


.tarot-ai-button-sub {
    border:
        1.5px solid
        var(--border);

    background:
        transparent;

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


.tarot-ai-button-sub:active {
    transform:
        scale(.98);
}


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

.tarot-ai-toast {
    position: fixed;

    z-index: 190000;

    left: 50%;
    bottom:
        calc(
            84px
            +
            env(safe-area-inset-bottom)
        );

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

    padding:
        10px
        16px;

    border-radius: 12px;

    background:
        color-mix(
            in srgb,
            var(--text) 92%,
            #000 8%
        );

    color:
        var(--bg);

    font-size: 11px;
    font-weight: 650;

    white-space: nowrap;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

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

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;
}


.tarot-ai-toast.is-visible {
    opacity: 1;

    visibility: visible;

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


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

body.tarot-ai-available
.spread-page {
    padding-bottom:
        calc(
            78px
            +
            env(safe-area-inset-bottom)
        );
}


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

html[data-theme="dark"]
.tarot-ai-panel {
    box-shadow:
        0 -18px 54px
        rgba(0,0,0,.34);
}


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

@media (max-width: 700px) {

    .tarot-ai-panel {
        width: 100%;

        border-left: 0;
        border-right: 0;

        border-radius:
            22px
            22px
            0
            0;
    }


    .tarot-ai-handle {
        height: 64px;

        padding:
            0
            14px;
    }


    .tarot-ai-dock {
        transform:
            translateY(
                calc(
                    100%
                    -
                    64px
                    -
                    env(safe-area-inset-bottom)
                )
            );
    }


    .tarot-ai-body {
        max-height:
            calc(
                84dvh
                -
                64px
            );
    }


    .tarot-ai-inner {
        padding:
            2px
            15px
            calc(
                20px
                +
                env(safe-area-inset-bottom)
            );
    }


    .tarot-ai-handle-copy strong {
        font-size: 12.5px;
    }


    .tarot-ai-handle-copy > span {
        font-size: 9.5px;
    }


    .tarot-ai-handle-dot {
        width: 7px;
        height: 7px;

        flex-basis: 7px;
    }


    .tarot-ai-dot-row {
        gap: 7px;
    }


    .tarot-ai-dot-label {
        width: 47px;

        flex-basis: 47px;

        font-size: 9.8px;
    }


    .tarot-ai-dot-track {
        gap: 4px;
    }


    .tarot-ai-dot {
        width:
            clamp(
                13px,
                4vw,
                18px
            );

        height:
            clamp(
                13px,
                4vw,
                18px
            );

        flex-basis:
            clamp(
                13px,
                4vw,
                18px
            );

        border-radius: 5px;
    }


    .tarot-ai-dot-num {
        width: 29px;

        flex-basis: 29px;

        font-size: 9.5px;
    }


    .tarot-ai-preview {
        max-height: 180px;

        font-size: 9.8px;
    }


    .tarot-ai-actions {
        grid-template-columns:
            1.55fr
            1fr;
    }

}


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

@media (max-width: 390px) {

    .tarot-ai-handle-dots {
        display: none;
    }


    .tarot-ai-dot-label {
        width: 43px;

        flex-basis: 43px;
    }


    .tarot-ai-inner {
        padding-left: 12px;
        padding-right: 12px;
    }

}


/* =========================================================
   FALLBACKS
========================================================= */

@supports not (background: color-mix(in srgb, #000 50%, #fff 50%)) {

    .tarot-ai-panel,
    .tarot-ai-handle {
        background:
            var(--surface);
    }


    .tarot-ai-dot,
    .tarot-ai-note,
    .tarot-ai-custom,
    .tarot-ai-preview {
        background:
            var(--surface-hover);
    }

}


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

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

    .tarot-ai-dock,
    .tarot-ai-chevron,
    .tarot-ai-button,
    .tarot-ai-preset,
    .tarot-ai-toast {
        transition:
            none
            !important;
    }

}


/* =========================================================
   HANDLE SPLIT — 아래 띠를 좌우 둘로

   왼쪽 : 이번 배열의 구성 (도트 → 요약, 누르면 설명)
   오른쪽 : AI에게 물어보기 (누르면 아래 내용 펼치기)
========================================================= */

.tarot-ai-handle-split {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1fr 1fr;

    /*
     * 패널의 둥근 윗모서리를 대신 잘라 줍니다.
     * 쪽지가 패널 밖으로 나와야 해서 패널에서 overflow 를 풀었기 때문입니다.
     */
    border-radius: 22px 22px 0 0;

    overflow: hidden;
}


/* 가운데 칸막이 */

.tarot-ai-handle-split > .tarot-ai-handle + .tarot-ai-handle {
    border-left:
        1px solid
        color-mix(
            in srgb,
            var(--border, rgba(63, 82, 72, .16)) 70%,
            transparent 30%
        );
}


.tarot-ai-handle-split .tarot-ai-handle {
    width: 100%;
    height: auto;
    min-height: 68px;

    padding: 11px 14px;

    gap: 10px;
}


/* ---- 왼쪽 : 도트가 위, 요약이 아래 ---- */

.tarot-ai-handle-composition {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "dots  chevron"
        "text  text";

    align-items: center;

    row-gap: 6px;
}


.tarot-ai-handle-composition .tarot-ai-handle-dots {
    grid-area: dots;

    justify-content: flex-start;
}


.tarot-ai-handle-composition .tarot-ai-chevron {
    grid-area: chevron;
}


.tarot-ai-handle-summary {
    grid-area: text;

    min-width: 0;

    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--text-soft);

    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -.02em;
}


.tarot-ai-handle-composition[aria-expanded="true"] .tarot-ai-chevron {
    transform: rotate(180deg);
}


/* ---- 오른쪽 : 제목과 설명 ---- */

.tarot-ai-handle-ask {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/*
 * 가운데를 접었다 펴는 화살표는 오른쪽 것만 돌립니다.
 * (원래 규칙이 .tarot-ai-chevron 전부를 돌려서 왼쪽까지 돌아갑니다)
 */

.tarot-ai-dock.is-open
.tarot-ai-handle-composition
.tarot-ai-chevron {
    transform: none;
}

.tarot-ai-dock.is-open
.tarot-ai-handle-composition[aria-expanded="true"]
.tarot-ai-chevron {
    transform: rotate(180deg);
}


/* ---- 왼쪽에서 펼쳐지는 구성 설명 ----

   시트는 늘 아래로 내려가 있고 위쪽 한 줄만 보입니다.
   그래서 이 상자를 시트 안에 그냥 두면 화면 밖에 숨습니다.
   (눌러도 아무 일도 없는 것처럼 보였던 까닭입니다)

   띠 바로 위에 뜨는 쪽지로 만듭니다.
   시트 자체는 움직이지 않으므로 오른쪽 AI 내용과 서로 간섭하지 않습니다.
*/

.tarot-ai-panel {
    position: relative;

    /* 쪽지가 패널 밖(위)으로 나와야 하므로 잘라내지 않습니다 */
    overflow: visible;
}


.tarot-ai-composition {
    position: absolute;
    z-index: 3;

    left: 0;
    right: 0;
    bottom: 100%;

    max-height: 52dvh;
    overflow-y: auto;

    padding: 13px 15px 15px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--border, rgba(63, 82, 72, .16)) 70%,
            transparent 30%
        );

    border-bottom: 0;

    border-radius: 18px 18px 0 0;

    background:
        color-mix(
            in srgb,
            var(--surface, #ffffff) 96%,
            var(--tarot-accent-soft, rgba(82, 183, 136, .12)) 4%
        );

    box-shadow:
        0 -14px 34px
        rgba(24, 45, 35, .16);
}


html[data-theme="dark"] .tarot-ai-composition {
    box-shadow:
        0 -14px 34px
        rgba(0, 0, 0, .34);
}


.tarot-ai-composition[hidden] {
    display: none;
}


/* =========================================================
   좁은 화면에서도 좌우 둘로

   원래 시트는 위쪽 64px 만 보이도록 내려가 있습니다.
   그래서 띠 높이를 딱 64px 로 맞춰야 두 칸이 모두 눌립니다.
   (전에는 띠가 더 높아 오른쪽 칸이 화면 밖으로 밀렸습니다)

   좁은 화면에서는 글자를 빼고 도트와 제목만 남깁니다.
========================================================= */

@media (max-width: 700px) {

    .tarot-ai-handle-split .tarot-ai-handle {
        height: 64px;
        min-height: 64px;

        padding: 0 12px;
    }


    /* 왼쪽 : 도트만 */

    .tarot-ai-handle-composition {
        grid-template-areas: "dots chevron";

        row-gap: 0;
    }


    .tarot-ai-handle-summary {
        display: none;
    }


    /* 오른쪽 : 제목만 */

    .tarot-ai-handle-ask .tarot-ai-handle-copy > span {
        display: none;
    }


    .tarot-ai-handle-ask .tarot-ai-handle-copy strong {
        font-size: 13px;
    }

}


@media (max-width: 390px) {

    .tarot-ai-handle-split .tarot-ai-handle {
        padding: 0 10px;

        gap: 6px;
    }

    .tarot-ai-handle-ask .tarot-ai-handle-copy strong {
        font-size: 12px;
    }

}


/* =========================================================
   HANDLE — 좁은 화면에서 도트 + 짧은 구성

   이 파일에는 원래 이런 규칙이 있었습니다.

       @media (max-width: 390px) {
           .tarot-ai-handle-dots { display: none; }
       }

   예전에는 도트가 띠 오른쪽 장식이라 좁으면 숨겨도 됐지만,
   지금은 왼쪽 칸의 주인공이라 숨으면 칸이 텅 빕니다.
   왼쪽 칸 안의 도트만 되살립니다.
========================================================= */

.tarot-ai-handle-mini {
    grid-area: text;

    display: none;

    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--text-soft);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.02em;
}


@media (max-width: 700px) {

    /* 도트 위, 짧은 구성 아래 */

    .tarot-ai-handle-composition {
        grid-template-areas:
            "dots  chevron"
            "text  text";

        row-gap: 5px;
    }


    .tarot-ai-handle-composition .tarot-ai-handle-dots {
        display: inline-flex;
    }


    .tarot-ai-handle-mini {
        display: block;
    }

}


@media (max-width: 430px) {

    /* 카드가 열 장이어도 한 줄에 들어가도록 */

    .tarot-ai-handle-composition .tarot-ai-handle-dot {
        width: 6px;
        height: 6px;

        border-radius: 2px;
    }


    .tarot-ai-handle-composition .tarot-ai-handle-dots {
        gap: 3px;
    }


    .tarot-ai-handle-mini {
        font-size: 10.5px;
    }

}


@media (max-width: 390px) {

    /* 위쪽 규칙이 숨긴 것을 왼쪽 칸에서만 되살립니다 */

    .tarot-ai-handle-composition .tarot-ai-handle-dots {
        display: inline-flex;
    }

}


/* =========================================================
   ACTIONS — 복사될 내용 제목 바로 아래, 미리보기 위
========================================================= */

.tarot-ai-preview-block .tarot-ai-actions {
    margin-top: 0;
    margin-bottom: 10px;
}