/* =========================================
   Lunar Soopoolleaf
   UNIVERSAL TAROT
========================================= */

:root {

    --bg: #f7f4ed;

    --surface: #ffffff;
    --surface-hover: #f9fbf8;

    --primary: #52b788;
    --secondary: #5ac8bd;

    --tree: #a67c52;

    --clover-1: #78dc64;
    --clover-2: #82ea6e;

    --text: #28332e;
    --text-soft: #828981;

    --border: #dedfd8;

    --shadow:
        0 8px 28px
        rgba(46, 78, 63, .07);

}


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

html[data-theme="dark"] {

    --bg: #18231f;

    --surface: #223029;
    --surface-hover: #293a32;

    --text: #eef5f1;
    --text-soft: #9ba9a2;

    --border: #35483f;

    --shadow:
        0 8px 28px
        rgba(0, 0, 0, .18);

}


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

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

    box-sizing: border-box;

}

html,
body {

    padding: 0;
    margin: 0;

}

html {

    background: var(--bg);

}

body {

    min-height: 100vh;

    background: var(--bg);

    color: var(--text);

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

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

}

button,
a {

    font-family: inherit;

}


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

.fortune-page {

    width: 100%;
    min-height: 100vh;

}


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

.fortune-header {

    width: 100%;

}

.fortune-header-inner {

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

    height: 68px;

    margin: 0 auto;

    padding: 0 22px;

    display: grid;

    grid-template-columns:
        52px
        1fr
        auto;

    align-items: center;

}


.fortune-back {

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text);

    text-decoration: none;

    border-radius: 50%;

}

.fortune-back span {

    display: block;

    margin-top: -4px;

    font-size: 38px;

    font-weight: 300;

    line-height: 1;

}


.fortune-logo {

    display: flex;

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

    gap: 7px;

}

.fortune-logo-clover {

    color: var(--clover-1);

    font-size: 19px;

}

.fortune-logo-text {

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

    letter-spacing: -.3px;

}


.fortune-theme-button {

    width: 42px;
    height: 42px;

    border: 0;

    background: transparent;

    color: var(--text);

    border-radius: 50%;

    font-size: 19px;

    cursor: pointer;

}


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

.tarot-main {

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

    margin: 0 auto;

    padding:
        32px
        24px
        90px;

}


/* =========================================
   INTRO
========================================= */

.tarot-intro {

    margin-bottom: 46px;

    text-align: center;

}


.tarot-intro-symbol {

    width: 62px;
    height: 35px;

    position: relative;

    margin:
        0 auto
        13px;

}


.tarot-intro-symbol span {

    position: absolute;

    width: 22px;
    height: 22px;

    border-radius:
        100% 0
        100% 0;

    background:
        var(--clover-1);

}


.tarot-intro-symbol span:nth-child(1) {

    left: 5px;
    top: 9px;

    transform:
        rotate(22deg);

}


.tarot-intro-symbol span:nth-child(2) {

    left: 21px;
    top: 1px;

    background:
        var(--clover-2);

    transform:
        rotate(48deg);

}


.tarot-intro-symbol span:nth-child(3) {

    right: 5px;
    top: 9px;

    background:
        var(--primary);

    transform:
        rotate(77deg);

}


.tarot-intro-en {

    margin-bottom: 8px;

    color: var(--tree);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 4px;

}


.tarot-title {

    margin: 0;

    color: var(--text);

    font-size:
        clamp(
            29px,
            5vw,
            41px
        );

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: -1.7px;

}


.tarot-subtitle {

    margin:
        10px
        0
        0;

    color: var(--text-soft);

    font-size: 14px;

    line-height: 1.7;

}


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

.tarot-toolbar {

    min-height: 44px;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    margin-bottom: 10px;

}


.tarot-edit-button,
.tarot-action {

    border: 0;

    background: transparent;

    color: var(--text-soft);

    cursor: pointer;

}


.tarot-edit-button {

    padding: 8px 12px;

    font-size: 14px;

}


.tarot-edit-button:hover {

    color: var(--primary);

}


.tarot-edit-actions {

    gap: 6px;

    align-items: center;

}


.tarot-edit-actions:not([hidden]) {

    display: flex;

}


.tarot-action {

    min-height: 36px;

    padding: 0 13px;

    border-radius: 10px;

    font-size: 13px;

}


.tarot-action-save {

    background: var(--primary);

    color: white;

    font-weight: 700;

}


.tarot-edit-help {

    margin:
        0
        0
        15px;

    text-align: right;

    color: var(--text-soft);

    font-size: 12px;

}


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

.tarot-grid {

    display: grid;

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

    gap: 11px;

}


/* =========================================
   ITEM
========================================= */

.tarot-item {

    position: relative;

    min-width: 0;

    min-height: 83px;

    display: flex;

    align-items: center;

    padding:
        0
        52px
        0
        23px;

    overflow: hidden;

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

    border-radius: 17px;

    background:
        var(--surface);

    box-shadow:
        var(--shadow);

    color:
        var(--text);

    text-decoration: none;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;

}


body:not(.tarot-edit-mode)
.tarot-item:hover {

    transform:
        translateY(-2px);

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

    background:
        var(--surface-hover);

}


.tarot-item-decoration {

    flex:
        0 0 auto;

    margin-right: 11px;

    color: var(--primary);

    font-size: 11px;

}


.tarot-item-name {

    min-width: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size: 18px;

    font-weight: 500;

    letter-spacing: -.6px;

}


/* =========================================
   DRAG
========================================= */

.tarot-drag-handle {

    position: absolute;

    right: 18px;
    top: 50%;

    width: 15px;

    display: none;

    grid-template-columns:
        repeat(2, 4px);

    gap: 3px;

    transform:
        translateY(-50%);

    cursor: grab;

}


.tarot-drag-handle i {

    width: 4px;
    height: 4px;

    display: block;

    border-radius: 50%;

    background:
        var(--primary);

}


body.tarot-edit-mode
.tarot-drag-handle {

    display: grid;

}


body.tarot-edit-mode
.tarot-item {

    user-select:
        none;

    -webkit-user-select:
        none;

}

body.tarot-edit-mode
.tarot-drag-handle {

    cursor: grab;

}

body.tarot-edit-mode
.tarot-drag-handle {

    touch-action:
        none;

    user-select:
        none;

    -webkit-user-select:
        none;

}

body.tarot-edit-mode
.tarot-drag-handle:active {

    cursor: grabbing;

}


/* Sortable */

/* =========================================================
   SORTABLE -  스타일 드래그
========================================================= */


/*
 * 원래 있던 자리
 *
 * 카드가 움직이면 그 자리에
 * 점선 빈 박스가 남는다.
 */
.tarot-sort-ghost {

    opacity: 1 !important;

    background:
        transparent !important;

    border:
        1.5px dashed
        rgba(
            150,
            160,
            155,
            .52
        ) !important;

    box-shadow:
        none !important;

    rotate: 0deg !important;

    animation:
        none !important;

}


/*
 * 빈 자리에서는 기존 내용 숨김
 */
.tarot-sort-ghost
.tarot-item-decoration,

.tarot-sort-ghost
.tarot-item-name,

.tarot-sort-ghost
.tarot-drag-handle {

    opacity: 0 !important;

}


/*
 * 선택된 원본
 */
.tarot-sort-chosen {

    animation:
        none !important;

    rotate:
        0deg !important;

}


/*
 * 실제 마우스 / 손가락을 따라다니는 카드
 *
 * SortableJS forceFallback 사용 시
 * 복제 카드에 이 class가 붙는다.
 */
.tarot-drag-floating {

    opacity:
        .97 !important;

    z-index:
        99999 !important;

    background:
        var(--surface) !important;

    border:
        1px solid
        rgba(
            82,
            183,
            136,
            .65
        ) !important;

    box-shadow:
        0
        15px
        35px
        rgba(
            0,
            0,
            0,
            .24
        ) !important;

    /*
     * transform은 SortableJS가 위치 이동에 사용하므로
     * 사용하지 않는다.
     */
    scale:
        1.035;

    rotate:
        .25deg;

    animation:
        none !important;

    cursor:
        grabbing !important;

    pointer-events:
        none;

}


/*
 * 떠다니는 카드에서는
 * 오른쪽 드래그 핸들도 그대로 표시
 */
.tarot-drag-floating
.tarot-drag-handle {

    display:
        grid !important;

}


/*
 * 실제 드래그 중에는
 * 전체 흔들림을 조금 약하게
 */
body.tarot-is-dragging
.tarot-item:not(
    .tarot-sort-ghost
):not(
    .tarot-drag-floating
):not(
    .tarot-sort-chosen
) {

    animation-duration:
        .20s;

}


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

@media (max-width: 640px) {

    .fortune-header-inner {

        height: 60px;

        padding:
            0
            12px;

    }


    .tarot-main {

        padding:
            20px
            14px
            70px;

    }


    .tarot-intro {

        margin-bottom:
            31px;

    }


    .tarot-grid {

        gap: 8px;

    }


    .tarot-item {

        min-height: 68px;

        padding:
            0
            37px
            0
            15px;

        border-radius:
            13px;

    }


    .tarot-item-decoration {

        margin-right:
            7px;

        font-size:
            9px;

    }


    .tarot-item-name {

        font-size:
            15px;

        letter-spacing:
            -.5px;

    }


    .tarot-drag-handle {

        right: 11px;

    }


}


/* 매우 좁은 기기 */

@media (max-width: 330px) {

    .tarot-item {

        padding-left: 11px;

    }

    .tarot-item-name {

        font-size: 14px;

    }

}
/* =========================================================
   COMPACT FULL VIEW
   타로 메뉴 20개를 한 화면에 최대한 표시
========================================================= */


/* 페이지 자체 스크롤 방지 */

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.fortune-page {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}


/* =========================================================
   HEADER 축소
========================================================= */

.fortune-header-inner {

    max-width: 820px;

    height: 48px;

    padding:
        0
        14px;

}

.fortune-back {

    width: 34px;
    height: 34px;

}

.fortune-back span {

    font-size: 30px;

}

.fortune-logo {

    gap: 5px;

}

.fortune-logo-clover {

    font-size: 15px;

}

.fortune-logo-text {

    font-size: 12px;

}

.fortune-theme-button {

    width: 34px;
    height: 34px;

    font-size: 17px;

}


/* =========================================================
   MAIN 폭 축소
========================================================= */

.tarot-main {

    width: 100%;

    max-width: 760px;

    height:
        calc(
            100dvh - 48px
        );

    min-height: 0;

    margin:
        0 auto;

    padding:
        4px
        12px
        8px;

    display: flex;

    flex-direction: column;

}


/* =========================================================
   상단 설명 영역 축소
========================================================= */

.tarot-intro {

    flex:
        0 0 auto;

    margin-bottom: 7px;

}


/* 나뭇잎 장식 */

.tarot-intro-symbol {

    width: 44px;
    height: 23px;

    margin:
        0 auto
        5px;

}

.tarot-intro-symbol span {

    width: 16px;
    height: 16px;

}

.tarot-intro-symbol span:nth-child(1) {

    left: 5px;
    top: 6px;

}

.tarot-intro-symbol span:nth-child(2) {

    left: 15px;
    top: 0;

}

.tarot-intro-symbol span:nth-child(3) {

    right: 5px;
    top: 6px;

}


/* UNIVERSAL TAROT */

.tarot-intro-en {

    margin-bottom: 3px;

    font-size: 8px;

    letter-spacing: 3px;

}


/* 유니버셜 타로 */

.tarot-title {

    font-size:
        clamp(
            23px,
            3vw,
            31px
        );

    line-height: 1.15;

    letter-spacing: -1.2px;

}


/* 설명 */

.tarot-subtitle {

    margin:
        4px
        0
        0;

    font-size: 11px;

    line-height: 1.35;

}


/* =========================================================
   메뉴 전체
========================================================= */

.tarot-menu {

    flex:
        1 1 auto;

    min-height: 0;

    display: flex;

    flex-direction: column;

}


/* =========================================================
   편집 버튼
========================================================= */

