@charset "UTF-8";

/* =========================================================
   SOOPOOLLEAF TAROT · FIXED SPREADS v55

   one-card
   two-card
   three-card
   four-card
   five-card
   seven-card
========================================================= */


/* =========================================================
   BASE
========================================================= */

:root {
    --bg: #f4f1e8;
    --surface: rgba(255, 255, 255, .74);
    --surface-hover: rgba(255, 255, 255, .88);
    --glass: rgba(255, 255, 255, .66);
    --glass-solid: #f8f6ef;

    --text: #26312c;
    --text-soft: #77827c;

    --border: rgba(63, 82, 72, .13);

    --primary: #52b788;

    --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);

    --toolbar-height: 54px;
}


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;

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

    background: var(--bg);

    color: var(--text);

    font-family:
        Pretendard,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Noto Sans KR",
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
}


body {
    min-height: 100vh;
    min-height: 100dvh;

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


button,
a {
    font: inherit;

    -webkit-tap-highlight-color: transparent;
}


button {
    color: inherit;
}


a {
    color: inherit;
    text-decoration: none;
}


.spread-page {
    width: 100%;

    min-height: 100vh;
    min-height: 100dvh;

    background:
        radial-gradient(
            circle at 50% -12%,
            var(--tarot-accent-soft),
            transparent 32%
        ),
        var(--bg);
}


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

.spread-toolbar {
    position: sticky;
    top: 0;

    z-index: 50000;

    width: min(
        calc(100% - 24px),
        1240px
    );

    min-height: var(--toolbar-height);

    margin: 10px auto 0;

    padding: 7px 9px;

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

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

    border-radius: 18px;

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

    box-shadow:
        0 8px 28px
        rgba(37, 50, 43, .06);

    backdrop-filter:
        blur(18px);

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


.spread-toolbar-left,
.spread-toolbar-right {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 2px;
}


.spread-toolbar-right {
    justify-content: flex-end;
}


.spread-toolbar-title {
    position: absolute;

    left: 50%;
    top: 50%;

    max-width: 34%;

    margin: 0;

    overflow: hidden;

    color: var(--text);

    font-size: 13px;
    font-weight: 780;
    line-height: 1;

    letter-spacing: -.03em;

    text-align: center;

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

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

    pointer-events: none;
}


.spread-toolbar-button {
    min-height: 36px;

    padding: 0 10px;

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

    gap: 7px;

    border: 0;
    border-radius: 11px;

    background: transparent;

    color: var(--text-soft);

    cursor: pointer;

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


.spread-toolbar-button:hover,
.spread-toolbar-button:focus-visible {
    outline: none;

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

    color:
        var(--text);
}


.spread-toolbar-button:active {
    transform:
        scale(.96);
}


.spread-toolbar-button svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.spread-menu-button {
    font-weight: 720;
}


/* palette is inside sticky toolbar */
.spread-toolbar
.tarot-theme-control {
    position: relative;

    z-index: 60000;
}


/* =========================================================
   MAIN
========================================================= */

.spread-main {
    width: min(
        calc(100% - 24px),
        1240px
    );

    margin: 0 auto;

    padding:
        22px
        0
        90px;
}


/* =========================================================
   CURRENT MODE CHIPS
========================================================= */

.spread-reading-meta {
    min-height: 28px;

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

    gap: 6px;

    margin-bottom: 10px;
}


.spread-mode-chip,
.spread-reversed-chip {
    min-height: 24px;

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

    padding: 0 9px;

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

    border-radius: 999px;

    background:
        var(--surface);

    color:
        var(--text-soft);

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

    white-space: nowrap;
}


.spread-mode-chip {
    border-color:
        var(--tarot-accent-border);

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


/* =========================================================
   CAPTURE / RESULT AREA
========================================================= */

.spread-capture {
    position: relative;

    width: 100%;

    min-height: 340px;

    padding:
        28px
        24px
        34px;

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

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

    border-radius: 26px;

    background:
        radial-gradient(
            circle at 50% 44%,
            var(--tarot-accent-soft),
            transparent 40%
        ),
        var(--bg);

    overflow: hidden;
}


.spread-result-head {
    width: 100%;

    margin-bottom: 22px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 5px;

    text-align: center;
}


.spread-result-head strong {
    color: var(--text);

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

    letter-spacing: -.04em;
}


.spread-result-head span {
    min-height: 18px;

    color: var(--text-soft);

    font-size: 10.5px;
    font-weight: 560;
}


/* =========================================================
   RESULT ROW
========================================================= */

.spread-result-row {
    width:
        min(
            100%,
            calc(
                var(--spread-count)
                *
                138px
                +
                (
                    var(--spread-count)
                    -
                    1
                )
                *
                14px
            )
        );

    display: grid;

    grid-template-columns:
        repeat(
            var(--spread-count),
            minmax(0, 1fr)
        );

    gap:
        clamp(
            6px,
            1.2vw,
            14px
        );

    align-items: center;
    justify-content: center;
}


.spread-result-slot {
    position: relative;

    /*
     * 카드 사진을 감싸는 여백(매트 + 테두리).
     * 상하 여백이 좌우와 똑같아지도록 아래 .spread-result-card 에서
     * 이 값만큼 높이를 보정합니다.
     */
    --card-mat: clamp(2px, .35vw, 4px);
    --card-edge: 1px;
    --card-inset: calc(var(--card-mat) + var(--card-edge));

    width: 100%;

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

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

    border:
        1px dashed
        color-mix(
            in srgb,
            var(--text-soft) 24%,
            transparent
        );

    border-radius:
        clamp(
            5px,
            1vw,
            10px
        );

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

    color:
        color-mix(
            in srgb,
            var(--text-soft) 52%,
            transparent
        );

    transform:
        translateX(-14px);

    opacity: 0;

    animation:
        spreadSlotEnter
        .38s
        cubic-bezier(.2,.8,.2,1)
        forwards;


    overflow: visible;

    perspective: 900px;
}


.spread-result-slot-number {
    font-size: 10px;
    font-weight: 760;
}


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

.spread-result-card {
    position: absolute;

    /*
     * 슬롯은 8/13 이지만 프레임 안쪽(사진) 박스도 8/13 이 되어야
     * 상하/좌우 여백이 같아집니다.
     *   필요한 높이 = (W - 2i) * 13/8 + 2i = 슬롯높이 - 1.25i
     * 남는 1.25i 를 위아래로 반씩 나눠 중앙에 둡니다.
     */
    left: 0;
    right: 0;
    top: calc(var(--card-inset) * .625);
    bottom: auto;

    height: calc(100% - var(--card-inset) * 1.25);

    z-index: 2;

    display: block;

    border-radius: inherit;

    opacity: 0;

    transform:
        translateX(-18px)
        translateY(4px)
        scale(.94);

    animation:
        spreadCardDeal
        .46s
        cubic-bezier(.2,.82,.22,1)
        forwards;

    box-shadow:
        0 12px 28px
        rgba(31, 43, 36, .14);
}


.spread-result-card-frame {
    width: 100%;
    height: 100%;

    padding: var(--card-mat);

    border:
        var(--card-edge) solid
        color-mix(
            in srgb,
            var(--border) 80%,
            rgba(255,255,255,.55)
        );

    border-radius: inherit;

    background:
        color-mix(
            in srgb,
            var(--surface) 86%,
            white 14%
        );

    overflow: hidden;

    transform:
        rotate(0deg);

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


.spread-result-card.is-reversed
.spread-result-card-frame {
    transform:
        rotate(180deg);
}


.spread-result-card img {
    width: 100%;
    height: 100%;

    display: block;

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

    border-radius: 6px;

    user-select: none;

    -webkit-user-drag: none;
}


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

.spread-copyright {
    position: absolute;

    left: 16px;
    bottom: 10px;

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

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

    pointer-events: none;
}


/* =========================================================
   MANUAL DECK
========================================================= */

.spread-manual-panel {
    width: 100%;

    margin-top: 18px;

    padding:
        22px
        20px
        26px;

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

    border-radius: 24px;

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

    box-shadow:
        0 12px 34px
        rgba(33, 47, 39, .05);
}


.spread-manual-panel[hidden] {
    display: none !important;
}


.spread-manual-copy {
    margin-bottom: 16px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 4px;

    text-align: center;
}


.spread-manual-kicker {
    color:
        var(--tarot-accent-strong);

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


.spread-manual-copy strong {
    color: var(--text);

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

    letter-spacing: -.03em;
}


.spread-manual-copy > span:last-child {
    color: var(--text-soft);

    font-size: 10px;
    font-weight: 600;
}


/*
 * 78장의 뒷면:
 * 데스크톱은 가로 13장씩,
 * 위에서 아래로 다음 줄.
 *
 * JS가 --deck-index를 넣고
 * 왼쪽 → 오른쪽 순서로 애니메이션.
 */
.spread-back-grid {
    width: min(100%, 980px);

    margin: 0 auto;

    display: grid;

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

    gap:
        8px;
}


.spread-back-card {
    position: relative;

    width: 100%;

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

    padding: 0;

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

    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                #1f2d44 86%,
                var(--tarot-accent) 14%
            ),
            color-mix(
                in srgb,
                #2c2241 84%,
                var(--tarot-accent) 16%
            )
        );

    box-shadow:
        inset 0 0 0 3px
        rgba(255,255,255,.06),
        0 5px 12px
        rgba(22, 30, 26, .09);

    cursor: pointer;

    opacity: 0;

    transform:
        translateX(-14px)
        translateY(-3px);

    animation:
        spreadDeckEnter
        .34s
        cubic-bezier(.2,.8,.2,1)
        forwards;


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


.spread-back-card::before {
    content: "";

    position: absolute;

    inset: 5px;

    border:
        1px solid
        rgba(230, 211, 153, .40);

    border-radius: 4px;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(244, 213, 121, .18) 0 7%,
            transparent 8% 100%
        );
}


.spread-back-card::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    color:
        rgba(240, 212, 138, .82);

    font-size:
        clamp(
            8px,
            1.2vw,
            15px
        );

    letter-spacing: .08em;

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

    white-space: nowrap;
}


.spread-back-card:hover,
.spread-back-card:focus-visible {
    outline: none;

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

    box-shadow:
        inset 0 0 0 3px
        rgba(255,255,255,.08),
        0 7px 18px
        var(--tarot-accent-shadow);

    transform:
        translateY(-3px)
        scale(1.025);
}


.spread-back-card.is-picked {
    opacity: .12 !important;

    transform:
        scale(.92) !important;

    pointer-events: none;
}


.spread-back-grid.is-complete
.spread-back-card:not(.is-picked) {
    opacity: .30 !important;

    pointer-events: none;
}


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

.spread-toast {
    position: fixed;

    left: 50%;
    bottom: 24px;

    z-index: 900000;

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

    min-height: 34px;

    padding:
        0 13px;

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

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

    border-radius: 999px;

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

    color: var(--text);

    box-shadow:
        0 8px 24px
        rgba(20, 31, 25, .12);

    backdrop-filter:
        blur(16px);

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

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

    opacity: 0;

    visibility: hidden;

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

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

    pointer-events: none;
}


.spread-toast.is-visible {
    opacity: 1;

    visibility: visible;

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


/* =========================================================
   PALETTE LAYERING / MOBILE
========================================================= */

.spread-toolbar:has(
    .tarot-palette-drop-v35.is-open
) {
    z-index: 1200000;
}


.spread-toolbar
.tarot-palette-drop-v35 {
    z-index: 1200010 !important;
}


@media (max-width: 900px) {

    .spread-toolbar
    .tarot-palette-drop-v35 {
        position: fixed !important;

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

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

        width: auto !important;

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

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

        transform-origin:
            top center !important;
    }

}


/* =========================================================
   PALETTE SLIDER CONTAINMENT
   81색을 펼쳐도 Light/Dark 선택 배경이 세로로 늘어나지 않음
========================================================= */

.spread-page
.tarot-theme-slider-row-v38 {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}


.spread-page
.tarot-theme-slider-indicator-v38 {
    position: absolute !important;
    top: 4px !important;
    bottom: 4px !important;
    height: auto !important;
    z-index: 0 !important;
}


.spread-page
.tarot-theme-slider-button-v38 {
    position: relative !important;
    z-index: 1 !important;
}


.spread-page
.tarot-palette-full-v35:not(.is-expanded) {
    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;
}


.spread-page
.tarot-palette-full-v35.is-expanded {
    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;
}


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

@media (max-width: 760px) {

    :root {
        --toolbar-height: 50px;
    }


    .spread-toolbar {
        width:
            calc(100% - 12px);

        margin-top: 6px;

        padding:
            5px
            6px;

        border-radius:
            16px;
    }


    .spread-toolbar-button {
        width: 36px;
        min-width: 36px;
        height: 36px;
        min-height: 36px;

        padding: 0;

        border-radius: 50%;
    }


    .spread-toolbar-button > span {
        display: none;
    }


    .spread-toolbar-title {
        max-width: 34vw;

        font-size: 12px;
    }


    .spread-main {
        width:
            calc(100% - 12px);

        padding-top: 14px;
    }


    .spread-reading-meta {
        margin-bottom: 8px;
    }


    .spread-capture {
        min-height: 280px;

        padding:
            22px
            10px
            30px;

        border-radius: 20px;
    }


    .spread-result-head {
        margin-bottom: 16px;
    }


    .spread-result-head strong {
        font-size: 15px;
    }


    .spread-result-row {
        gap: 5px;
    }


    .spread-result-slot {
        border-radius: 5px;
    }


    .spread-copyright {
        left: 10px;
        bottom: 8px;

        font-size: 6px;
    }


    .spread-manual-panel {
        margin-top: 10px;

        padding:
            18px
            10px
            22px;

        border-radius: 20px;
    }


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

        gap: 6px;
    }


    .spread-back-card {
        border-radius: 5px;
    }


    .spread-back-card::before {
        inset: 3px;

        border-radius: 3px;
    }

}


/* very small mobile */
@media (max-width: 390px) {

    .spread-toolbar-title {
        max-width: 30vw;

        font-size: 11px;
    }


    .spread-result-row {
        gap: 4px;
    }


    .spread-back-grid {
        gap: 5px;
    }

}


/* =========================================================
   LOW HEIGHT LAPTOP
========================================================= */

@media (max-height: 820px) and (min-width: 761px) {

    .spread-main {
        padding-top: 14px;
    }


    .spread-capture {
        min-height: 292px;

        padding-top: 20px;
        padding-bottom: 28px;
    }


    .spread-manual-panel {
        padding-top: 16px;
    }

}


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

html[data-theme="dark"]
.spread-toolbar,
html[data-theme="dark"]
.spread-manual-panel,
html[data-theme="dark"]
.spread-mode-chip,
html[data-theme="dark"]
.spread-reversed-chip {
    border-color:
        rgba(225, 237, 230, .13);
}


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

body.spread-exporting
.spread-result-head span {
    visibility: hidden;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes spreadSlotEnter {

    to {
        opacity: 1;

        transform:
            translateX(0);
    }

}


@keyframes spreadCardDeal {

    0% {
        opacity: 0;

        transform:
            translateX(-22px)
            translateY(6px)
            scale(.93);
    }

    72% {
        opacity: 1;

        transform:
            translateX(2px)
            translateY(0)
            scale(1.015);
    }

    100% {
        opacity: 1;

        transform:
            translateX(0)
            translateY(0)
            scale(1);
    }

}


@keyframes spreadDeckEnter {

    to {
        opacity: 1;

        transform:
            translateX(0)
            translateY(0);
    }

}


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

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

    *,
    *::before,
    *::after {
        animation:
            none !important;

        transition:
            none !important;
    }


    .spread-result-slot,
    .spread-back-card,
    .spread-result-card {
        opacity:
            1 !important;

        transform:
            none !important;
    }

}


/* =========================================================
   color-mix fallback
========================================================= */

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

    .spread-toolbar,
    .spread-manual-panel,
    .spread-mode-chip,
    .spread-reversed-chip {
        background:
            var(--surface);
    }


    .spread-capture {
        background:
            var(--bg);
    }

}


/* =========================================================
   FIXED SPREADS v57
   COMPACT 78-CARD MANUAL DECK + RESULT-FIRST AFTER PICK
========================================================= */


/* =========================================================
   PROMPT
========================================================= */

.spread-prompt {
    width: 100%;

    margin:
        4px
        auto
        14px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 5px;

    text-align: center;
}


.spread-prompt strong {
    color: var(--text);

    font-size:
        clamp(
            18px,
            2vw,
            24px
        );

    font-weight: 850;

    line-height: 1.15;

    letter-spacing: -.045em;
}


.spread-prompt span {
    min-height: 20px;

    color: var(--text-soft);

    font-size:
        clamp(
            11px,
            1.2vw,
            13px
        );

    font-weight: 610;

    line-height: 1.4;

    letter-spacing: -.02em;
}


/* =========================================================
   MANUAL PICKING MODE

   78장 선택 중에는 페이지 자체를 스크롤하지 않게 하고
   deck의 카드 크기를 JS가 viewport에 맞춰 계산합니다.
========================================================= */

body.spread-manual-active {
    overflow: hidden !important;
}


.spread-manual-panel {
    width: 100%;

    margin: 0 !important;

    padding:
        4px
        8px
        12px
        !important;

    border: 0 !important;

    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    transition:
        opacity .20s ease,
        transform .22s cubic-bezier(.2,.8,.2,1);
}


.spread-manual-panel.is-leaving {
    opacity: 0;

    transform:
        translateY(-5px)
        scale(.985);

    pointer-events: none;
}


.spread-manual-panel[hidden] {
    display: none !important;
}


/* =========================================================
   78 BACKS · 13 × 6
========================================================= */

.spread-back-grid {
    --back-card-width: 36px;
    --back-card-height: 58px;
    --deck-gap: 4px;

    width: auto;
    height: auto;

    max-width: 100%;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(
            13,
            var(--back-card-width)
        );

    grid-template-rows:
        repeat(
            6,
            var(--back-card-height)
        );

    grid-auto-flow: row;

    gap:
        var(--deck-gap);

    justify-content: center;
    align-content: center;

    overflow: visible;
}


.spread-back-card {
    position: relative;

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

    height:
        var(--back-card-height)
        !important;

    aspect-ratio: auto !important;

    padding: 0;

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

    border-radius:
        clamp(
            3px,
            .65vw,
            6px
        );

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                #1f2d44 86%,
                var(--tarot-accent) 14%
            ),
            color-mix(
                in srgb,
                #2c2241 84%,
                var(--tarot-accent) 16%
            )
        );

    box-shadow:
        inset 0 0 0 2px
        rgba(255,255,255,.055),
        0 3px 8px
        rgba(22, 30, 26, .08);

    cursor: pointer;

    opacity: 0;

    transform:
        translateX(-8px)
        scale(.96);

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

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


.spread-back-card::before {
    inset:
        clamp(
            2px,
            .4vw,
            4px
        );

    border-radius: 3px;
}


.spread-back-card::after {
    content: "";

    font-size:
        clamp(
            5px,
            .8vw,
            10px
        );

    letter-spacing: 0;
}


.spread-back-card:hover,
.spread-back-card:focus-visible {
    transform:
        translateY(-2px)
        scale(1.035);
}


.spread-back-card.is-picked {
    opacity: .18 !important;

    transform:
        scale(.88)
        !important;

    pointer-events: none;
}


.spread-back-grid.is-complete
.spread-back-card:not(.is-picked) {
    opacity: .26 !important;

    pointer-events: none;
}


/* =========================================================
   RESULT
========================================================= */

.spread-capture[hidden] {
    display: none !important;
}


.spread-capture {
    width: 100%;

    min-height: 0 !important;

    padding:
        20px
        16px
        32px
        !important;

    border: 0 !important;

    border-radius: 24px;

    background:
        radial-gradient(
            circle at 50% 42%,
            var(--tarot-accent-soft),
            transparent 47%
        ),
        transparent
        !important;

    opacity: 0;

    transform:
        translateY(8px);

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


.spread-capture.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/*
 * 1~5장:
 * 결과는 한 줄.
 */
.spread-result-row {
    width:
        min(
            100%,
            calc(
                var(--spread-count)
                *
                132px
                +
                (
                    var(--spread-count)
                    -
                    1
                )
                *
                12px
            )
        )
        !important;

    display: grid !important;

    grid-template-columns:
        repeat(
            var(--spread-count),
            minmax(
                0,
                132px
            )
        )
        !important;

    gap:
        clamp(
            6px,
            1.1vw,
            12px
        )
        !important;

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

    margin: 0 auto;
}


.spread-result-slot {
    width: 100%;

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

    border: 0 !important;

    background: transparent !important;

    color: transparent !important;

    opacity: 1 !important;

    transform: none !important;

    animation: none !important;

    overflow: visible;
}


.spread-result-slot-number {
    display: none !important;
}


/* =========================================================
   7 CARDS · 4 TOP + 3 BOTTOM
========================================================= */

.spread-page[data-spread="seven-card"]
.spread-result-row {
    width:
        min(
            100%,
            620px
        )
        !important;

    grid-template-columns:
        repeat(
            8,
            minmax(
                0,
                1fr
            )
        )
        !important;

    gap:
        clamp(
            7px,
            1.4vw,
            13px
        )
        !important;
}


.spread-page[data-spread="seven-card"]
.spread-result-slot {
    grid-column:
        span 2;
}


/*
 * 아래 3장을 가운데 정렬.
 *
 * row 1:
 * [1][2][3][4]
 *
 * row 2:
 *   [5][6][7]
 */
.spread-page[data-spread="seven-card"]
.spread-result-slot:nth-child(5) {
    grid-column:
        2 / span 2;
}


.spread-page[data-spread="seven-card"]
.spread-result-slot:nth-child(6) {
    grid-column:
        4 / span 2;
}


.spread-page[data-spread="seven-card"]
.spread-result-slot:nth-child(7) {
    grid-column:
        6 / span 2;
}


/* =========================================================
   RESULT CARD DEAL
========================================================= */

.spread-result-card {
    transform:
        translateX(-16px)
        translateY(4px)
        scale(.95);

    animation:
        spreadCardDealV57
        .43s
        cubic-bezier(.2,.82,.22,1)
        forwards;
}


/* =========================================================
   MAIN SPACING
========================================================= */

.spread-main {
    padding-top:
        14px
        !important;
}


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

@media (max-width: 760px) {

    .spread-main {
        width:
            calc(100% - 10px)
            !important;

        padding:
            10px
            0
            44px
            !important;
    }


    .spread-prompt {
        margin-bottom:
            9px;
    }


    .spread-prompt strong {
        font-size:
            18px;
    }


    .spread-prompt span {
        min-height:
            18px;

        font-size:
            11.5px;
    }


    .spread-manual-panel {
        padding:
            2px
            3px
            8px
            !important;
    }


    .spread-back-grid {
        max-width:
            calc(100vw - 12px);
    }


    .spread-capture {
        padding:
            12px
            6px
            24px
            !important;
    }


    .spread-result-row {
        width:
            min(
                100%,
                calc(
                    var(--spread-count)
                    *
                    90px
                )
            )
            !important;

        grid-template-columns:
            repeat(
                var(--spread-count),
                minmax(
                    0,
                    90px
                )
            )
            !important;

        gap:
            5px
            !important;
    }


    .spread-page[data-spread="seven-card"]
    .spread-result-row {
        width:
            min(
                100%,
                390px
            )
            !important;

        grid-template-columns:
            repeat(
                8,
                minmax(
                    0,
                    1fr
                )
            )
            !important;

        gap:
            5px
            !important;
    }

}


/* =========================================================
   LOW HEIGHT
========================================================= */

@media (max-height: 700px) {

    .spread-prompt {
        margin-bottom:
            6px;
    }


    .spread-prompt strong {
        font-size:
            17px;
    }


    .spread-prompt span {
        font-size:
            10.5px;
    }

}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes spreadDeckEnterV57 {

    to {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);
    }

}


@keyframes spreadCardDealV57 {

    0% {
        opacity: 0;

        transform:
            translateX(-18px)
            translateY(5px)
            scale(.94);
    }

    74% {
        opacity: 1;

        transform:
            translateX(2px)
            translateY(0)
            scale(1.012);
    }

    100% {
        opacity: 1;

        transform:
            translateX(0)
            translateY(0)
            scale(1);
    }

}


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

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

    .spread-manual-panel,
    .spread-capture,
    .spread-back-card,
    .spread-result-card {
        transition:
            none !important;

        animation:
            none !important;
    }


    .spread-back-card,
    .spread-result-card,
    .spread-capture {
        opacity:
            1 !important;

        transform:
            none !important;
    }

}

