/* =========================================================
   TAROT THEME / SPREAD CLOTH PALETTE
========================================================= */

.tarot-theme-control {

    position: relative;

    z-index: 300000;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 1px;

}


/* =========================================================
   SUN / MOON
========================================================= */

.tarot-theme-mode,
.tarot-palette-toggle {

    width: 38px;
    height: 38px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    border-radius: 50%;

    background: transparent;

    color: var(--text);

    cursor: pointer;

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

}


.tarot-theme-mode:hover,
.tarot-palette-toggle:hover {

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

}


.tarot-theme-mode:active,
.tarot-palette-toggle:active {

    transform:
        scale(.94);

}


.tarot-theme-icon {

    width: 20px;
    height: 20px;

    display: none;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* 밝은 UI에서는 태양 */

.tarot-theme-mode[data-effective-mode="light"]
.tarot-theme-icon-sun {

    display: block;

}


/* 어두운 UI에서는 달 */

.tarot-theme-mode[data-effective-mode="dark"]
.tarot-theme-icon-moon {

    display: block;

}


/* =========================================================
   ARROW
========================================================= */

.tarot-palette-drop {

    position: relative;

}


.tarot-palette-toggle svg {

    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

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

}


.tarot-palette-drop.is-open
.tarot-palette-toggle svg {

    transform:
        rotate(180deg);

}


/* =========================================================
   PANEL
========================================================= */

.tarot-palette-panel {

    position: absolute;

    top: 100%;
    right: 0;

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

    padding: 15px;

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

    border-radius: 18px;

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

    box-shadow:
        0 18px 55px
        rgba(0, 0, 0, .16);

    backdrop-filter:
        blur(22px);

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

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(-12px)
        scale(.975);

    transform-origin:
        top right;

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

}


/*
 * 클릭으로 열렸을 때
 */

.tarot-palette-drop.is-open
.tarot-palette-panel {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(5px)
        scale(1);

}


/*
 * PC에서는 화살표에 마우스를 올리기만 해도 열림
 */

@media (hover: hover) and (pointer: fine) {

    .tarot-palette-drop:hover
    .tarot-palette-panel {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translateY(5px)
            scale(1);

    }


    .tarot-palette-drop:hover
    .tarot-palette-toggle svg {

        transform:
            rotate(180deg);

    }

}


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

.tarot-palette-head {

    margin-bottom: 12px;

}


.tarot-palette-head strong {

    display: block;

    color: var(--text);

    font-size: 13px;

    font-weight: 700;

}


.tarot-palette-head span {

    display: block;

    margin-top: 3px;

    color: var(--text-soft);

    font-size: 10px;

}


/* =========================================================
   QUICK 8 COLORS
========================================================= */

.tarot-palette-quick {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 7px;

}


.tarot-color-swatch {

    position: relative;

    width: 100%;

    aspect-ratio: 1.35;

    padding: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(127, 127, 127, .20);

    border-radius: 10px;

    background:
        var(--swatch);

    cursor: pointer;

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

}


.tarot-color-swatch:hover {

    z-index: 2;

    transform:
        translateY(-3px)
        scale(1.045);

    border-color:
        rgba(255, 255, 255, .55);

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

}


.tarot-color-swatch:active {

    transform:
        translateY(-1px)
        scale(.96);

}


/* 선택된 색 */

.tarot-color-swatch.is-selected {

    box-shadow:
        0 0 0 2px
        var(--surface),
        0 0 0 4px
        var(--tarot-accent, var(--primary)),
        0 8px 18px
        rgba(0, 0, 0, .14);

}


.tarot-color-swatch.is-selected::after {

    content: "✓";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 21px;
    height: 21px;

    display: flex;

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

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

    border-radius: 50%;

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

    color: white;

    font-size: 11px;

    font-weight: 800;

}


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

.tarot-palette-expand {

    width: 100%;

    min-height: 38px;

    margin-top: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

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

    border-radius: 10px;

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

    color:
        var(--text-soft);

    cursor: pointer;

    font-size: 11px;

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

}


.tarot-palette-expand:hover {

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

    color:
        var(--text);

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

}

.tarot-palette-expand-plus {

    display: block;

    font-size: 18px;

    font-weight: 300;

    line-height: 1;

    transition:
        transform .25s ease;

}


.tarot-palette-expand[aria-expanded="true"]
.tarot-palette-expand-plus {

    transform:
        rotate(45deg);

}


/* =========================================================
   FULL 81 COLORS
========================================================= */

.tarot-palette-full {

    max-height: 0;

    margin-top: 0;

    overflow: hidden;

    opacity: 0;

    transform:
        translateY(-7px);

    transition:
        max-height .42s
        cubic-bezier(.2, .8, .2, 1),
        margin .25s ease,
        opacity .22s ease,
        transform .28s ease;

}


.tarot-palette-full.is-expanded {

    max-height: 520px;

    margin-top: 13px;

    opacity: 1;

    transform:
        translateY(0);

}


/* 카테고리 이름 */

.tarot-palette-column-labels {

    display: grid;

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

    gap: 4px;

    margin-bottom: 5px;

}


.tarot-palette-column-label {

    overflow: hidden;

    color:
        var(--text-soft);

    font-size: 8px;

    text-align: center;

    white-space: nowrap;

    text-overflow: ellipsis;

}


/* 9 × 9 */

.tarot-palette-grid {

    display: grid;

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

    gap: 4px;

}


.tarot-palette-grid
.tarot-color-swatch {

    aspect-ratio: 1;

    border-radius: 7px;

}


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

@media (max-width: 640px) {

    .tarot-theme-mode,
    .tarot-palette-toggle {

        width: 34px;
        height: 34px;

    }


    .tarot-theme-icon {

        width: 18px;
        height: 18px;

    }


    .tarot-palette-toggle svg {

        width: 15px;
        height: 15px;

    }


    .tarot-palette-panel {

        position: fixed;

        top: 54px;
        right: 8px;

        width:
            calc(100vw - 16px);

        padding: 13px;

        border-radius: 16px;

        transform:
            translateY(-10px)
            scale(.98);

    }


    .tarot-palette-drop.is-open
    .tarot-palette-panel {

        transform:
            translateY(0)
            scale(1);

    }


    .tarot-palette-quick {

        gap: 6px;

    }


    .tarot-palette-column-labels {

        display: none;

    }


    .tarot-palette-grid {

        gap: 3px;

    }


    .tarot-palette-grid
    .tarot-color-swatch {

        border-radius: 5px;

    }

}


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

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

    .tarot-palette-panel,
    .tarot-color-swatch,
    .tarot-palette-expand,
    .tarot-palette-expand-plus {

        transition: none;

    }

}

