/* =========================================================
   Lunar Soopoolleaf — AI 독 위의 공유 "통 띠"
   tarot-ai-sheet.css 뒤에 얹습니다.

   접힌 독 = 띠(54px) + 손잡이(68px). 그래서 접혀 있을 때 올라와 있는
   높이도 54px 만큼 늘립니다. (:has 를 못 읽는 옛 브라우저에서는 띠가
   손잡이 아래에 숨었다가 독을 열면 보입니다. 깨지지는 않습니다.)
   ========================================================= */

.tarot-share-band {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;

    padding: 8px 10px 0;

    border-radius: 22px 22px 0 0;
    background: var(--surface);
}

/* 띠가 둥근 윗모서리를 맡으니 손잡이 줄은 각지게 */
.tarot-ai-panel:has(.tarot-share-band) .tarot-ai-handle-split {
    border-radius: 0;
}

/* 접혀 있을 때 띠까지 보이도록 54px 더 올림 */
.tarot-ai-dock:has(.tarot-share-band):not(.is-open) {
    transform: translateY(calc(100% - 68px - 54px - env(safe-area-inset-bottom)));
}

@media (max-width: 700px) {
    .tarot-ai-dock:has(.tarot-share-band):not(.is-open) {
        transform: translateY(calc(100% - 64px - 54px - env(safe-area-inset-bottom)));
    }
}

/* 띠만큼 본문 아래 여백도 더 */
.spread-page:has(.tarot-share-band) .spread-main {
    padding-bottom: calc(var(--spread-main-pb, 24px) + 54px);
}


/* ---------- 단추 ---------- */

.tarot-share-band-button {
    height: 46px;
    min-width: 0;

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

    padding: 0 8px;

    border: 0;
    border-radius: 12px;
    background: var(--surface-hover, #f3f1ea);
    color: var(--text);

    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    cursor: pointer;
    transition: transform .14s ease, background-color .2s ease, opacity .2s ease;
}

.tarot-share-band-button > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.tarot-share-band-button svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tarot-share-band-button:hover {
    transform: translateY(-1px);
}

.tarot-share-band-button:active {
    transform: translateY(1px);
}

.tarot-share-band-button.is-primary {
    background: var(--tarot-accent-soft, rgba(82, 183, 136, .11));
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--tarot-accent-border, rgba(82, 183, 136, .55));
}

.tarot-share-band-button.is-busy {
    opacity: .6;
    pointer-events: none;
}

html[data-theme="dark"] .tarot-share-band-button {
    background: color-mix(in srgb, var(--surface) 80%, #000 20%);
}


/* ---------- 상단 툴바의 옛 저장 · 공유 단추는 숨김 ---------- */

#spreadDownloadButton,
#spreadShareButton {
    display: none !important;
}


@media (max-width: 420px) {
    .tarot-share-band-button {
        font-size: 11.5px;
        gap: 4px;
        padding: 0 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tarot-share-band-button {
        transition: none;
    }
}