/* =========================================================
   FIXED SPREADS v60
   COMPACT RESULT / CARD NAME TOOLTIP
========================================================= */


/* 수동 선택 중에만 존재하는 안내문 */
.spread-manual-prompt {
    width: 100%;
    min-height: 21px;
    margin: 0 auto 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.spread-manual-prompt #spreadPromptText {
    color: var(--text-soft);
    font-size: 11.5px;
    font-weight: 680;
    line-height: 1.35;
    letter-spacing: -.02em;
}


/* 결과 카드는 이동하지 않지만 클릭/터치 가능 */
.spread-result-card {
    cursor: pointer;
}

.spread-result-card:focus-visible {
    outline: 2px solid var(--tarot-accent);
    outline-offset: 3px;
}


/* 카드 이름 커스텀 툴팁 */
.spread-card-name-tooltip {
    position: fixed;
    z-index: 900000;
    left: 0;
    top: 0;
    max-width: min(240px, calc(100vw - 24px));
    padding: 7px 11px;
    border: 1px solid var(--tarot-accent-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    color: var(--text);
    box-shadow: 0 9px 26px rgba(24,39,31,.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 760;
    line-height: 1.2;
    letter-spacing: -.015em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -100%) translateY(-4px) scale(.96);
    transform-origin: center bottom;
    transition:
        opacity .14s ease,
        transform .16s cubic-bezier(.2,.8,.2,1),
        visibility .14s ease;
}

.spread-card-name-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -100%) translateY(0) scale(1);
}