/* =========================================================
   SELECTED PALETTE COLOR PREVIEW
   태양 / 달 자리에 사용자 선택 색상 표시
========================================================= */

.tarot-theme-selected-color {

    width: 20px;
    height: 20px;

    display: none;

    border-radius: 6px;

    background:
        var(
            --tarot-selected-color,
            transparent
        );

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

    box-shadow:
        0 0 0 1px
        rgba(0, 0, 0, .13),

        0 3px 9px
        rgba(0, 0, 0, .14);

    transition:
        transform .18s ease,
        border-radius .18s ease,
        box-shadow .18s ease;

}


/*
 * 사용자가 8색 또는 81색 중
 * 하나를 선택한 상태
 */

.tarot-theme-mode.is-custom-color
.tarot-theme-selected-color {

    display: block;

}


/*
 * 사용자 색상 상태에서는
 * 태양/달 모두 감춤
 */

.tarot-theme-mode.is-custom-color
.tarot-theme-icon {

    display: none !important;

}


/*
 * 마우스를 올렸을 때
 * 실제 색상을 선택할 수 있는 UI처럼 살짝 반응
 */

.tarot-theme-mode.is-custom-color:hover
.tarot-theme-selected-color {

    transform:
        scale(1.12);

    border-radius:
        7px;

    box-shadow:
        0 0 0 1px
        rgba(0, 0, 0, .16),

        0 5px 13px
        rgba(0, 0, 0, .20);

}


/*
 * 클릭할 때
 */

.tarot-theme-mode.is-custom-color:active
.tarot-theme-selected-color {

    transform:
        scale(.92);

}


/* 모바일 */

@media (max-width: 640px) {

    .tarot-theme-selected-color {

        width: 18px;
        height: 18px;

        border-radius: 5px;

    }

}

/* =========================================================
   TAROT THEME / PALETTE v35
   선택 색상 → 오른쪽 화살표 위치
   모바일 팔레트 → 불투명 bottom sheet

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


/* =========================================================
   CONTROL
========================================================= */

.tarot-theme-control-v35 {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
}

.tarot-theme-trigger-v35 {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
}


/* =========================================================
   NORMAL LIGHT / DARK BUTTON
========================================================= */

.tarot-theme-control-v35 .tarot-theme-mode-v35 {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;

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

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

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

    cursor: pointer !important;

    opacity: 1 !important;
    visibility: visible !important;

    transition:
        opacity .17s ease,
        width .20s cubic-bezier(.2,.8,.2,1),
        min-width .20s cubic-bezier(.2,.8,.2,1),
        transform .16s ease,
        color .16s ease,
        background .16s ease !important;
}

.tarot-theme-control-v35 .tarot-theme-mode-v35:hover {
    color: var(--text) !important;
    background: var(--tarot-accent-hover, rgba(127,127,127,.09)) !important;
}

.tarot-theme-control-v35 .tarot-theme-mode-v35:active {
    transform: scale(.93);
}

.tarot-theme-control-v35 .tarot-theme-mode-v35 svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* effective light = sun / effective dark = moon */

.tarot-theme-control-v35
.tarot-theme-mode-v35[data-effective-mode="light"]
.tarot-theme-moon-v35 {
    display: none !important;
}

.tarot-theme-control-v35
.tarot-theme-mode-v35[data-effective-mode="dark"]
.tarot-theme-sun-v35 {
    display: none !important;
}


/*
 * 선택 색상이 있으면 태양/달 자리는 사라집니다.
 * 오른쪽 색상 버튼 하나만 남습니다.
 */
.tarot-theme-control-v35.has-custom-color
.tarot-theme-mode-v35 {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    overflow: hidden !important;
}


/* =========================================================
   RIGHT TOGGLE
   정상 = 아래 화살표
   사용자 색상 = 선택한 색상
========================================================= */

.tarot-theme-control-v35 .tarot-palette-toggle-v35 {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;

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

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

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

    cursor: pointer !important;

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

.tarot-theme-control-v35 .tarot-palette-toggle-v35:hover {
    color: var(--text) !important;
    background: var(--tarot-accent-hover, rgba(127,127,127,.09)) !important;
}

.tarot-theme-control-v35 .tarot-palette-toggle-v35:active {
    transform: scale(.93);
}

.tarot-palette-chevron-v35 {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s ease;
}

.tarot-theme-control-v35.is-palette-open
.tarot-palette-chevron-v35 {
    transform: rotate(180deg);
}

.tarot-selected-color-v35 {
    display: none;
    width: 22px;
    height: 22px;
    border-radius: 8px;

    background: var(--tarot-selected-color, transparent);

    border: 2px solid rgba(255,255,255,.72);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.14),
        0 4px 12px rgba(0,0,0,.14);
}

