/* 바가 있는 페이지 - 기존 요소(#header · .sub-tab 등)는 .has-bottom-cta-bar 와 결합해서만 고친다(바 없는 화면은 그대로, 원 규칙보다 특정도 우위). */

/* html 에도 둔다(html 의 scroll-padding 이 읽는다). :where() 로 감싸야 :has() 를 모르는 브라우저가 규칙 전체를 버리지 않는다. */
:where(:root:has(> body.has-bottom-cta-bar), .has-bottom-cta-bar) {
    --bottom-cta-bar-h: calc(12px + var(--fstd-button-lg-h) + max(12px, env(safe-area-inset-bottom, 0px)));
}

@media (min-width: 961px) { /* @bp:961 */
    :where(:root:has(> body.has-bottom-cta-bar), .has-bottom-cta-bar) {
        --bottom-cta-bar-h: calc(80px + env(safe-area-inset-bottom, 0px));
    }
}

.has-bottom-cta-bar {
    padding-bottom: var(--bottom-cta-bar-h);
}

:root:has(> body.has-bottom-cta-bar) {
    scroll-padding-bottom: var(--bottom-cta-bar-h);
}

/* 장지 상세 탭(장지정보 | 이용자 영상)이 붙어 있는 동안은 헤더 고정을 푼다 - 붙은 탭(53)이 헤더(56)를 다 덮지 못해 아래 3px 와 그림자가 비친다.
   탭의 .sticky 는 common.js 가 스크롤에 따라 붙인다. :has() 를 모르는 브라우저는 이 규칙만 버려 탭이 헤더를 덮는 기존 동작이 된다. */
.has-bottom-cta-bar:has(.sub-tab.sticky) #header.ld-header {
    position: static;
}

/* 붙은 탭의 원 z-index(4000)는 상담 폼 · 공유 시트 딤(1000) 위로 뜬다 - #header 50 위, 바 · 플로팅 90 아래로 내린다. */
.has-bottom-cta-bar .sub-tab.sticky {
    z-index: 51;
}

.bottom-cta-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;                       /* #header 50 위, .layerWindow 99 · #mask 100 · 오버레이 아래 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: var(--bottom-cta-bar-h);
    padding: 12px max(16px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background-color: var(--fstd-surface);
    box-shadow: inset 0 1px 0 var(--fstd-stroke-muted);
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

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

.bottom-cta-bar__info {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    margin: 0;
    font-weight: var(--ds-weight-semibold, 600);
    line-height: var(--ds-lh-label, 24px);
    white-space: nowrap;
}
.bottom-cta-bar__label {
    color: var(--fstd-neutral-label);
    font-size: var(--ds-text-md, 13px);
    letter-spacing: -0.195px;
}
.bottom-cta-bar__number {
    color: var(--fstd-fg-heavy);
    font-size: var(--ds-text-xl, 20px);
    letter-spacing: -0.3px;
}

.bottom-cta-bar__actions {
    display: flex;
    flex: 1 1 auto;
    gap: 8px;
    min-width: 0;
}
.bottom-cta-bar__btn--share {
    flex: none;
}
.bottom-cta-bar__btn--consult,
.bottom-cta-bar__btn--call {
    flex: 1 1 0;
}

@media (max-width: 320px) { /* @bp:320 */
    .bottom-cta-bar__btn--consult .fstd-button__icon,
    .bottom-cta-bar__btn--call .fstd-button__icon {
        display: none;
    }
}

@media (min-width: 961px) { /* @bp:961 */
    .bottom-cta-bar {
        /* 시안(1440·1920)에 없는 좁은 PC 폭(961~991)에서도 모바일과 같은 16 은 남긴다 - 없으면 961 에서 여백 0.5 로 글자가 화면 끝에 붙는다. */
        padding: 0 max(env(safe-area-inset-right, 0px), 16px, calc((100% - 960px) / 2)) env(safe-area-inset-bottom, 0px) max(env(safe-area-inset-left, 0px), 16px, calc((100% - 960px) / 2));
        box-shadow: inset 0 1px 0 var(--fstd-stroke-muted), 0 0 20px rgba(0, 0, 0, 0.12);
    }
    .bottom-cta-bar__info {
        display: flex;
    }
    .bottom-cta-bar__actions {
        flex: none;
    }
    /* .fstd-button 의 14 를 같은 특정도로 덮는다 - fstd-button.css 뒤에 실려야 한다.
       시안 padding 16 은 테두리(stroke inside)를 포함한 값이라 15, 폭은 시안 hug 111(텍스트 박스를 올림한 값)에 맞추고 남는 1px 은 오른쪽에 둔다. */
    .bottom-cta-bar__btn--consult,
    .bottom-cta-bar__btn--call {
        flex: none;
        justify-content: flex-start;
        min-width: 111px;
        padding: 0 15px;
    }
}