.spread-card-name-tooltip.is-below {
    transform: translate(-50%, 0) translateY(4px) scale(.96);
    transform-origin: center top;
}

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

.spread-card-name-tooltip::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 7px;
    height: 7px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    border-right: 1px solid var(--tarot-accent-border);
    border-bottom: 1px solid var(--tarot-accent-border);
    transform: translateX(-50%) rotate(45deg);
}

.spread-card-name-tooltip.is-below::after {
    top: -4px;
    bottom: auto;
    border-right: 0;
    border-bottom: 0;
    border-left: 1px solid var(--tarot-accent-border);
    border-top: 1px solid var(--tarot-accent-border);
}

html[data-theme="dark"] .spread-card-name-tooltip {
    box-shadow: 0 10px 28px rgba(0,0,0,.30);
}


/* 7카드가 낮은 Windows/노트북 화면에도 더 잘 들어오도록 압축 */
@media (min-width: 761px) and (max-height: 900px) {
    .spread-page[data-spread="seven-card"] .spread-main {
        padding-top: 7px !important;
        padding-bottom: 28px !important;
    }

    .spread-page[data-spread="seven-card"] .spread-capture {
        padding: 7px 12px 18px !important;
    }

    .spread-page[data-spread="seven-card"] .spread-result-row {
        width: min(100%, 540px) !important;
        gap: 7px !important;
    }

    .spread-page[data-spread="seven-card"] .spread-copyright {
        bottom: 5px;
    }
}

@media (max-width: 760px) {
    .spread-manual-prompt {
        min-height: 18px;
        margin-bottom: 6px;
    }

    .spread-manual-prompt #spreadPromptText {
        font-size: 10.5px;
    }

    .spread-card-name-tooltip {
        max-width: calc(100vw - 20px);
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spread-card-name-tooltip {
        transition: none !important;
    }
}


/* =========================================================
   FIXED SPREADS v61
   EXPORT-ONLY COPYRIGHT + ROBUST CARD BACK
========================================================= */


/* =========================================================
   1. COPYRIGHT
   v61 Blade에서 .spread-copyright HTML 자체를 제거했습니다.
   PNG 저장 시 tarot-spread.js가 Canvas에만 copyright를 그립니다.
========================================================= */

.spread-copyright {
    display:
        none
        !important;
}


/* =========================================================
   2. CARD BACK MOJIBAKE FIX

   기존 Unicode moon/star pseudo-element를 사용하지 않습니다.
   서버/헤더 인코딩과 상관없는 순수 CSS 문양으로 교체합니다.
========================================================= */

.spread-back-card::after {
    content:
        ""
        !important;

    position:
        absolute
        !important;

    left:
        50%
        !important;

    top:
        50%
        !important;

    width:
        clamp(
            7px,
            24%,
            17px
        )
        !important;

    height:
        auto
        !important;

    aspect-ratio:
        1
        !important;

    border:
        1px solid
        rgba(240, 212, 138, .78)
        !important;

    border-radius:
        50%
        !important;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(240,212,138,.86) 0 10%,
            transparent 12% 100%
        ),
        linear-gradient(
            45deg,
            transparent 46%,
            rgba(240,212,138,.58) 47% 53%,
            transparent 54%
        ),
        linear-gradient(
            -45deg,
            transparent 46%,
            rgba(240,212,138,.58) 47% 53%,
            transparent 54%
        )
        !important;

    box-shadow:
        0 0 0 3px
        rgba(240, 212, 138, .08)
        !important;

    font-size:
        0
        !important;

    letter-spacing:
        0
        !important;

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

    white-space:
        normal
        !important;

    pointer-events:
        none;
}


/* =========================================================
   3. QUESTION SPACING
========================================================= */

.spread-question-result {
    flex:
        0 0 auto;
}


@media (max-height: 820px) and (min-width: 761px) {

    .spread-question-result {
        margin-bottom:
            9px
            !important;

        padding:
            8px
            12px
            !important;
    }

}


/* =========================================================
   FIXED SPREADS v62
   ASCII-SAFE SVG CARD BACK EMBLEM

   The card-back ornament no longer uses CSS content with Unicode.
   JS inserts an SVG crescent using ASCII-only markup/path data.
========================================================= */


/* =========================================================
   1. DISABLE ALL LEGACY TEXT PSEUDO SYMBOLS
========================================================= */

.spread-back-card::after {
    content:
        none
        !important;

    display:
        none
        !important;
}


/* The existing ::before remains the inner card border. */

.spread-back-card::before {
    z-index:
        1;
}


/* =========================================================
   2. REAL SVG EMBLEM
========================================================= */

.spread-back-emblem {
    position:
        absolute;

    z-index:
        2;

    left:
        50%;

    top:
        50%;

    width:
        clamp(
            13px,
            34%,
            22px
        );

    height:
        auto;

    aspect-ratio:
        1;

    overflow:
        visible;

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

    pointer-events:
        none;

    filter:
        drop-shadow(
            0
            1px
            3px
            rgba(242, 213, 128, .20)
        );
}


.spread-back-emblem-ring {
    fill:
        color-mix(
            in srgb,
            var(--tarot-accent-soft) 18%,
            transparent
        );

    stroke:
        rgba(240, 212, 138, .62);

    stroke-width:
        1.15;
}


.spread-back-emblem-moon {
    fill:
        rgba(244, 216, 132, .92);

    stroke:
        rgba(255, 239, 188, .56);

    stroke-width:
        .45;

    stroke-linejoin:
        round;
}


.spread-back-emblem-dot {
    fill:
        rgba(255, 234, 165, .92);
}


/* =========================================================
   3. SELECT / HOVER
========================================================= */

.spread-back-card:hover
.spread-back-emblem,

.spread-back-card:focus-visible
.spread-back-emblem {
    filter:
        drop-shadow(
            0
            0
            5px
            rgba(244, 216, 132, .38)
        );
}


.spread-back-card.is-picked
.spread-back-emblem {
    opacity:
        .45;
}


/* =========================================================
   4. FALLBACK

   If SVG insertion is somehow unavailable, the card remains a clean
   back with no corrupt text. No Unicode fallback is intentionally used.
========================================================= */

.spread-back-card:not(:has(.spread-back-emblem))::after {
    content:
        none
        !important;

    display:
        none
        !important;
}


/* =========================================================
   5. COLOR-MIX FALLBACK
========================================================= */

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

    .spread-back-emblem-ring {
        fill:
            rgba(240, 212, 138, .08);
    }

}


/* =========================================================
   FIXED SPREADS v69
   GRID · 6 / 8 / 9
========================================================= */

.spread-page[data-spread="grid"]
.spread-result-row {
    margin: 0 auto;

    align-items: center;
    justify-items: center;

    gap:
        clamp(
            7px,
            1.2vw,
            12px
        )
        !important;
}


.spread-page[data-spread="grid"]
.spread-result-slot {
    width: 100%;
    max-width: 118px;
}


/* 6 = 3 x 2 */

.spread-page[data-spread="grid"][data-count="6"]
.spread-result-row {
    width:
        min(
            100%,
            380px
        )
        !important;

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


/* 8 = 4 x 2 */

.spread-page[data-spread="grid"][data-count="8"]
.spread-result-row {
    width:
        min(
            100%,
            500px
        )
        !important;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        )
        !important;
}


/* 9 = 3 x 3 */

.spread-page[data-spread="grid"][data-count="9"]
.spread-result-row {
    width:
        min(
            100%,
            380px
        )
        !important;

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


/* Windows / Laptop low-height */

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

    .spread-page[data-spread="grid"]
    .spread-main {
        padding-top:
            7px
            !important;

        padding-bottom:
            78px
            !important;
    }


    .spread-page[data-spread="grid"]
    .spread-capture {
        padding:
            6px
            10px
            14px
            !important;
    }


    .spread-page[data-spread="grid"]
    .spread-result-row {
        gap:
            7px
            !important;
    }


    .spread-page[data-spread="grid"]
    .spread-result-slot {
        max-width:
            99px;
    }


    .spread-page[data-spread="grid"][data-count="6"]
    .spread-result-row,

    .spread-page[data-spread="grid"][data-count="9"]
    .spread-result-row {
        width:
            min(
                100%,
                314px
            )
            !important;
    }


    .spread-page[data-spread="grid"][data-count="8"]
    .spread-result-row {
        width:
            min(
                100%,
                420px
            )
            !important;
    }

}


/* Mobile */