.tarot-theme-control-v35.has-custom-color
.tarot-palette-chevron-v35 {
    display: none !important;
}

.tarot-theme-control-v35.has-custom-color
.tarot-selected-color-v35 {
    display: block !important;
}


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

.tarot-theme-control-v35 .tarot-palette-drop-v35 {
    position: absolute !important;
    z-index: 620000 !important;

    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;

    width: min(360px, calc(100vw - 24px)) !important;
    max-height: min(620px, calc(100dvh - 90px)) !important;
    padding: 14px !important;

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

    border: 1px solid var(--border) !important;
    border-radius: 18px !important;

    /*
     * 핵심:
     * 반투명 glass가 아니라 완전 불투명 surface.
     */
    background: var(--surface, #f7f4ed) !important;

    box-shadow:
        0 22px 60px rgba(17,24,20,.24) !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

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

    transform: translateY(-7px) scale(.98) !important;
    transform-origin: top right !important;

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

    scrollbar-width: thin;
}

.tarot-theme-control-v35
.tarot-palette-drop-v35.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}


/* =========================================================
   PANEL MOBILE HEADER
========================================================= */

.tarot-palette-mobile-head-v35 {
    display: none;
}


/* =========================================================
   LIGHT / DARK CHOICES
========================================================= */

.tarot-normal-theme-row-v35 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;

    margin-bottom: 14px;
    padding-bottom: 13px;

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

.tarot-normal-theme-button-v35 {
    min-height: 42px;
    padding: 0 11px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

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

    background: var(--surface-hover, rgba(127,127,127,.06));
    color: var(--text-soft);

    font: inherit;
    font-size: 11.5px;
    font-weight: 700;

    cursor: pointer;

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

.tarot-normal-theme-button-v35:hover {
    color: var(--text);
    border-color: var(--tarot-accent-border, var(--border));
}

.tarot-normal-theme-button-v35.is-selected {
    color: var(--text);
    border-color: var(--tarot-accent, var(--border));
    background: var(--tarot-accent-soft, var(--surface-hover));
}

.tarot-normal-theme-button-v35 svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}


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

.tarot-palette-copy-v35 {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 12px;
}

.tarot-palette-copy-v35 strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.2px;
}

.tarot-palette-copy-v35 span {
    color: var(--text-soft);
    font-size: 10.5px;
    font-weight: 560;
    line-height: 1.45;
}


/* =========================================================
   QUICK 8
   모바일에서 큰 네모 2줄 대신 작고 깔끔한 스와치
========================================================= */

.tarot-theme-control-v35
.tarot-palette-quick-v35 {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 7px !important;

    margin: 0 0 13px !important;
}

.tarot-theme-control-v35
.tarot-palette-quick-v35
.tarot-color-swatch {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;

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

    padding: 0 !important;

    border: 2px solid transparent !important;
    border-radius: 50% !important;

    background: var(--swatch) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.22),
        0 3px 9px rgba(0,0,0,.11) !important;

    transform: scale(1) !important;
}

.tarot-theme-control-v35
.tarot-palette-quick-v35
.tarot-color-swatch:hover {
    transform: translateY(-2px) scale(1.04) !important;
}

.tarot-theme-control-v35
.tarot-palette-quick-v35
.tarot-color-swatch.is-selected {
    border-color: var(--text) !important;
    box-shadow:
        0 0 0 2px var(--surface),
        0 0 0 4px var(--tarot-accent, var(--text-soft)),
        0 5px 12px rgba(0,0,0,.14) !important;
}


/* =========================================================
   EXPAND
========================================================= */

.tarot-palette-expand-v35 {
    width: 100%;
    min-height: 38px;
    padding: 0 11px;

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

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

    background: var(--surface-hover, rgba(127,127,127,.05));
    color: var(--text-soft);

    font: inherit;
    font-size: 11px;
    font-weight: 680;

    cursor: pointer;
}

.tarot-palette-expand-v35 svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s ease;
}

.tarot-palette-expand-v35[aria-expanded="true"] svg {
    transform: rotate(180deg);
}


/* =========================================================
   FULL 81
========================================================= */

.tarot-palette-full-v35 {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
        grid-template-rows .24s ease,
        opacity .18s ease;
}

.tarot-palette-full-v35 > * {
    min-height: 0;
    overflow: hidden;
}

.tarot-palette-full-v35.is-expanded {
    grid-template-rows: auto auto;
    opacity: 1;
    margin-top: 12px;
}

.tarot-palette-columns-v35 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 5px;
}

.tarot-palette-column-label {
    min-width: 0;
    overflow: hidden;
    color: var(--text-soft);
    font-size: 7px;
    font-weight: 650;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tarot-theme-control-v35
.tarot-palette-grid-v35 {
    display: grid !important;
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    gap: 5px !important;
}

.tarot-theme-control-v35
.tarot-palette-grid-v35
.tarot-color-swatch {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;

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

    padding: 0 !important;

    border: 1px solid rgba(127,127,127,.16) !important;
    border-radius: 7px !important;

    background: var(--swatch) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.12) !important;
}

.tarot-theme-control-v35
.tarot-palette-grid-v35
.tarot-color-swatch.is-selected {
    outline: 2px solid var(--text) !important;
    outline-offset: 1px !important;
}


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

