/* 묶음 아래 기준(--fab-stack-offset) - 하단 바 · 탭바(≤960)가 있으면 그 윗선, 없으면 화면 아래. 두 높이는 bottom-cta-bar.css · bottom-tab-bar.css 가 정한다.
   페이지 끝에서는 푸터 고객문의 · SNS 윗선(--fab-stack-avoid)이 더 높으면 그 위로 올리되 헤더 아랫선은 넘지 않는다(--fab-stack-room 은 묶음 높이까지 뺀 거리) - 두 거리는 fab-stack.js 가 넣는다(시안 없음). */
.fab-stack {
    --fab-stack-offset: 0px;
    position: fixed;
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: min(calc(max(var(--fab-stack-offset), var(--fab-stack-avoid, 0px)) + 16px), var(--fab-stack-room, 100%));
    z-index: 90;                       /* #header 50 위, .layerWindow 99 · #mask 100 · 오버레이 아래 */
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;              /* 숨은 위로가기 자리 · 버튼 사이 틈이 아래 본문 탭을 막지 않게 - 버튼만 auto */
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.has-bottom-cta-bar .fab-stack {
    --fab-stack-offset: var(--bottom-cta-bar-h);
}

/* base.css 가 모든 요소의 포커스 윤곽선을 지운다 - 키보드 포커스에서만 되살린다. */
.fab-stack :focus-visible {
    outline: revert;
}

.fab-stack__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    box-shadow: var(--fstd-shadow-fab);
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
}

.fab-stack__icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
}

/* 숨김은 visibility 로 한다 - 자리를 지켜 나타날 때 아래 버튼이 움직이지 않고, 숨은 동안 탭 순서에서 빠진다. */
.fab-stack__btn--top {
    border: 1px solid var(--fstd-stroke-shy);
    background-color: var(--fstd-fab-top-bg);
    color: var(--fstd-neutral-label);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease-out, visibility 0s linear 200ms;
}
.fab-stack__btn--top.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms ease-out, visibility 0s;
}

.fab-stack__btn--kakao {
    background-color: var(--fstd-kakao);
}
.fab-stack__btn--kakao .fab-stack__icon {
    width: 32px;
    height: 32px;
}

/* '온라인 / 상담' 두 줄 - 14px 로는 한 줄에 들어가므로 min-content 열 + keep-all 로 띄어쓰기에서 줄을 바꾼다. */
.fab-stack__btn--consult {
    display: none;
    grid-template-columns: min-content;
    background-color: var(--fstd-brand-fab);
    color: var(--fstd-on-color);
    font-size: var(--ds-text-base, 14px);
    font-weight: var(--ds-weight-semibold, 600);
    line-height: var(--ds-lh-body2, 20px);
    letter-spacing: -0.21px;
    text-align: center;
    word-break: keep-all;
}

@media (max-width: 960px) { /* @bp:960 */
    .has-bottom-tab-bar .fab-stack {
        --fab-stack-offset: var(--bottom-tab-bar-h);
    }
}

@media (min-width: 961px) { /* @bp:961 */
    .fab-stack {
        right: calc(32px + env(safe-area-inset-right, 0px));
        bottom: min(calc(max(var(--fab-stack-offset), var(--fab-stack-avoid, 0px)) + 32px), var(--fab-stack-room, 100%));
    }
    .fab-stack__btn {
        width: 64px;
        height: 64px;
    }
    .fab-stack__btn--kakao .fab-stack__icon {
        width: 40px;
        height: 40px;
    }
    .fab-stack__btn--consult {
        display: grid;
    }
}

/* .is-visible 규칙까지 적어야 특정도에서 이긴다. */
@media (prefers-reduced-motion: reduce) {
    .fab-stack__btn--top,
    .fab-stack__btn--top.is-visible {
        transition: none;
    }
}