/* 6.278.0 요금 안내 · 제품 화면 새 모양(사용자 2026-10-30 시안 — 요금 카드 · 자주 묻는 질문 · 상세 기능 비교표).
   bizsoft/pricing.php · product.php 가 테마 CSS 뒤에 불러옴(add_stylesheet) — 네 테마 공통. thv-clean theme.css 의 카드 !important 를 이기려고 몇 곳은 !important.
   글꼴은 테마의 --bs-font(Pretendard). 색은 테마 --bs-primary 를 따르고 회색은 slate 계열 고정. */

/* ── 요금 카드 ─────────────────────────────────────────── */
.bs-plans-wrap .bs-plans { gap: 28px; align-items: stretch; }
.bs-plans-wrap .bs-plan { padding: 34px 30px 30px !important; background: #fff; border: 1px solid #e2e8f0 !important; border-radius: 24px !important;
    box-shadow: none !important; transition: box-shadow .2s, border-color .2s, transform .2s; }
@media (hover: hover) {
    .bs-plans-wrap .bs-plan:hover { border-color: #cbd5e1 !important; box-shadow: 0 22px 44px -14px rgba(15, 23, 42, .16) !important; }
}
.bs-plans-wrap .bs-plan.is-best { border: 2px solid var(--bs-primary) !important; box-shadow: 0 22px 44px -12px color-mix(in srgb, var(--bs-primary) 22%, transparent) !important; }
@media (min-width: 901px) { .bs-plans-wrap .bs-plans.is-count-3 .bs-plan.is-best, .bs-plans-wrap .bs-plans.is-count-4 .bs-plan.is-best { transform: translateY(-8px); } }
.bs-plans-wrap .bs-plan-badge { top: -14px; padding: 5px 16px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: #fff; white-space: nowrap;
    background: linear-gradient(90deg, var(--bs-primary), #4f46e5) !important; border-radius: 999px !important; box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--bs-primary) 45%, transparent); }
.bs-plan-tier { align-self: flex-start; display: inline-block; margin: 0 0 16px; padding: 4px 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; color: #64748b; background: #f1f5f9; border-radius: 999px; }
.bs-plan.is-best .bs-plan-tier { color: var(--bs-primary); background: color-mix(in srgb, var(--bs-primary) 9%, #fff); }
.bs-plans-wrap .bs-plan h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: #0f172a; }
.bs-plans-wrap .bs-plan-sum { min-height: 38px; margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: #64748b; }
.bs-plans-wrap .bs-plan-price { margin: 22px 0 0; color: #64748b; }
.bs-plans-wrap .bs-plan-price .bs-pp-main b, .bs-plans-wrap .bs-plan-price b.is-text { font-size: 40px; font-weight: 800; letter-spacing: -.03em; color: #0f172a; }
.bs-plans-wrap .bs-plan-price b.is-text { font-size: 32px; }
.bs-plans-wrap .bs-plan.is-best .bs-plan-price .bs-pp-main b { color: var(--bs-primary); }
.bs-plans-wrap .bs-plan-price .bs-pp-per { margin-left: 2px; font-size: 14px; font-weight: 500; color: #64748b; }
.bs-plans-wrap .bs-plan-price .bs-pp-basis { display: block; margin-top: 4px; font-size: 12.5px; color: #94a3b8; }
.bs-plans-wrap .bs-plan-price .bs-pp-admin { margin-top: 8px; font-size: 12.5px; color: #64748b; }
.bs-plans-wrap .bs-plan-price .bs-pp-total { font-size: 13px; }
.bs-plans-wrap .bs-plan-note { min-height: 0; margin: 6px 0 0; font-size: 12.5px; color: #94a3b8; }
.bs-plan-feat { flex: 1 1 auto; margin-top: 24px; padding-top: 24px; border-top: 1px solid #f1f5f9; }
.bs-plan-fh { margin: 0 0 16px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: #0f172a; }
.bs-plan-fh.is-inc { color: var(--bs-primary); }
.bs-plans-wrap .bs-plan-items { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; color: #475569; background: none !important; border: 0 !important; }
.bs-plans-wrap .bs-plan-items li { display: flex; align-items: flex-start; gap: 10px; }
.bs-plans-wrap .bs-plan-items i { flex: none; margin: 3px 0 0; font-size: 14px; color: var(--bs-primary); }
.bs-plans-wrap .bs-plan:nth-child(2) .bs-plan-items i { color: #10b981; }
.bs-plans-wrap .bs-plan:nth-child(3) .bs-plan-items i { color: #6366f1; }
.bs-plan-cta { margin-top: 30px; }
.bs-plans-wrap .bs-plan .bs-plan-go { display: flex; align-items: center; justify-content: center; height: 52px; padding: 0 16px; font-size: 14.5px; font-weight: 700;
    color: #334155 !important; background: #f1f5f9 !important; border: 0 !important; border-radius: 14px !important; box-shadow: none; transition: background .15s, color .15s; }
.bs-plans-wrap .bs-plan .bs-plan-go:hover { color: #0f172a !important; background: #e2e8f0 !important; }
.bs-plans-wrap .bs-plan.is-best .bs-plan-go { color: #fff !important; background: var(--bs-primary) !important; box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--bs-primary) 50%, transparent); }
.bs-plans-wrap .bs-plan.is-best .bs-plan-go:hover { color: #fff !important; background: color-mix(in srgb, var(--bs-primary) 86%, #000) !important; }
.bs-plans-wrap .bs-plan-free { margin: 12px auto 0; font-size: 13px; }
.bs-plans-wrap .bs-plan-km { margin: 0; text-align: center; }
@media (max-width: 900px) {
    .bs-plans-wrap .bs-plans.is-count-3, .bs-plans-wrap .bs-plans.is-count-4 { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin-left: auto; margin-right: auto; }
    .bs-plans-wrap .bs-plan { padding: 30px 24px 26px !important; }
}

/* ── 자주 묻는 질문 ───────────────────────────────────── */
.bs-pfaq .bs-head { margin-bottom: 32px; }
.bs-pfaq .bs-pfaq-sub { margin: 6px 0 0; font-size: 14.5px; color: #64748b; }
.bs-pfaq .bs-faq-item { margin: 0 0 14px !important; padding: 0 22px; background: #fff; border: 1px solid #e2e8f0 !important; border-radius: 16px !important; box-shadow: none !important; transition: border-color .15s, box-shadow .15s; }
.bs-pfaq .bs-faq-item:first-child { border-top: 1px solid #e2e8f0 !important; }
.bs-pfaq .bs-faq-item:has(.bs-faq-q[aria-expanded="true"]) { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 1px var(--bs-primary) !important; }
.bs-pfaq .bs-faq-q { padding: 20px 0; font-size: 16px; font-weight: 700; color: #1e293b; }
.bs-pfaq .bs-faq-q > span { display: none; }
.bs-pfaq .bs-faq-q i { color: #94a3b8; }
.bs-pfaq .bs-faq-a { padding: 14px 0 20px; font-size: 14.5px; line-height: 1.75; color: #475569; border-top: 1px solid #f1f5f9; }

/* ── 상세 기능 비교표 ─────────────────────────────────── */
.bs-cmp { margin: 80px 0 0; }
.bs-cmp-title { margin: 0; text-align: center; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: #0f172a; }
.bs-cmp-sub { margin: 10px 0 36px; text-align: center; font-size: 15px; color: #64748b; }
.bs-cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: #fff; border: 1px solid #e2e8f0; border-radius: 24px; box-shadow: 0 1px 3px rgba(15, 23, 42, .04); }
.bs-cmp-t { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14.5px; }
.bs-cmp-t th, .bs-cmp-t td { padding: 18px 22px; text-align: center; vertical-align: middle; border-bottom: 1px solid #f1f5f9; border-left: 0; }
.bs-cmp-t thead th { position: static; padding: 24px 18px; font-size: 15px; font-weight: 700; color: #0f172a; background: #fff; border-bottom: 1px solid #e2e8f0; }
.bs-cmp-t thead th::before { content: none !important; }
.bs-cmp-t thead th b { display: block; font-size: 16px; font-weight: 700; color: #0f172a; }
.bs-cmp-t thead th small { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 500; color: #64748b; }
.bs-cmp-t thead th em { display: inline-block; margin: 0 0 6px; padding: 2px 10px; font-size: 10.5px; font-style: normal; font-weight: 800; letter-spacing: .04em; color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 12%, #fff); border-radius: 999px; vertical-align: 0; }
.bs-cmp-t thead th.is-best b, .bs-cmp-t thead th.is-best small { color: var(--bs-primary); }
.bs-cmp-t .is-corner { width: 34%; padding-left: 28px; text-align: left; font-size: 14.5px; font-weight: 700; color: #334155; }
.bs-cmp-t .is-best { background: color-mix(in srgb, var(--bs-primary) 4%, #fff); border-left: 1px solid color-mix(in srgb, var(--bs-primary) 14%, #fff); border-right: 1px solid color-mix(in srgb, var(--bs-primary) 14%, #fff); }
.bs-cmp-t tr.is-g th { padding: 14px 28px; text-align: left; font-size: 13.5px; font-weight: 700; letter-spacing: 0; color: #334155; background: #f8fafc; border-bottom: 1px solid #eef2f6; }
.bs-cmp-t tbody th[scope="row"] { width: 34%; padding-left: 28px; text-align: left; font-size: 15px; font-weight: 500; color: #1e293b; background: #fff; }
.bs-cmp-t td { font-size: 14px; font-weight: 500; color: #334155; }
.bs-cmp-t td.is-best { font-weight: 600; color: var(--bs-primary); }
.bs-cmp-t td .ck { display: inline-block; width: 20px; height: 20px; padding: 0; vertical-align: middle; color: #10b981; background: none; border-radius: 0; }
.bs-cmp-t td .no { color: #cbd5e1; }
.bs-cmp-t tbody tr:last-child th, .bs-cmp-t tbody tr:last-child td { border-bottom: 0; }
.bs-cmp-t tfoot th, .bs-cmp-t tfoot td { padding: 20px 18px; background: #f8fafc; border-top: 1px solid #e2e8f0; border-bottom: 0; }
.bs-cmp-t tfoot th { padding-left: 28px; text-align: left; font-size: 16px; font-weight: 700; color: #0f172a; }
.bs-cmp-t tfoot td.is-best { background: color-mix(in srgb, var(--bs-primary) 6%, #f8fafc); }
.bs-cmp-go { display: inline-block; padding: 9px 18px; font-size: 13px; font-weight: 700; color: #334155; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; white-space: nowrap; }
.bs-cmp-go:hover { color: var(--bs-primary); border-color: var(--bs-primary); }
.bs-cmp-go.is-best { color: #fff; background: var(--bs-primary); border-color: var(--bs-primary); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--bs-primary) 60%, transparent); }
.bs-cmp-go.is-best:hover { color: #fff; background: color-mix(in srgb, var(--bs-primary) 86%, #000); }
@media (hover: hover) {
    .bs-cmp-t tbody tr:not(.is-g):hover th, .bs-cmp-t tbody tr:not(.is-g):hover td { background: #f8fafc; }
    .bs-cmp-t tbody tr:not(.is-g):hover td.is-best { background: color-mix(in srgb, var(--bs-primary) 7%, #fff); }
}
@media (max-width: 640px) {
    .bs-cmp { margin-top: 56px; }
    .bs-cmp-title { font-size: 23px; }
    .bs-cmp-sub { margin-bottom: 24px; font-size: 14px; }
    .bs-cmp-t th, .bs-cmp-t td { padding: 13px 10px; }
    .bs-cmp-t tbody th[scope="row"], .bs-cmp-t tr.is-g th, .bs-cmp-t .is-corner, .bs-cmp-t tfoot th { padding-left: 14px; }
}
/* 6.282.3 비교표 줄 · 묶음 앞 아이콘(lib/bizsoft.lib.php bs_compare_icon) */
.bs-cmp-t .bs-cmp-ic { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 12px; font-size: 14px; color: var(--bs-primary, #2563eb); background: color-mix(in srgb, var(--bs-primary, #2563eb) 9%, #fff); border-radius: 8px; vertical-align: middle; }
.bs-cmp-t .bs-cmp-gic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px; font-size: 12px; color: #fff; background: var(--bs-primary, #2563eb); border-radius: 6px; vertical-align: middle; }
@media (max-width: 640px) {
    .bs-cmp-t .bs-cmp-ic { width: 22px; height: 22px; margin-right: 8px; font-size: 11.5px; border-radius: 6px; }
}