@media (max-width: 640px) {

    /*
     * 모바일은 화면 위에 떠다니는 투명 메뉴 대신
     * 바닥에서 올라오는 불투명 sheet.
     */
    .tarot-theme-control-v35
    .tarot-palette-drop-v35 {
        position: fixed !important;

        z-index: 900000 !important;

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

        width: auto !important;
        max-width: none !important;
        max-height: min(76dvh, 620px) !important;

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

        border-radius: 22px !important;

        background: var(--surface, #f7f4ed) !important;

        box-shadow:
            0 22px 70px rgba(0,0,0,.34),
            0 0 0 1px rgba(255,255,255,.06)
            !important;

        opacity: 0 !important;
        visibility: hidden !important;

        transform: translateY(calc(100% + 24px)) !important;
        transform-origin: center bottom !important;
    }

    .tarot-theme-control-v35
    .tarot-palette-drop-v35.is-open {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }


    .tarot-palette-mobile-head-v35 {
        min-height: 31px;

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

        position: sticky;
        top: 0;
        z-index: 3;

        margin:
            -2px
            -2px
            7px;

        background: var(--surface, #f7f4ed);
    }

    .tarot-palette-mobile-handle-v35 {
        width: 38px;
        height: 4px;
        border-radius: 999px;
        background: var(--border);
    }

    .tarot-palette-close-v35 {
        position: absolute;
        right: 0;
        top: 0;

        width: 31px;
        height: 31px;

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

        border: 0;
        border-radius: 50%;

        background: transparent;
        color: var(--text-soft);

        cursor: pointer;
    }

    .tarot-palette-close-v35 svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
    }


    .tarot-normal-theme-row-v35 {
        gap: 8px;
        margin-bottom: 13px;
        padding-bottom: 13px;
    }

    .tarot-normal-theme-button-v35 {
        min-height: 44px;
        font-size: 11.5px;
    }


    .tarot-theme-control-v35
    .tarot-palette-quick-v35 {
        gap: 9px !important;
        margin-bottom: 14px !important;
    }


    .tarot-palette-copy-v35 {
        margin-bottom: 13px;
    }

    .tarot-palette-copy-v35 strong {
        font-size: 13.5px;
    }


    .tarot-palette-columns-v35 {
        display: none !important;
    }

    .tarot-theme-control-v35
    .tarot-palette-grid-v35 {
        gap: 6px !important;
    }

    .tarot-theme-control-v35
    .tarot-palette-grid-v35
    .tarot-color-swatch {
        border-radius: 6px !important;
    }
}


@media (max-width: 390px) {

    .tarot-theme-control-v35
    .tarot-palette-drop-v35 {
        left: 7px !important;
        right: 7px !important;
        bottom: 7px !important;

        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .tarot-theme-control-v35
    .tarot-palette-quick-v35 {
        gap: 7px !important;
    }

}


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

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

    .tarot-theme-control-v35 *,
    .tarot-theme-control-v35 *::before,
    .tarot-theme-control-v35 *::after {
        transition: none !important;
        animation: none !important;
    }

}

/* =========================================================
   TAROT THEME / PALETTE v35
   선택 색상 → 오른쪽 화살표 위치
   모바일 팔레트 → 불투명 bottom sheet

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


/* =========================================================
   CONTROL
========================================================= */

.tarot-theme-control-v35 {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
}

.tarot-theme-trigger-v35 {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
}


/* =========================================================
   NORMAL LIGHT / DARK BUTTON
========================================================= */

.tarot-theme-control-v35 .tarot-theme-mode-v35 {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;

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

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

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

    cursor: pointer !important;

    opacity: 1 !important;
    visibility: visible !important;

    transition:
        opacity .17s ease,
        width .20s cubic-bezier(.2,.8,.2,1),
        min-width .20s cubic-bezier(.2,.8,.2,1),
        transform .16s ease,
        color .16s ease,
        background .16s ease !important;
}

.tarot-theme-control-v35 .tarot-theme-mode-v35:hover {
    color: var(--text) !important;
    background: var(--tarot-accent-hover, rgba(127,127,127,.09)) !important;
}

.tarot-theme-control-v35 .tarot-theme-mode-v35:active {
    transform: scale(.93);
}

.tarot-theme-control-v35 .tarot-theme-mode-v35 svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* effective light = sun / effective dark = moon */

.tarot-theme-control-v35
.tarot-theme-mode-v35[data-effective-mode="light"]
.tarot-theme-moon-v35 {
    display: none !important;
}

.tarot-theme-control-v35
.tarot-theme-mode-v35[data-effective-mode="dark"]
.tarot-theme-sun-v35 {
    display: none !important;
}


/*
 * 선택 색상이 있으면 태양/달 자리는 사라집니다.
 * 오른쪽 색상 버튼 하나만 남습니다.
 */
.tarot-theme-control-v35.has-custom-color
.tarot-theme-mode-v35 {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    overflow: hidden !important;
}


/* =========================================================
   RIGHT TOGGLE
   정상 = 아래 화살표
   사용자 색상 = 선택한 색상
========================================================= */

.tarot-theme-control-v35 .tarot-palette-toggle-v35 {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;

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

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

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

    cursor: pointer !important;

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

.tarot-theme-control-v35 .tarot-palette-toggle-v35:hover {
    color: var(--text) !important;
    background: var(--tarot-accent-hover, rgba(127,127,127,.09)) !important;
}

.tarot-theme-control-v35 .tarot-palette-toggle-v35:active {
    transform: scale(.93);
}

.tarot-palette-chevron-v35 {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s ease;
}

.tarot-theme-control-v35.is-palette-open
.tarot-palette-chevron-v35 {
    transform: rotate(180deg);
}

.tarot-selected-color-v35 {
    display: none;
    width: 22px;
    height: 22px;
    border-radius: 8px;

    background: var(--tarot-selected-color, transparent);

    border: 2px solid rgba(255,255,255,.72);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.14),
        0 4px 12px rgba(0,0,0,.14);
}

.tarot-theme-control-v35.has-custom-color
.tarot-palette-chevron-v35 {
    display: none !important;
}

.tarot-theme-control-v35.has-custom-color
.tarot-selected-color-v35 {
    display: block !important;
}


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

.tarot-theme-control-v35 .tarot-palette-drop-v35 {
    position: absolute !important;
    z-index: 620000 !important;

    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;

    width: min(360px, calc(100vw - 24px)) !important;
    max-height: min(620px, calc(100dvh - 90px)) !important;
    padding: 14px !important;

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

    border: 1px solid var(--border) !important;
    border-radius: 18px !important;

    /*
     * 핵심:
     * 반투명 glass가 아니라 완전 불투명 surface.
     */
    background: var(--surface, #f7f4ed) !important;

    box-shadow:
        0 22px 60px rgba(17,24,20,.24) !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

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

    transform: translateY(-7px) scale(.98) !important;
    transform-origin: top right !important;

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

    scrollbar-width: thin;
}

.tarot-theme-control-v35
.tarot-palette-drop-v35.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}


/* =========================================================
   PANEL MOBILE HEADER
========================================================= */

.tarot-palette-mobile-head-v35 {
    display: none;
}


/* =========================================================
   LIGHT / DARK CHOICES
========================================================= */

.tarot-normal-theme-row-v35 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;

    margin-bottom: 14px;
    padding-bottom: 13px;

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

.tarot-normal-theme-button-v35 {
    min-height: 42px;
    padding: 0 11px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

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

    background: var(--surface-hover, rgba(127,127,127,.06));
    color: var(--text-soft);

    font: inherit;
    font-size: 11.5px;
    font-weight: 700;

    cursor: pointer;

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

.tarot-normal-theme-button-v35:hover {
    color: var(--text);
    border-color: var(--tarot-accent-border, var(--border));
}

.tarot-normal-theme-button-v35.is-selected {
    color: var(--text);
    border-color: var(--tarot-accent, var(--border));
    background: var(--tarot-accent-soft, var(--surface-hover));
}

.tarot-normal-theme-button-v35 svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}


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

.tarot-palette-copy-v35 {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 12px;
}

.tarot-palette-copy-v35 strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.2px;
}