.tarot-toolbar {

    flex:
        0 0 auto;

    min-height: 27px;

    margin-bottom: 3px;

}

.tarot-edit-button {

    padding:
        3px
        7px;

    font-size: 12px;

}

.tarot-action {

    min-height: 27px;

    padding:
        0
        9px;

    border-radius: 7px;

    font-size: 11px;

}

.tarot-edit-actions {

    gap: 3px;

}


/* 편집 안내 */

.tarot-edit-help {

    margin:
        0
        0
        4px;

    font-size: 10px;

    line-height: 1.2;

}


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

.tarot-grid {

    width: 100%;

    display: grid;

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

    /*
     * 화면 높이에 따라 자동 축소.
     * 최대 50px까지만 커지게 함.
     */

    grid-auto-rows:
        clamp(
            34px,
            4.4dvh,
            50px
        );

    gap:
        5px
        7px;

}


/* =========================================================
   각각의 타로 메뉴
========================================================= */

.tarot-item {

    width: 100%;

    min-height: 0;
    height: 100%;

    padding:
        0
        34px
        0
        14px;

    border-radius: 11px;

    box-shadow:
        0 3px 11px
        rgba(
            46,
            78,
            63,
            .045
        );

}


/* 왼쪽 ✦ */

.tarot-item-decoration {

    margin-right: 7px;

    font-size: 8px;

}


/* 글씨 */

.tarot-item-name {

    font-size:
        clamp(
            12px,
            1.35vw,
            15px
        );

    letter-spacing: -.4px;

}


/* 드래그 핸들 */

.tarot-drag-handle {

    right: 11px;

    width: 12px;

    grid-template-columns:
        repeat(
            2,
            3px
        );

    gap: 2px;

}

.tarot-drag-handle i {

    width: 3px;
    height: 3px;

}

.tarot-drag-handle {

    right: 10px;

    width: 12px;

    grid-template-columns:
        repeat(2, 3px);

    gap:
        3px 3px;

}

.tarot-drag-handle i {

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--primary) 60%,
            var(--text-soft)
        );

}

/* =========================================================
   iPhone 스타일 EDIT WIGGLE
========================================================= */

/*
 * SortableJS는 transform을 사용하므로
 * transform: rotate()를 쓰지 않고
 * 개별 CSS rotate 속성을 사용한다.
 */

body.tarot-edit-mode
.tarot-item {

    animation:
        tarot-menu-wiggle
        .16s
        ease-in-out
        infinite
        alternate;

    transform-origin:
        50% 50%;

    will-change:
        rotate;

}


/* 각각 똑같이 움직이지 않게 타이밍 차이 */

body.tarot-edit-mode
.tarot-item:nth-child(2n) {

    animation-delay:
        -.08s;

}

body.tarot-edit-mode
.tarot-item:nth-child(3n) {

    animation-delay:
        -.13s;

}

body.tarot-edit-mode
.tarot-item:nth-child(5n) {

    animation-delay:
        -.04s;

}


/* 좌우 흔들림 */

@keyframes tarot-menu-wiggle {

    0% {

        rotate:
            -0.45deg;

    }

    100% {

        rotate:
            0.45deg;

    }

}


/*
 * 실제로 잡아서 이동 중일 때는
 * 선택한 카드가 흔들리지 않게 함
 */

body.tarot-edit-mode
.tarot-item.tarot-sort-chosen,

body.tarot-edit-mode
.tarot-item.tarot-sort-ghost,

body.tarot-edit-mode
.tarot-item.tarot-drag-floating,

body.tarot-edit-mode
.tarot-item.sortable-drag {

    animation:
        none !important;

}


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

@media (max-width: 640px) {

    .fortune-header-inner {

        height: 43px;

        padding:
            0
            7px;

    }


    .fortune-logo-text {

        font-size: 11px;

    }


    .fortune-logo-clover {

        font-size: 13px;

    }


    .tarot-main {

        max-width: none;

        height:
            calc(
                100dvh - 43px
            );

        padding:
            1px
            7px
            5px;

    }


    .tarot-intro {

        margin-bottom: 4px;

    }


    .tarot-intro-symbol {

        width: 37px;
        height: 18px;

        margin-bottom: 3px;

    }


    .tarot-intro-symbol span {

        width: 13px;
        height: 13px;

    }


    .tarot-intro-symbol span:nth-child(1) {

        left: 5px;
        top: 5px;

    }


    .tarot-intro-symbol span:nth-child(2) {

        left: 13px;
        top: 0;

    }


    .tarot-intro-symbol span:nth-child(3) {

        right: 5px;
        top: 5px;

    }


    .tarot-intro-en {

        margin-bottom: 2px;

        font-size: 6px;

        letter-spacing: 2.2px;

    }


    .tarot-title {

        font-size: 21px;

    }


    .tarot-subtitle {

        margin-top: 2px;

        font-size: 9px;

    }


    .tarot-toolbar {

        min-height: 23px;

        margin-bottom: 2px;

    }


    .tarot-edit-button {

        font-size: 10px;

    }


    .tarot-action {

        min-height: 23px;

        padding:
            0
            6px;

        font-size: 9px;

    }


    .tarot-grid {

        grid-auto-rows:
            clamp(
                32px,
                4.6dvh,
                41px
            );

        gap:
            4px
            5px;

    }


    .tarot-item {

        padding:
            0
            27px
            0
            9px;

        border-radius: 8px;

    }


    .tarot-item-decoration {

        margin-right: 5px;

        font-size: 6px;

    }


    .tarot-item-name {

        font-size:
            clamp(
                10px,
                3.2vw,
                13px
            );

    }


    .tarot-drag-handle {

        right: 7px;

    }

}


/* =========================================================
   세로 높이가 아주 작은 화면
========================================================= */

@media (max-height: 620px) {

    /*
     * 공간이 정말 부족한 기기는
     * 부가 장식을 자동으로 줄임
     */

    .tarot-intro-symbol {

        display: none;

    }


    .tarot-intro-en {

        display: none;

    }


    .tarot-subtitle {

        display: none;

    }


    .tarot-intro {

        margin-bottom: 2px;

    }


    .tarot-title {

        font-size: 19px;

    }


    .tarot-grid {

        grid-auto-rows:
            clamp(
                29px,
                5.4dvh,
                34px
            );

        gap: 3px 5px;

    }


    .tarot-toolbar {

        min-height: 21px;

    }

}


/* =========================================================
   접근성 - 애니메이션 감소 설정
========================================================= */

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

    body.tarot-edit-mode
    .tarot-item {

        animation: none;

        rotate: 0deg;

    }

}

/* =========================================================
   DYNAMIC TAROT PALETTE ACCENT
========================================================= */


/*
 * 기본 라이트/다크에서는 기존 수풀잎 초록색.
 *
 * 사용자가 팔레트 색을 선택하면
 * tarot-palette.js가 --tarot-accent를 생성한다.
 */

:root {

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

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

    --tarot-accent-soft:
        rgba(82, 183, 136, .11);

    --tarot-accent-border:
        rgba(82, 183, 136, .55);

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

    --tarot-accent-shadow:
        rgba(82, 183, 136, .15);

}


/* =========================================================
   메뉴 왼쪽 ✦
========================================================= */

.tarot-item-decoration {

    color:
        var(--tarot-accent) !important;

    transition:
        color .22s ease,
        transform .22s ease;

}


/*
 * 메뉴에 마우스를 올리면
 * ✦도 살짝 살아나는 느낌
 */

body:not(.tarot-edit-mode)
.tarot-item:hover
.tarot-item-decoration {

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

    transform:
        scale(1.18);

}


/* =========================================================
   MENU HOVER
========================================================= */

body:not(.tarot-edit-mode)
.tarot-item:hover {

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

    background:
        var(--surface-hover)
        !important;

    box-shadow:
        0 7px 20px
        var(--tarot-accent-shadow);

}


/* =========================================================
   메뉴 텍스트
========================================================= */

.tarot-item-name {

    transition:
        color .18s ease;

}


body:not(.tarot-edit-mode)
.tarot-item:hover
.tarot-item-name {

    color:
        var(--text);

}


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

.tarot-edit-button:hover {

    color:
        var(--tarot-accent)
        !important;

}


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

.tarot-action-save {

    background:
        var(--tarot-accent)
        !important;

}


/*
 * 밝거나 어두운 색에 관계없이
 * 저장 버튼 글자가 잘 보이도록
 */

.tarot-action-save {

    color:
        var(--bg)
        !important;

    font-weight:
        700;

}


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

.tarot-drag-handle i {

    background:
        var(--tarot-accent)
        !important;

}


/* =========================================================
   EDIT MODE SELECT
========================================================= */

.tarot-sort-chosen {

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

    box-shadow:
        0 8px 24px
        var(--tarot-accent-shadow)
        !important;

}


/* =========================================================
   FLOATING DRAG CARD
========================================================= */

.tarot-drag-floating {

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

    box-shadow:
        0 16px 38px
        var(--tarot-accent-shadow),
        0 12px 30px
        rgba(0, 0, 0, .18)
        !important;

}


/* =========================================================
   GHOST
========================================================= */

.tarot-sort-ghost {

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

}


/* =========================================================
   KEYBOARD FOCUS
========================================================= */

.tarot-item:focus-visible,
.tarot-edit-button:focus-visible,
.tarot-action:focus-visible {

    outline:
        2px solid
        var(--tarot-accent);

    outline-offset:
        2px;

}

/* =========================================================
   TAROT SPREAD DIAGRAM GRID V7
========================================================= */


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

   PC에서는 최대 4열 정도까지 표시해서
   너무 길게 스크롤하지 않도록 함
========================================================= */

.tarot-main {

    max-width:
        960px;

}


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

.tarot-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                210px,
                1fr
            )
        );

    grid-auto-rows:
        auto !important;

    gap:
        9px;

}


/* =========================================================
   TILE
========================================================= */

.tarot-item {

    position: relative;

    width: 100%;

    height: auto !important;

    min-height:
        68px !important;

    padding:
        10px
        11px
        10px
        14px !important;

    display:
        block !important;

    overflow:
        visible;

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

    border-radius:
        14px;

    background:
        var(--surface);

    box-shadow:
        0 4px 14px
        rgba(
            0,
            0,
            0,
            .055
        );

    color:
        var(--text);

    text-decoration:
        none;

    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease,
        opacity .18s ease;

}


/* =========================================================
   INNER
========================================================= */

.tarot-item-inner {

    width: 100%;

    min-height:
        48px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap:
        8px;

}


/* =========================================================
   TEXT
========================================================= */

.tarot-item-copy {

    min-width: 0;

    flex:
        1 1 auto;

    display: block;

}


.tarot-item-name {

    display: block;

    margin: 0 0 3px;

    overflow: hidden;

    color:
        var(--text);

    font-size:
        13.5px;

    font-weight:
        700;

    line-height:
        1.25;

    letter-spacing:
        -.35px;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

}


.tarot-item-count {

    display: block;

    color:
        var(--text-soft);

    font-size:
        10px;

    font-weight:
        500;

    line-height:
        1.25;

    font-variant-numeric:
        tabular-nums;

}


.tarot-item-count[hidden] {

    display: none;

}


/* =========================================================
   CATEGORY

   사용자 선택 색에 맞게 자동 변경
========================================================= */

.tarot-item-category {

    display: block;

    margin-top:
        3px;

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

    font-size:
        8px;

    font-weight:
        750;

    line-height:
        1.2;

    letter-spacing:
        .25px;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}


.tarot-item-category[hidden] {

    display: none;

}


/* =========================================================
   DIAGRAM BOX
========================================================= */

.tarot-diagram-box {

    width:
        70px;

    height:
        52px;

    flex:
        0 0 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow:
        hidden;

    border-radius:
        11px;

    background:
        rgba(
            0,
            0,
            0,
            .10
        );

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

}


/* 밝은 사용자 색에서는 내부 박스가 너무 검지 않게 */

html[data-theme="light"]
.tarot-diagram-box {

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

}


/* =========================================================
   SVG
========================================================= */