@media (max-width: 760px) {

    .spread-page[data-spread="grid"]
    .spread-main {
        padding-bottom:
            76px
            !important;
    }


    .spread-page[data-spread="grid"]
    .spread-capture {
        padding:
            6px
            5px
            14px
            !important;
    }


    .spread-page[data-spread="grid"]
    .spread-result-row {
        gap:
            clamp(
                5px,
                1.8vw,
                8px
            )
            !important;
    }


    .spread-page[data-spread="grid"]
    .spread-result-slot {
        max-width:
            none;
    }


    .spread-page[data-spread="grid"][data-count="6"]
    .spread-result-row,

    .spread-page[data-spread="grid"][data-count="9"]
    .spread-result-row {
        width:
            min(
                calc(100vw - 18px),
                350px
            )
            !important;

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


    .spread-page[data-spread="grid"][data-count="8"]
    .spread-result-row {
        width:
            min(
                calc(100vw - 16px),
                390px
            )
            !important;

        grid-template-columns:
            repeat(
                4,
                minmax(
                    0,
                    1fr
                )
            )
            !important;
    }

}


@media (max-width: 390px) {

    .spread-page[data-spread="grid"][data-count="6"]
    .spread-result-row,

    .spread-page[data-spread="grid"][data-count="9"]
    .spread-result-row {
        width:
            calc(
                100vw
                -
                14px
            )
            !important;
    }


    .spread-page[data-spread="grid"][data-count="8"]
    .spread-result-row {
        width:
            calc(
                100vw
                -
                12px
            )
            !important;
    }


    .spread-page[data-spread="grid"]
    .spread-result-row {
        gap:
            4px
            !important;
    }

}


/* =========================================================
   FIXED SPREADS v70
   GRID 9 · SINGLE-SCREEN FIT
========================================================= */

/*
 * 9카드(3x3)는 세로 공간이 먼저 부족해집니다.
 * 카드 크기를 화면 높이에도 연동해서 Windows/모바일 모두
 * 세 번째 줄이 접힌 AI 하단시트 뒤로 가려지지 않게 합니다.
 */

.spread-page[data-spread="grid"][data-count="9"] .spread-main {
    padding-top: clamp(3px, .8vh, 8px) !important;
    padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
}

.spread-page[data-spread="grid"][data-count="9"] .spread-capture {
    padding: clamp(2px, .55vh, 6px) 5px 7px !important;
}

.spread-page[data-spread="grid"][data-count="9"] .spread-result-row {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;

    grid-template-columns: repeat(3, auto) !important;
    justify-content: center !important;
    align-content: start !important;

    row-gap: clamp(4px, .65vh, 7px) !important;
    column-gap: clamp(5px, 1vw, 9px) !important;
}

/*
 * 카드 비율이 세로로 길기 때문에 폭을 vh 기준으로 제한합니다.
 * 3줄 전체 높이를 약 52~56vh 안쪽에 맞추는 목적입니다.
 */
.spread-page[data-spread="grid"][data-count="9"] .spread-result-slot {
    width: min(28vw, 9.8dvh) !important;
    max-width: 90px !important;
    min-width: 0 !important;
}

.spread-page[data-spread="grid"][data-count="9"] .spread-result-card {
    width: 100% !important;
}


/* 질문을 저장한 경우도 결과가 너무 아래로 밀리지 않게 압축 */
.spread-page[data-spread="grid"][data-count="9"] .spread-question-result {
    width: min(620px, calc(100% - 16px)) !important;
    margin: 0 auto clamp(4px, .6vh, 7px) !important;
    padding: 6px 9px !important;
}

.spread-page[data-spread="grid"][data-count="9"] .spread-question-result-label {
    margin-bottom: 2px !important;
    font-size: 8px !important;
}

.spread-page[data-spread="grid"][data-count="9"] .spread-question-result-text {
    font-size: 9.5px !important;
    line-height: 1.3 !important;
}


/* Windows / desktop / laptop */
@media (min-width: 761px) {

    .spread-page[data-spread="grid"][data-count="9"] .spread-result-slot {
        width: min(9.4dvh, 84px) !important;
        max-width: 84px !important;
    }

}


/* 세로가 짧은 Windows 노트북 */
@media (min-width: 761px) and (max-height: 780px) {

    .spread-page[data-spread="grid"][data-count="9"] .spread-result-slot {
        width: min(8.6dvh, 70px) !important;
        max-width: 70px !important;
    }

    .spread-page[data-spread="grid"][data-count="9"] .spread-main {
        padding-top: 1px !important;
    }

    .spread-page[data-spread="grid"][data-count="9"] .spread-result-row {
        row-gap: 4px !important;
    }

}


/* Mobile */
@media (max-width: 760px) {

    .spread-page[data-spread="grid"][data-count="9"] .spread-main {
        padding-top: 3px !important;
        padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important;
    }

    .spread-page[data-spread="grid"][data-count="9"] .spread-result-slot {
        width: min(27vw, 9.8dvh) !important;
        max-width: 84px !important;
    }

    .spread-page[data-spread="grid"][data-count="9"] .spread-result-row {
        row-gap: clamp(4px, .55vh, 6px) !important;
        column-gap: clamp(4px, 1.2vw, 7px) !important;
    }

}


/* 세로가 특히 짧은 모바일 */
@media (max-width: 760px) and (max-height: 760px) {

    .spread-page[data-spread="grid"][data-count="9"] .spread-result-slot {
        width: min(25vw, 8.6dvh) !important;
        max-width: 68px !important;
    }

    .spread-page[data-spread="grid"][data-count="9"] .spread-result-row {
        row-gap: 3px !important;
    }

}


/* 아주 작은 화면 폭 */
@media (max-width: 390px) {

    .spread-page[data-spread="grid"][data-count="9"] .spread-result-slot {
        width: min(25.5vw, 9.1dvh) !important;
    }

}


/* =========================================================
   FIXED SPREADS v71
   GRID 9 · WINDOWS SIZE UP

   v70에서 Windows 카드가 지나치게 작아진 부분만 보정합니다.
   모바일 규칙은 그대로 유지합니다.
========================================================= */

@media (min-width: 761px) {

    /*
     * 기존 v70:
     * width: min(9.4dvh, 84px)
     *
     * v71:
     * 화면 높이에 따라 약 1.6~1.8배 수준까지 키우되
     * 3 x 3 전체가 화면 안에 최대한 남도록 140px 상한을 둡니다.
     */
    .spread-page[data-spread="grid"][data-count="9"]
    .spread-result-slot {
        width:
            min(
                15.2dvh,
                140px
            )
            !important;

        max-width:
            140px
            !important;
    }


    .spread-page[data-spread="grid"][data-count="9"]
    .spread-result-row {
        row-gap:
            clamp(
                4px,
                .45vh,
                6px
            )
            !important;

        column-gap:
            clamp(
                7px,
                .75vw,
                12px
            )
            !important;
    }


    .spread-page[data-spread="grid"][data-count="9"]
    .spread-capture {
        padding-top:
            2px
            !important;

        padding-bottom:
            5px
            !important;
    }

}


/*
 * 낮은 Windows 노트북에서도 v70처럼 70px까지 줄어들지 않게 합니다.
 * viewport height 기준으로 자연스럽게 줄어듭니다.
 */
@media (min-width: 761px) and (max-height: 780px) {

    .spread-page[data-spread="grid"][data-count="9"]
    .spread-result-slot {
        width:
            min(
                14.8dvh,
                122px
            )
            !important;

        max-width:
            122px
            !important;
    }


    .spread-page[data-spread="grid"][data-count="9"]
    .spread-result-row {
        row-gap:
            3px
            !important;
    }

}


/*
 * 세로 높이가 충분한 일반 PC에서는 최대 140px까지 사용.
 */
@media (min-width: 761px) and (min-height: 900px) {

    .spread-page[data-spread="grid"][data-count="9"]
    .spread-result-slot {
        width:
            min(
                15.5dvh,
                140px
            )
            !important;
    }

}


/* =========================================================
   FIXED SPREADS v72
   GRID 9 · MOBILE SIZE UP

   v71의 PC/Windows 크기는 그대로 유지합니다.
   모바일 9카드만 기존보다 약 1.4~1.5배 크게 보이도록 조정합니다.
========================================================= */

@media (max-width: 760px) {

    /*
     * v70/v71 모바일에서는 height 제한이 너무 강해서
     * 세로 공간이 충분한 휴대폰에서도 카드가 작았습니다.
     *
     * 가로 3열이 유지되는 범위에서:
     * - viewport width: 최대 약 29.5vw
     * - viewport height: 최대 약 14.5dvh
     * - 실제 최대폭: 122px
     *
     * 로 키웁니다.
     */
    .spread-page[data-spread="grid"][data-count="9"]
    .spread-result-slot {
        width:
            min(
                29.5vw,
                14.5dvh
            )
            !important;

        max-width:
            122px
            !important;
    }


    /*
     * 카드가 커진 만큼 3열이 안정적으로 들어가게
     * 좌우 간격은 조금만 줄입니다.
     */
    .spread-page[data-spread="grid"][data-count="9"]
    .spread-result-row {
        width:
            100%
            !important;

        max-width:
            calc(
                100vw
                -
                10px
            )
            !important;

        column-gap:
            clamp(
                3px,
                .9vw,
                6px
            )
            !important;

        row-gap:
            clamp(
                4px,
                .55vh,
                7px
            )
            !important;
    }


    .spread-page[data-spread="grid"][data-count="9"]
    .spread-capture {
        padding-left:
            3px
            !important;

        padding-right:
            3px
            !important;
    }

}


/* ---------------------------------------------------------
   세로가 짧은 모바일

   v70에서는 8.6dvh까지 크게 줄였는데,
   v72에서는 너무 작아지지 않도록 최소 체감 크기를 올립니다.
--------------------------------------------------------- */

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

    .spread-page[data-spread="grid"][data-count="9"]
    .spread-result-slot {
        width:
            min(
                28vw,
                12.6dvh
            )
            !important;

        max-width:
            108px
            !important;
    }


    .spread-page[data-spread="grid"][data-count="9"]
    .spread-result-row {
        row-gap:
            3px
            !important;

        column-gap:
            3px
            !important;
    }

}


/* ---------------------------------------------------------
   작은 폭의 모바일에서도 기존 25.5vw 제한을 해제
--------------------------------------------------------- */

@media (max-width: 390px) {

    .spread-page[data-spread="grid"][data-count="9"]
    .spread-result-slot {
        width:
            min(
                29vw,
                13.8dvh
            )
            !important;

        max-width:
            112px
            !important;
    }


    .spread-page[data-spread="grid"][data-count="9"]
    .spread-result-row {
        max-width:
            calc(
                100vw
                -
                8px
            )
            !important;
    }

}


/* =========================================================
   FIXED SPREADS v73
   CELTIC CROSS + MINI CELTIC CROSS
========================================================= */

.spread-page[data-spread="celtic-cross"] .spread-capture,
.spread-page[data-spread="mini-celtic-cross"] .spread-capture {
    padding: 4px 8px 78px !important;
    overflow: visible !important;
}

.spread-page[data-spread="celtic-cross"] .spread-result-row,
.spread-page[data-spread="mini-celtic-cross"] .spread-result-row {
    position: relative;
    display: block !important;
    margin: 0 auto !important;
    max-width: calc(100vw - 16px) !important;
    overflow: visible;
}

.spread-page[data-spread="celtic-cross"] .spread-result-slot,
.spread-page[data-spread="mini-celtic-cross"] .spread-result-slot {
    position: absolute !important;
    left: var(--celtic-x);
    top: var(--celtic-y);
    width: var(--celtic-card-width) !important;
    max-width: none !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2;
}