.tarot-palette-copy-v35 span {
    color: var(--text-soft);
    font-size: 10.5px;
    font-weight: 560;
    line-height: 1.45;
}


/* =========================================================
   QUICK 8
   모바일에서 큰 네모 2줄 대신 작고 깔끔한 스와치
========================================================= */

.tarot-theme-control-v35
.tarot-palette-quick-v35 {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 7px !important;

    margin: 0 0 13px !important;
}

.tarot-theme-control-v35
.tarot-palette-quick-v35
.tarot-color-swatch {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;

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

    padding: 0 !important;

    border: 2px solid transparent !important;
    border-radius: 50% !important;

    background: var(--swatch) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.22),
        0 3px 9px rgba(0,0,0,.11) !important;

    transform: scale(1) !important;
}

.tarot-theme-control-v35
.tarot-palette-quick-v35
.tarot-color-swatch:hover {
    transform: translateY(-2px) scale(1.04) !important;
}

.tarot-theme-control-v35
.tarot-palette-quick-v35
.tarot-color-swatch.is-selected {
    border-color: var(--text) !important;
    box-shadow:
        0 0 0 2px var(--surface),
        0 0 0 4px var(--tarot-accent, var(--text-soft)),
        0 5px 12px rgba(0,0,0,.14) !important;
}


/* =========================================================
   EXPAND
========================================================= */

.tarot-palette-expand-v35 {
    width: 100%;
    min-height: 38px;
    padding: 0 11px;

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

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

    background: var(--surface-hover, rgba(127,127,127,.05));
    color: var(--text-soft);

    font: inherit;
    font-size: 11px;
    font-weight: 680;

    cursor: pointer;
}

.tarot-palette-expand-v35 svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s ease;
}

.tarot-palette-expand-v35[aria-expanded="true"] svg {
    transform: rotate(180deg);
}


/* =========================================================
   FULL 81
========================================================= */

.tarot-palette-full-v35 {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
        grid-template-rows .24s ease,
        opacity .18s ease;
}

.tarot-palette-full-v35 > * {
    min-height: 0;
    overflow: hidden;
}

.tarot-palette-full-v35.is-expanded {
    grid-template-rows: auto auto;
    opacity: 1;
    margin-top: 12px;
}

.tarot-palette-columns-v35 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 5px;
}

.tarot-palette-column-label {
    min-width: 0;
    overflow: hidden;
    color: var(--text-soft);
    font-size: 7px;
    font-weight: 650;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tarot-theme-control-v35
.tarot-palette-grid-v35 {
    display: grid !important;
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    gap: 5px !important;
}

.tarot-theme-control-v35
.tarot-palette-grid-v35
.tarot-color-swatch {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;

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

    padding: 0 !important;

    border: 1px solid rgba(127,127,127,.16) !important;
    border-radius: 7px !important;

    background: var(--swatch) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.12) !important;
}

.tarot-theme-control-v35
.tarot-palette-grid-v35
.tarot-color-swatch.is-selected {
    outline: 2px solid var(--text) !important;
    outline-offset: 1px !important;
}


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