svg.spread-svg {

    width:
        58px;

    height:
        44px;

    overflow:
        visible;

}


svg.spread-svg rect {

    fill:
        rgba(
            127,
            127,
            127,
            .16
        );

    stroke:
        var(--border);

    stroke-width:
        2.35;

    transition:
        fill .17s ease,
        stroke .17s ease;

}


/* =========================================================
   TILE HOVER

   초록 고정이 아니라
   현재 선택한 스프레드 천 accent 사용
========================================================= */

body:not(.tarot-edit-mode)
.tarot-item:hover,

body:not(.tarot-edit-mode)
.tarot-item:focus-visible {

    transform:
        translateY(-2px);

    background:
        var(--surface-hover)
        !important;

    border-color:
        var(
            --tarot-accent-border,
            var(--border)
        )
        !important;

    box-shadow:
        0 8px 22px
        var(
            --tarot-accent-shadow,
            rgba(0, 0, 0, .10)
        );

}


/*
 * 도안 카드도 현재 테마색으로
 */

body:not(.tarot-edit-mode)
.tarot-item:hover
svg.spread-svg rect,

body:not(.tarot-edit-mode)
.tarot-item:focus-visible
svg.spread-svg rect {

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

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

}


/*
 * 도안 박스도 아주 약하게 반응
 */

body:not(.tarot-edit-mode)
.tarot-item:hover
.tarot-diagram-box {

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

}


/* =========================================================
   SVG CARD ANIMATION
========================================================= */

rect.card-anim {

    transform-box:
        fill-box;

    transform-origin:
        center;

    transform:
        rotate(
            var(
                --rot,
                0deg
            )
        );

}


/* =========================================================
   FAN

   왼쪽 카드 더미에서 한 장씩 펼쳐지는 느낌
========================================================= */

@keyframes tarotDiagramFan {

    0% {

        transform:
            translate(
                var(
                    --tx,
                    -14px
                ),
                var(
                    --ty,
                    4px
                )
            )
            scale(
                var(
                    --scale-from,
                    .5
                )
            )
            rotate(
                var(
                    --rz-start,
                    -8deg
                )
            );

        opacity:
            0;

    }


    55% {

        opacity:
            1;

    }


    100% {

        transform:
            rotate(
                var(
                    --rot,
                    0deg
                )
            );

        opacity:
            1;

    }

}


/* =========================================================
   CENTER DEAL

   가운데 덱에서 실제 리딩 순서대로
========================================================= */

@keyframes tarotDiagramDeal {

    0% {

        transform:
            translate(
                var(
                    --tx,
                    0px
                ),
                var(
                    --ty,
                    0px
                )
            )
            scale(
                var(
                    --scale-from,
                    .22
                )
            )
            rotate(
                var(
                    --rz-start,
                    0deg
                )
            );

        opacity:
            0;

    }


    50% {

        opacity:
            1;

    }


    100% {

        transform:
            rotate(
                var(
                    --rot,
                    0deg
                )
            );

        opacity:
            1;

    }

}


/* FAN */

body:not(.tarot-edit-mode)
.tarot-item:hover
rect.card-anim-fan,

body:not(.tarot-edit-mode)
.tarot-item:focus-visible
rect.card-anim-fan {

    animation:
        tarotDiagramFan
        .5s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        )
        both;

    animation-delay:
        var(
            --delay,
            0ms
        );

}


/* DEAL / RANDOM */

body:not(.tarot-edit-mode)
.tarot-item:hover
rect.card-anim-deal,

body:not(.tarot-edit-mode)
.tarot-item:focus-visible
rect.card-anim-deal,

body:not(.tarot-edit-mode)
.tarot-item:hover
rect.card-anim-random,

body:not(.tarot-edit-mode)
.tarot-item:focus-visible
rect.card-anim-random {

    animation:
        tarotDiagramDeal
        .55s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        )
        both;

    animation-delay:
        var(
            --delay,
            0ms
        );

}


/* =========================================================
   MULTI COUNT

   원래 타일을 숨긴 뒤
   같은 grid 자리에 원형 숫자가 나타남
========================================================= */

.tarot-item.is-variant-hidden {

    display:
        none !important;

}


/* =========================================================
   VARIANT CHOOSER
========================================================= */

.tarot-variant-chooser {

    min-width:
        0;

    min-height:
        68px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap:
        10px;

    padding:
        7px;

    border:
        1px solid
        transparent;

    border-radius:
        14px;

    background:
        transparent;

    opacity:
        0;

    transform:
        scale(.88);

    transition:
        opacity .18s ease,
        transform .22s
        cubic-bezier(
            .2,
            .9,
            .3,
            1.25
        );

}


/*
 * 메뉴가 사라지고
 * 원들이 등장하는 애니메이션
 */

.tarot-variant-chooser.is-visible {

    opacity:
        1;

    transform:
        scale(1);

}


.tarot-variant-chooser.is-leaving {

    opacity:
        0;

    transform:
        scale(.90);

}


/* =========================================================
   NUMBER CIRCLE
========================================================= */

.tarot-variant-circle {

    width:
        43px;

    height:
        43px;

    flex:
        0 0 43px;

    padding:
        0;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius:
        50%;

    background:
        var(--surface);

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

    box-shadow:
        0 4px 15px
        rgba(
            0,
            0,
            0,
            .09
        );

    font-family:
        inherit;

    font-size:
        14px;

    font-weight:
        750;

    font-variant-numeric:
        tabular-nums;

    cursor:
        pointer;

    opacity:
        0;

    transform:
        translateY(8px)
        scale(.76);

}


/*
 * 5,7,9가 동시에 뜨지 않고
 * 아주 살짝 순서대로 나타남
 */

.tarot-variant-chooser.is-visible
.tarot-variant-circle {

    animation:
        tarotVariantCircleIn
        .32s
        cubic-bezier(
            .2,
            .9,
            .3,
            1.3
        )
        forwards;

    animation-delay:
        calc(
            var(--variant-index)
            *
            45ms
        );

}


@keyframes tarotVariantCircleIn {

    from {

        opacity:
            0;

        transform:
            translateY(8px)
            scale(.72);

    }


    to {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =========================================================
   NUMBER HOVER

   현재 선택한 팔레트 색을 그대로 사용
========================================================= */

.tarot-variant-circle:hover,

.tarot-variant-circle:focus-visible {

    outline:
        none;

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

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

    /*
     * accent는 현재 배경과 반대 밝기로 생성되므로
     * 배경색을 글자로 사용하면 높은 대비 확보
     */

    color:
        var(--bg);

    box-shadow:
        0 7px 21px
        var(
            --tarot-accent-shadow,
            rgba(
                0,
                0,
                0,
                .16
            )
        );

    transform:
        translateY(-2px)
        scale(1.07);

}


.tarot-variant-circle:active {

    transform:
        scale(.93);

}


/* =========================================================
   EDIT MODE
========================================================= */

body.tarot-edit-mode
.tarot-diagram-box {

    margin-right:
        18px;

    opacity:
        .65;

}


body.tarot-edit-mode
.tarot-item-category {

    opacity:
        .65;

}


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

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

    .tarot-grid {

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

    }

}


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

   모바일은 2열 유지
========================================================= */

@media (max-width: 640px) {

    .tarot-main {

        max-width:
            none;

    }


    .tarot-grid {

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

        gap:
            6px;

    }


    .tarot-item {

        min-height:
            60px !important;

        padding:
            7px
            8px
            7px
            10px
            !important;

        border-radius:
            11px;

    }


    .tarot-item-inner {

        min-height:
            44px;

        gap:
            4px;

    }


    .tarot-item-name {

        font-size:
            12px;

    }


    .tarot-item-count {

        font-size:
            8.5px;

    }


    /*
     * 작은 화면에서는 카테고리를 감춰
     * 타로 이름과 실제 도안을 우선 표시
     */

    .tarot-item-category {

        display:
            none !important;

    }


    .tarot-diagram-box {

        width:
            57px;

        height:
            44px;

        flex-basis:
            57px;

        border-radius:
            8px;

    }


    svg.spread-svg {

        width:
            49px;

        height:
            38px;

    }


    .tarot-variant-chooser {

        min-height:
            60px;

        gap:
            6px;

    }


    .tarot-variant-circle {

        width:
            37px;

        height:
            37px;

        flex-basis:
            37px;

        font-size:
            12px;

    }

}


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

@media (max-width: 370px) {

    .tarot-diagram-box {

        width:
            49px;

        flex-basis:
            49px;

    }


    svg.spread-svg {

        width:
            43px;

    }


    .tarot-item-name {

        font-size:
            11px;

    }


    .tarot-variant-circle {

        width:
            34px;

        height:
            34px;

        flex-basis:
            34px;

    }

}


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

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

    .tarot-item,

    .tarot-variant-chooser,

    .tarot-variant-circle,

    svg.spread-svg rect {

        animation:
            none !important;

        transition:
            none !important;

    }


    .tarot-variant-circle {

        opacity:
            1;

        transform:
            none;

    }

}

/* =========================================================
   MOBILE VERTICAL SCROLL FIX
   모바일에서는 모든 타로 메뉴를 아래까지 볼 수 있도록 허용
========================================================= */

@media (max-width: 640px) {

    html {

        height: auto !important;

        min-height: 100%;

        overflow-x: hidden;

        overflow-y: auto !important;

    }


    body {

        height: auto !important;

        min-height: 100%;

        overflow-x: hidden !important;

        overflow-y: auto !important;

        overscroll-behavior-y: auto;

        -webkit-overflow-scrolling: touch;

    }


    /*
     * 예전에 한 화면에 메뉴 전체를 넣기 위해
     * 100dvh로 고정했던 것을 모바일에서만 해제
     */

    .fortune-page {

        width: 100%;

        height: auto !important;

        min-height: 100dvh;

        overflow: visible !important;

    }


    /*
     * header 아래 MAIN도 높이를 고정하지 않음
     */

    .tarot-main {

        width: 100%;

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        overflow: visible !important;

        /*
         * 마지막 메뉴가 화면 하단에
         * 너무 딱 붙지 않도록 여유
         */

        padding-bottom: 90px !important;

    }


    .tarot-menu {

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        overflow: visible !important;

    }


    /*
     * 그리드 자체도 높이 제한 제거
     */

    .tarot-grid {

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        overflow: visible !important;

        grid-auto-rows: auto !important;

    }

}

/* =========================================================
   TAROT MENU v40 · READING OPTIONS UI
   기본값:
   - 수동 Manual
   - 역방향 OFF

   public/css/tarot.css 맨 마지막에 추가
========================================================= */


/* =========================================================
   WRAPPER
========================================================= */

.tarot-reading-options {
    width:
        min(
            100%,
            860px
        );

    margin:
        0 auto 18px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(250px, .75fr);

    gap:
        10px;

    padding:
        0 14px;
}


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

.tarot-reading-option {
    min-width:
        0;

    padding:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    border:
        1px solid
        var(
            --border,
            rgba(64, 77, 70, .10)
        );

    border-radius:
        17px;

    background:
        var(
            --surface,
            rgba(255,255,255,.60)
        );

    box-shadow:
        0 8px 24px
        rgba(38, 52, 44, .055);

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


.tarot-reading-option:hover {
    border-color:
        var(
            --tarot-accent-border,
            var(--border)
        );

    box-shadow:
        0 10px 28px
        rgba(38, 52, 44, .075);
}


/* =========================================================
   COPY
========================================================= */

.tarot-reading-option-copy {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.tarot-reading-option-kicker {
    color:
        var(
            --tarot-accent-strong,
            var(--text-soft)
        );

    font-size:
        9px;

    font-weight:
        760;

    line-height:
        1.2;

    letter-spacing:
        .02em;
}


.tarot-reading-option-title {
    color:
        var(--text);

    font-size:
        12px;

    font-weight:
        780;

    line-height:
        1.35;

    letter-spacing:
        -.25px;
}


.tarot-reading-option-description {
    margin-top:
        2px;

    color:
        var(--text-soft);

    font-size:
        9.5px;

    font-weight:
        540;

    line-height:
        1.35;
}


/* =========================================================
   MANUAL / AUTO SEGMENT
========================================================= */

.tarot-mode-segment {
    flex:
        0 0 auto;

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                118px,
                1fr
            )
        );

    gap:
        5px;

    padding:
        4px;

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

    border-radius:
        14px;

    background:
        rgba(127,127,127,.045);
}