.spread-position-label {
    position: absolute;
    z-index: 8;
    right: 4px;
    top: 4px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    color: var(--text-soft);
    font-size: 8px;
    font-weight: 820;
    line-height: 1;
    pointer-events: none;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.spread-page[data-spread="celtic-cross"] .spread-result-slot[data-result-slot="0"],
.spread-page[data-spread="mini-celtic-cross"] .spread-result-slot[data-result-slot="0"] {
    z-index: 4;
}

.spread-page[data-spread="celtic-cross"] .spread-result-slot[data-result-slot="1"],
.spread-page[data-spread="mini-celtic-cross"] .spread-result-slot[data-result-slot="1"] {
    z-index: 6;
}

/* 장애물 = 가로 90도 */
.spread-page[data-spread="celtic-cross"] .spread-result-slot[data-result-slot="1"] .spread-result-card-frame,
.spread-page[data-spread="mini-celtic-cross"] .spread-result-slot[data-result-slot="1"] .spread-result-card-frame {
    transform: rotate(90deg) !important;
}

.spread-page[data-spread="celtic-cross"] .spread-result-slot[data-result-slot="1"] .spread-result-card.is-reversed .spread-result-card-frame,
.spread-page[data-spread="mini-celtic-cross"] .spread-result-slot[data-result-slot="1"] .spread-result-card.is-reversed .spread-result-card-frame {
    transform: rotate(270deg) !important;
}


/* ---------------- Celtic Cross 10 ---------------- */

.spread-page[data-spread="celtic-cross"] .spread-result-row {
    --celtic-card-width: clamp(62px, 7vw, 78px);
    width: min(760px, calc(100vw - 20px)) !important;
    height: min(68dvh, 620px) !important;
}

.spread-page[data-spread="celtic-cross"] .spread-result-slot[data-result-slot="0"] { --celtic-x: 42%; --celtic-y: 50%; }
.spread-page[data-spread="celtic-cross"] .spread-result-slot[data-result-slot="1"] { --celtic-x: 42%; --celtic-y: 50%; }
.spread-page[data-spread="celtic-cross"] .spread-result-slot[data-result-slot="2"] { --celtic-x: 42%; --celtic-y: 78%; }
.spread-page[data-spread="celtic-cross"] .spread-result-slot[data-result-slot="3"] { --celtic-x: 18%; --celtic-y: 50%; }
.spread-page[data-spread="celtic-cross"] .spread-result-slot[data-result-slot="4"] { --celtic-x: 42%; --celtic-y: 22%; }
.spread-page[data-spread="celtic-cross"] .spread-result-slot[data-result-slot="5"] { --celtic-x: 66%; --celtic-y: 50%; }
.spread-page[data-spread="celtic-cross"] .spread-result-slot[data-result-slot="6"] { --celtic-x: 88%; --celtic-y: 84%; }
.spread-page[data-spread="celtic-cross"] .spread-result-slot[data-result-slot="7"] { --celtic-x: 88%; --celtic-y: 62%; }
.spread-page[data-spread="celtic-cross"] .spread-result-slot[data-result-slot="8"] { --celtic-x: 88%; --celtic-y: 40%; }
.spread-page[data-spread="celtic-cross"] .spread-result-slot[data-result-slot="9"] { --celtic-x: 88%; --celtic-y: 18%; }


/* ---------------- Mini Celtic Cross 6 ---------------- */

.spread-page[data-spread="mini-celtic-cross"] .spread-result-row {
    --celtic-card-width: clamp(76px, 9vw, 98px);
    width: min(590px, calc(100vw - 20px)) !important;
    height: min(62dvh, 520px) !important;
}

.spread-page[data-spread="mini-celtic-cross"] .spread-result-slot[data-result-slot="0"] { --celtic-x: 40%; --celtic-y: 50%; }
.spread-page[data-spread="mini-celtic-cross"] .spread-result-slot[data-result-slot="1"] { --celtic-x: 40%; --celtic-y: 50%; }
.spread-page[data-spread="mini-celtic-cross"] .spread-result-slot[data-result-slot="2"] { --celtic-x: 40%; --celtic-y: 80%; }
.spread-page[data-spread="mini-celtic-cross"] .spread-result-slot[data-result-slot="3"] { --celtic-x: 14%; --celtic-y: 50%; }
.spread-page[data-spread="mini-celtic-cross"] .spread-result-slot[data-result-slot="4"] { --celtic-x: 40%; --celtic-y: 20%; }
.spread-page[data-spread="mini-celtic-cross"] .spread-result-slot[data-result-slot="5"] { --celtic-x: 66%; --celtic-y: 50%; }


/* Windows / laptop low height */
@media (min-width: 761px) and (max-height: 820px) {
    .spread-page[data-spread="celtic-cross"] .spread-result-row {
        --celtic-card-width: clamp(54px, 8.1dvh, 68px);
        height: min(65dvh, 520px) !important;
    }

    .spread-page[data-spread="mini-celtic-cross"] .spread-result-row {
        --celtic-card-width: clamp(64px, 10.5dvh, 82px);
        height: min(60dvh, 460px) !important;
    }
}


/* Mobile */
@media (max-width: 760px) {
    .spread-page[data-spread="celtic-cross"] .spread-main,
    .spread-page[data-spread="mini-celtic-cross"] .spread-main {
        width: 100% !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
        padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    }

    .spread-page[data-spread="celtic-cross"] .spread-result-row {
        --celtic-card-width: min(14.5vw, 62px);
        width: calc(100vw - 8px) !important;
        height: min(67dvh, 610px) !important;
    }

    .spread-page[data-spread="mini-celtic-cross"] .spread-result-row {
        --celtic-card-width: min(18vw, 74px);
        width: calc(100vw - 8px) !important;
        height: min(62dvh, 520px) !important;
    }

    .spread-position-label {
        right: 2px;
        top: 2px;
        min-width: 15px;
        height: 15px;
        padding: 0 4px;
        font-size: 7px;
    }
}

@media (max-width: 760px) and (max-height: 760px) {
    .spread-page[data-spread="celtic-cross"] .spread-result-row {
        --celtic-card-width: min(13vw, 52px);
        height: 60dvh !important;
    }

    .spread-page[data-spread="mini-celtic-cross"] .spread-result-row {
        --celtic-card-width: min(16.5vw, 66px);
        height: 57dvh !important;
    }
}


/* =========================================================
   FIXED SPREADS v76
   CROSS + HORSESHOE
========================================================= */


/* =========================================================
   COMMON SHAPE RESULT
========================================================= */

.spread-page[data-spread="cross"]
.spread-capture,

.spread-page[data-spread="horseshoe"]
.spread-capture {
    padding:
        4px
        6px
        78px
        !important;

    overflow:
        visible
        !important;
}


.spread-page[data-spread="cross"]
.spread-result-row,

.spread-page[data-spread="horseshoe"]
.spread-result-row {
    position:
        relative;

    display:
        block
        !important;

    margin:
        0
        auto
        !important;

    max-width:
        calc(
            100vw
            -
            12px
        )
        !important;

    overflow:
        visible;
}


.spread-page[data-spread="cross"]
.spread-result-slot,

.spread-page[data-spread="horseshoe"]
.spread-result-slot {
    position:
        absolute
        !important;

    left:
        var(--shape-x);

    top:
        var(--shape-y);

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

    max-width:
        none
        !important;

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

    z-index:
        2;
}


/* =========================================================
   CROSS · 5

         4
     2   1   3
         5
========================================================= */

.spread-page[data-spread="cross"]
.spread-result-row {
    --shape-card-width:
        clamp(
            82px,
            8.8vw,
            108px
        );

    width:
        min(
            680px,
            calc(
                100vw
                -
                18px
            )
        )
        !important;

    height:
        min(
            67dvh,
            610px
        )
        !important;
}


.spread-page[data-spread="cross"]
.spread-result-slot[data-result-slot="0"] {
    --shape-x: 50%;
    --shape-y: 50%;
}


.spread-page[data-spread="cross"]
.spread-result-slot[data-result-slot="1"] {
    --shape-x: 22%;
    --shape-y: 50%;
}


.spread-page[data-spread="cross"]
.spread-result-slot[data-result-slot="2"] {
    --shape-x: 78%;
    --shape-y: 50%;
}


.spread-page[data-spread="cross"]
.spread-result-slot[data-result-slot="3"] {
    --shape-x: 50%;
    --shape-y: 18%;
}


.spread-page[data-spread="cross"]
.spread-result-slot[data-result-slot="4"] {
    --shape-x: 50%;
    --shape-y: 82%;
}


/* =========================================================
   HORSESHOE · 5 / 7
   왼쪽 -> 오른쪽으로 의미가 흐름
========================================================= */

.spread-page[data-spread="horseshoe"]
.spread-result-row {
    width:
        min(
            800px,
            calc(
                100vw
                -
                14px
            )
        )
        !important;

    height:
        min(
            62dvh,
            560px
        )
        !important;
}


/* 5장 */

.spread-page[data-spread="horseshoe"][data-count="5"]
.spread-result-row {
    --shape-card-width:
        clamp(
            80px,
            8.2vw,
            104px
        );
}


.spread-page[data-spread="horseshoe"][data-count="5"]
.spread-result-slot[data-result-slot="0"] {
    --shape-x: 12%;
    --shape-y: 22%;
}

.spread-page[data-spread="horseshoe"][data-count="5"]
.spread-result-slot[data-result-slot="1"] {
    --shape-x: 30%;
    --shape-y: 64%;
}

.spread-page[data-spread="horseshoe"][data-count="5"]
.spread-result-slot[data-result-slot="2"] {
    --shape-x: 50%;
    --shape-y: 82%;
}

.spread-page[data-spread="horseshoe"][data-count="5"]
.spread-result-slot[data-result-slot="3"] {
    --shape-x: 70%;
    --shape-y: 64%;
}

.spread-page[data-spread="horseshoe"][data-count="5"]
.spread-result-slot[data-result-slot="4"] {
    --shape-x: 88%;
    --shape-y: 22%;
}


/* 7장 */

.spread-page[data-spread="horseshoe"][data-count="7"]
.spread-result-row {
    --shape-card-width:
        clamp(
            66px,
            6.6vw,
            88px
        );
}


.spread-page[data-spread="horseshoe"][data-count="7"]
.spread-result-slot[data-result-slot="0"] {
    --shape-x: 10%;
    --shape-y: 20%;
}

.spread-page[data-spread="horseshoe"][data-count="7"]
.spread-result-slot[data-result-slot="1"] {
    --shape-x: 18%;
    --shape-y: 43%;
}

.spread-page[data-spread="horseshoe"][data-count="7"]
.spread-result-slot[data-result-slot="2"] {
    --shape-x: 31%;
    --shape-y: 67%;
}

.spread-page[data-spread="horseshoe"][data-count="7"]
.spread-result-slot[data-result-slot="3"] {
    --shape-x: 50%;
    --shape-y: 82%;
}

.spread-page[data-spread="horseshoe"][data-count="7"]
.spread-result-slot[data-result-slot="4"] {
    --shape-x: 69%;
    --shape-y: 67%;
}

.spread-page[data-spread="horseshoe"][data-count="7"]
.spread-result-slot[data-result-slot="5"] {
    --shape-x: 82%;
    --shape-y: 43%;
}

.spread-page[data-spread="horseshoe"][data-count="7"]
.spread-result-slot[data-result-slot="6"] {
    --shape-x: 90%;
    --shape-y: 20%;
}


/* =========================================================
   WINDOWS / LOW HEIGHT
========================================================= */

@media (min-width: 761px) and (max-height: 820px) {

    .spread-page[data-spread="cross"]
    .spread-result-row {
        --shape-card-width:
            clamp(
                68px,
                10.2dvh,
                86px
            );

        height:
            min(
                62dvh,
                500px
            )
            !important;
    }


    .spread-page[data-spread="horseshoe"][data-count="5"]
    .spread-result-row {
        --shape-card-width:
            clamp(
                68px,
                9.6dvh,
                84px
            );

        height:
            min(
                58dvh,
                470px
            )
            !important;
    }


    .spread-page[data-spread="horseshoe"][data-count="7"]
    .spread-result-row {
        --shape-card-width:
            clamp(
                56px,
                8.2dvh,
                72px
            );

        height:
            min(
                58dvh,
                470px
            )
            !important;
    }

}


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

@media (max-width: 760px) {

    .spread-page[data-spread="cross"]
    .spread-main,

    .spread-page[data-spread="horseshoe"]
    .spread-main {
        width:
            100%
            !important;

        padding-left:
            1px
            !important;

        padding-right:
            1px
            !important;

        padding-bottom:
            calc(
                76px
                +
                env(
                    safe-area-inset-bottom
                )
            )
            !important;
    }


    .spread-page[data-spread="cross"]
    .spread-result-row {
        --shape-card-width:
            min(
                21vw,
                88px
            );

        width:
            calc(
                100vw
                -
                6px
            )
            !important;

        height:
            min(
                61dvh,
                520px
            )
            !important;
    }


    .spread-page[data-spread="cross"]
    .spread-result-slot[data-result-slot="1"] {
        --shape-x: 18%;
    }


    .spread-page[data-spread="cross"]
    .spread-result-slot[data-result-slot="2"] {
        --shape-x: 82%;
    }


    .spread-page[data-spread="horseshoe"]
    .spread-result-row {
        width:
            calc(
                100vw
                -
                4px
            )
            !important;

        height:
            min(
                58dvh,
                500px
            )
            !important;
    }


    .spread-page[data-spread="horseshoe"][data-count="5"]
    .spread-result-row {
        --shape-card-width:
            min(
                18vw,
                76px
            );
    }


    .spread-page[data-spread="horseshoe"][data-count="7"]
    .spread-result-row {
        --shape-card-width:
            min(
                14.5vw,
                60px
            );
    }

}


/* 짧은 모바일 */

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

    .spread-page[data-spread="cross"]
    .spread-result-row {
        --shape-card-width:
            min(
                18.5vw,
                72px
            );

        height:
            56dvh
            !important;
    }


    .spread-page[data-spread="horseshoe"][data-count="5"]
    .spread-result-row {
        --shape-card-width:
            min(
                16vw,
                64px
            );

        height:
            54dvh
            !important;
    }


    .spread-page[data-spread="horseshoe"][data-count="7"]
    .spread-result-row {
        --shape-card-width:
            min(
                12.8vw,
                52px
            );

        height:
            54dvh
            !important;
    }

}


/* =========================================================
   FIXED SPREADS v77
   MAGIC SEVEN + READING MIND
========================================================= */


/* =========================================================
   SHARED
========================================================= */

.spread-page[data-spread="magic-seven"]
.spread-capture,

.spread-page[data-spread="reading-mind"]
.spread-capture {
    padding:
        4px
        5px
        78px
        !important;

    overflow:
        visible
        !important;
}


.spread-page[data-spread="magic-seven"]
.spread-result-row,

.spread-page[data-spread="reading-mind"]
.spread-result-row {
    position:
        relative;

    display:
        block
        !important;

    margin:
        0
        auto
        !important;

    max-width:
        calc(
            100vw
            -
            10px
        )
        !important;

    overflow:
        visible;
}


.spread-page[data-spread="magic-seven"]
.spread-result-slot,

.spread-page[data-spread="reading-mind"]
.spread-result-slot {
    position:
        absolute
        !important;

    left:
        var(--theme-x);

    top:
        var(--theme-y);

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

    max-width:
        none
        !important;

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

    z-index:
        2;
}


/* =========================================================
   MAGIC SEVEN · 7

               1
         5           6
               7
         3           2
               4
========================================================= */

.spread-page[data-spread="magic-seven"]
.spread-result-row {
    --theme-card-width:
        clamp(
            72px,
            7.8vw,
            92px
        );

    width:
        min(
            690px,
            calc(
                100vw
                -
                18px
            )
        )
        !important;

    height:
        min(
            68dvh,
            620px
        )
        !important;
}


.spread-page[data-spread="magic-seven"]
.spread-result-slot[data-result-slot="0"] {
    --theme-x: 50%;
    --theme-y: 13%;
}

.spread-page[data-spread="magic-seven"]
.spread-result-slot[data-result-slot="1"] {
    --theme-x: 73%;
    --theme-y: 66%;
}

.spread-page[data-spread="magic-seven"]
.spread-result-slot[data-result-slot="2"] {
    --theme-x: 27%;
    --theme-y: 66%;
}

.spread-page[data-spread="magic-seven"]
.spread-result-slot[data-result-slot="3"] {
    --theme-x: 50%;
    --theme-y: 88%;
}

.spread-page[data-spread="magic-seven"]
.spread-result-slot[data-result-slot="4"] {
    --theme-x: 27%;
    --theme-y: 36%;
}

.spread-page[data-spread="magic-seven"]
.spread-result-slot[data-result-slot="5"] {
    --theme-x: 73%;
    --theme-y: 36%;
}

.spread-page[data-spread="magic-seven"]
.spread-result-slot[data-result-slot="6"] {
    --theme-x: 50%;
    --theme-y: 51%;
}


/* =========================================================
   READING MIND · 9

                1
             2     3
        8       4       9
            5   6   7
========================================================= */

.spread-page[data-spread="reading-mind"]
.spread-result-row {
    --theme-card-width:
        clamp(
            62px,
            6.4vw,
            80px
        );

    width:
        min(
            840px,
            calc(
                100vw
                -
                14px
            )
        )
        !important;

    height:
        min(
            66dvh,
            600px
        )
        !important;
}


.spread-page[data-spread="reading-mind"]
.spread-result-slot[data-result-slot="0"] {
    --theme-x: 50%;
    --theme-y: 13%;
}

.spread-page[data-spread="reading-mind"]
.spread-result-slot[data-result-slot="1"] {
    --theme-x: 38%;
    --theme-y: 36%;
}

.spread-page[data-spread="reading-mind"]
.spread-result-slot[data-result-slot="2"] {
    --theme-x: 62%;
    --theme-y: 36%;
}

.spread-page[data-spread="reading-mind"]
.spread-result-slot[data-result-slot="3"] {
    --theme-x: 50%;
    --theme-y: 59%;
}

.spread-page[data-spread="reading-mind"]
.spread-result-slot[data-result-slot="4"] {
    --theme-x: 30%;
    --theme-y: 84%;
}

.spread-page[data-spread="reading-mind"]
.spread-result-slot[data-result-slot="5"] {
    --theme-x: 50%;
    --theme-y: 84%;
}

.spread-page[data-spread="reading-mind"]
.spread-result-slot[data-result-slot="6"] {
    --theme-x: 70%;
    --theme-y: 84%;
}

.spread-page[data-spread="reading-mind"]
.spread-result-slot[data-result-slot="7"] {
    --theme-x: 10%;
    --theme-y: 46%;
}

.spread-page[data-spread="reading-mind"]
.spread-result-slot[data-result-slot="8"] {
    --theme-x: 90%;
    --theme-y: 46%;
}


/* =========================================================
   WINDOWS / LOW HEIGHT
========================================================= */

@media (min-width: 761px) and (max-height: 820px) {

    .spread-page[data-spread="magic-seven"]
    .spread-result-row {
        --theme-card-width:
            clamp(
                61px,
                8.7dvh,
                76px
            );

        height:
            min(
                63dvh,
                510px
            )
            !important;
    }


    .spread-page[data-spread="reading-mind"]
    .spread-result-row {
        --theme-card-width:
            clamp(
                52px,
                7.4dvh,
                65px
            );

        height:
            min(
                61dvh,
                495px
            )
            !important;
    }

}


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