@media (max-width: 640px) {

    /*
     * 모바일은 화면 위에 떠다니는 투명 메뉴 대신
     * 바닥에서 올라오는 불투명 sheet.
     */
    .tarot-theme-control-v35
    .tarot-palette-drop-v35 {
        position: fixed !important;

        z-index: 900000 !important;

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

        width: auto !important;
        max-width: none !important;
        max-height: min(76dvh, 620px) !important;

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

        border-radius: 22px !important;

        background: var(--surface, #f7f4ed) !important;

        box-shadow:
            0 22px 70px rgba(0,0,0,.34),
            0 0 0 1px rgba(255,255,255,.06)
            !important;

        opacity: 0 !important;
        visibility: hidden !important;

        transform: translateY(calc(100% + 24px)) !important;
        transform-origin: center bottom !important;
    }

    .tarot-theme-control-v35
    .tarot-palette-drop-v35.is-open {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }


    .tarot-palette-mobile-head-v35 {
        min-height: 31px;

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

        position: sticky;
        top: 0;
        z-index: 3;

        margin:
            -2px
            -2px
            7px;

        background: var(--surface, #f7f4ed);
    }

    .tarot-palette-mobile-handle-v35 {
        width: 38px;
        height: 4px;
        border-radius: 999px;
        background: var(--border);
    }

    .tarot-palette-close-v35 {
        position: absolute;
        right: 0;
        top: 0;

        width: 31px;
        height: 31px;

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

        border: 0;
        border-radius: 50%;

        background: transparent;
        color: var(--text-soft);

        cursor: pointer;
    }

    .tarot-palette-close-v35 svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
    }


    .tarot-normal-theme-row-v35 {
        gap: 8px;
        margin-bottom: 13px;
        padding-bottom: 13px;
    }

    .tarot-normal-theme-button-v35 {
        min-height: 44px;
        font-size: 11.5px;
    }


    .tarot-theme-control-v35
    .tarot-palette-quick-v35 {
        gap: 9px !important;
        margin-bottom: 14px !important;
    }


    .tarot-palette-copy-v35 {
        margin-bottom: 13px;
    }

    .tarot-palette-copy-v35 strong {
        font-size: 13.5px;
    }


    .tarot-palette-columns-v35 {
        display: none !important;
    }

    .tarot-theme-control-v35
    .tarot-palette-grid-v35 {
        gap: 6px !important;
    }

    .tarot-theme-control-v35
    .tarot-palette-grid-v35
    .tarot-color-swatch {
        border-radius: 6px !important;
    }
}


@media (max-width: 390px) {

    .tarot-theme-control-v35
    .tarot-palette-drop-v35 {
        left: 7px !important;
        right: 7px !important;
        bottom: 7px !important;

        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .tarot-theme-control-v35
    .tarot-palette-quick-v35 {
        gap: 7px !important;
    }

}


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

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

    .tarot-theme-control-v35 *,
    .tarot-theme-control-v35 *::before,
    .tarot-theme-control-v35 *::after {
        transition: none !important;
        animation: none !important;
    }

}

/* =========================================================
   TAROT PALETTE v37
   CLASSIC LIGHT / DARK BUTTONS · DARK MODE VISIBILITY FIX

   v36 animated day/night switch는 사용하지 않습니다.
   v35의 기존:
   [ ☀ 라이트 모드 ] [ ☾ 다크 모드 ]
   디자인을 그대로 유지하면서 다크모드 패널만 수정합니다.
========================================================= */


/* =========================================================
   DARK MODE PANEL
   다크모드에서 흰색 sheet가 나오지 않도록 완전 불투명 dark surface
========================================================= */

html[data-theme="dark"]
.tarot-theme-control-v35
.tarot-palette-drop-v35 {
    background:
        #18251f
        !important;

    color:
        #f3f6f4
        !important;

    border-color:
        rgba(226, 239, 232, .14)
        !important;

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, .46),
        inset 0 0 0 1px
        rgba(255, 255, 255, .025)
        !important;

    backdrop-filter:
        none
        !important;

    -webkit-backdrop-filter:
        none
        !important;
}


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

@media (max-width: 640px) {

    html[data-theme="dark"]
    .tarot-theme-control-v35
    .tarot-palette-drop-v35 {
        background:
            #18251f
            !important;

        border-color:
            rgba(226, 239, 232, .15)
            !important;

        box-shadow:
            0 26px 80px
            rgba(0, 0, 0, .56),
            0 0 0 1px
            rgba(255, 255, 255, .025)
            !important;
    }


    html[data-theme="dark"]
    .tarot-palette-mobile-head-v35 {
        background:
            #18251f
            !important;
    }

}


/* =========================================================
   MOBILE HANDLE / CLOSE
========================================================= */

html[data-theme="dark"]
.tarot-palette-mobile-handle-v35 {
    background:
        rgba(230, 241, 235, .20)
        !important;
}


html[data-theme="dark"]
.tarot-palette-close-v35 {
    color:
        #b9c9c0
        !important;
}


html[data-theme="dark"]
.tarot-palette-close-v35:hover {
    color:
        #ffffff
        !important;

    background:
        rgba(255, 255, 255, .07)
        !important;
}


/* =========================================================
   LIGHT / DARK BUTTON ROW
========================================================= */

html[data-theme="dark"]
.tarot-normal-theme-row-v35 {
    border-bottom-color:
        rgba(226, 239, 232, .13)
        !important;
}


html[data-theme="dark"]
.tarot-normal-theme-button-v35 {
    background:
        #203229
        !important;

    color:
        #c4d1ca
        !important;

    border-color:
        rgba(226, 239, 232, .15)
        !important;

    opacity:
        1
        !important;

    visibility:
        visible
        !important;

    text-shadow:
        none
        !important;
}


html[data-theme="dark"]
.tarot-normal-theme-button-v35 span {
    color:
        inherit
        !important;

    opacity:
        1
        !important;

    visibility:
        visible
        !important;
}


html[data-theme="dark"]
.tarot-normal-theme-button-v35 svg {
    color:
        inherit
        !important;

    stroke:
        currentColor
        !important;

    opacity:
        1
        !important;

    visibility:
        visible
        !important;
}


html[data-theme="dark"]
.tarot-normal-theme-button-v35:hover {
    background:
        #294036
        !important;

    color:
        #ffffff
        !important;

    border-color:
        rgba(230, 244, 236, .30)
        !important;
}


