/* 연락하기 줄 on a post's page (Core/BoardContact.RenderBar, Controls/BoardDetail):
   share / KakaoTalk / phone-text / e-mail, as in the app. A row under the post on wide
   screens; on phones it stays at the bottom of the screen. */

.bp-contactbar { display: flex; align-items: stretch; gap: 8px; max-width: 620px; margin: 18px 0 6px; font-family: inherit; }
.bp-contactbar > * { flex: 1 1 0; min-width: 0; }
.bp-contactbar a, .bp-contactbar button, .bp-contactbar .bp-cb-kakao {
    display: flex; align-items: center; justify-content: center; gap: 7px; box-sizing: border-box;
    height: 46px; padding: 0 12px; border-radius: 10px; border: 1px solid transparent;
    font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none !important;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bp-contactbar span { overflow: hidden; text-overflow: ellipsis; }
.bp-contactbar .fa { font-size: 17px; }

.bp-contactbar .bp-cb-share { flex: 0 0 46px; padding: 0; background: #fff; border-color: #dcd6e8; color: #555; }
.bp-contactbar .bp-cb-share.is-done { border-color: #2e9d5b; color: #2e9d5b; }
.bp-contactbar .bp-cb-share.is-done .fa::before { content: "\f00c"; }

.bp-contactbar .bp-cb-kakao { background: #fee500; color: #191919 !important; }
.bp-contactbar .bp-cb-talk { width: 19px; height: 19px; flex: none; fill: #3a1d1d; }

.bp-cb-phone { position: relative; display: flex; }
.bp-cb-phone > button { flex: 1; width: 100%; background: #7a1bb0; color: #fff; }
.bp-cb-phone > button:hover { background: #63158f; }
.bp-cb-menu {
    display: none; position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
    min-width: 200px; padding: 6px; border-radius: 12px; background: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .22); z-index: 30;
}
.bp-cb-phone.is-open .bp-cb-menu { display: block; }
.bp-contactbar .bp-cb-menu a {
    justify-content: flex-start; flex-wrap: wrap; height: auto; padding: 11px 12px; gap: 4px 10px;
    border-radius: 8px; color: #222 !important; font-weight: 600;
}
.bp-contactbar .bp-cb-menu a:hover { background: #f4eefa; }
.bp-contactbar .bp-cb-menu .fa { width: 18px; color: #7a1bb0; text-align: center; }
.bp-cb-menu small { flex-basis: 100%; padding-left: 28px; color: #888; font-weight: 400; font-size: 13px; }

.bp-contactbar .bp-cb-mail { background: #fff; border-color: #7a1bb0; color: #7a1bb0 !important; }

.bp-cb-space { display: none; }

@media (max-width: 768px) {
    .bp-contactbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147482000; max-width: none; margin: 0; gap: 6px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
        background: #fff; border-top: 1px solid #e6e1ee; box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
    }
    .bp-contactbar a, .bp-contactbar button, .bp-contactbar .bp-cb-kakao { height: 48px; padding: 0 4px; gap: 4px; font-size: 14px; letter-spacing: -.3px; }
    .bp-contactbar .fa { font-size: 15px; }
    .bp-contactbar .bp-cb-share { flex-basis: 44px; }
    .bp-cb-menu { left: auto; right: -40px; transform: none; }
    .bp-cb-space { display: block; height: 72px; }

    /* the helper's round button and the ENG switch sit above the bar instead of on it */
    body:has(.bp-contactbar) .aha-chat:not(.aha-chat-is-open) { bottom: calc(76px + env(safe-area-inset-bottom)); }
    body:has(.bp-contactbar) #langSwitchBtn { bottom: calc(82px + env(safe-area-inset-bottom)) !important; }
}

@media (max-width: 360px) {
    .bp-contactbar a, .bp-contactbar button, .bp-contactbar .bp-cb-kakao { font-size: 13px; }
    .bp-contactbar .bp-cb-talk, .bp-contactbar .fa-phone, .bp-contactbar .fa-envelope-o { display: none; }
    .bp-cb-menu .fa-phone { display: inline-block !important; }
}