@media (max-width: 760px) {

    .spread-page[data-spread="magic-seven"]
    .spread-main,

    .spread-page[data-spread="reading-mind"]
    .spread-main {
        width:
            100%
            !important;

        padding-left:
            1px
            !important;

        padding-right:
            1px
            !important;

        padding-bottom:
            calc(
                76px
                +
                env(
                    safe-area-inset-bottom
                )
            )
            !important;
    }


    .spread-page[data-spread="magic-seven"]
    .spread-result-row {
        --theme-card-width:
            min(
                18vw,
                76px
            );

        width:
            calc(
                100vw
                -
                6px
            )
            !important;

        height:
            min(
                62dvh,
                530px
            )
            !important;
    }


    .spread-page[data-spread="reading-mind"]
    .spread-result-row {
        --theme-card-width:
            min(
                14.2vw,
                60px
            );

        width:
            calc(
                100vw
                -
                4px
            )
            !important;

        height:
            min(
                61dvh,
                520px
            )
            !important;
    }

}


/* 짧은 모바일 */

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

    .spread-page[data-spread="magic-seven"]
    .spread-result-row {
        --theme-card-width:
            min(
                15.8vw,
                64px
            );

        height:
            57dvh
            !important;
    }


    .spread-page[data-spread="reading-mind"]
    .spread-result-row {
        --theme-card-width:
            min(
                12.5vw,
                52px
            );

        height:
            56dvh
            !important;
    }

}


/* =========================================================
   FIXED SPREADS v78
   CHOICE 5 + TANDEM 6
========================================================= */

/* ---------- shared ---------- */

.spread-page[data-spread="choice"] .spread-capture,
.spread-page[data-spread="tandem"] .spread-capture {
    padding: 4px 6px 78px !important;
    overflow: visible !important;
}

.spread-page[data-spread="choice"] .spread-result-row,
.spread-page[data-spread="tandem"] .spread-result-row {
    position: relative;
    display: block !important;
    margin: 0 auto !important;
    max-width: calc(100vw - 12px) !important;
    overflow: visible;
}

.spread-page[data-spread="choice"] .spread-result-slot,
.spread-page[data-spread="tandem"] .spread-result-slot {
    position: absolute !important;
    left: var(--pair-x);
    top: var(--pair-y);
    width: var(--pair-card-width) !important;
    max-width: none !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2;
}


/* =========================================================
   CHOICE · 5

       4       5
       2       3
           1
========================================================= */

.spread-page[data-spread="choice"] .spread-result-row {
    --pair-card-width: clamp(82px, 8.8vw, 108px);
    width: min(650px, calc(100vw - 18px)) !important;
    height: min(64dvh, 570px) !important;
}

.spread-page[data-spread="choice"] .spread-result-slot[data-result-slot="0"] {
    --pair-x: 50%;
    --pair-y: 84%;
}
.spread-page[data-spread="choice"] .spread-result-slot[data-result-slot="1"] {
    --pair-x: 30%;
    --pair-y: 53%;
}
.spread-page[data-spread="choice"] .spread-result-slot[data-result-slot="2"] {
    --pair-x: 70%;
    --pair-y: 53%;
}
.spread-page[data-spread="choice"] .spread-result-slot[data-result-slot="3"] {
    --pair-x: 22%;
    --pair-y: 20%;
}
.spread-page[data-spread="choice"] .spread-result-slot[data-result-slot="4"] {
    --pair-x: 78%;
    --pair-y: 20%;
}


/* =========================================================
   TANDEM · 6

       3    5    4
       1    6    2
========================================================= */

.spread-page[data-spread="tandem"] .spread-result-row {
    --pair-card-width: clamp(78px, 8.4vw, 104px);
    width: min(720px, calc(100vw - 18px)) !important;
    height: min(58dvh, 510px) !important;
}

.spread-page[data-spread="tandem"] .spread-result-slot[data-result-slot="0"] {
    --pair-x: 20%;
    --pair-y: 70%;
}
.spread-page[data-spread="tandem"] .spread-result-slot[data-result-slot="1"] {
    --pair-x: 80%;
    --pair-y: 70%;
}
.spread-page[data-spread="tandem"] .spread-result-slot[data-result-slot="2"] {
    --pair-x: 20%;
    --pair-y: 28%;
}
.spread-page[data-spread="tandem"] .spread-result-slot[data-result-slot="3"] {
    --pair-x: 80%;
    --pair-y: 28%;
}
.spread-page[data-spread="tandem"] .spread-result-slot[data-result-slot="4"] {
    --pair-x: 50%;
    --pair-y: 36%;
}
.spread-page[data-spread="tandem"] .spread-result-slot[data-result-slot="5"] {
    --pair-x: 50%;
    --pair-y: 78%;
}


/* ---------- Windows low height ---------- */

@media (min-width: 761px) and (max-height: 820px) {

    .spread-page[data-spread="choice"] .spread-result-row {
        --pair-card-width: clamp(68px, 9.8dvh, 84px);
        height: min(59dvh, 480px) !important;
    }

    .spread-page[data-spread="tandem"] .spread-result-row {
        --pair-card-width: clamp(66px, 9.4dvh, 82px);
        height: min(55dvh, 450px) !important;
    }
}


/* ---------- Mobile ---------- */

@media (max-width: 760px) {

    .spread-page[data-spread="choice"] .spread-main,
    .spread-page[data-spread="tandem"] .spread-main {
        width: 100% !important;
        padding-left: 1px !important;
        padding-right: 1px !important;
        padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    }

    .spread-page[data-spread="choice"] .spread-result-row {
        --pair-card-width: min(20vw, 82px);
        width: calc(100vw - 6px) !important;
        height: min(59dvh, 500px) !important;
    }

    .spread-page[data-spread="tandem"] .spread-result-row {
        --pair-card-width: min(18vw, 75px);
        width: calc(100vw - 6px) !important;
        height: min(54dvh, 455px) !important;
    }
}

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

    .spread-page[data-spread="choice"] .spread-result-row {
        --pair-card-width: min(17.5vw, 70px);
        height: 54dvh !important;
    }

    .spread-page[data-spread="tandem"] .spread-result-row {
        --pair-card-width: min(16vw, 64px);
        height: 50dvh !important;
    }
}


/* =========================================================
   FIXED SPREADS v79
   RELATIONSHIP · 7
========================================================= */

.spread-page[data-spread="relationship"]
.spread-capture {
    padding:
        4px
        5px
        78px
        !important;

    overflow:
        visible
        !important;
}


.spread-page[data-spread="relationship"]
.spread-result-row {
    --relationship-card-width:
        clamp(
            72px,
            7.7vw,
            94px
        );

    position:
        relative;

    display:
        block
        !important;

    width:
        min(
            720px,
            calc(
                100vw
                -
                16px
            )
        )
        !important;

    height:
        min(
            67dvh,
            610px
        )
        !important;

    max-width:
        calc(
            100vw
            -
            10px
        )
        !important;

    margin:
        0
        auto
        !important;

    overflow:
        visible;
}


.spread-page[data-spread="relationship"]
.spread-result-slot {
    position:
        absolute
        !important;

    left:
        var(--relationship-x);

    top:
        var(--relationship-y);

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

    max-width:
        none
        !important;

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

    z-index:
        2;
}


/*
 * 사용자 첨부 이미지:
 *
 *          1       2
 *
 *      3               4
 *
 *          5       6
 *
 *              7
 */

.spread-page[data-spread="relationship"]
.spread-result-slot[data-result-slot="0"] {
    --relationship-x: 37%;
    --relationship-y: 15%;
}


.spread-page[data-spread="relationship"]
.spread-result-slot[data-result-slot="1"] {
    --relationship-x: 63%;
    --relationship-y: 15%;
}


.spread-page[data-spread="relationship"]
.spread-result-slot[data-result-slot="2"] {
    --relationship-x: 17%;
    --relationship-y: 37%;
}


.spread-page[data-spread="relationship"]
.spread-result-slot[data-result-slot="3"] {
    --relationship-x: 83%;
    --relationship-y: 37%;
}


.spread-page[data-spread="relationship"]
.spread-result-slot[data-result-slot="4"] {
    --relationship-x: 31%;
    --relationship-y: 61%;
}


.spread-page[data-spread="relationship"]
.spread-result-slot[data-result-slot="5"] {
    --relationship-x: 69%;
    --relationship-y: 61%;
}


.spread-page[data-spread="relationship"]
.spread-result-slot[data-result-slot="6"] {
    --relationship-x: 50%;
    --relationship-y: 85%;
}


/* =========================================================
   WINDOWS / LOW HEIGHT
========================================================= */

@media (min-width: 761px) and (max-height: 820px) {

    .spread-page[data-spread="relationship"]
    .spread-result-row {
        --relationship-card-width:
            clamp(
                60px,
                8.6dvh,
                76px
            );

        height:
            min(
                62dvh,
                500px
            )
            !important;
    }

}


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

@media (max-width: 760px) {

    .spread-page[data-spread="relationship"]
    .spread-main {
        width:
            100%
            !important;

        padding-left:
            1px
            !important;

        padding-right:
            1px
            !important;

        padding-bottom:
            calc(
                76px
                +
                env(
                    safe-area-inset-bottom
                )
            )
            !important;
    }


    .spread-page[data-spread="relationship"]
    .spread-result-row {
        --relationship-card-width:
            min(
                17vw,
                72px
            );

        width:
            calc(
                100vw
                -
                5px
            )
            !important;

        height:
            min(
                61dvh,
                520px
            )
            !important;
    }

}


/* 짧은 모바일 */

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

    .spread-page[data-spread="relationship"]
    .spread-result-row {
        --relationship-card-width:
            min(
                15vw,
                61px
            );

        height:
            56dvh
            !important;
    }

}


/* =========================================================
   FIXED SPREADS v80
   CUP OF RELATIONSHIP + HOROSCOPE + YEAR FORTUNE
========================================================= */


/* =========================================================
   SHARED
========================================================= */

.spread-page[data-spread="cup-of-relationship"] .spread-capture,
.spread-page[data-spread="horoscope"] .spread-capture,
.spread-page[data-spread="year-fortune"] .spread-capture {
    padding: 4px 4px 78px !important;
    overflow: visible !important;
}


.spread-page[data-spread="cup-of-relationship"] .spread-result-row,
.spread-page[data-spread="horoscope"] .spread-result-row,
.spread-page[data-spread="year-fortune"] .spread-result-row {
    position: relative;
    display: block !important;
    margin: 0 auto !important;
    max-width: calc(100vw - 8px) !important;
    overflow: visible;
}


.spread-page[data-spread="cup-of-relationship"] .spread-result-slot,
.spread-page[data-spread="horoscope"] .spread-result-slot,
.spread-page[data-spread="year-fortune"] .spread-result-slot {
    position: absolute !important;
    left: var(--long-x);
    top: var(--long-y);
    width: var(--long-card-width) !important;
    max-width: none !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2;
}


/* =========================================================
   CUP OF RELATIONSHIP · 11
========================================================= */

.spread-page[data-spread="cup-of-relationship"] .spread-result-row {
    --long-card-width: clamp(56px, 6.2vw, 76px);
    width: min(760px, calc(100vw - 14px)) !important;
    height: min(70dvh, 640px) !important;
}

.spread-page[data-spread="cup-of-relationship"] .spread-result-slot[data-result-slot="0"]  { --long-x: 25.5%; --long-y: 88.5%; }
.spread-page[data-spread="cup-of-relationship"] .spread-result-slot[data-result-slot="1"]  { --long-x: 74.9%; --long-y: 88.5%; }
.spread-page[data-spread="cup-of-relationship"] .spread-result-slot[data-result-slot="2"]  { --long-x: 50.3%; --long-y: 88.5%; }
.spread-page[data-spread="cup-of-relationship"] .spread-result-slot[data-result-slot="3"]  { --long-x: 50.3%; --long-y: 62.6%; }
.spread-page[data-spread="cup-of-relationship"] .spread-result-slot[data-result-slot="4"]  { --long-x: 50.3%; --long-y: 37.0%; }
.spread-page[data-spread="cup-of-relationship"] .spread-result-slot[data-result-slot="5"]  { --long-x: 60.0%; --long-y: 49.0%; z-index: 4; }
.spread-page[data-spread="cup-of-relationship"] .spread-result-slot[data-result-slot="6"]  { --long-x: 28.5%; --long-y: 23.0%; }
.spread-page[data-spread="cup-of-relationship"] .spread-result-slot[data-result-slot="7"]  { --long-x: 72.2%; --long-y: 23.0%; }
.spread-page[data-spread="cup-of-relationship"] .spread-result-slot[data-result-slot="8"]  { --long-x: 7.8%;  --long-y: 12.0%; }
.spread-page[data-spread="cup-of-relationship"] .spread-result-slot[data-result-slot="9"]  { --long-x: 91.8%; --long-y: 12.0%; }
.spread-page[data-spread="cup-of-relationship"] .spread-result-slot[data-result-slot="10"] { --long-x: 50.6%; --long-y: 12.0%; }