html[data-theme="dark"]
.tarot-normal-theme-button-v35.is-selected {
    background:
        rgba(82, 183, 136, .16)
        !important;

    color:
        #f0f8f3
        !important;

    border-color:
        rgba(101, 205, 156, .68)
        !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(113, 218, 169, .08)
        !important;
}


/* =========================================================
   PALETTE TITLE / DESCRIPTION
========================================================= */

html[data-theme="dark"]
.tarot-palette-copy-v35 strong {
    color:
        #f2f5f3
        !important;
}


html[data-theme="dark"]
.tarot-palette-copy-v35 span {
    color:
        #a9bbb1
        !important;
}


/* =========================================================
   QUICK 8 COLORS
========================================================= */

html[data-theme="dark"]
.tarot-theme-control-v35
.tarot-palette-quick-v35
.tarot-color-swatch {
    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, .18),
        0 5px 13px
        rgba(0, 0, 0, .30)
        !important;
}


html[data-theme="dark"]
.tarot-theme-control-v35
.tarot-palette-quick-v35
.tarot-color-swatch.is-selected {
    border-color:
        #f1f6f3
        !important;

    box-shadow:
        0 0 0 2px
        #18251f,
        0 0 0 4px
        var(
            --tarot-accent,
            #62c796
        ),
        0 5px 14px
        rgba(0, 0, 0, .34)
        !important;
}


/* =========================================================
   81 COLOR EXPAND BUTTON
========================================================= */

html[data-theme="dark"]
.tarot-palette-expand-v35 {
    background:
        #203229
        !important;

    color:
        #b7c7bf
        !important;

    border-color:
        rgba(226, 239, 232, .15)
        !important;
}


html[data-theme="dark"]
.tarot-palette-expand-v35:hover {
    background:
        #294036
        !important;

    color:
        #ffffff
        !important;

    border-color:
        rgba(230, 244, 236, .27)
        !important;
}


html[data-theme="dark"]
.tarot-palette-expand-v35 svg {
    stroke:
        currentColor
        !important;
}


/* =========================================================
   81 COLOR LABELS / GRID
========================================================= */

html[data-theme="dark"]
.tarot-palette-column-label {
    color:
        #90a49a
        !important;
}


html[data-theme="dark"]
.tarot-theme-control-v35
.tarot-palette-grid-v35
.tarot-color-swatch {
    border-color:
        rgba(230, 241, 235, .11)
        !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, .07)
        !important;
}


/* =========================================================
   NORMAL TOP ICON / ARROW
   dark mode에서도 너무 흐리지 않게
========================================================= */

html[data-theme="dark"]
.tarot-theme-control-v35
.tarot-theme-mode-v35,

html[data-theme="dark"]
.tarot-theme-control-v35
.tarot-palette-toggle-v35 {
    color:
        #c0cec7
        !important;
}


html[data-theme="dark"]
.tarot-theme-control-v35
.tarot-theme-mode-v35:hover,

html[data-theme="dark"]
.tarot-theme-control-v35
.tarot-palette-toggle-v35:hover {
    color:
        #ffffff
        !important;

    background:
        rgba(255, 255, 255, .07)
        !important;
}


/* =========================================================
   선택한 커스텀 컬러 버튼의 테두리
========================================================= */

html[data-theme="dark"]
.tarot-selected-color-v35 {
    border-color:
        rgba(245, 248, 246, .72)
        !important;

    box-shadow:
        0 0 0 1px
        rgba(0, 0, 0, .42),
        0 5px 13px
        rgba(0, 0, 0, .30)
        !important;
}

/* =========================================================
   TAROT PALETTE v38
   1) 81색 팔레트가 닫혀 있을 때 남는 빈 공간 완전 제거
   2) Light / Dark 선택을 GIF처럼 좌 ↔ 우로 이동하는 pill UI로 변경
   3) 기존 해 / 달 SVG 아이콘 유지

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


/* =========================================================
   81 COLORS · TRUE COLLAPSE

   기존 v35 CSS는:
   grid-template-rows: 0fr
   이지만 내부에 두 개의 grid child가 있어서 두 번째 auto row가
   남을 수 있습니다.

   v38은 닫힌 상태에서 실제 높이를 0으로 만들어
   81색 버튼 아래에 빈 공간을 전혀 남기지 않습니다.
========================================================= */

.tarot-theme-control-v35
.tarot-palette-full-v35 {
    display: block !important;

    width: 100% !important;
    height: 0 !important;
    max-height: 0 !important;

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

    overflow: hidden !important;

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

    transform:
        translateY(-4px);

    transition:
        max-height .30s cubic-bezier(.2,.8,.2,1),
        opacity .18s ease,
        transform .24s cubic-bezier(.2,.8,.2,1),
        margin .24s ease !important;
}


.tarot-theme-control-v35
.tarot-palette-full-v35.is-expanded {
    height: auto !important;
    max-height: 720px !important;

    margin-top: 12px !important;

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

    transform:
        translateY(0);
}


/*
 * full palette 내부 요소의 기존 overflow:hidden 영향 제거.
 * 단, 닫힌 부모가 height/max-height 0이라 공간은 생기지 않습니다.
 */
.tarot-theme-control-v35
.tarot-palette-full-v35.is-expanded
> * {
    overflow: visible !important;
}


/* 모바일은 81색이 많으므로 panel 자체 scroll을 사용 */
@media (max-width: 640px) {

    .tarot-theme-control-v35
    .tarot-palette-full-v35.is-expanded {
        max-height: 820px !important;
    }

}


/* =========================================================
   LIGHT / DARK SLIDING SEGMENT
========================================================= */

