/* 6.295.0 요금 안내 — 요금제 카드 고르기 · 아래 고정 막대 · 예상 요금 창(bizsoft/planbar.js · pricing.php) */

/* 카드 고르기 — 왼쪽 위 체크 · 고른 카드 둘레 */
.bs-plans.is-pickable .bs-plan { position: relative; cursor: pointer; }
.bs-plans.is-pickable .bs-plan:focus-visible { outline: 2px solid var(--bs-primary, #2f5bea); outline-offset: 3px; }
.bs-plan .bs-pk { position: absolute; top: -11px; left: -11px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: #fff; background: #d5dbe5; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(15, 23, 42, .12); transition: background .15s; }
.bs-plan.is-pick .bs-pk { background: var(--bs-primary, #2f5bea); }
.bs-plans-wrap .bs-plan.is-pick { outline: 2px solid var(--bs-primary, #2f5bea); outline-offset: 4px; }
/* 6.309.3 파란 테두리는 고른 카드 하나만(사용자 2026-11-02 '활성화가 안 풀려 — 라인이 2개') — '가장 많이 선택' 카드도 고르지 않으면 보통 테두리, 고른 카드는 바깥 선 없이 테두리만(굵기만큼 안쪽 여백을 줄여 흔들리지 않게) */
.bs-plans-wrap .bs-plans.is-pickable .bs-plan.is-best:not(.is-pick) { border: 1px solid #e2e8f0 !important; box-shadow: none !important; }
.bs-plans-wrap .bs-plans.is-pickable .bs-plan.is-pick { outline: 0; border: 2px solid var(--bs-primary, #2f5bea) !important; padding: 33px 29px 29px !important; box-shadow: 0 22px 44px -12px color-mix(in srgb, var(--bs-primary, #2f5bea) 22%, transparent) !important; }

/* 아래 고정 막대 */
.bs-pb { position: fixed; left: 0; right: 0; bottom: var(--bs-pb-b, 0px); z-index: 840; background: #fff; border-top: 1px solid var(--bs-line, #e3e8ef); box-shadow: 0 -8px 24px rgba(15, 23, 42, .08); }
.bs-pb[hidden] { display: none; }
.bs-pb-in { display: flex; align-items: center; gap: 10px 20px; max-width: var(--bs-max, 1200px); margin: 0 auto; padding: 12px var(--bs-side, 24px); box-sizing: border-box; }
.bs-pb-sel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.bs-pb-k { font-size: 13px; font-weight: 500; color: var(--bs-muted, #6b7686); }
.bs-pb-n { font-size: 17px; font-weight: 800; color: var(--bs-ink, #1a2333); word-break: keep-all; }
.bs-pb-c { font-size: 13px; color: var(--bs-muted, #6b7686); }
.bs-pb-amt { margin-left: auto; text-align: right; white-space: nowrap; color: var(--bs-ink, #1a2333); font-size: 14px; }
.bs-pb-amt b { color: var(--bs-primary, #2f5bea); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.bs-pb-amt b.is-text { font-size: 20px; color: var(--bs-ink, #1a2333); }
.bs-pb-amt small { display: block; font-size: 12px; color: var(--bs-muted, #6b7686); }
.bs-pb-btns { display: flex; gap: 8px; flex: none; }
.bs-pb-est, .bs-pb-go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 46px; min-height: 0; margin: 0; padding: 0 20px; border: 0; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
.bs-pb-est { color: var(--bs-primary, #2f5bea); background: color-mix(in srgb, var(--bs-primary, #2f5bea) 9%, #fff); }
.bs-pb-go { min-width: 150px; color: #fff !important; background: var(--bs-primary, #2f5bea); }
.bs-pb-est[hidden], .bs-pb-go[hidden] { display: none; }
@media (hover: hover) {
    .bs-pb-est:hover { background: color-mix(in srgb, var(--bs-primary, #2f5bea) 15%, #fff); }
    .bs-pb-go:hover { background: color-mix(in srgb, var(--bs-primary, #2f5bea) 86%, #000); }
}

/* 막대 위로 — 카톡 · 맨 위로 단추 · 바닥 글이 막대에 가리지 않게 */
html.has-pb body { padding-bottom: var(--bs-pb-h, 72px); }
html.has-pb .bs-kakao-float { bottom: calc(var(--bs-pb-h, 72px) + 16px); }
html.has-pb .bs-top { bottom: calc(var(--bs-pb-h, 72px) + 16px); }
html.has-pb .bs-top.has-kakao { bottom: calc(var(--bs-pb-h, 72px) + 80px); }
html.has-pb .bs-kakao-pop { bottom: calc(var(--bs-pb-h, 72px) + 80px); }

/* 예상 요금 창 */
.bs-pb-dlg { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 0; border: 0; border-radius: 18px; box-shadow: 0 24px 60px rgba(15, 23, 42, .25); color: var(--bs-ink, #1a2333); }
.bs-pb-dlg::backdrop { background: rgba(15, 23, 42, .45); }
.bs-pb-dlg-in { padding: 24px 26px 22px; }
.bs-pb-dh { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; }
.bs-pb-dh h3 { margin: 0; font-size: 20px; font-weight: 800; }
.bs-pb-dn { margin: 4px 0 0; font-size: 13px; color: var(--bs-muted, #6b7686); word-break: keep-all; }
.bs-pb-x { margin-left: auto; flex: none; width: 34px; height: 34px; min-height: 0; padding: 0; color: #8a94a6; background: none; border: 0; border-radius: 50%; cursor: pointer; }
@media (hover: hover) { .bs-pb-x:hover { color: #111; background: #f1f3f7; } }
.bs-pb-notes { margin: 16px 0 0; padding: 14px 16px 14px 30px; background: var(--bs-soft, #f4f6f9); border-radius: 12px; font-size: 13px; line-height: 1.6; color: var(--bs-muted, #5b6475); }
.bs-pb-notes li { list-style: disc; word-break: keep-all; }
.bs-pb-df { display: flex; justify-content: flex-end; gap: 8px; margin: 18px 0 0; }
.bs-pb-df .bs-pb-close { height: 44px; min-height: 0; padding: 0 18px; color: var(--bs-ink, #1a2333); background: var(--bs-soft, #f4f6f9); border: 0; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.bs-pb-df .bs-pb-dgo { height: 44px; }

/* 휴대폰 — 위 줄 상품 · 금액, 아래 줄 단추 둘 */
@media (max-width: 760px) {
    .bs-pb-in { flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; }
    .bs-pb-sel { flex: 1 1 0; }
    .bs-pb-sel > .bs-pb-k { display: none; }
    .bs-pb-n { font-size: 15px; }
    .bs-pb-c { font-size: 12px; }
    .bs-pb-amt b { font-size: 19px; }
    .bs-pb-amt .bs-pb-k { display: none; }
    .bs-pb-btns { width: 100%; }
    .bs-pb-est, .bs-pb-go { flex: 1; height: 42px; min-width: 0; padding: 0 12px; font-size: 14px; }
    .bs-pb-dlg-in { padding: 20px 18px 18px; }
}