/* =========================================================
   HOROSCOPE · 13
   1 center, 2~13 outer ring
========================================================= */

.spread-page[data-spread="horoscope"] .spread-result-row {
    --long-card-width: clamp(48px, 5.2vw, 64px);
    width: min(850px, calc(100vw - 10px)) !important;
    height: min(69dvh, 630px) !important;
}

.spread-page[data-spread="horoscope"] .spread-result-slot[data-result-slot="0"]  { --long-x: 50.0%; --long-y: 50.0%; }
.spread-page[data-spread="horoscope"] .spread-result-slot[data-result-slot="1"]  { --long-x: 11.7%; --long-y: 64.4%; }
.spread-page[data-spread="horoscope"] .spread-result-slot[data-result-slot="2"]  { --long-x: 28.5%; --long-y: 76.0%; }
.spread-page[data-spread="horoscope"] .spread-result-slot[data-result-slot="3"]  { --long-x: 44.3%; --long-y: 87.0%; }
.spread-page[data-spread="horoscope"] .spread-result-slot[data-result-slot="4"]  { --long-x: 59.4%; --long-y: 87.0%; }
.spread-page[data-spread="horoscope"] .spread-result-slot[data-result-slot="5"]  { --long-x: 75.2%; --long-y: 76.0%; }
.spread-page[data-spread="horoscope"] .spread-result-slot[data-result-slot="6"]  { --long-x: 89.7%; --long-y: 64.0%; }
.spread-page[data-spread="horoscope"] .spread-result-slot[data-result-slot="7"]  { --long-x: 89.7%; --long-y: 40.8%; }
.spread-page[data-spread="horoscope"] .spread-result-slot[data-result-slot="8"]  { --long-x: 75.2%; --long-y: 29.0%; }
.spread-page[data-spread="horoscope"] .spread-result-slot[data-result-slot="9"]  { --long-x: 60.0%; --long-y: 17.0%; }
.spread-page[data-spread="horoscope"] .spread-result-slot[data-result-slot="10"] { --long-x: 44.3%; --long-y: 17.0%; }
.spread-page[data-spread="horoscope"] .spread-result-slot[data-result-slot="11"] { --long-x: 28.5%; --long-y: 29.0%; }
.spread-page[data-spread="horoscope"] .spread-result-slot[data-result-slot="12"] { --long-x: 12.7%; --long-y: 40.8%; }


/* =========================================================
   YEAR FORTUNE · 13
   1~12 outer clockwise, 13 center
========================================================= */

.spread-page[data-spread="year-fortune"] .spread-result-row {
    --long-card-width: clamp(48px, 5.2vw, 64px);
    width: min(850px, calc(100vw - 10px)) !important;
    height: min(69dvh, 630px) !important;
}

.spread-page[data-spread="year-fortune"] .spread-result-slot[data-result-slot="0"]  { --long-x: 50.0%; --long-y: 11.0%; }
.spread-page[data-spread="year-fortune"] .spread-result-slot[data-result-slot="1"]  { --long-x: 63.9%; --long-y: 24.0%; }
.spread-page[data-spread="year-fortune"] .spread-result-slot[data-result-slot="2"]  { --long-x: 76.6%; --long-y: 36.0%; }
.spread-page[data-spread="year-fortune"] .spread-result-slot[data-result-slot="3"]  { --long-x: 88.4%; --long-y: 49.0%; }
.spread-page[data-spread="year-fortune"] .spread-result-slot[data-result-slot="4"]  { --long-x: 76.7%; --long-y: 64.0%; }
.spread-page[data-spread="year-fortune"] .spread-result-slot[data-result-slot="5"]  { --long-x: 64.0%; --long-y: 76.5%; }
.spread-page[data-spread="year-fortune"] .spread-result-slot[data-result-slot="6"]  { --long-x: 50.0%; --long-y: 88.0%; }
.spread-page[data-spread="year-fortune"] .spread-result-slot[data-result-slot="7"]  { --long-x: 36.5%; --long-y: 76.4%; }
.spread-page[data-spread="year-fortune"] .spread-result-slot[data-result-slot="8"]  { --long-x: 24.6%; --long-y: 64.0%; }
.spread-page[data-spread="year-fortune"] .spread-result-slot[data-result-slot="9"]  { --long-x: 11.7%; --long-y: 49.0%; }
.spread-page[data-spread="year-fortune"] .spread-result-slot[data-result-slot="10"] { --long-x: 24.5%; --long-y: 36.0%; }
.spread-page[data-spread="year-fortune"] .spread-result-slot[data-result-slot="11"] { --long-x: 36.5%; --long-y: 24.0%; }
.spread-page[data-spread="year-fortune"] .spread-result-slot[data-result-slot="12"] { --long-x: 50.0%; --long-y: 50.0%; }


/* =========================================================
   WINDOWS / LOW HEIGHT
========================================================= */

@media (min-width: 761px) and (max-height: 820px) {

    .spread-page[data-spread="cup-of-relationship"] .spread-result-row {
        --long-card-width: clamp(48px, 7.0dvh, 61px);
        height: min(65dvh, 525px) !important;
    }

    .spread-page[data-spread="horoscope"] .spread-result-row,
    .spread-page[data-spread="year-fortune"] .spread-result-row {
        --long-card-width: clamp(40px, 5.8dvh, 52px);
        height: min(64dvh, 520px) !important;
    }
}


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

@media (max-width: 760px) {

    .spread-page[data-spread="cup-of-relationship"] .spread-main,
    .spread-page[data-spread="horoscope"] .spread-main,
    .spread-page[data-spread="year-fortune"] .spread-main {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    }

    .spread-page[data-spread="cup-of-relationship"] .spread-result-row {
        --long-card-width: min(12.8vw, 54px);
        width: calc(100vw - 3px) !important;
        height: min(63dvh, 535px) !important;
    }

    .spread-page[data-spread="horoscope"] .spread-result-row,
    .spread-page[data-spread="year-fortune"] .spread-result-row {
        --long-card-width: min(10.5vw, 44px);
        width: calc(100vw - 2px) !important;
        height: min(61dvh, 520px) !important;
    }
}


/* Short mobile */

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

    .spread-page[data-spread="cup-of-relationship"] .spread-result-row {
        --long-card-width: min(11.2vw, 46px);
        height: 57dvh !important;
    }

    .spread-page[data-spread="horoscope"] .spread-result-row,
    .spread-page[data-spread="year-fortune"] .spread-result-row {
        --long-card-width: min(9.2vw, 38px);
        height: 56dvh !important;
    }
}


/* =========================================================
   CELTIC CROSS — 겹친 두 장을 어긋나게

   1번(현재) 위에 2번(장애물)을 가로로 얹는데,
   정중앙에 겹치면 십자가 되면서 뒤 카드가 거의 안 보입니다.
   그래서 2번을 아래로 내려 포개고, 1번의 윗부분을 남깁니다.

   내리는 양은 카드 폭 기준이라 화면 크기가 바뀌어도 비율이 같습니다.
   양옆으로 밀지 않은 이유는, 좁은 화면에서 왼쪽 카드와 이미
   맞닿아 있어 조금만 밀어도 겹쳐 버리기 때문입니다.
========================================================= */

.spread-page[data-spread="celtic-cross"] .spread-result-row {
    --celtic-cross-offset: calc(var(--celtic-card-width) * .3125);
}

.spread-page[data-spread="mini-celtic-cross"] .spread-result-row {
    --celtic-cross-offset: calc(var(--celtic-card-width) * .25);
}

.spread-page[data-spread="celtic-cross"] .spread-result-slot[data-result-slot="1"],
.spread-page[data-spread="mini-celtic-cross"] .spread-result-slot[data-result-slot="1"] {
    transform:
        translate(-50%, -50%)
        translateY(var(--celtic-cross-offset)) !important;
}


/*
 * 2번 자리의 번호표.
 *
 * 카드가 누워 있어서 칸의 오른쪽 위는 카드 바깥입니다.
 * 누운 카드의 오른쪽 위 모서리로 옮겨 붙입니다.
 */

.spread-page[data-spread="celtic-cross"] .spread-result-slot[data-result-slot="1"] > .spread-position-label,
.spread-page[data-spread="mini-celtic-cross"] .spread-result-slot[data-result-slot="1"] > .spread-position-label {
    right: calc(var(--celtic-card-width) * -.3125 + 4px);
    top: calc(var(--celtic-card-width) * .3125 + 4px);
}


/* =========================================================
   CARD NAME TOOLTIP — 두 줄

   겹친 두 장을 같이 알려줄 때만 씁니다.
========================================================= */

.spread-card-name-tooltip.is-stacked {
    white-space: pre-line;
    max-width: min(300px, calc(100vw - 24px));
    padding: 8px 13px;
    border-radius: 14px;
    line-height: 1.5;
    text-overflow: clip;
    overflow: visible;
}


/* =========================================================
   CELTIC CROSS — 위에 얹힌 카드를 살짝 비치게

   2번(장애물)이 1번을 덮는 만큼은 어쩔 수 없어서,
   덮는 부분이 흐릿하게 비쳐 보이도록 조금 투명하게 합니다.
========================================================= */

/*
 * .spread-result-card 가 아니라 그 안의 액자에 겁니다.
 * 카드 자체는 뒤집히며 나타나는 동안 opacity 를 쓰고 있고,
 * prefers-reduced-motion 일 때는 opacity: 1 !important 가 걸려
 * 바깥에서 준 값이 먹지 않기 때문입니다.
 */

.spread-page[data-spread="celtic-cross"] .spread-result-slot[data-result-slot="1"] .spread-result-card-frame,
.spread-page[data-spread="mini-celtic-cross"] .spread-result-slot[data-result-slot="1"] .spread-result-card-frame {
    transition: opacity .18s ease !important;
}

/*
 * 평소에는 그대로 두고,
 * 마우스를 올리거나(hover) 손으로 짚었을 때만(is-peek) 비칩니다.
 * is-peek 는 이름표를 띄울 때 saju... 아니라 tarot-spread.js 가 붙입니다.
 */

.spread-page[data-spread="celtic-cross"] .spread-result-slot[data-result-slot="0"]:hover ~ .spread-result-slot[data-result-slot="1"] .spread-result-card-frame,
.spread-page[data-spread="mini-celtic-cross"] .spread-result-slot[data-result-slot="0"]:hover ~ .spread-result-slot[data-result-slot="1"] .spread-result-card-frame,

.spread-page[data-spread="celtic-cross"] .spread-result-slot[data-result-slot="1"]:hover .spread-result-card-frame,
.spread-page[data-spread="mini-celtic-cross"] .spread-result-slot[data-result-slot="1"]:hover .spread-result-card-frame,

.spread-page[data-spread="celtic-cross"] .spread-result-slot[data-result-slot="1"]:active .spread-result-card-frame,
.spread-page[data-spread="mini-celtic-cross"] .spread-result-slot[data-result-slot="1"]:active .spread-result-card-frame,

.spread-page[data-spread="celtic-cross"] .spread-result-slot[data-result-slot="1"].is-peek .spread-result-card-frame,
.spread-page[data-spread="mini-celtic-cross"] .spread-result-slot[data-result-slot="1"].is-peek .spread-result-card-frame {
    opacity: .5 !important;
}


/* =========================================================
   DESKTOP CARD SIZE

   760px 보다 넓은 화면에서 카드를 크게 봅니다.

   중요한 점: 이 파일에는

       grid-template-columns:
           repeat(var(--spread-count), minmax(0, 132px)) !important;

   이 있어서 칸 너비가 132px 로 묶여 있습니다.
   칸(.spread-result-slot) 폭만 키우면 열 밖으로 넘쳐 카드가 겹칩니다.
   그래서 열 너비 · 행 너비 · 칸 폭 세 가지를 같이 맞춥니다.

   4 · 5 · 7카드는 건드리지 않습니다.
========================================================= */