.tarot-theme-slider-row-v38 {
    --theme-slider-gap: 4px;

    position: relative !important;

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

    gap:
        0 !important;

    width:
        100% !important;

    padding:
        var(--theme-slider-gap) !important;

    margin:
        0
        0
        14px !important;

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

    border-radius:
        999px !important;

    background:
        rgba(127,127,127,.045) !important;

    overflow:
        hidden !important;

    isolation:
        isolate;

    /*
     * 기존 row의 아래 구분선은 pill 자체가 대신합니다.
     */
    border-bottom:
        1px solid
        var(--border) !important;
}


/* 움직이는 선택 pill */
.tarot-theme-slider-indicator-v38 {
    position:
        absolute;

    z-index:
        0;

    top:
        var(--theme-slider-gap);

    left:
        var(--theme-slider-gap);

    width:
        calc(
            (
                100%
                -
                (
                    var(--theme-slider-gap)
                    *
                    2
                )
            )
            /
            2
        );

    height:
        calc(
            100%
            -
            (
                var(--theme-slider-gap)
                *
                2
            )
        );

    border-radius:
        999px;

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

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

    transform:
        translateX(0);

    transition:
        transform .34s
        cubic-bezier(.22,.82,.25,1),
        background .28s ease,
        box-shadow .28s ease;
}


/* Dark 선택 → indicator가 오른쪽으로 이동 */
.tarot-theme-slider-row-v38[data-active-theme="dark"]
.tarot-theme-slider-indicator-v38 {
    transform:
        translateX(100%);

    /*
     * GIF처럼 dark는 조금 더 묵직하게.
     * 사이트의 green/neutral 분위기를 깨지 않습니다.
     */
    background:
        #31483e;

    box-shadow:
        0 6px 16px
        rgba(0,0,0,.22);
}


/* =========================================================
   BUTTONS
========================================================= */

.tarot-theme-control-v35
.tarot-theme-slider-button-v38 {
    position:
        relative !important;

    z-index:
        1 !important;

    min-height:
        44px !important;

    padding:
        0 12px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        7px !important;

    border:
        0 !important;

    border-radius:
        999px !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

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

    opacity:
        1 !important;

    cursor:
        pointer !important;

    transition:
        color .24s ease,
        transform .15s ease !important;
}


.tarot-theme-control-v35
.tarot-theme-slider-button-v38:hover {
    background:
        transparent !important;

    border-color:
        transparent !important;
}


.tarot-theme-control-v35
.tarot-theme-slider-button-v38:active {
    transform:
        scale(.975);
}


/* 선택된 쪽은 pill 위이므로 흰 계열 */
.tarot-theme-control-v35
.tarot-theme-slider-button-v38.is-selected {
    color:
        #ffffff !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


/* dark 선택 indicator 위에서도 텍스트 선명하게 */
html[data-theme="dark"]
.tarot-theme-control-v35
.tarot-theme-slider-button-v38.is-selected {
    color:
        #f3f7f5 !important;
}


/* 선택되지 않은 쪽 */
html[data-theme="dark"]
.tarot-theme-control-v35
.tarot-theme-slider-button-v38:not(.is-selected) {
    color:
        #9fb1a8 !important;
}


/* =========================================================
   SUN / MOON ICONS
========================================================= */

.tarot-theme-control-v35
.tarot-theme-slider-button-v38 svg {
    width:
        18px !important;

    height:
        18px !important;

    flex:
        0 0 18px;

    fill:
        none !important;

    stroke:
        currentColor !important;

    stroke-width:
        1.75 !important;

    stroke-linecap:
        round !important;

    stroke-linejoin:
        round !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

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


/*
 * mode가 이동할 때 아이콘도 아주 살짝 움직여
 * GIF의 '선택이 이동한다'는 느낌을 강화합니다.
 */
.tarot-theme-slider-row-v38[data-active-theme="light"]
.tarot-theme-slider-button-v38[data-normal-theme="light"]
svg,

.tarot-theme-slider-row-v38[data-active-theme="dark"]
.tarot-theme-slider-button-v38[data-normal-theme="dark"]
svg {
    transform:
        scale(1.07)
        rotate(0deg);
}


.tarot-theme-slider-row-v38[data-active-theme="dark"]
.tarot-theme-slider-moon-v38 {
    transform:
        translateX(1px)
        rotate(-9deg)
        scale(1.07);
}


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

.tarot-theme-control-v35
.tarot-theme-slider-button-v38 span {
    color:
        inherit !important;

    font-size:
        11.5px;

    font-weight:
        760;

    line-height:
        1;

    white-space:
        nowrap;

    opacity:
        1 !important;

    visibility:
        visible !important;
}


/* =========================================================
   DARK PANEL MATCH
========================================================= */

html[data-theme="dark"]
.tarot-theme-slider-row-v38 {
    background:
        #1d2d26 !important;

    border-color:
        rgba(226,239,232,.14) !important;
}


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

@media (max-width: 640px) {

    .tarot-theme-slider-row-v38 {
        margin-bottom:
            13px !important;
    }


    .tarot-theme-control-v35
    .tarot-theme-slider-button-v38 {
        min-height:
            43px !important;

        padding:
            0 8px !important;

        gap:
            6px !important;
    }


    .tarot-theme-control-v35
    .tarot-theme-slider-button-v38 svg {
        width:
            17px !important;

        height:
            17px !important;

        flex-basis:
            17px;
    }


    .tarot-theme-control-v35
    .tarot-theme-slider-button-v38 span {
        font-size:
            11px;
    }

}


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

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

    .tarot-theme-slider-indicator-v38,
    .tarot-theme-slider-button-v38,
    .tarot-theme-slider-button-v38 svg,
    .tarot-palette-full-v35 {
        transition:
            none !important;
    }

}