.tarot-mode-button {
    position:
        relative;

    min-height:
        48px;

    padding:
        5px 30px 5px 8px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    border:
        1px solid
        transparent;

    border-radius:
        10px;

    background:
        transparent;

    color:
        var(--text-soft);

    font-family:
        inherit;

    cursor:
        pointer;

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


.tarot-mode-button:hover {
    color:
        var(--text);

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


.tarot-mode-button:active {
    transform:
        scale(.975);
}


.tarot-mode-button.is-selected {
    color:
        var(--text);

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

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

    box-shadow:
        0 4px 12px
        rgba(31, 46, 38, .08);
}


/* =========================================================
   MODE ICON
========================================================= */

.tarot-mode-icon {
    width:
        29px;

    height:
        29px;

    flex:
        0 0 29px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        9px;

    background:
        rgba(127,127,127,.07);

    color:
        var(--text-soft);

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


.tarot-mode-icon svg {
    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.65;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.tarot-mode-button.is-selected
.tarot-mode-icon {
    color:
        var(
            --tarot-accent-strong,
            var(--text)
        );

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

    transform:
        scale(1.03);
}


/* auto sparkle needs a tiny fill */

.tarot-mode-icon-auto svg path:first-child,
.tarot-mode-icon-auto svg path:nth-child(2) {
    fill:
        currentColor;

    stroke:
        none;
}


/* =========================================================
   MODE COPY
========================================================= */

.tarot-mode-copy {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        1px;
}


.tarot-mode-copy strong {
    color:
        inherit;

    font-size:
        11px;

    font-weight:
        800;

    line-height:
        1.15;
}


.tarot-mode-copy small {
    color:
        var(--text-soft);

    font-size:
        8.5px;

    font-weight:
        560;

    line-height:
        1.2;

    white-space:
        nowrap;
}


/* =========================================================
   SELECTED CHECK
========================================================= */

.tarot-mode-check {
    position:
        absolute;

    right:
        8px;

    top:
        50%;

    width:
        18px;

    height:
        18px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(
            --tarot-accent,
            #52b788
        );

    color:
        white;

    opacity:
        0;

    transform:
        translateY(-50%)
        scale(.65);

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


.tarot-mode-check svg {
    width:
        12px;

    height:
        12px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        2.3;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.tarot-mode-button.is-selected
.tarot-mode-check {
    opacity:
        1;

    transform:
        translateY(-50%)
        scale(1);
}


/* =========================================================
   REVERSED SWITCH
========================================================= */

.tarot-reversed-option {
    padding-right:
        8px;
}


.tarot-reversed-switch {
    position:
        relative;

    flex:
        0 0 auto;

    min-width:
        164px;

    min-height:
        58px;

    padding:
        7px 8px 7px 7px;

    display:
        grid;

    grid-template-columns:
        36px
        20px
        minmax(50px, 1fr)
        38px;

    align-items:
        center;

    gap:
        5px;

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

    border-radius:
        14px;

    background:
        rgba(127,127,127,.04);

    color:
        var(--text-soft);

    font-family:
        inherit;

    cursor:
        pointer;

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


.tarot-reversed-switch:hover {
    border-color:
        var(
            --tarot-accent-border,
            var(--border)
        );

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


.tarot-reversed-switch:active {
    transform:
        scale(.98);
}


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

.tarot-reversed-card-demo {
    width:
        30px;

    height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        6px;

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

    box-shadow:
        0 3px 8px
        rgba(38,48,43,.08);

    transform:
        rotate(0deg);

    transition:
        transform .34s cubic-bezier(.2,.8,.2,1),
        border-color .18s ease,
        box-shadow .18s ease;
}


.tarot-reversed-card-mark {
    color:
        var(--text-soft);

    font-size:
        13px;

    line-height:
        1;
}


/* =========================================================
   ROTATION ICON
========================================================= */

.tarot-reversed-rotate {
    width:
        20px;

    height:
        20px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--text-soft);

    opacity:
        .62;

    transition:
        color .18s ease,
        opacity .18s ease,
        transform .34s cubic-bezier(.2,.8,.2,1);
}


.tarot-reversed-rotate svg {
    width:
        17px;

    height:
        17px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


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

.tarot-reversed-status {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        1px;
}


.tarot-reversed-status strong {
    color:
        var(--text);

    font-size:
        10.5px;

    font-weight:
        850;

    line-height:
        1.1;

    letter-spacing:
        .03em;
}


.tarot-reversed-status small {
    color:
        var(--text-soft);

    font-size:
        8px;

    font-weight:
        560;

    line-height:
        1.15;

    white-space:
        nowrap;
}


/* =========================================================
   SWITCH TRACK
========================================================= */

.tarot-switch-track {
    position:
        relative;

    width:
        36px;

    height:
        21px;

    display:
        block;

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

    border-radius:
        999px;

    background:
        rgba(127,127,127,.12);

    transition:
        background .20s ease,
        border-color .20s ease;
}


.tarot-switch-thumb {
    position:
        absolute;

    left:
        3px;

    top:
        50%;

    width:
        15px;

    height:
        15px;

    border-radius:
        50%;

    background:
        var(
            --glass-solid,
            #fff
        );

    box-shadow:
        0 2px 6px
        rgba(35,46,40,.18);

    transform:
        translateY(-50%);

    transition:
        left .24s cubic-bezier(.2,.8,.2,1),
        background .20s ease;
}


/* =========================================================
   REVERSED ON
========================================================= */

.tarot-reading-options[data-reversed="on"]
.tarot-reversed-switch {
    border-color:
        var(
            --tarot-accent-border,
            var(--border)
        );

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

    box-shadow:
        0 5px 14px
        var(
            --tarot-accent-shadow,
            rgba(82,183,136,.10)
        );
}


.tarot-reading-options[data-reversed="on"]
.tarot-reversed-card-demo {
    transform:
        rotate(180deg);

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

    box-shadow:
        0 -3px 8px
        rgba(38,48,43,.08);
}


.tarot-reading-options[data-reversed="on"]
.tarot-reversed-rotate {
    color:
        var(
            --tarot-accent-strong,
            var(--text)
        );

    opacity:
        1;

    transform:
        rotate(180deg);
}


.tarot-reading-options[data-reversed="on"]
.tarot-switch-track {
    background:
        var(
            --tarot-accent,
            #52b788
        );

    border-color:
        var(
            --tarot-accent,
            #52b788
        );
}


.tarot-reading-options[data-reversed="on"]
.tarot-switch-thumb {
    left:
        17px;

    background:
        #fff;
}


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

html[data-theme="dark"]
.tarot-reading-option {
    box-shadow:
        0 9px 24px
        rgba(0,0,0,.12);
}


html[data-theme="dark"]
.tarot-mode-button.is-selected {
    box-shadow:
        0 5px 15px
        rgba(0,0,0,.18);
}


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

@media (max-width: 820px) {

    .tarot-reading-options {
        grid-template-columns:
            1fr;

        width:
            100%;

        margin-bottom:
            14px;
    }


    .tarot-reading-option {
        padding:
            10px;
    }


    .tarot-mode-segment {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    108px,
                    1fr
                )
            );
    }


    .tarot-reversed-switch {
        min-width:
            176px;
    }

}


@media (max-width: 640px) {

    .tarot-reading-options {
        gap:
            7px;

        padding:
            0 10px;

        margin:
            0 auto 12px;
    }


    .tarot-reading-option {
        border-radius:
            14px;

        box-shadow:
            none;
    }


    /*
     * 모바일에서는 설명과 컨트롤을 위/아래로 두어
     * 너무 빽빽하지 않게 합니다.
     */

    .tarot-reading-mode-option {
        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            8px;
    }


    .tarot-mode-segment {
        width:
            100%;

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

        padding:
            3px;

        border-radius:
            12px;
    }


    .tarot-mode-button {
        min-height:
            44px;

        padding:
            4px 27px 4px 6px;

        gap:
            6px;

        border-radius:
            9px;
    }


    .tarot-mode-icon {
        width:
            27px;

        height:
            27px;

        flex-basis:
            27px;
    }


    .tarot-mode-icon svg {
        width:
            16px;

        height:
            16px;
    }


    .tarot-mode-copy strong {
        font-size:
            10.5px;
    }


    .tarot-mode-copy small {
        font-size:
            7.8px;
    }


    /*
     * 역방향은 한 줄에 유지.
     * 왼쪽 설명 + 오른쪽 시각 스위치
     */

    .tarot-reversed-option {
        gap:
            8px;

        padding:
            9px 7px 9px 10px;
    }


    .tarot-reading-option-description {
        display:
            none;
    }


    .tarot-reversed-switch {
        min-width:
            150px;

        min-height:
            51px;

        grid-template-columns:
            31px
            17px
            minmax(42px, 1fr)
            34px;

        gap:
            4px;

        padding:
            5px;

        border-radius:
            12px;
    }


    .tarot-reversed-card-demo {
        width:
            27px;

        height:
            38px;

        border-radius:
            5px;
    }


    .tarot-reversed-rotate {
        width:
            17px;

        height:
            17px;
    }


    .tarot-reversed-rotate svg {
        width:
            15px;

        height:
            15px;
    }


    .tarot-switch-track {
        width:
            32px;

        height:
            19px;
    }


    .tarot-switch-thumb {
        width:
            13px;

        height:
            13px;
    }


    .tarot-reading-options[data-reversed="on"]
    .tarot-switch-thumb {
        left:
            16px;
    }

}


@media (max-width: 390px) {

    .tarot-reading-option-kicker {
        font-size:
            8.2px;
    }


    .tarot-reading-option-title {
        font-size:
            11px;
    }


    .tarot-reversed-switch {
        min-width:
            138px;

        grid-template-columns:
            29px
            15px
            minmax(36px, 1fr)
            31px;
    }


    .tarot-reversed-status small {
        display:
            none;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.tarot-mode-button:focus-visible,
.tarot-reversed-switch:focus-visible {
    outline:
        2px solid
        var(
            --tarot-accent,
            #52b788
        );

    outline-offset:
        2px;
}


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

    .tarot-mode-button,
    .tarot-mode-icon,
    .tarot-mode-check,
    .tarot-reversed-switch,
    .tarot-reversed-card-demo,
    .tarot-reversed-rotate,
    .tarot-switch-track,
    .tarot-switch-thumb {
        transition:
            none !important;
    }

}

/* =========================================================
   TAROT MENU v42
   LAPTOP SCROLL + DARK READING OPTIONS FIX

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

   수정:
   1) 낮은 높이의 Windows 노트북에서 메뉴 하단이 잘리고
      페이지 스크롤이 막히는 문제
   2) 다크모드에서 자동/수동 선택 버튼이 흰색으로 뜨는 문제
   3) 다크모드에서 자동 글씨/보조문구가 흐려지는 문제
========================================================= */


/* =========================================================
   1. PAGE SCROLL FIX
   ========================================================= */

/*
 * 기존 CSS 어딘가에 height:100vh / overflow:hidden이 남아 있더라도
 * 타로 메뉴 페이지에서만 문서 자체가 세로로 늘어나도록 강제합니다.
 */
 html:has(body.tarot-menu-page-v42) {
    height: auto !important;
    min-height: 100% !important;

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

    scroll-behavior: smooth;
}


body.tarot-menu-page-v42 {
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;

    margin: 0 !important;

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

    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch;
}


body.tarot-menu-page-v42 .fortune-page {
    width: 100% !important;

    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;

    max-height: none !important;

    overflow: visible !important;
}


body.tarot-menu-page-v42 .tarot-main {
    width: 100% !important;

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

    overflow: visible !important;

    /*
     * 마지막 메뉴가 브라우저 하단에 딱 붙어 잘려 보이지 않도록
     * 충분한 하단 여유를 둡니다.
     */
    padding-bottom: 96px !important;
}


body.tarot-menu-page-v42 .tarot-menu {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
}


body.tarot-menu-page-v42 .tarot-grid {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;

    grid-auto-rows: auto !important;
}


/*
 * toolbar/edit 영역도 부모 높이를 억지로 제한하지 않도록 합니다.
 */
body.tarot-menu-page-v42 .tarot-toolbar,
body.tarot-menu-page-v42 .tarot-edit-actions,
body.tarot-menu-page-v42 .tarot-edit-help {
    max-height: none !important;
}


/* =========================================================
   LOW-HEIGHT LAPTOP
   1366×768, 1600×900 계열을 특히 고려
   ========================================================= */

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

    body.tarot-menu-page-v42 .tarot-main {
        padding-bottom: 110px !important;
    }


    body.tarot-menu-page-v42 .tarot-intro {
        margin-bottom: 10px !important;
    }


    body.tarot-menu-page-v42 .tarot-reading-options {
        margin-bottom: 14px !important;
    }


    body.tarot-menu-page-v42 .tarot-menu {
        padding-bottom: 14px !important;
    }

}


/* =========================================================
   2. DARK MODE · READING OPTION CARDS
   ========================================================= */

html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-reading-option {
    background: #1c2a24 !important;

    border-color:
        rgba(222, 236, 229, .12) !important;

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, .18) !important;
}


html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-reading-option:hover {
    background: #1f3028 !important;

    border-color:
        var(
            --tarot-accent-border,
            rgba(102, 199, 151, .34)
        ) !important;
}


/* 제목/설명 */

html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-reading-option-kicker {
    color:
        var(
            --tarot-accent,
            #6bcf9d
        ) !important;
}


html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-reading-option-title {
    color: #f1f5f3 !important;
}


html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-reading-option-description {
    color: #9fb1a8 !important;
}


/* =========================================================
   3. DARK MODE · MANUAL / AUTO SEGMENT
   ========================================================= */

html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-mode-segment {
    background: #17231e !important;

    border-color:
        rgba(223, 237, 230, .11) !important;
}


/*
 * 선택되지 않은 버튼
 */
html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-mode-button {
    background: transparent !important;

    color: #9fb0a7 !important;

    border-color: transparent !important;

    box-shadow: none !important;

    opacity: 1 !important;
}


html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-mode-button:hover {
    background:
        rgba(255, 255, 255, .045) !important;

    color: #e8efeb !important;
}


/*
 * 선택된 버튼
 *
 * 기존 .tarot-mode-button.is-selected 에서
 * --glass-solid 값이 밝은 흰색 계열로 잡혀
 * 다크모드에서도 흰 박스가 나온 문제를 여기서 덮습니다.
 */
html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-mode-button.is-selected {
    background: #263c32 !important;

    color: #f3f7f5 !important;

    border-color:
        rgba(103, 205, 155, .42) !important;

    box-shadow:
        0 5px 15px
        rgba(0, 0, 0, .22),
        inset 0 0 0 1px
        rgba(116, 214, 167, .04) !important;
}


/* 자동/수동 텍스트 강제 가시성 */

html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-mode-button
.tarot-mode-copy,
html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-mode-button
.tarot-mode-copy strong,
html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-mode-button
.tarot-mode-copy small {
    opacity: 1 !important;
    visibility: visible !important;
}


html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-mode-button
.tarot-mode-copy strong {
    color: #c8d5ce !important;
}


html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-mode-button
.tarot-mode-copy small {
    color: #82968c !important;
}


html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-mode-button.is-selected
.tarot-mode-copy strong {
    color: #ffffff !important;
}


html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-mode-button.is-selected
.tarot-mode-copy small {
    color: #bad3c6 !important;
}


/* 아이콘 */

html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-mode-icon {
    background:
        rgba(255, 255, 255, .045) !important;

    color: #91a49a !important;
}


html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-mode-button.is-selected
.tarot-mode-icon {
    background:
        rgba(102, 201, 152, .13) !important;

    color:
        var(
            --tarot-accent,
            #6bcf9d
        ) !important;
}


/* 선택 체크 */

html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-mode-check {
    background:
        var(
            --tarot-accent,
            #61c795
        ) !important;

    color: #102019 !important;
}


/* =========================================================
   4. DARK MODE · REVERSED SWITCH
   ========================================================= */

html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-reversed-switch {
    background: #17231e !important;

    color: #9eb0a7 !important;

    border-color:
        rgba(223, 237, 230, .11) !important;

    box-shadow: none !important;
}


html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-reversed-switch:hover {
    background: #1f3028 !important;

    border-color:
        rgba(102, 201, 152, .30) !important;
}


html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-reversed-card-demo {
    background: #d8dedb !important;

    color: #5b6c63 !important;

    border-color:
        rgba(255, 255, 255, .16) !important;

    box-shadow:
        0 4px 10px
        rgba(0, 0, 0, .18) !important;
}


html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-reversed-status strong {
    color: #f3f6f4 !important;
}


html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-reversed-status small {
    color: #93a69c !important;
}


html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-switch-track {
    background: #26372f !important;

    border-color:
        rgba(224, 237, 231, .10) !important;
}


html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-switch-thumb {
    background: #f0f3f1 !important;

    box-shadow:
        0 2px 7px
        rgba(0, 0, 0, .28) !important;
}


/* reversed ON */

html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-reading-options[data-reversed="on"]
.tarot-reversed-switch {
    background:
        rgba(86, 183, 137, .11) !important;

    border-color:
        rgba(102, 205, 155, .38) !important;
}


html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-reading-options[data-reversed="on"]
.tarot-switch-track {
    background:
        var(
            --tarot-accent,
            #61c795
        ) !important;

    border-color:
        var(
            --tarot-accent,
            #61c795
        ) !important;
}


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

@media (max-width: 640px) {

    html:has(body.tarot-menu-page-v42),
    body.tarot-menu-page-v42 {
        height: auto !important;
        min-height: 100% !important;

        overflow-y: auto !important;
    }


    body.tarot-menu-page-v42 .fortune-page,
    body.tarot-menu-page-v42 .tarot-main,
    body.tarot-menu-page-v42 .tarot-menu,
    body.tarot-menu-page-v42 .tarot-grid {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }


    body.tarot-menu-page-v42 .tarot-main {
        min-height: 100dvh !important;

        padding-bottom: 96px !important;
    }

}


/* =========================================================
   TAROT MENU v43
   CUSTOM PALETTE-AWARE READING CONTROLS

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

   목적:
   81색 팔레트에서 보라/남색/갈색 등 어두운 커스텀 색상을 골랐을 때
   수동/자동/역방향 박스만 고정 진초록색으로 남는 문제 수정.

   핵심:
   v42의 고정 #1c2a24 / #263c32 계열 대신
   tarot-palette.js가 선택 색상에서 계산해 주는:
   --bg
   --surface
   --surface-hover
   --text
   --text-soft
   --border
   --tarot-accent
   계열을 그대로 사용합니다.
========================================================= */


/* =========================================================
   CUSTOM PALETTE DETECTION

   theme-picker가 사용자 색상을 선택하면
   .tarot-theme-control에 .has-custom-color가 붙습니다.

   :has()를 이용해 페이지 전체에서 이를 감지합니다.
   현재 Windows Chrome에서는 지원됩니다.
========================================================= */


/* =========================================================
   1. OUTER READING OPTION CARDS
========================================================= */

body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reading-option {
    background:
        color-mix(
            in srgb,
            var(--surface) 90%,
            var(--bg) 10%
        )
        !important;

    color:
        var(--text)
        !important;

    border-color:
        color-mix(
            in srgb,
            var(--border) 82%,
            transparent
        )
        !important;

    box-shadow:
        0 8px 24px
        color-mix(
            in srgb,
            #000 14%,
            transparent
        )
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reading-option:hover {
    background:
        var(--surface-hover)
        !important;

    border-color:
        var(--tarot-accent-border)
        !important;
}


/* =========================================================
   2. LABEL / TITLE / DESCRIPTION
========================================================= */

body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reading-option-kicker {
    color:
        var(--tarot-accent-strong)
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reading-option-title {
    color:
        var(--text)
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reading-option-description {
    color:
        var(--text-soft)
        !important;
}


/* =========================================================
   3. MANUAL / AUTO SEGMENT BACKGROUND
========================================================= */

body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-segment {
    background:
        color-mix(
            in srgb,
            var(--bg) 42%,
            var(--surface) 58%
        )
        !important;

    border-color:
        var(--border)
        !important;
}


/* 선택 안 된 버튼 */

body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-button {
    background:
        transparent
        !important;

    color:
        var(--text-soft)
        !important;

    border-color:
        transparent
        !important;

    box-shadow:
        none
        !important;

    opacity:
        1
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-button:hover {
    background:
        var(--tarot-accent-hover)
        !important;

    color:
        var(--text)
        !important;
}


/*
 * 선택된 수동/자동:
 * 커스텀 팔레트의 surface-hover를 베이스로 하고
 * accent를 아주 조금 섞어 선택 상태만 구분.
 */
body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-button.is-selected {
    background:
        color-mix(
            in srgb,
            var(--surface-hover) 86%,
            var(--tarot-accent) 14%
        )
        !important;

    color:
        var(--text)
        !important;

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

    box-shadow:
        0 5px 15px
        color-mix(
            in srgb,
            var(--tarot-accent-shadow) 65%,
            transparent
        )
        !important;
}


/* =========================================================
   4. MANUAL / AUTO TEXT
========================================================= */

body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-button
.tarot-mode-copy,
body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-button
.tarot-mode-copy strong,
body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-button
.tarot-mode-copy small {
    opacity:
        1
        !important;

    visibility:
        visible
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-button
.tarot-mode-copy strong {
    color:
        var(--text)
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-button
.tarot-mode-copy small {
    color:
        var(--text-soft)
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-button.is-selected
.tarot-mode-copy strong {
    color:
        var(--text)
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-button.is-selected
.tarot-mode-copy small {
    color:
        color-mix(
            in srgb,
            var(--text) 68%,
            var(--bg) 32%
        )
        !important;
}


/* =========================================================
   5. MANUAL / AUTO ICONS
========================================================= */

body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-icon {
    background:
        color-mix(
            in srgb,
            var(--surface-hover) 76%,
            var(--bg) 24%
        )
        !important;

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


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-button.is-selected
.tarot-mode-icon {
    background:
        var(--tarot-accent-soft)
        !important;

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


/* check도 선택한 색상 계열 */

body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-check {
    background:
        var(--tarot-accent)
        !important;

    color:
        color-mix(
            in srgb,
            var(--text) 92%,
            #fff 8%
        )
        !important;
}


/* =========================================================
   6. REVERSED CONTROL
========================================================= */

body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reversed-switch {
    background:
        color-mix(
            in srgb,
            var(--bg) 40%,
            var(--surface) 60%
        )
        !important;

    color:
        var(--text-soft)
        !important;

    border-color:
        var(--border)
        !important;

    box-shadow:
        none
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reversed-switch:hover {
    background:
        var(--surface-hover)
        !important;

    border-color:
        var(--tarot-accent-border)
        !important;
}


/* 카드 모형도 고정 회색 대신 팔레트 surface */

body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reversed-card-demo {
    background:
        color-mix(
            in srgb,
            var(--surface) 78%,
            #fff 22%
        )
        !important;

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

    border-color:
        var(--border)
        !important;

    box-shadow:
        0 4px 10px
        color-mix(
            in srgb,
            #000 15%,
            transparent
        )
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reversed-rotate {
    color:
        var(--text-soft)
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reversed-status strong {
    color:
        var(--text)
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reversed-status small {
    color:
        var(--text-soft)
        !important;
}


/* =========================================================
   7. REVERSED OFF TRACK
========================================================= */

body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-switch-track {
    background:
        color-mix(
            in srgb,
            var(--surface-hover) 66%,
            var(--bg) 34%
        )
        !important;

    border-color:
        var(--border)
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-switch-thumb {
    background:
        color-mix(
            in srgb,
            var(--text) 86%,
            #fff 14%
        )
        !important;

    box-shadow:
        0 2px 7px
        color-mix(
            in srgb,
            #000 24%,
            transparent
        )
        !important;
}


/* =========================================================
   8. REVERSED ON
========================================================= */

body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reading-options[data-reversed="on"]
.tarot-reversed-switch {
    background:
        color-mix(
            in srgb,
            var(--surface-hover) 82%,
            var(--tarot-accent) 18%
        )
        !important;

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

    box-shadow:
        0 5px 14px
        var(--tarot-accent-shadow)
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reading-options[data-reversed="on"]
.tarot-switch-track {
    background:
        var(--tarot-accent)
        !important;

    border-color:
        var(--tarot-accent)
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reading-options[data-reversed="on"]
.tarot-reversed-rotate {
    color:
        var(--tarot-accent-strong)
        !important;
}


/* =========================================================
   9. NORMAL DARK MODE
   사용자 지정 색상이 없는 진짜 Dark Mode는 v42 디자인 유지.

   즉 아래 선택자는 일부러:
   :not(:has(.tarot-theme-control.has-custom-color))
   로 제한해 v42의 진초록 디자인과 역할을 분리합니다.
========================================================= */

html[data-theme="dark"]
body.tarot-menu-page-v43:not(:has(.tarot-theme-control.has-custom-color))
.tarot-reading-option {
    background:
        #1c2a24
        !important;
}


html[data-theme="dark"]
body.tarot-menu-page-v43:not(:has(.tarot-theme-control.has-custom-color))
.tarot-mode-button.is-selected {
    background:
        #263c32
        !important;
}


/* =========================================================
   10. BROWSER FALLBACK

   color-mix를 지원하지 않는 브라우저에서는
   기본 CSS variable 자체만 사용.
========================================================= */

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

    body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
    .tarot-reading-option,
    body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
    .tarot-mode-button.is-selected,
    body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
    .tarot-reversed-switch {
        background:
            var(--surface)
            !important;
    }


    body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
    .tarot-mode-segment,
    body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
    .tarot-switch-track {
        background:
            var(--surface-hover)
            !important;
    }

}

/* =========================================================
   TAROT MENU v43
   CUSTOM PALETTE-AWARE READING CONTROLS

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

   목적:
   81색 팔레트에서 보라/남색/갈색 등 어두운 커스텀 색상을 골랐을 때
   수동/자동/역방향 박스만 고정 진초록색으로 남는 문제 수정.

   핵심:
   v42의 고정 #1c2a24 / #263c32 계열 대신
   tarot-palette.js가 선택 색상에서 계산해 주는:
   --bg
   --surface
   --surface-hover
   --text
   --text-soft
   --border
   --tarot-accent
   계열을 그대로 사용합니다.
========================================================= */


/* =========================================================
   CUSTOM PALETTE DETECTION

   theme-picker가 사용자 색상을 선택하면
   .tarot-theme-control에 .has-custom-color가 붙습니다.

   :has()를 이용해 페이지 전체에서 이를 감지합니다.
   현재 Windows Chrome에서는 지원됩니다.
========================================================= */


/* =========================================================
   1. OUTER READING OPTION CARDS
========================================================= */

body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reading-option {
    background:
        color-mix(
            in srgb,
            var(--surface) 90%,
            var(--bg) 10%
        )
        !important;

    color:
        var(--text)
        !important;

    border-color:
        color-mix(
            in srgb,
            var(--border) 82%,
            transparent
        )
        !important;

    box-shadow:
        0 8px 24px
        color-mix(
            in srgb,
            #000 14%,
            transparent
        )
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reading-option:hover {
    background:
        var(--surface-hover)
        !important;

    border-color:
        var(--tarot-accent-border)
        !important;
}


/* =========================================================
   2. LABEL / TITLE / DESCRIPTION
========================================================= */

body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reading-option-kicker {
    color:
        var(--tarot-accent-strong)
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reading-option-title {
    color:
        var(--text)
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reading-option-description {
    color:
        var(--text-soft)
        !important;
}


/* =========================================================
   3. MANUAL / AUTO SEGMENT BACKGROUND
========================================================= */

body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-segment {
    background:
        color-mix(
            in srgb,
            var(--bg) 42%,
            var(--surface) 58%
        )
        !important;

    border-color:
        var(--border)
        !important;
}


/* 선택 안 된 버튼 */

body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-button {
    background:
        transparent
        !important;

    color:
        var(--text-soft)
        !important;

    border-color:
        transparent
        !important;

    box-shadow:
        none
        !important;

    opacity:
        1
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-button:hover {
    background:
        var(--tarot-accent-hover)
        !important;

    color:
        var(--text)
        !important;
}


/*
 * 선택된 수동/자동:
 * 커스텀 팔레트의 surface-hover를 베이스로 하고
 * accent를 아주 조금 섞어 선택 상태만 구분.
 */
body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-button.is-selected {
    background:
        color-mix(
            in srgb,
            var(--surface-hover) 86%,
            var(--tarot-accent) 14%
        )
        !important;

    color:
        var(--text)
        !important;

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

    box-shadow:
        0 5px 15px
        color-mix(
            in srgb,
            var(--tarot-accent-shadow) 65%,
            transparent
        )
        !important;
}


/* =========================================================
   4. MANUAL / AUTO TEXT
========================================================= */

body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-button
.tarot-mode-copy,
body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-button
.tarot-mode-copy strong,
body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-button
.tarot-mode-copy small {
    opacity:
        1
        !important;

    visibility:
        visible
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-button
.tarot-mode-copy strong {
    color:
        var(--text)
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-button
.tarot-mode-copy small {
    color:
        var(--text-soft)
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-button.is-selected
.tarot-mode-copy strong {
    color:
        var(--text)
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-button.is-selected
.tarot-mode-copy small {
    color:
        color-mix(
            in srgb,
            var(--text) 68%,
            var(--bg) 32%
        )
        !important;
}


/* =========================================================
   5. MANUAL / AUTO ICONS
========================================================= */

body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-icon {
    background:
        color-mix(
            in srgb,
            var(--surface-hover) 76%,
            var(--bg) 24%
        )
        !important;

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


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-button.is-selected
.tarot-mode-icon {
    background:
        var(--tarot-accent-soft)
        !important;

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


/* check도 선택한 색상 계열 */

body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-mode-check {
    background:
        var(--tarot-accent)
        !important;

    color:
        color-mix(
            in srgb,
            var(--text) 92%,
            #fff 8%
        )
        !important;
}


/* =========================================================
   6. REVERSED CONTROL
========================================================= */

body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reversed-switch {
    background:
        color-mix(
            in srgb,
            var(--bg) 40%,
            var(--surface) 60%
        )
        !important;

    color:
        var(--text-soft)
        !important;

    border-color:
        var(--border)
        !important;

    box-shadow:
        none
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reversed-switch:hover {
    background:
        var(--surface-hover)
        !important;

    border-color:
        var(--tarot-accent-border)
        !important;
}


/* 카드 모형도 고정 회색 대신 팔레트 surface */

body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reversed-card-demo {
    background:
        color-mix(
            in srgb,
            var(--surface) 78%,
            #fff 22%
        )
        !important;

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

    border-color:
        var(--border)
        !important;

    box-shadow:
        0 4px 10px
        color-mix(
            in srgb,
            #000 15%,
            transparent
        )
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reversed-rotate {
    color:
        var(--text-soft)
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reversed-status strong {
    color:
        var(--text)
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reversed-status small {
    color:
        var(--text-soft)
        !important;
}


/* =========================================================
   7. REVERSED OFF TRACK
========================================================= */

body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-switch-track {
    background:
        color-mix(
            in srgb,
            var(--surface-hover) 66%,
            var(--bg) 34%
        )
        !important;

    border-color:
        var(--border)
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-switch-thumb {
    background:
        color-mix(
            in srgb,
            var(--text) 86%,
            #fff 14%
        )
        !important;

    box-shadow:
        0 2px 7px
        color-mix(
            in srgb,
            #000 24%,
            transparent
        )
        !important;
}


/* =========================================================
   8. REVERSED ON
========================================================= */

body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reading-options[data-reversed="on"]
.tarot-reversed-switch {
    background:
        color-mix(
            in srgb,
            var(--surface-hover) 82%,
            var(--tarot-accent) 18%
        )
        !important;

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

    box-shadow:
        0 5px 14px
        var(--tarot-accent-shadow)
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reading-options[data-reversed="on"]
.tarot-switch-track {
    background:
        var(--tarot-accent)
        !important;

    border-color:
        var(--tarot-accent)
        !important;
}


body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-reading-options[data-reversed="on"]
.tarot-reversed-rotate {
    color:
        var(--tarot-accent-strong)
        !important;
}


/* =========================================================
   9. NORMAL DARK MODE
   사용자 지정 색상이 없는 진짜 Dark Mode는 v42 디자인 유지.

   즉 아래 선택자는 일부러:
   :not(:has(.tarot-theme-control.has-custom-color))
   로 제한해 v42의 진초록 디자인과 역할을 분리합니다.
========================================================= */

html[data-theme="dark"]
body.tarot-menu-page-v43:not(:has(.tarot-theme-control.has-custom-color))
.tarot-reading-option {
    background:
        #1c2a24
        !important;
}


html[data-theme="dark"]
body.tarot-menu-page-v43:not(:has(.tarot-theme-control.has-custom-color))
.tarot-mode-button.is-selected {
    background:
        #263c32
        !important;
}


/* =========================================================
   10. BROWSER FALLBACK

   color-mix를 지원하지 않는 브라우저에서는
   기본 CSS variable 자체만 사용.
========================================================= */

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

    body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
    .tarot-reading-option,
    body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
    .tarot-mode-button.is-selected,
    body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
    .tarot-reversed-switch {
        background:
            var(--surface)
            !important;
    }


    body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
    .tarot-mode-segment,
    body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
    .tarot-switch-track {
        background:
            var(--surface-hover)
            !important;
    }

}

/* =========================================================
   TAROT MENU v45
   COMPACT HEADER + BORDERLESS READING CONTROLS

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

   변경:
   - INTRO 전체 제거 후 위쪽 여백 재정리
   - 헤더 중앙: 타로 파비콘 + 수풀잎 타로 / Soopoolleaf Tarot
   - 수동/자동을 감싸는 바깥 선 제거
   - 역방향 컨트롤 바깥 선 제거
========================================================= */


/* =========================================================
   1. HEADER CENTER BRAND
========================================================= */

body.tarot-menu-page-v45
.fortune-header-inner {
    position: relative;
}


body.tarot-menu-page-v45
.fortune-logo-tarot-v45 {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 3;

    min-width: 0;

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

    gap: 7px;

    color: var(--text);

    text-decoration: none;

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

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


body.tarot-menu-page-v45
.fortune-logo-tarot-v45:hover {
    opacity: .88;

    transform:
        translate(-50%, -50%)
        translateY(-1px);
}


body.tarot-menu-page-v45
.fortune-logo-tarot-v45:active {
    transform:
        translate(-50%, -50%)
        scale(.97);
}


body.tarot-menu-page-v45
.fortune-logo-tarot-icon-v45 {
    width: 28px;
    height: 28px;

    flex: 0 0 28px;

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

    overflow: hidden;

    border-radius: 8px;
}


body.tarot-menu-page-v45
.fortune-logo-tarot-icon-v45 img {
    width: 28px;
    height: 28px;

    display: block;

    object-fit: cover;
}


body.tarot-menu-page-v45
.fortune-logo-text-v45 {
    display: block;

    max-width: min(42vw, 260px);

    overflow: hidden;

    color: var(--text);

    font-size: 12px;
    font-weight: 820;
    line-height: 1;

    letter-spacing: -.02em;

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


/* 기존 clover 공간/스타일이 혹시 남아 있어도 사용하지 않음 */

body.tarot-menu-page-v45
.fortune-logo-clover {
    display: none !important;
}


/* =========================================================
   2. INTRO REMOVED → MAIN TOP SPACING
========================================================= */

body.tarot-menu-page-v45
.tarot-main {
    /*
     * INTRO가 사라졌으므로 reading option이 헤더 바로 아래에서
     * 너무 붙지 않도록 작은 여백만 둡니다.
     */
    padding-top: 20px !important;
}


body.tarot-menu-page-v45
.tarot-reading-options {
    margin-top: 0 !important;
}


/* =========================================================
   3. MANUAL / AUTO OUTER LINE REMOVE
========================================================= */

body.tarot-menu-page-v45
.tarot-mode-segment {
    border: 0 !important;

    /*
     * '감싸는 선'만 없애되 그룹이라는 건 인지할 수 있도록
     * 아주 약한 배경만 유지합니다.
     */
    background:
        color-mix(
            in srgb,
            var(--surface-hover) 72%,
            transparent
        )
        !important;

    box-shadow: none !important;
}


/*
 * 커스텀 팔레트가 선택된 경우도 기존 v43 border가 다시 살아나지 않게.
 */
body.tarot-menu-page-v45:has(.tarot-theme-control.has-custom-color)
.tarot-mode-segment {
    border: 0 !important;

    background:
        color-mix(
            in srgb,
            var(--surface-hover) 70%,
            var(--bg) 30%
        )
        !important;

    box-shadow: none !important;
}


/* 일반 다크모드에서도 바깥 선 제거 */

html[data-theme="dark"]
body.tarot-menu-page-v45
.tarot-mode-segment {
    border: 0 !important;

    box-shadow: none !important;
}


/* =========================================================
   4. REVERSED OUTER LINE REMOVE
========================================================= */

body.tarot-menu-page-v45
.tarot-reversed-switch {
    border: 0 !important;

    box-shadow: none !important;
}


/*
 * 역방향 ON에서도 바깥 테두리가 다시 생기지 않도록.
 */
body.tarot-menu-page-v45
.tarot-reading-options[data-reversed="on"]
.tarot-reversed-switch {
    border: 0 !important;
}


/* 커스텀 팔레트 */

body.tarot-menu-page-v45:has(.tarot-theme-control.has-custom-color)
.tarot-reversed-switch,
body.tarot-menu-page-v45:has(.tarot-theme-control.has-custom-color)
.tarot-reading-options[data-reversed="on"]
.tarot-reversed-switch {
    border: 0 !important;

    box-shadow: none !important;
}


/* 일반 다크모드 */

html[data-theme="dark"]
body.tarot-menu-page-v45
.tarot-reversed-switch,
html[data-theme="dark"]
body.tarot-menu-page-v45
.tarot-reading-options[data-reversed="on"]
.tarot-reversed-switch {
    border: 0 !important;

    box-shadow: none !important;
}


/* =========================================================
   5. READING OPTION CARDS THEMSELVES
   큰 '카드 선택 / 카드 방향' 박스의 외곽선은 유지.
   사용자가 지적한 내부 수동/자동, 역방향 컨트롤 선만 제거.
========================================================= */

body.tarot-menu-page-v45
.tarot-reading-option {
    border-radius: 17px;
}


/* =========================================================
   6. LOW HEIGHT / LAPTOP
   intro 제거로 확보한 공간을 메뉴에 사용
========================================================= */

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

    body.tarot-menu-page-v45
    .tarot-main {
        padding-top: 14px !important;
    }


    body.tarot-menu-page-v45
    .tarot-reading-options {
        margin-bottom: 12px !important;
    }

}


/* =========================================================
   7. MOBILE HEADER
========================================================= */

@media (max-width: 640px) {

    body.tarot-menu-page-v45
    .fortune-logo-tarot-v45 {
        gap: 5px;
    }


    body.tarot-menu-page-v45
    .fortune-logo-tarot-icon-v45,
    body.tarot-menu-page-v45
    .fortune-logo-tarot-icon-v45 img {
        width: 25px;
        height: 25px;
    }


    body.tarot-menu-page-v45
    .fortune-logo-tarot-icon-v45 {
        flex-basis: 25px;

        border-radius: 7px;
    }


    body.tarot-menu-page-v45
    .fortune-logo-text-v45 {
        max-width: 45vw;

        font-size: 11.5px;
    }


    body.tarot-menu-page-v45
    .tarot-main {
        padding-top: 12px !important;
    }

}


/* =========================================================
   8. FALLBACK
========================================================= */

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

    body.tarot-menu-page-v45
    .tarot-mode-segment {
        background:
            var(--surface-hover)
            !important;
    }

}

/* =========================================================
   TAROT MENU v46
   HEADER LOGO + PALETTE POSITION FIX

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

   수정:
   1) 가운데 타로 로고 뒤의 베이지 박스 제거
   2) 타로 로고 크기 확대
   3) 색상 팔레트 컨트롤이 가운데 사이트명을 덮는 문제 수정
========================================================= */


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

body.tarot-menu-page-v46
.fortune-header-inner {
    position: relative !important;

    /*
     * 왼쪽 back / 가운데 brand / 오른쪽 palette가
     * 서로 독립적으로 자리 잡도록 충분한 최소 공간 확보.
     */
    min-height: 52px;
}


/* =========================================================
   CENTER BRAND
========================================================= */

body.tarot-menu-page-v46
.fortune-logo-tarot-v45 {
    position: absolute !important;

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

    top: 50% !important;

    z-index: 5 !important;

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

    gap: 8px !important;

    margin: 0 !important;

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

    pointer-events: auto;
}


/* =========================================================
   TAROT FAVICON
   beige/background 제거 + 조금 더 크게
========================================================= */

body.tarot-menu-page-v46
.fortune-logo-tarot-icon-v45 {
    width: 36px !important;
    height: 36px !important;

    flex: 0 0 36px !important;

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

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

    overflow: visible !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
}


/*
 * 기존 .fortune-logo 또는 공통 아이콘 스타일에서
 * ::before / ::after 배경을 넣었을 경우까지 제거.
 */
body.tarot-menu-page-v46
.fortune-logo-tarot-icon-v45::before,
body.tarot-menu-page-v46
.fortune-logo-tarot-icon-v45::after {
    display: none !important;

    content: none !important;

    background: transparent !important;

    box-shadow: none !important;
}


body.tarot-menu-page-v46
.fortune-logo-tarot-icon-v45 img {
    width: 36px !important;
    height: 36px !important;

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

    display: block !important;

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

    object-fit: contain !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    filter: none !important;
}


/* 사이트 이름도 아이콘 확대에 맞춰 살짝 키움 */

body.tarot-menu-page-v46
.fortune-logo-text-v45 {
    max-width:
        min(
            43vw,
            300px
        )
        !important;

    color: var(--text) !important;

    font-size: 13px !important;
    font-weight: 830 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
}


/* =========================================================
   LEFT BACK
========================================================= */

body.tarot-menu-page-v46
.fortune-header-inner
> .fortune-back {
    position: relative !important;

    left: auto !important;
    right: auto !important;

    z-index: 8 !important;

    flex: 0 0 auto;
}


/* =========================================================
   RIGHT THEME / PALETTE CONTROL

   핵심:
   팔레트가 flex 흐름이나 과거 absolute 스타일 때문에
   가운데로 밀리지 않고 무조건 헤더 우측에 붙도록 함.
========================================================= */

body.tarot-menu-page-v46
.fortune-header-inner
> .tarot-theme-control {
    position: absolute !important;

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

    top: 50% !important;
    bottom: auto !important;

    z-index: 20 !important;

    margin: 0 !important;

    transform:
        translateY(-50%)
        !important;

    flex: 0 0 auto !important;
}


/*
 * theme-picker 내부 trigger가 과거 CSS로
 * 가운데 정렬/absolute 되는 것도 차단.
 */
body.tarot-menu-page-v46
.fortune-header-inner
> .tarot-theme-control
.tarot-theme-trigger-v35 {
    position: relative !important;

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

    transform: none !important;
}


/*
 * 선택한 색상 사각형도 헤더 안에서만 동작하게.
 */
body.tarot-menu-page-v46
.fortune-header-inner
> .tarot-theme-control
.tarot-palette-toggle-v35,

body.tarot-menu-page-v46
.fortune-header-inner
> .tarot-theme-control
.tarot-theme-mode-v35 {
    position: relative !important;

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

    transform: none !important;
}


/* =========================================================
   PALETTE DROP
   버튼은 우측에 있지만 드롭다운은 기존 theme-picker 기준 유지
========================================================= */

body.tarot-menu-page-v46
.fortune-header-inner
> .tarot-theme-control
.tarot-palette-drop-v35 {
    left: auto !important;
    right: 0 !important;
}


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

@media (max-width: 640px) {

    body.tarot-menu-page-v46
    .fortune-header-inner {
        min-height: 48px;
    }


    body.tarot-menu-page-v46
    .fortune-logo-tarot-v45 {
        gap: 6px !important;
    }


    body.tarot-menu-page-v46
    .fortune-logo-tarot-icon-v45 {
        width: 32px !important;
        height: 32px !important;

        flex-basis: 32px !important;
    }


    body.tarot-menu-page-v46
    .fortune-logo-tarot-icon-v45 img {
        width: 32px !important;
        height: 32px !important;
    }


    body.tarot-menu-page-v46
    .fortune-logo-text-v45 {
        /*
         * 오른쪽 palette 버튼과 충돌하지 않도록
         * 모바일에서는 가운데 브랜드 폭 제한.
         */
        max-width: 42vw !important;

        font-size: 11.5px !important;
    }


    body.tarot-menu-page-v46
    .fortune-header-inner
    > .tarot-theme-control {
        right: 4px !important;
    }

}


/* 아주 작은 화면 */

@media (max-width: 390px) {

    body.tarot-menu-page-v46
    .fortune-logo-tarot-icon-v45 {
        width: 29px !important;
        height: 29px !important;

        flex-basis: 29px !important;
    }


    body.tarot-menu-page-v46
    .fortune-logo-tarot-icon-v45 img {
        width: 29px !important;
        height: 29px !important;
    }


    body.tarot-menu-page-v46
    .fortune-logo-text-v45 {
        max-width: 39vw !important;

        font-size: 10.5px !important;
    }

}

/* =========================================================
   TAROT MENU v48 · COUNT LABEL VISIBILITY

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

   문제:
   .tarot-item-count 색상이 팔레트와 어울리기는 하지만
   특히 어두운 사용자 지정 색상에서 너무 흐려 보임.

   해결:
   palette accent 느낌은 유지하면서 text 쪽 비율을 높여
   훨씬 선명하게 보이도록 함.
========================================================= */


/* 기본 / 라이트 */

body.tarot-menu-page-v42
.tarot-item-count {
    color:
        color-mix(
            in srgb,
            var(--text) 78%,
            var(--tarot-accent) 22%
        )
        !important;

    opacity:
        .96
        !important;

    font-weight:
        680
        !important;

    text-shadow:
        0 1px 0
        rgba(255,255,255,.10);
}


/* 사용자 지정 팔레트 */

body.tarot-menu-page-v43:has(.tarot-theme-control.has-custom-color)
.tarot-item-count {
    color:
        color-mix(
            in srgb,
            var(--text) 84%,
            var(--tarot-accent) 16%
        )
        !important;

    opacity:
        1
        !important;
}


/*
 * 어두운 테마 / 어두운 커스텀 팔레트에서는
 * 흰색 비율을 올려 작은 글씨도 확실히 보이게.
 */

html[data-theme="dark"]
body.tarot-menu-page-v42
.tarot-item-count {
    color:
        color-mix(
            in srgb,
            #ffffff 78%,
            var(--tarot-accent) 22%
        )
        !important;

    opacity:
        .96
        !important;

    text-shadow:
        0 1px 2px
        rgba(0,0,0,.18);
}


/* category보다 count가 한 단계 더 잘 읽히도록 */

body.tarot-menu-page-v42
.tarot-item-count + .tarot-item-category {
    opacity:
        .88;
}


/* color-mix 미지원 fallback */

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

    body.tarot-menu-page-v42
    .tarot-item-count {
        color:
            var(--text)
            !important;

        opacity:
            .92
            !important;
    }


    html[data-theme="dark"]
    body.tarot-menu-page-v42
    .tarot-item-count {
        color:
            rgba(255,255,255,.84)
            !important;
    }

}


/* =========================================================
   NOTICE — AI 해석 안내 (접었다 펴기)
========================================================= */

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

    margin:
        0 auto 12px;

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

    border-radius:
        16px;

    background:
        var(--surface);

    box-shadow:
        var(--shadow);

    overflow:
        hidden;
}


.tarot-notice-head {
    width:
        100%;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        12px 14px;

    border:
        0;

    background:
        transparent;

    color:
        inherit;

    font:
        inherit;

    text-align:
        left;

    cursor:
        pointer;

    touch-action:
        manipulation;
}


.tarot-notice-icon {
    flex:
        0 0 auto;

    width:
        26px;

    height:
        26px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        9px;

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

    color:
        var(--tarot-accent, #52b788);
}


.tarot-notice-icon svg {
    width:
        14px;

    height:
        14px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.9;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.tarot-notice-title {
    flex:
        1 1 auto;

    min-width:
        0;

    font-size:
        12.5px;

    font-weight:
        800;

    line-height:
        1.5;

    letter-spacing:
        -.02em;

    word-break:
        keep-all;
}


.tarot-notice-arrow {
    flex:
        0 0 auto;

    width:
        22px;

    height:
        22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--text-soft);

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


.tarot-notice-arrow svg {
    width:
        16px;

    height:
        16px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        2.2;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.tarot-notice-head:hover .tarot-notice-arrow {
    color:
        var(--tarot-accent, #52b788);
}


/* 펼치면 화살표가 180도 돌아 아래를 봅니다 */

.tarot-notice-head[aria-expanded="true"] .tarot-notice-arrow {
    transform:
        rotate(180deg);
}


.tarot-notice-body {
    padding:
        0 14px 13px 50px;
}


.tarot-notice-body[hidden] {
    display:
        none;
}


.tarot-notice-body strong {
    display:
        block;

    margin-bottom:
        5px;

    font-size:
        12px;

    font-weight:
        800;
}


.tarot-notice-body p {
    margin:
        0;

    color:
        var(--text-soft);

    font-size:
        11px;

    font-weight:
        550;

    line-height:
        1.75;

    word-break:
        keep-all;
}


.tarot-notice-body p + p {
    margin-top:
        6px;
}


@media (max-width: 640px) {

    .tarot-notice {
        margin-bottom:
            10px;
    }

    .tarot-notice-head {
        padding:
            11px 12px;

        gap:
            9px;
    }

    .tarot-notice-icon {
        width:
            23px;

        height:
            23px;

        border-radius:
            8px;
    }

    .tarot-notice-title {
        font-size:
            12px;
    }

    .tarot-notice-body {
        padding:
            0 12px 12px 44px;
    }

    .tarot-notice-body p {
        font-size:
            10.5px;

        line-height:
            1.7;
    }

}


/*
 * 순서 바꾸기 중에는 글자가 끌려 선택되지 않게 합니다.
 */

body.tarot-edit-mode .tarot-menu,
body.tarot-edit-mode .tarot-item {
    user-select:
        none;

    -webkit-user-select:
        none;
}


/* =========================================================
   REVERSED — 체크 상자

   켜고 끄는 스위치 대신 "역방향을 섞을지" 체크합니다.
   체크하면 오른쪽 카드 한 장이 180° 돌아갑니다.
========================================================= */

/*
 * 옵션 카드 안에서 위아래로 쌓습니다.
 * 설명 옆에 나란히 두면 좁은 칸에서 넘칩니다.
 */

.tarot-reversed-option {
    flex-direction:
        column;

    align-items:
        stretch;

    gap:
        10px;
}


.tarot-reversed-check {
    position:
        relative;

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        9px 12px;

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

    border-radius:
        16px;

    background:
        var(--surface);

    color:
        inherit;

    font:
        inherit;

    cursor:
        pointer;

    touch-action:
        manipulation;

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


.tarot-reversed-check:hover {
    transform:
        translateY(-1px);
}


.tarot-reversed-check:active {
    transform:
        translateY(1px);
}


.tarot-reversed-check[aria-pressed="true"] {
    border-color:
        var(--tarot-accent, #52b788);

    background:
        var(--surface-hover);
}


/* 네모 체크 상자 */

.tarot-reversed-check-box {
    flex:
        0 0 auto;

    width:
        24px;

    height:
        24px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        8px;

    background:
        transparent;

    color:
        #fff;

    transition:
        background-color .18s ease,
        border-color .18s ease;
}


.tarot-reversed-check-box svg {
    width:
        14px;

    height:
        14px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        2.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    opacity:
        0;

    transform:
        scale(.6);

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


.tarot-reversed-check[aria-pressed="true"]
.tarot-reversed-check-box {
    background:
        var(--tarot-accent, #52b788);

    border-color:
        var(--tarot-accent, #52b788);
}


.tarot-reversed-check[aria-pressed="true"]
.tarot-reversed-check-box svg {
    opacity:
        1;

    transform:
        none;
}


/* 글 */

.tarot-reversed-check-copy {
    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

    text-align:
        left;
}


.tarot-reversed-check-copy strong {
    font-size:
        11.5px;

    font-weight:
        800;

    line-height:
        1.15;
}


.tarot-reversed-check-copy small {
    color:
        var(--text-soft);

    font-size:
        9px;

    font-weight:
        600;

    line-height:
        1.2;

    white-space:
        nowrap;
}


/* 카드 두 장 */

.tarot-reversed-check-deck {
    flex:
        0 0 auto;

    display:
        flex;

    gap:
        4px;

    /* 오른쪽 끝으로 밀어 둡니다. */
    margin-left:
        auto;
}


.tarot-reversed-check-card {
    width:
        21px;

    height:
        31px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(140, 190, 160, .3);

    border-radius:
        5px;

    background:
        linear-gradient(
            150deg,
            rgba(82, 183, 136, .16),
            rgba(90, 200, 189, .12)
        );

    color:
        var(--tarot-accent, #52b788);

    font-size:
        9px;

    font-style:
        normal;

    line-height:
        1;

    transition:
        transform .42s cubic-bezier(.2, .85, .25, 1),
        opacity .2s ease;
}


.tarot-reversed-check-card.is-flip {
    opacity:
        .5;
}


.tarot-reversed-check[aria-pressed="true"]
.tarot-reversed-check-card.is-flip {
    opacity:
        1;

    transform:
        rotate(180deg);
}


@media (max-width: 640px) {

    .tarot-reversed-check {
        gap:
            9px;

        padding:
            8px 10px;

        border-radius:
            14px;
    }

    .tarot-reversed-check-box {
        width:
            22px;

        height:
            22px;

        border-radius:
            7px;
    }

    .tarot-reversed-check-copy small {
        font-size:
            8.5px;

        white-space:
            normal;
    }

    .tarot-reversed-check-card {
        width:
            18px;

        height:
            27px;
    }

}


/* =========================================================
   두 번 두드려 확대되는 것 막기

   아이폰 사파리는 짧은 간격으로 두 번 눌리면 화면을 확대합니다.
   팔레트를 열고 곧바로 색을 고를 때가 딱 그 간격이라,
   화면이 확대되면서 바닥에서 올라온 팔레트가 위로 밀려 올라갑니다.

   touch-action: manipulation 을 주면
   손가락으로 벌려서 하는 확대는 그대로 두고,
   두 번 두드려서 하는 확대만 꺼집니다.
========================================================= */

/*
 * 두 번째 두드림이 버튼이 아니라 여백에 떨어져도 막히도록
 * 해당 영역 전체에 겁니다.
 * manipulation 은 손가락으로 벌리는 확대와 스크롤은 그대로 둡니다.
 */

.fortune-header,
.fortune-header *,
[data-tarot-theme-control],
[data-tarot-theme-control] *,
.tarot-reading-options,
.tarot-reading-options *,
.tarot-menu,
.tarot-menu *,
.tarot-notice,
.tarot-color-swatch {
    touch-action:
        manipulation;
}


/* =========================================================
   MOBILE PALETTE — 화면 바닥에 제대로 붙게 하기

   증상:
   휴대폰에서 헤더의 색 고르기 아이콘을 누르면
   팔레트가 화면 바닥이 아니라 헤더 근처로 밀려 올라가고,
   화면이 옆으로 밀린 것처럼 보였습니다. 윈도우에서는 멀쩡했습니다.

   원인:
   헤더 오른쪽의 팔레트 묶음을 세로 가운데에 놓으려고
   transform: translateY(-50%) 를 쓰고 있었습니다.

   transform 이 걸린 요소는 그 안의 position: fixed 요소에게
   '화면' 노릇을 대신합니다. 그래서 바닥에서 올라오도록 만든
   모바일 팔레트가 화면 바닥이 아니라 그 작은 묶음 안을 기준으로
   자리를 잡아 버렸습니다.

   데스크톱은 팔레트가 fixed 가 아니라 absolute 라 멀쩡했습니다.

   고친 방법:
   transform 을 걷어내고, 위아래를 0 으로 늘린 뒤
   flex 로 가운데에 놓습니다. 보이는 자리는 그대로고
   transform 만 사라지므로, 팔레트가 다시 진짜 화면 바닥에 붙습니다.
========================================================= */

body.tarot-menu-page-v46
.fortune-header-inner
> .tarot-theme-control {
    position: absolute !important;

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

    top: 0 !important;
    bottom: 0 !important;

    z-index: 20 !important;

    margin: 0 !important;

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

    /* 여기가 핵심입니다. */
    transform: none !important;

    flex: 0 0 auto !important;
}


/*
 * 혹시 다른 규칙이 되살아나더라도
 * 팔레트 묶음 계열에는 transform 이 남지 않게 못 박습니다.
 */

.tarot-theme-control,
.tarot-theme-control-v35,
.tarot-theme-trigger-v35 {
    transform: none !important;
}


/* =========================================================
   QUESTION OPTION — 타로 메뉴의 질문 칸

   위의 두 옵션과 같은 카드 틀을 씁니다.
   두 칸짜리 격자에서 한 줄을 통째로 차지합니다.
========================================================= */

.tarot-question-option {
    grid-column:
        1 / -1;
}


.tarot-question-field {
    position:
        relative;

    display:
        flex;

    align-items:
        center;
}


.tarot-question-input {
    width:
        100%;

    padding:
        11px 36px 11px 13px;

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

    border-radius:
        13px;

    background:
        var(--surface);

    color:
        var(--text);

    font:
        inherit;

    font-size:
        13px;

    outline:
        none;

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


.tarot-question-input::placeholder {
    color:
        var(--text-soft);

    opacity:
        .75;
}


.tarot-question-input:focus {
    border-color:
        var(--tarot-accent, #52b788);

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


.tarot-question-clear {
    position:
        absolute;

    right:
        8px;

    width:
        22px;

    height:
        22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        0;

    border-radius:
        999px;

    background:
        var(--border);

    color:
        var(--text);

    font-size:
        14px;

    line-height:
        1;

    cursor:
        pointer;

    touch-action:
        manipulation;

    transition:
        background-color .16s ease;
}


.tarot-question-clear:hover {
    background:
        var(--tarot-accent-soft, rgba(82, 183, 136, .18));
}


.tarot-question-clear[hidden] {
    display:
        none;
}


.tarot-question-foot {
    display:
        flex;

    align-items:
        baseline;

    justify-content:
        space-between;

    gap:
        8px;

    margin:
        7px 2px 0;

    color:
        var(--text-soft);

    font-size:
        10px;

    font-weight:
        600;
}


@media (max-width: 640px) {

    .tarot-question-input {
        font-size:
            16px; /* 아이폰에서 글자 칸을 누를 때 화면이 확대되지 않게 */

        padding:
            10px 34px 10px 12px;
    }

    .tarot-question-foot {
        font-size:
            9.5px;
    }

}