@media (min-width: 761px) {

    /* ---- 1 · 2 · 3카드 — 가로 170px ---- */

    .spread-page[data-spread="one-card"] .spread-result-row,
    .spread-page[data-spread="two-card"] .spread-result-row,
    .spread-page[data-spread="three-card"] .spread-result-row {
        width:
            min(
                100%,
                calc(
                    var(--spread-count) * 170px
                    +
                    (var(--spread-count) - 1) * 12px
                )
            )
            !important;

        grid-template-columns:
            repeat(
                var(--spread-count),
                minmax(0, 170px)
            )
            !important;

        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .spread-page[data-spread="one-card"] .spread-result-slot,
    .spread-page[data-spread="two-card"] .spread-result-slot,
    .spread-page[data-spread="three-card"] .spread-result-slot {
        width: 100% !important;
        max-width: 170px !important;
    }


    /* ---- 그리드 6장 (3 x 2) — 3카드와 같은 170px ---- */

    .spread-page[data-spread="grid"][data-count="6"] .spread-result-row {
        width: min(100%, 534px) !important;

        grid-template-columns:
            repeat(3, minmax(0, 170px))
            !important;

        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .spread-page[data-spread="grid"][data-count="6"] .spread-result-slot {
        width: 100% !important;
        max-width: 170px !important;
    }


    /* ---- 그리드 8장 (4 x 2) — 기존보다 20px 크게 (118 → 138px) ---- */

    .spread-page[data-spread="grid"][data-count="8"] .spread-result-row {
        width: min(100%, 588px) !important;

        grid-template-columns:
            repeat(4, minmax(0, 138px))
            !important;

        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .spread-page[data-spread="grid"][data-count="8"] .spread-result-slot {
        width: 100% !important;
        max-width: 138px !important;
    }


    /* ---- 그리드 9장 (3 x 3) — 가로 140px ---- */

    .spread-page[data-spread="grid"][data-count="9"] .spread-result-row {
        width: min(100%, 444px) !important;

        grid-template-columns:
            repeat(3, minmax(0, 140px))
            !important;

        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .spread-page[data-spread="grid"][data-count="9"] .spread-result-slot {
        width: 100% !important;
        max-width: 140px !important;
    }

}


/* =========================================================
   WIDE SCREEN LAYOUT  (가로 761px 이상)

   'AI에게 물어보기' 띠 위가 비지 않도록 표를 세로로 채우고,
   카드도 그만큼 키웁니다.

   카드 크기는 눈대중이 아니라 좌표에서 계산했습니다.
   스프레드마다 카드 자리가 % 로 박혀 있으므로,
   서로 5px 이상 떨어지고 표 밖으로 나가지 않는
   가장 큰 카드 폭을 구해 그 96% 를 씁니다.

   세로가 아주 긴 화면(4K 모니터 등)에서는
   표 높이가 820px, 카드가 각자의 상한에서 멈춥니다.
   거기서 더 키우면 카드만 거대해져 배열이 어색해지기 때문입니다.
   즉 세로 1000px 부근에서 보이는 그 모습 그대로 유지되고,
   남는 아래 공간은 그냥 비워 둡니다.

   --spread-chrome 은 머리띠 · 아래 띠 · 여백이 쓰는 높이입니다.
   표가 너무 길거나 짧으면 이 숫자 하나만 고치면 전부 따라갑니다.
========================================================= */

@media (min-width: 761px) {

    .spread-page {
        --spread-chrome: 180px;
    }

    /* 켈틱 크로스 */

    .spread-page[data-spread="celtic-cross"]
    .spread-result-row {
        width:
            min(660px, calc(100vw - 24px)) !important;

        height:
            clamp(340px, calc(100dvh - var(--spread-chrome)), 820px) !important;

        --celtic-card-width:
            clamp(
                62px,
                min(
                    calc(
                        (100dvh - var(--spread-chrome)) * 0.1243
                    ),
                    calc(
                        (100vw - 24px) * 0.1561
                    )
                ),
                103px
            ) !important;
    }

    /* 미니 켈틱 크로스 */

    .spread-page[data-spread="mini-celtic-cross"]
    .spread-result-row {
        width:
            min(520px, calc(100vw - 24px)) !important;

        height:
            clamp(340px, calc(100dvh - var(--spread-chrome)), 820px) !important;

        --celtic-card-width:
            clamp(
                76px,
                min(
                    calc(
                        (100dvh - var(--spread-chrome)) * 0.1163
                    ),
                    calc(
                        (100vw - 24px) * 0.1885
                    )
                ),
                98px
            ) !important;
    }

    /* 십자 */

    .spread-page[data-spread="cross"]
    .spread-result-row {
        width:
            min(816px, calc(100vw - 24px)) !important;

        height:
            clamp(340px, calc(100dvh - var(--spread-chrome)), 820px) !important;

        --shape-card-width:
            clamp(
                82px,
                min(
                    calc(
                        (100dvh - var(--spread-chrome)) * 0.1834
                    ),
                    calc(
                        (100vw - 24px) * 0.1838
                    )
                ),
                150px
            ) !important;
    }

    /* 말발굽 5장 */

    .spread-page[data-spread="horseshoe"][data-count="5"]
    .spread-result-row {
        width:
            min(960px, calc(100vw - 24px)) !important;

        height:
            clamp(340px, calc(100dvh - var(--spread-chrome)), 820px) !important;

        --shape-card-width:
            clamp(
                80px,
                min(
                    calc(
                        (100dvh - var(--spread-chrome)) * 0.2156
                    ),
                    calc(
                        (100vw - 24px) * 0.1562
                    )
                ),
                150px
            ) !important;
    }

    /* 말발굽 7장 */

    .spread-page[data-spread="horseshoe"][data-count="7"]
    .spread-result-row {
        width:
            min(960px, calc(100vw - 24px)) !important;

        height:
            clamp(340px, calc(100dvh - var(--spread-chrome)), 820px) !important;

        --shape-card-width:
            clamp(
                66px,
                min(
                    calc(
                        (100dvh - var(--spread-chrome)) * 0.1311
                    ),
                    calc(
                        (100vw - 24px) * 0.1125
                    )
                ),
                108px
            ) !important;
    }

    /* 매직 세븐 */

    .spread-page[data-spread="magic-seven"]
    .spread-result-row {
        width:
            min(828px, calc(100vw - 24px)) !important;

        height:
            clamp(340px, calc(100dvh - var(--spread-chrome)), 820px) !important;

        --theme-card-width:
            clamp(
                72px,
                min(
                    calc(
                        (100dvh - var(--spread-chrome)) * 0.1447
                    ),
                    calc(
                        (100vw - 24px) * 0.1425
                    )
                ),
                118px
            ) !important;
    }

    /* 리딩 마인드 */

    .spread-page[data-spread="reading-mind"]
    .spread-result-row {
        width:
            min(1008px, calc(100vw - 24px)) !important;

        height:
            clamp(340px, calc(100dvh - var(--spread-chrome)), 820px) !important;

        --theme-card-width:
            clamp(
                62px,
                min(
                    calc(
                        (100dvh - var(--spread-chrome)) * 0.1359
                    ),
                    calc(
                        (100vw - 24px) * 0.1101
                    )
                ),
                111px
            ) !important;
    }

    /* 양자택일 */

    .spread-page[data-spread="choice"]
    .spread-result-row {
        width:
            min(780px, calc(100vw - 24px)) !important;

        height:
            clamp(340px, calc(100dvh - var(--spread-chrome)), 820px) !important;

        --pair-card-width:
            clamp(
                82px,
                min(
                    calc(
                        (100dvh - var(--spread-chrome)) * 0.1795
                    ),
                    calc(
                        (100vw - 24px) * 0.1885
                    )
                ),
                147px
            ) !important;
    }

    /* 탄뎀 */

    .spread-page[data-spread="tandem"]
    .spread-result-row {
        width:
            min(864px, calc(100vw - 24px)) !important;

        height:
            clamp(340px, calc(100dvh - var(--spread-chrome)), 820px) !important;

        --pair-card-width:
            clamp(
                78px,
                min(
                    calc(
                        (100dvh - var(--spread-chrome)) * 0.2424
                    ),
                    calc(
                        (100vw - 24px) * 0.1736
                    )
                ),
                150px
            ) !important;
    }

    /* 릴레이션십 */

    .spread-page[data-spread="relationship"]
    .spread-result-row {
        width:
            min(864px, calc(100vw - 24px)) !important;

        height:
            clamp(340px, calc(100dvh - var(--spread-chrome)), 820px) !important;

        --relationship-card-width:
            clamp(
                72px,
                min(
                    calc(
                        (100dvh - var(--spread-chrome)) * 0.1382
                    ),
                    calc(
                        (100vw - 24px) * 0.1308
                    )
                ),
                113px
            ) !important;
    }

    /* 컵 오브 릴레이션십 */

    .spread-page[data-spread="cup-of-relationship"]
    .spread-result-row {
        width:
            min(912px, calc(100vw - 24px)) !important;

        height:
            clamp(340px, calc(100dvh - var(--spread-chrome)), 820px) !important;

        --long-card-width:
            clamp(
                56px,
                min(
                    calc(
                        (100dvh - var(--spread-chrome)) * 0.0978
                    ),
                    calc(
                        (100vw - 24px) * 0.0877
                    )
                ),
                80px
            ) !important;
    }

    /* 호로스코프 */

    .spread-page[data-spread="horoscope"]
    .spread-result-row {
        width:
            min(1020px, calc(100vw - 24px)) !important;

        height:
            clamp(340px, calc(100dvh - var(--spread-chrome)), 820px) !important;

        --long-card-width:
            clamp(
                48px,
                min(
                    calc(
                        (100dvh - var(--spread-chrome)) * 0.1314
                    ),
                    calc(
                        (100vw - 24px) * 0.1069
                    )
                ),
                109px
            ) !important;
    }

    /* 1년 운세 */

    .spread-page[data-spread="year-fortune"]
    .spread-result-row {
        width:
            min(1020px, calc(100vw - 24px)) !important;

        height:
            clamp(340px, calc(100dvh - var(--spread-chrome)), 820px) !important;

        --long-card-width:
            clamp(
                48px,
                min(
                    calc(
                        (100dvh - var(--spread-chrome)) * 0.1329
                    ),
                    calc(
                        (100vw - 24px) * 0.1069
                    )
                ),
                109px
            ) !important;
    }

}


/* =========================================================
   FIVE CARD — 한 줄 다섯 장 대신 3 + 2

   여섯 칸 격자를 만들고 카드마다 두 칸씩 차지하게 합니다.
   그러면 아랫줄 두 장이 저절로 가운데에 놓입니다.

       1  2  3
         4  5
========================================================= */

@media (min-width: 761px) {

    .spread-page[data-spread="five-card"] .spread-result-row {
        width: min(100%, 480px) !important;

        grid-template-columns:
            repeat(6, minmax(0, 70px)) !important;

        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;

        row-gap: 12px !important;
    }

    .spread-page[data-spread="five-card"] .spread-result-slot {
        grid-column: span 2;
        width: 100% !important;
        max-width: 152px !important;
    }

    /* 아랫줄 두 장을 한 칸씩 안쪽으로 밀어 가운데 맞춤 */

    .spread-page[data-spread="five-card"] .spread-result-slot[data-result-slot="3"] {
        grid-column: 2 / span 2;
    }

    .spread-page[data-spread="five-card"] .spread-result-slot[data-result-slot="4"] {
        grid-column: 4 / span 2;
    }

}


/* =========================================================
   FOUR CARD — 가로 761px 이상에서 30px 크게 (132 → 162px)

   열 너비도 같이 올려야 합니다.
   칸만 키우면 132px 짜리 열 밖으로 넘쳐 카드가 겹칩니다.
========================================================= */

@media (min-width: 761px) {

    .spread-page[data-spread="four-card"] .spread-result-row {
        width: min(100%, 684px) !important;

        grid-template-columns:
            repeat(4, minmax(0, 162px)) !important;

        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .spread-page[data-spread="four-card"] .spread-result-slot {
        width: 100% !important;
        max-width: 162px !important;
    }

}


/* =========================================================
   CUP OF RELATIONSHIP — 간격 줄이고 카드 키우기

   카드를 못 키우던 까닭은 6번 자리였습니다.
   6번(x 60%)이 가운데 기둥(x 50.3%)에 바짝 붙어 있어서,
   두 장이 부딪히지 않으려면 카드 폭이 그 사이(약 88px)보다
   좁아야 했습니다. 그래서 76px 에 묶여 있었습니다.

   6번을 오른쪽으로 조금 밀어(60% → 66%) 그 매듭을 풀고,
   대신 표 전체 폭을 912px → 760px 으로 좁혀 간격을 줄였습니다.
   자리 배치(잔 모양)는 그대로입니다.

   결과: 76px → 세로 768px 화면에서 82px, 900px 에서 101px,
   999px 에서 109px.
========================================================= */

@media (min-width: 761px) {

    .spread-page[data-spread="cup-of-relationship"]
    .spread-result-slot[data-result-slot="5"] {
        --long-x: 66%;
    }

    .spread-page[data-spread="cup-of-relationship"]
    .spread-result-row {
        width:
            min(760px, calc(100vw - 24px)) !important;

        --long-card-width:
            clamp(
                56px,
                min(
                    calc(
                        (100dvh - var(--spread-chrome)) * 0.1404
                    ),
                    calc(
                        (100vw - 24px) * 0.1434
                    )
                ),
                109px
            ) !important;
    }

}


/* =========================================================
   FIVE CARD — 좁은 화면도 3 + 2

   넓은 화면과 같은 여섯 칸 격자입니다.
   화면 폭에 맞춰 칸이 줄어들고, 세 장이 한 줄에 들어갑니다.

       1  2  3
         4  5
========================================================= */

@media (max-width: 760px) {

    .spread-page[data-spread="five-card"] .spread-result-row {
        width: min(100%, 380px) !important;

        grid-template-columns:
            repeat(6, minmax(0, 1fr)) !important;

        column-gap: 8px !important;
        row-gap: 10px !important;

        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .spread-page[data-spread="five-card"] .spread-result-slot {
        grid-column: span 2;
        width: 100% !important;
        max-width: none !important;
    }

    .spread-page[data-spread="five-card"] .spread-result-slot[data-result-slot="3"] {
        grid-column: 2 / span 2;
    }

    .spread-page[data-spread="five-card"] .spread-result-slot[data-result-slot="4"] {
        grid-column: 4 / span 2;
    }

}