@charset "utf-8";
/* =====================================================================
 * BizSoft Theme : 소규모 사업장 프로그램 판매 사이트
 * 톤 : 신뢰감 있는 블루 + 밝은 회청색 배경 / 반응형 단일 레이아웃
 * 글자 크기는 최소 12px
 * ===================================================================== */

:root {
    --bs-primary: #2f5bea;
    --bs-primary-d: #2248c8;
    --bs-primary-l: #ebf0ff;
    --bs-ink: #0f172a;
    --bs-ink-2: #334155;
    --bs-muted: #64748b;
    --bs-line: #e5e9f2;
    --bs-soft: #f5f7fb;
    --bs-bg: #ffffff;
    --bs-navy: #0b1530;
    --bs-ok: #0f9f6e;
    --bs-danger: #d93838;
    --bs-radius: 14px;
    --bs-shadow: 0 10px 30px rgba(15, 23, 42, .06);
    --bs-shadow-lg: 0 24px 60px rgba(15, 23, 42, .12);
    --bs-header-h: 72px;
    --bs-max: 1200px;
    --bs-side: 24px;
    --bs-font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

/* ---------- 기본 ---------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bs-header-h) + 16px); }
body {
    margin: 0; font-family: var(--bs-font); font-size: 16px; line-height: 1.6; color: var(--bs-ink);
    background: var(--bs-bg); word-break: keep-all; overflow-x: clip;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, input, button, textarea, select { font-family: var(--bs-font); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
button { cursor: pointer; }
.sound_only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#hd_login_msg { position: absolute; top: -9999px; left: -9999px; }
.bs-skip { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; color: #fff; background: var(--bs-primary); border-radius: 8px; }
.bs-skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }

.bs-wrap { max-width: var(--bs-max); margin: 0 auto; padding: 0 var(--bs-side); }
.bs-narrow { max-width: 820px; }
.bs-center { text-align: center; }
.bs-muted { color: var(--bs-muted); font-size: 14px; }
.bs-muted.is-sm { font-size: 13px; }
.bs-muted a, .bs-empty a { color: var(--bs-primary); text-decoration: underline; }
.bs-empty { padding: 40px 0; text-align: center; color: var(--bs-muted); }
.bs-error { margin: 0 0 12px; font-size: 14px; color: var(--bs-danger); }

/* 그누보드 기본 레이아웃 무력화 */
#container.bs-container { float: none; width: auto; min-height: 50vh; max-width: var(--bs-max); margin: 0 auto; padding: 40px var(--bs-side) 80px; font-size: 14px; box-sizing: border-box; }
#container.bs-container.is-full { max-width: none; padding: 0; }
#container_title { display: none; }

/* ---------- 버튼 ---------- */
.bs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; padding: 0 22px; font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap;
    border: 1px solid transparent; border-radius: 10px; transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.bs-btn-sm { height: 38px; padding: 0 16px; font-size: 14px; border-radius: 9px; }
.bs-btn-lg { height: 56px; padding: 0 28px; font-size: 16px; border-radius: 12px; }
.bs-btn-block { display: flex; width: 100%; }
.bs-btn-primary { color: #fff; background: var(--bs-primary); box-shadow: 0 6px 16px rgba(47, 91, 234, .25); }
.bs-btn-primary:hover { background: var(--bs-primary-d); transform: translateY(-1px); }
.bs-btn-line { color: var(--bs-primary); background: #fff; border-color: #c9d5fb; }
.bs-btn-line:hover { border-color: var(--bs-primary); background: var(--bs-primary-l); }
.bs-btn-ghost { color: var(--bs-ink); background: #fff; border-color: var(--bs-line); }
.bs-btn-ghost:hover { border-color: #b8c2d6; }
.bs-btn-white { color: var(--bs-primary); background: #fff; }
.bs-btn-white:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.bs-btn-outline-white { color: #fff; border-color: rgba(255,255,255,.6); }
.bs-btn-outline-white:hover { background: rgba(255,255,255,.12); }
.bs-btn-kakao { margin-top: 10px; color: #191919; background: #fee500; }
.bs-btn:disabled { opacity: .6; cursor: default; transform: none; }
.bs-link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--bs-primary); }
.bs-link:hover i { transform: translateX(3px); }
.bs-link i { transition: transform .2s; }

/* ---------- 헤더 ---------- */
#bs-header {
    position: sticky; top: 0; z-index: 900; height: var(--bs-header-h);
    background: rgba(255, 255, 255, .97); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
#bs-header.is-scrolled { border-bottom-color: var(--bs-line); box-shadow: 0 4px 20px rgba(15, 23, 42, .05); }
.bs-header-inner { display: flex; align-items: center; gap: 36px; max-width: var(--bs-max); height: 100%; margin: 0 auto; padding: 0 var(--bs-side); }
.bs-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--bs-ink); }
.bs-logo-mark {
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    font-size: 17px; font-weight: 800; color: #fff; border-radius: 10px;
    background: linear-gradient(135deg, #4b7bff, var(--bs-primary) 55%, #1d3fb8);
    box-shadow: 0 6px 14px rgba(47, 91, 234, .3);
}
.bs-logo.is-light { color: #fff; }
.bs-logo-mark svg { display: block; width: 26px; height: 26px; }
.bs-logo-text { letter-spacing: .06em; }
.bs-gnb { flex: 1; }
.bs-gnb ul { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bs-gnb a { display: block; padding: 8px 14px; font-size: 16px; font-weight: 600; color: var(--bs-ink-2); border-radius: 8px; transition: background .2s, color .2s; }
.bs-gnb a:hover { color: var(--bs-ink); background: var(--bs-soft); }
.bs-gnb li.is-active a { color: var(--bs-primary); }
.bs-util { display: flex; align-items: center; gap: 8px; }
.bs-util-link { padding: 6px 8px; font-size: 14px; color: var(--bs-muted); }
.bs-util-link:hover { color: var(--bs-ink); }
.bs-burger { display: none; width: 44px; height: 44px; margin-left: auto; padding: 0; background: none; border: 0; }
.bs-burger span { display: block; width: 22px; height: 2px; margin: 5px auto; background: var(--bs-ink); border-radius: 2px; }

/* 전체 메뉴 (모바일) */
.bs-drawer { position: fixed; inset: 0; z-index: 1000; visibility: hidden; background: rgba(15, 23, 42, 0); transition: background .3s, visibility .3s; }
.bs-drawer.is-open { visibility: visible; background: rgba(15, 23, 42, .45); }
.bs-drawer-panel {
    position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 20px;
    width: min(360px, 88vw); padding: 20px 22px 28px; overflow-y: auto; background: #fff;
    transform: translateX(100%); transition: transform .3s ease;
}
.bs-drawer.is-open .bs-drawer-panel { transform: none; }
.bs-drawer-head { display: flex; align-items: center; justify-content: space-between; }
.bs-drawer-close { width: 40px; height: 40px; font-size: 20px; color: var(--bs-ink-2); background: var(--bs-soft); border: 0; border-radius: 10px; }
.bs-drawer-nav { margin: 0; padding: 0; list-style: none; }
.bs-drawer-nav a { display: block; padding: 14px 4px; font-size: 18px; font-weight: 700; border-bottom: 1px solid var(--bs-line); }
.bs-drawer-nav li.is-active a { color: var(--bs-primary); }
.bs-drawer-cta { display: grid; gap: 8px; }
.bs-drawer-util { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--bs-muted); }
.bs-drawer-call { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 14px 16px; font-size: 14px; background: var(--bs-soft); border-radius: 12px; }
.bs-drawer-call b { display: block; font-size: 18px; color: var(--bs-ink); }
.bs-drawer-call i { font-size: 20px; color: var(--bs-primary); }
body.is-drawer-open { overflow: hidden; }

/* ---------- 공통 구역 ---------- */
.bs-section { padding: 96px 0; }
.bs-section.is-tight { padding: 56px 0; }
.bs-section-soft { background: var(--bs-soft); }
.bs-head { margin-bottom: 40px; }
.bs-head.is-center { text-align: center; }
.bs-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.bs-eyebrow { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-primary); }
.bs-title { margin: 0; font-size: 36px; font-weight: 800; line-height: 1.3; letter-spacing: -.02em; }
.bs-title.is-sm { font-size: 24px; }
.bs-lead { max-width: 640px; margin: 14px auto 0; font-size: 17px; color: var(--bs-muted); }
.bs-head:not(.is-center) .bs-lead { margin-left: 0; }
.bs-badge {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 7px 14px;
    font-size: 14px; font-weight: 600; color: var(--bs-primary); background: var(--bs-primary-l); border-radius: 999px;
}
.bs-ico {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px;
    font-size: 21px; color: var(--c, var(--bs-primary)); border-radius: 12px;
    background: color-mix(in srgb, var(--c, var(--bs-primary)) 12%, #fff);
}
.bs-ico.is-lg { width: 64px; height: 64px; font-size: 28px; border-radius: 16px; }

/* 서브 상단 제목 */
.bs-pagehead { padding: 64px 0 56px; text-align: center; background: linear-gradient(180deg, #f3f6fd 0%, #fff 100%); border-bottom: 1px solid var(--bs-line); }
.bs-pagehead-title { margin: 0; font-size: 40px; font-weight: 800; letter-spacing: -.02em; }
.bs-pagehead-desc { max-width: 640px; margin: 12px auto 0; font-size: 17px; color: var(--bs-muted); }

/* ---------- 메인 : 히어로 ---------- */
.bs-hero {
    position: relative; overflow: hidden; padding: 64px 0 56px;
    background: radial-gradient(ellipse 60% 70% at 85% 30%, rgba(47, 91, 234, .12), transparent 70%),
                radial-gradient(ellipse 40% 50% at 5% 90%, rgba(15, 159, 143, .08), transparent 70%),
                linear-gradient(180deg, #f4f7fe 0%, #fff 100%);
}
.bs-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.bs-hero-title { margin: 0; font-size: 52px; font-weight: 800; line-height: 1.22; letter-spacing: -.03em; }
.bs-hero-title em { font-style: normal; color: var(--bs-primary); }
.bs-hero-text { max-width: 520px; margin: 22px 0 0; font-size: 18px; line-height: 1.75; color: var(--bs-ink-2); }
.bs-hero-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.bs-hero-trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--bs-muted); }
.bs-hero-trust i { margin-right: 4px; color: var(--bs-ok); }

/* 프로그램 화면 예시 (CSS 그림) */
.bs-hero-visual { position: relative; padding: 24px 0 24px 24px; }
.bs-mock { overflow: hidden; background: #fff; border: 1px solid var(--bs-line); border-radius: 18px; box-shadow: var(--bs-shadow-lg); }
.bs-mock-bar { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; background: #f7f9fc; border-bottom: 1px solid var(--bs-line); }
.bs-mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff6159; }
.bs-mock-bar i:nth-child(2) { background: #ffbd2e; }
.bs-mock-bar i:nth-child(3) { background: #28c940; }
.bs-mock-bar span { margin-left: 10px; font-size: 13px; font-weight: 600; color: var(--bs-muted); }
.bs-mock-body { display: flex; min-height: 340px; }
.bs-mock-side { display: flex; flex-direction: column; gap: 8px; padding: 14px 10px; background: var(--bs-navy); }
.bs-mock-side span { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 15px; color: rgba(255,255,255,.55); border-radius: 9px; }
.bs-mock-side span.is-on { color: #fff; background: var(--c, var(--bs-primary)); }
.bs-mock-main { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 18px; min-width: 0; }
.bs-mock-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bs-mock-cards div { padding: 12px; background: var(--bs-soft); border-radius: 10px; }
.bs-mock-cards small, .bs-mock-chart small { display: block; font-size: 12px; color: var(--bs-muted); }
.bs-mock-cards b { display: block; margin-top: 2px; font-size: 17px; letter-spacing: -.02em; white-space: nowrap; }
.bs-mock-cards em { font-size: 12px; font-style: normal; color: var(--bs-muted); }
.bs-mock-cards em.up { color: var(--bs-ok); }
.bs-mock-chart { padding: 12px 12px 10px; border: 1px solid var(--bs-line); border-radius: 10px; }
.bs-mock-bars { display: flex; align-items: flex-end; gap: 6px; height: 100px; margin-top: 8px; }
.bs-mock-bars span {
    flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c, var(--bs-primary)) 90%, #fff), color-mix(in srgb, var(--c, var(--bs-primary)) 45%, #fff));
    transform-origin: bottom; animation: bs-grow 1.2s cubic-bezier(.2,.7,.2,1) both;
}
.bs-mock-bars span:nth-child(odd) { animation-delay: .1s; }
@keyframes bs-grow { from { transform: scaleY(0); } }
.bs-mock-list { display: grid; gap: 6px; }
.bs-mock-list div { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 13px; background: #fff; border: 1px solid var(--bs-line); border-radius: 9px; }
.bs-mock-list i { color: var(--bs-primary); }
.bs-mock-list span { flex: 1; color: var(--bs-ink-2); }
.bs-mock-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; font-size: 13px; background: var(--bs-soft); border-radius: 9px; }
.bs-mock-row i { color: var(--c, var(--bs-primary)); }
.bs-mock-row span { flex: none; font-weight: 600; }
.bs-mock-row em { flex: 1; height: 6px; max-width: var(--w); margin-left: auto; background: color-mix(in srgb, var(--c, var(--bs-primary)) 25%, #fff); border-radius: 3px; }
.bs-float {
    position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 13px;
    background: #fff; border: 1px solid var(--bs-line); border-radius: 14px; box-shadow: var(--bs-shadow-lg);
    animation: bs-float 5s ease-in-out infinite;
}
.bs-float i { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }
.bs-float b { display: block; font-size: 14px; }
.bs-float small { color: var(--bs-muted); }
.bs-float-a { left: -8px; bottom: 36px; }
.bs-float-a i { color: var(--bs-ok); background: #e3f6ef; }
.bs-float-b { right: -12px; top: 2px; animation-delay: -2.5s; }
.bs-float-b i { color: #e8850c; background: #fff2df; }
@keyframes bs-float { 50% { transform: translateY(-8px); } }

/* ---------- 메인 배경 꾸밈 ---------- */
.bs-hero {
    isolation: isolate;
    background: radial-gradient(ellipse 45% 60% at 88% 18%, rgba(124, 77, 255, .18), transparent 70%),
                radial-gradient(ellipse 55% 70% at 70% 45%, rgba(47, 91, 234, .20), transparent 70%),
                radial-gradient(ellipse 40% 55% at 2% 95%, rgba(15, 159, 143, .14), transparent 70%),
                linear-gradient(180deg, #eef3ff 0%, #f7f9ff 55%, #fff 100%);
}
.bs-hero::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(47, 91, 234, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 91, 234, .08) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 65% 70% at 72% 38%, #000 25%, transparent 75%);
            mask-image: radial-gradient(ellipse 65% 70% at 72% 38%, #000 25%, transparent 75%);
}
.bs-hero::after {
    content: ''; position: absolute; z-index: -1; right: -140px; top: -160px; width: 560px; height: 560px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(91, 134, 255, .35), rgba(124, 77, 255, .12) 45%, transparent 70%);
    animation: bs-drift 16s ease-in-out infinite alternate;
}
@keyframes bs-drift { to { transform: translate(-80px, 60px) scale(1.12); } }

.bs-bg { position: relative; isolation: isolate; overflow: hidden; }
.bs-bg::before, .bs-bg::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }

/* 제품 : 점무늬 + 청록 빛 */
.bs-bg-dots { background: linear-gradient(180deg, #fff 0%, #f8faff 100%); }
.bs-bg-dots::before {
    top: 0; right: 0; width: 460px; height: 460px;
    background-image: radial-gradient(rgba(47, 91, 234, .22) 1.5px, transparent 1.6px); background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(circle at 100% 0, #000 10%, transparent 70%); mask-image: radial-gradient(circle at 100% 0, #000 10%, transparent 70%);
}
.bs-bg-dots::after { left: -180px; bottom: -200px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(15, 159, 143, .14), transparent 65%); }

/* 장점 : 짙은 남색 + 빛 번짐 (화면의 대비 포인트) */
.bs-bg-dark {
    color: #fff;
    background: radial-gradient(ellipse 55% 75% at 8% 0%, rgba(47, 91, 234, .55), transparent 62%),
                radial-gradient(ellipse 45% 65% at 100% 100%, rgba(124, 77, 255, .40), transparent 62%),
                linear-gradient(160deg, #0b1530 0%, #101d45 100%);
}
.bs-bg-dark::before {
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 20%, transparent 75%);
}
.bs-bg-dark .bs-eyebrow { color: #9db6ff; }
.bs-bg-dark .bs-title { color: #fff; }
.bs-bg-dark .bs-benefits li { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 20px 40px rgba(0, 0, 0, .2); transition: transform .25s, background .25s; }
.bs-bg-dark .bs-benefits li:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .1); }
.bs-bg-dark .bs-benefits h3 { color: #fff; }
.bs-bg-dark .bs-benefits p { color: rgba(255, 255, 255, .7); }
.bs-bg-dark .bs-ico { color: #fff; background: var(--c); box-shadow: 0 8px 20px color-mix(in srgb, var(--c) 45%, transparent); }

/* 도입 절차 : 비스듬한 색 띠 */
.bs-bg-wave { background: linear-gradient(180deg, #fff 0%, #f4f8ff 100%); }
.bs-bg-wave::before {
    left: 0; right: 0; top: 46%; height: 300px;
    background: linear-gradient(90deg, rgba(47, 91, 234, .10), rgba(124, 77, 255, .07) 50%, rgba(15, 159, 143, .10));
    clip-path: polygon(0 28%, 100% 0, 100% 72%, 0 100%);
}
.bs-bg-wave .bs-steps li { padding: 0 8px 8px; }

/* 도입 사례 : 파랑·보라 그라데이션 + 큰 따옴표 */
.bs-bg-quote { background: linear-gradient(160deg, #eaf0ff 0%, #f3efff 55%, #f8faff 100%); }
.bs-bg-quote::before {
    content: '\201C'; top: 24px; left: 4%; font-family: Georgia, serif; font-size: 460px; line-height: 1; color: rgba(47, 91, 234, .09);
}
.bs-bg-quote::after { right: -160px; top: -160px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 77, 255, .16), transparent 65%); }
.bs-bg-quote .bs-review { border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 16px 40px rgba(47, 91, 234, .10); }

/* 자주 묻는 질문 : 점무늬 */
.bs-bg-faq { background: #fff; }
.bs-bg-faq::before {
    left: 0; bottom: 0; width: 420px; height: 420px;
    background-image: radial-gradient(rgba(124, 77, 255, .18) 1.5px, transparent 1.6px); background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(circle at 0 100%, #000 10%, transparent 70%); mask-image: radial-gradient(circle at 0 100%, #000 10%, transparent 70%);
}

/* 마무리 CTA : 동그라미 장식 */
.bs-cta-inner { position: relative; isolation: isolate; overflow: hidden; }
.bs-cta-inner::before, .bs-cta-inner::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); pointer-events: none; }
.bs-cta-inner::before { right: -80px; top: -120px; width: 360px; height: 360px; box-shadow: 0 0 0 40px rgba(255, 255, 255, .05), 0 0 0 80px rgba(255, 255, 255, .03); }
.bs-cta-inner::after { left: 30%; bottom: -140px; width: 220px; height: 220px; background: rgba(255, 255, 255, .06); }

/* 숫자 */
.bs-stats { position: relative; z-index: 2; margin-top: 48px; }
.bs-stats ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 28px 12px; list-style: none; background: #fff; border: 1px solid var(--bs-line); border-radius: 18px; box-shadow: var(--bs-shadow); }
.bs-stats li { text-align: center; }
.bs-stats li + li { border-left: 1px solid var(--bs-line); }
.bs-stats b { display: block; font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--bs-primary); }
.bs-stats span { font-size: 14px; color: var(--bs-muted); }

/* ---------- 업종 칩 / 제품 카드 ---------- */
.bs-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 32px; }
.bs-chip {
    height: 40px; padding: 0 18px; font-size: 15px; font-weight: 600; color: var(--bs-ink-2);
    background: #fff; border: 1px solid var(--bs-line); border-radius: 999px; transition: all .2s;
}
.bs-chip:hover { border-color: #b8c2d6; }
.bs-chip.is-on { color: #fff; background: var(--bs-ink); border-color: var(--bs-ink); }
.bs-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 32px; }
.bs-product-card {
    position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px;
    background: #fff; border: 1px solid var(--bs-line); border-radius: var(--bs-radius);
    transition: transform .25s, box-shadow .25s, border-color .25s, opacity .25s;
}
.bs-product-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 40%, #fff); box-shadow: var(--bs-shadow-lg); }
.bs-product-card.is-hidden { display: none; }
.bs-product-card .bs-ico { margin-bottom: 6px; }
.bs-product-card h3 { margin: 0; font-size: 20px; font-weight: 700; }
.bs-product-card p { margin: 0; font-size: 15px; color: var(--bs-muted); }
.bs-tag-best { position: absolute; top: 20px; right: 20px; padding: 3px 10px; font-size: 12px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); border-radius: 999px; }
.bs-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.bs-tags li { padding: 2px 9px; font-size: 12px; color: var(--bs-ink-2); background: var(--bs-soft); border-radius: 6px; }
.bs-product-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--bs-line); font-size: 14px; }
.bs-product-price { color: var(--bs-muted); }
.bs-product-price b { font-size: 17px; color: var(--bs-ink); }
.bs-product-more { font-weight: 700; color: var(--c); }
.bs-product-card:hover .bs-product-more i { transform: translateX(3px); }
.bs-product-more i { transition: transform .2s; }
.bs-product-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 장점 · 절차 */
.bs-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.bs-benefits li { padding: 28px 24px; background: #fff; border-radius: var(--bs-radius); box-shadow: var(--bs-shadow); }
.bs-benefits h3 { margin: 18px 0 8px; font-size: 19px; }
.bs-benefits p { margin: 0; font-size: 15px; color: var(--bs-muted); }
.bs-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.bs-steps::before { content: ''; position: absolute; top: 27px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, #c9d5fb 0 8px, transparent 8px 16px); }
.bs-steps li { position: relative; text-align: center; }
.bs-steps em {
    display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
    font-size: 17px; font-style: normal; font-weight: 800; color: #fff; background: var(--bs-primary);
    border: 6px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #c9d5fb;
}
.bs-steps h3 { margin: 16px 0 6px; font-size: 19px; }
.bs-steps p { max-width: 240px; margin: 0 auto; font-size: 15px; color: var(--bs-muted); }

/* 후기 */
.bs-reviews { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.bs-review { display: flex; flex-direction: column; margin: 0; padding: 26px 24px; background: #fff; border-radius: var(--bs-radius); box-shadow: var(--bs-shadow); }
.bs-stars { color: #ffb020; font-size: 14px; letter-spacing: 2px; }
.bs-review blockquote { flex: 1; margin: 14px 0 20px; font-size: 16px; line-height: 1.7; color: var(--bs-ink-2); }
.bs-review figcaption { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; }
.bs-avatar { grid-row: span 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-weight: 700; color: var(--bs-primary); background: var(--bs-primary-l); border-radius: 50%; }
.bs-review figcaption b { font-size: 15px; }
.bs-review figcaption small { font-size: 13px; color: var(--bs-muted); }

/* FAQ */
.bs-faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 56px; align-items: start; }
.bs-faq-side .bs-lead { margin: 12px 0 18px; }
.bs-faq-item { border-bottom: 1px solid var(--bs-line); }
.bs-faq-item:first-child { border-top: 1px solid var(--bs-ink); }
.bs-faq-q {
    display: flex; align-items: center; gap: 14px; width: 100%; padding: 22px 4px; font-size: 17px; font-weight: 600;
    text-align: left; color: var(--bs-ink); background: none; border: 0;
}
.bs-faq-q span { flex: none; font-weight: 800; color: var(--bs-primary); }
.bs-faq-q i { margin-left: auto; font-size: 20px; color: var(--bs-muted); transition: transform .25s; }
.bs-faq-q[aria-expanded="true"] i { transform: rotate(180deg); }
.bs-faq-a { padding: 0 4px 22px 34px; font-size: 15px; line-height: 1.75; color: var(--bs-ink-2); }
.bs-notice-mini { margin-top: 36px; padding: 20px; background: var(--bs-soft); border-radius: var(--bs-radius); }
.bs-notice-mini h3 { margin: 0 0 8px; font-size: 15px; }
.bs-notice-mini ul, .bs-notice-list { margin: 0; padding: 0; list-style: none; }
.bs-notice-mini a, .bs-notice-list a { display: flex; gap: 12px; padding: 8px 0; font-size: 14px; }
.bs-notice-mini a span, .bs-notice-list a span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-notice-mini a:hover span, .bs-notice-list a:hover span { color: var(--bs-primary); }
.bs-notice-mini time, .bs-notice-list time { flex: none; font-size: 13px; color: var(--bs-muted); }

/* 마무리 CTA */
.bs-cta { padding: 0 0 96px; }
.bs-cta-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 52px 56px; color: #fff;
    background: radial-gradient(ellipse at 90% 0%, rgba(255,255,255,.2), transparent 55%), linear-gradient(120deg, #2451e6, #3a6bff 60%, #5b86ff);
    border-radius: 24px; box-shadow: 0 24px 60px rgba(47, 91, 234, .3);
}
.bs-cta h2 { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.35; letter-spacing: -.02em; }
.bs-cta p { margin: 10px 0 0; font-size: 16px; color: rgba(255,255,255,.85); }
.bs-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }

/* ---------- 제품 상세 ---------- */
.bs-phero {
    padding: 48px 0 88px;
    background: radial-gradient(ellipse 60% 80% at 90% 20%, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--c) 5%, #fff), #fff);
}
.bs-phero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.bs-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 28px; font-size: 14px; color: var(--bs-muted); }
.bs-back:hover { color: var(--bs-ink); }
.bs-admin-note { margin: 0 0 12px; padding: 6px 12px; font-size: 13px; color: #8a5a00; background: #fff4e0; border-radius: 8px; }
.bs-phero h1 { margin: 20px 0 0; font-size: 44px; font-weight: 800; letter-spacing: -.02em; }
.bs-phero-tagline { margin: 8px 0 0; font-size: 20px; font-weight: 600; color: var(--c); }
.bs-phero-text { margin: 18px 0 0; font-size: 17px; line-height: 1.75; color: var(--bs-ink-2); }
.bs-points { display: grid; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 15px; font-weight: 600; }
.bs-points i { margin-right: 6px; color: var(--c); }
.bs-phero .bs-btn-primary { background: var(--c); box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 35%, transparent); }
.bs-phero .bs-btn-primary:hover { background: color-mix(in srgb, var(--c) 85%, #000); }
.bs-phero-inds { margin: 22px 0 0; font-size: 14px; color: var(--bs-muted); }
.bs-shot { overflow: hidden; border: 1px solid var(--bs-line); border-radius: 18px; box-shadow: var(--bs-shadow-lg); }
.bs-shot img { display: block; width: 100%; height: auto; }
.bs-mock.is-product .bs-mock-main { gap: 10px; }
.bs-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.bs-features li { padding: 26px 24px; background: #fff; border: 1px solid var(--bs-line); border-radius: var(--bs-radius); }
.bs-feat-ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 15px; color: #fff; background: var(--c); border-radius: 10px; }
.bs-features h3 { margin: 16px 0 6px; font-size: 18px; }
.bs-features p { margin: 0; font-size: 15px; color: var(--bs-muted); }

/* ---------- 요금제 ---------- */
.bs-billing { display: flex; width: max-content; margin: 0 auto 32px; padding: 5px; background: #fff; border: 1px solid var(--bs-line); border-radius: 12px; }
.bs-billing button { height: 40px; padding: 0 20px; font-size: 15px; font-weight: 600; color: var(--bs-muted); background: none; border: 0; border-radius: 8px; transition: all .2s; }
.bs-billing button.is-on { color: #fff; background: var(--bs-ink); }
.bs-billing em { margin-left: 4px; font-size: 12px; font-style: normal; color: var(--bs-ok); }
.bs-billing button.is-on em { color: #7ee2b8; }
.bs-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.bs-plans.is-count-1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.bs-plans.is-count-2 { grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: center; }
.bs-plans.is-count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bs-plan { position: relative; display: flex; flex-direction: column; padding: 32px 28px; background: #fff; border: 1px solid var(--bs-line); border-radius: 18px; }
.bs-plan.is-best { border: 2px solid var(--bs-primary); box-shadow: 0 20px 50px rgba(47, 91, 234, .15); }
.bs-plan-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 5px 14px; font-size: 13px; font-weight: 700; color: #fff; background: var(--bs-primary); border-radius: 999px; white-space: nowrap; }
.bs-plan h3 { margin: 0; font-size: 20px; }
.bs-plan-sum { min-height: 48px; margin: 6px 0 0; font-size: 14px; color: var(--bs-muted); }
.bs-plan-price { margin: 18px 0 2px; font-size: 16px; color: var(--bs-muted); }
.bs-plan-price b { font-size: 38px; font-weight: 800; letter-spacing: -.02em; color: var(--bs-ink); }
.bs-plan-price b.is-text { font-size: 30px; }
.bs-plan-price del { display: block; font-size: 14px; color: #a0a9b8; }
.bs-plan-price small { font-size: 15px; }
.bs-plan-note { min-height: 21px; margin: 0 0 20px; font-size: 13px; color: var(--bs-muted); }
.bs-plan-items { display: grid; gap: 10px; margin: 24px 0 0; padding: 22px 0 0; list-style: none; font-size: 15px; border-top: 1px solid var(--bs-line); }
.bs-plan-items i { margin-right: 6px; color: var(--bs-primary); }
.bs-plans-wrap .bs-price-y { display: none; }
.bs-plans-wrap[data-billing="year"] .bs-price-m { display: none; }
.bs-plans-wrap[data-billing="year"] .bs-price-y { display: inline; }
.bs-plans-wrap[data-billing="year"] .bs-plan-price .bs-price-y { display: block; }
.bs-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 36px; }
.bs-tabs a {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; font-size: 15px; font-weight: 600;
    color: var(--bs-ink-2); background: #fff; border: 1px solid var(--bs-line); border-radius: 12px; transition: all .2s;
}
.bs-tabs a i { color: var(--c); }
.bs-tabs a:hover { border-color: #b8c2d6; }
.bs-tabs a.is-on { color: #fff; background: var(--c); border-color: var(--c); }
.bs-tabs a.is-on i { color: #fff; }
.bs-pricing-head { margin-bottom: 28px; text-align: center; }
.bs-pricing-head h2 { margin: 0; font-size: 28px; font-weight: 800; }
.bs-pricing-head p { margin: 6px 0 0; color: var(--bs-muted); }
.bs-pricing-head a { color: var(--bs-primary); text-decoration: underline; }
.bs-pricing-notes { display: grid; gap: 6px; max-width: 820px; margin: 40px auto 0; padding: 20px 24px; list-style: none; font-size: 14px; color: var(--bs-muted); background: var(--bs-soft); border-radius: 12px; }
.bs-pricing-notes i { margin-right: 6px; color: #94a3b8; }
.bs-help-box { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.bs-help-box h2 { margin: 0; font-size: 22px; }
.bs-help-box p { margin: 6px 0 0; color: var(--bs-muted); }
.bs-help-btns { display: flex; gap: 8px; flex: none; }

/* ---------- 문의 폼 ---------- */
.bs-inq { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.bs-form { padding: 36px; background: #fff; border: 1px solid var(--bs-line); border-radius: 18px; box-shadow: var(--bs-shadow); }
.bs-fieldset { margin: 0 0 32px; padding: 0; border: 0; }
/* g5base.css 가 legend 를 숨기므로 되살림 */
.bs-fieldset legend { position: static; float: left; width: 100%; padding: 0; margin: 0 0 14px; font-size: 18px; font-weight: 700; line-height: 1.4; text-indent: 0; overflow: visible; }
.bs-fieldset legend + * { clear: both; }
.bs-fieldset legend.sound_only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bs-fieldset legend small { font-size: 13px; font-weight: 400; color: var(--bs-muted); }
.bs-type-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bs-type input, .bs-check input, .bs-seg input { position: absolute; opacity: 0; pointer-events: none; }
.bs-type span {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 8px; font-size: 14px; font-weight: 600; text-align: center;
    border: 1px solid var(--bs-line); border-radius: 12px; cursor: pointer; transition: all .2s;
}
.bs-type span i { font-size: 22px; color: #94a3b8; }
.bs-type input:checked + span { color: var(--bs-primary); background: var(--bs-primary-l); border-color: var(--bs-primary); box-shadow: 0 0 0 1px var(--bs-primary); }
.bs-type input:checked + span i { color: var(--bs-primary); }
.bs-type input:focus-visible + span, .bs-check input:focus-visible + span, .bs-seg input:focus-visible + span { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.bs-check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bs-check span {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: 14px; font-weight: 600;
    border: 1px solid var(--bs-line); border-radius: 10px; cursor: pointer; transition: all .2s;
}
.bs-check span::after { content: '\f00c'; font-family: FontAwesome; margin-left: auto; font-size: 12px; color: transparent; }
.bs-check input:checked + span { background: var(--bs-primary-l); border-color: var(--bs-primary); }
.bs-check input:checked + span::after { color: var(--bs-primary); }
.bs-row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bs-field { margin-bottom: 16px; }
.bs-field > label, .bs-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--bs-ink-2); }
.bs-field em { font-style: normal; color: var(--bs-danger); }
.bs-field small { font-weight: 400; color: var(--bs-muted); }
.bs-input {
    width: 100%; height: 48px; padding: 0 14px; font-size: 15px; color: var(--bs-ink);
    background: #fff; border: 1px solid #d5dbe7; border-radius: 10px; box-sizing: border-box; transition: border-color .2s, box-shadow .2s;
}
textarea.bs-input { height: auto; padding: 12px 14px; line-height: 1.6; resize: vertical; }
.bs-input:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(47, 91, 234, .15); outline: 0; }
.bs-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.bs-seg span { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; font-size: 14px; border: 1px solid var(--bs-line); border-radius: 999px; cursor: pointer; }
.bs-seg input:checked + span { color: #fff; background: var(--bs-ink); border-color: var(--bs-ink); }
.bs-form-help { margin: 10px 0 0; font-size: 14px; color: var(--bs-muted); }
.bs-agree { padding: 18px; background: var(--bs-soft); border-radius: 12px; }
.bs-check-line { display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.bs-check-line input { width: 18px; height: 18px; accent-color: var(--bs-primary); }
.bs-check-line b { color: var(--bs-primary); }
.bs-agree p { margin: 10px 0 0 26px; font-size: 13px; line-height: 1.7; color: var(--bs-muted); }
.bs-captcha { margin-top: 16px; }
.bs-captcha #captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bs-captcha #captcha legend { display: none; }
.bs-captcha #captcha_key { height: 40px; padding: 0 10px; font-size: 15px; border: 1px solid #d5dbe7; border-radius: 8px; }
.bs-inq-side { display: grid; gap: 16px; position: sticky; top: calc(var(--bs-header-h) + 20px); }
.bs-card { padding: 24px; background: #fff; border: 1px solid var(--bs-line); border-radius: var(--bs-radius); }
.bs-card h2 { margin: 0 0 12px; font-size: 18px; }
.bs-inq-call { display: flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 800; color: var(--bs-primary); }
.bs-mini-steps { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; font-size: 14px; color: var(--bs-ink-2); }
.bs-mini-steps b { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px; font-size: 12px; color: var(--bs-primary); background: var(--bs-primary-l); border-radius: 50%; }

/* 접수 완료 */
.bs-done { max-width: 560px; margin: 0 auto; padding: 72px var(--bs-side) 96px; text-align: center; }
.bs-done-icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; font-size: 30px; color: #fff; background: var(--bs-ok); border-radius: 50%; box-shadow: 0 12px 30px rgba(15, 159, 110, .3); }
.bs-done h1 { margin: 24px 0 8px; font-size: 30px; }
.bs-done > p { color: var(--bs-ink-2); }
.bs-done-info { display: grid; gap: 0; margin: 28px 0 16px; padding: 8px 20px; text-align: left; background: var(--bs-soft); border-radius: 14px; }
.bs-done-info div, .bs-iq dl div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 0; font-size: 15px; }
.bs-done-info div + div, .bs-iq dl div + div { border-top: 1px solid var(--bs-line); }
.bs-done-info dt, .bs-iq dt { color: var(--bs-muted); }
.bs-done-info dd, .bs-iq dd { margin: 0; }
.bs-no { font-size: 18px; letter-spacing: .04em; color: var(--bs-primary); }
.bs-done-btns { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }

/* 문의 내역 */
.bs-iq { margin-bottom: 12px; background: #fff; border: 1px solid var(--bs-line); border-radius: var(--bs-radius); }
.bs-iq summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 18px 20px; list-style: none; cursor: pointer; }
.bs-iq summary::-webkit-details-marker { display: none; }
.bs-iq summary b { font-size: 16px; }
.bs-iq-meta { font-size: 13px; color: var(--bs-muted); }
.bs-iq summary i { margin-left: auto; font-size: 18px; color: var(--bs-muted); transition: transform .2s; }
.bs-iq[open] summary i { transform: rotate(180deg); }
.bs-iq dl { margin: 0; padding: 0 20px 8px; border-top: 1px solid var(--bs-line); }
.bs-iq dd.is-pre { white-space: pre-line; }
.bs-st { display: inline-block; padding: 3px 10px; font-size: 12px; font-weight: 700; border-radius: 999px; }
.bs-st.st-new { color: #9a6400; background: #fff4e0; }
.bs-st.st-talk { color: var(--bs-primary); background: var(--bs-primary-l); }
.bs-st.st-quote { color: #7c4dff; background: #f1ebff; }
.bs-st.st-done { color: var(--bs-ok); background: #e3f6ef; }
.bs-st.st-hold { color: #b45309; background: #fdf0e6; }
.bs-st.st-end { color: #64748b; background: #eef1f6; }
.bs-progress { display: flex; margin: 8px 20px 20px; padding: 0; list-style: none; }
.bs-progress li { position: relative; flex: 1; padding-top: 22px; font-size: 12px; text-align: center; color: var(--bs-muted); }
.bs-progress li span { position: absolute; top: 4px; left: 50%; width: 12px; height: 12px; margin-left: -6px; background: #fff; border: 2px solid #cbd3e1; border-radius: 50%; z-index: 1; }
.bs-progress li + li::before { content: ''; position: absolute; top: 9px; right: 50%; width: 100%; height: 2px; background: #e2e7f0; }
.bs-progress li.is-done { font-weight: 700; color: var(--bs-ink); }
.bs-progress li.is-done span { background: var(--bs-primary); border-color: var(--bs-primary); }
.bs-progress li.is-done + li.is-done::before { background: var(--bs-primary); }
.bs-lookup { margin-top: 28px; }
.bs-lookup-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin: 14px 0 10px; }

/* ---------- 고객지원 ---------- */
.bs-support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.bs-support-card { display: flex; flex-direction: column; gap: 4px; padding: 26px 24px; background: #fff; border: 1px solid var(--bs-line); border-radius: var(--bs-radius); transition: transform .2s, box-shadow .2s; }
.bs-support-card:hover { transform: translateY(-3px); box-shadow: var(--bs-shadow-lg); }
.bs-support-card h2 { margin: 16px 0 0; font-size: 15px; color: var(--bs-muted); }
.bs-support-card b { font-size: 20px; }
.bs-support-card p { margin: 4px 0 0; font-size: 14px; color: var(--bs-muted); }
.bs-support-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; }
.bs-notice-list li { border-bottom: 1px solid var(--bs-line); }
.bs-notice-list a { padding: 14px 2px; font-size: 15px; }
.bs-data-link { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 18px 20px; background: var(--bs-soft); border-radius: var(--bs-radius); }
.bs-data-link span:nth-child(2) { flex: 1; }
.bs-data-link b { display: block; }
.bs-data-link small { font-size: 13px; color: var(--bs-muted); }

/* ---------- 푸터 ---------- */
#bs-footer { padding: 64px 0 40px; font-size: 14px; color: rgba(255, 255, 255, .6); background: var(--bs-navy); }
.bs-foot-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.bs-foot-tagline { margin: 14px 0 0; }
.bs-foot-call { margin-top: 24px; }
.bs-foot-call span { display: block; font-size: 13px; }
.bs-foot-call a { display: inline-block; margin: 2px 0; font-size: 28px; font-weight: 800; color: #fff; }
.bs-foot-call small { display: block; font-size: 13px; }
.bs-foot-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.bs-foot-links h2 { margin: 0 0 14px; font-size: 15px; color: #fff; }
.bs-foot-links ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bs-foot-links a:hover, .bs-foot-policy a:hover { color: #fff; }
.bs-foot-bottom { padding-top: 28px; }
.bs-foot-policy { display: flex; gap: 20px; margin: 0 0 14px; padding: 0; list-style: none; }
.bs-foot-policy b { color: rgba(255, 255, 255, .85); }
.bs-foot-info { margin: 0; font-size: 13px; line-height: 1.8; }
.bs-foot-copy { margin: 12px 0 0; font-size: 13px; color: rgba(255, 255, 255, .4); }

.bs-mobile-cta { display: none; }
.bs-top {
    position: fixed; right: 20px; bottom: 24px; z-index: 800; width: 46px; height: 46px; font-size: 16px;
    color: var(--bs-ink); background: #fff; border: 1px solid var(--bs-line); border-radius: 50%; box-shadow: var(--bs-shadow);
    opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s;
}
.bs-top.is-show { opacity: 1; visibility: visible; transform: none; }

/* 나타나기 효과 (JS가 .bs-reveal-on 부여) */
.bs-reveal-on .bs-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.bs-reveal-on .bs-reveal.is-in { opacity: 1; transform: none; }

/* ---------- 그누보드 게시판 · FAQ 화면 다듬기 ---------- */
.bs-container #bo_list, .bs-container #bo_v, .bs-container #bo_w, .bs-container #faq_wrap { max-width: 100%; }
.bs-container .btn_b01, .bs-container .btn_b02, .bs-container .btn_submit { border-radius: 8px; }
.bs-container .btn_submit { background: var(--bs-primary); }
.bs-container #bo_list .tbl_head01 thead th { background: var(--bs-soft); border-top: 2px solid var(--bs-ink); }
.bs-container .pg_current { background: var(--bs-primary); border-color: var(--bs-primary); }
.bs-container #faq_wrap h3 { font-size: 16px; }

/* ---------- Lenis (부드러운 스크롤) 필수 스타일 ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- 메인 구역별 스크롤 (PC, JS가 html.is-snap 부여) : 구역 하나 = 화면 하나 ---------- */
.is-snap #bs-main.is-index > section {
    display: flex; flex-direction: column; justify-content: center;
    min-height: calc(100vh - var(--bs-header-h)); padding-top: 40px; padding-bottom: 40px; box-sizing: border-box;
}
.is-snap #bs-main.is-index > section > * { width: 100%; }
.is-snap #bs-main.is-index > section.bs-hero { padding-top: 24px; padding-bottom: 32px; }
.is-snap .bs-hero .bs-stats { margin-top: 36px; }
.is-snap .bs-head { margin-bottom: 28px; }
.is-snap .bs-chips { margin-bottom: 24px; }
.is-snap .bs-product-grid { gap: 16px; margin-bottom: 20px; }
.is-snap .bs-product-card { padding: 22px 24px; gap: 8px; }
.is-snap .bs-product-card .bs-ico { width: 42px; height: 42px; font-size: 18px; margin-bottom: 2px; }
.is-snap #bs-main.is-index > section#products { padding-top: 20px; padding-bottom: 20px; }
.is-snap #products .bs-head { margin-bottom: 20px; }
.is-snap #products .bs-lead { margin-top: 8px; }
.is-snap #products .bs-chips { margin-bottom: 18px; }
.is-snap #products .bs-product-foot { padding-top: 12px; }
.is-snap #products .bs-center { margin: 0; }
/* 마지막 화면 : 예약 CTA + 푸터 */
.is-snap #bs-main.is-index > section.bs-cta { min-height: max(220px, calc(100vh - var(--bs-header-h) - var(--bs-foot-h, 0px))); padding-top: 24px; padding-bottom: 24px; }

/* =====================================================================
 * 근무 관리(PC 모니터링) 화면 그림 : 첫 화면 대시보드 + 기능 카드
 * ===================================================================== */
.bs-mock-work .bs-mock-bar { position: relative; }
.bs-live { margin-left: 8px; padding: 1px 8px; font-size: 11px; font-style: normal; font-weight: 800; color: #0f9f6e; background: #e3f6ef; border: 1px solid #b7e6d2; border-radius: 999px; }
.bs-mock-work .bs-mock-body { min-height: 360px; }
.bs-mock-nav { display: flex; flex-direction: column; gap: 4px; width: 132px; flex: none; padding: 14px 10px; background: linear-gradient(180deg, #1d3a8a, #16296a); }
.bs-mock-nav b { margin: 0 4px 10px; font-size: 14px; color: #fff; }
.bs-mock-nav span { display: flex; align-items: center; gap: 8px; padding: 7px 8px; font-size: 12px; color: rgba(255,255,255,.75); border-radius: 8px; white-space: nowrap; }
.bs-mock-nav span i { width: 12px; font-size: 11px; text-align: center; }
.bs-mock-nav span.is-on { color: #fff; background: rgba(255,255,255,.16); }
.bs-mock-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bs-mock-status div { padding: 10px 6px 8px; text-align: center; background: #fff; border: 1px solid var(--bs-line); border-top: 3px solid #2f5bea; border-radius: 10px; }
.bs-mock-status .is-away { border-top-color: #94a3b8; }
.bs-mock-status .is-idle { border-top-color: #e5484d; }
.bs-mock-status small { display: block; font-size: 12px; color: var(--bs-muted); }
.bs-mock-status b { display: block; font-size: 26px; line-height: 1.2; color: #2f5bea; }
.bs-mock-status .is-away b { color: #475569; }
.bs-mock-status .is-idle b { color: #e5484d; }
.bs-mock-usage { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--bs-line); border-radius: 10px; }
.bs-donut {
    --p: 70; position: relative; flex: none; width: 88px; height: 88px; border-radius: 50%;
    background: conic-gradient(#2f5bea calc(var(--p) * 1%), #a3b1c6 0 calc((var(--p) + 20) * 1%), #e5484d 0);
}
.bs-donut::after { content: ''; position: absolute; inset: 12px; background: #fff; border-radius: 50%; }
.bs-donut span { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.bs-donut small { font-size: 12px; color: var(--bs-muted); }
.bs-donut b { font-size: 18px; }
.bs-mock-usage.is-lg .bs-donut { width: 110px; height: 110px; }
.bs-mock-usage.is-lg .bs-donut::after { inset: 15px; }
.bs-mock-usage.is-lg .bs-donut b { font-size: 21px; }
.bs-mock-usage ul { flex: 1; display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.bs-mock-usage li { display: grid; grid-template-columns: 8px 44px 1fr auto; align-items: center; gap: 6px; font-size: 12px; color: var(--bs-ink-2); }
.bs-mock-usage li span { height: 8px; background: #eef1f6; border-radius: 4px; overflow: hidden; }
.bs-mock-usage li span i { display: block; width: var(--w); height: 100%; background: #2f5bea; border-radius: 4px; }
.bs-mock-usage li:nth-child(2) span i { background: #a3b1c6; }
.bs-mock-usage li:nth-child(3) span i { background: #e5484d; }
.bs-mock-usage li b { font-size: 12px; white-space: nowrap; }
.c-work, .c-none, .c-idle, .c-away { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2f5bea; }
.c-none { background: #a3b1c6; } .c-idle { background: #e5484d; } .c-away { background: #94a3b8; }
.bs-mock-apps { display: grid; gap: 6px; }
.bs-mock-apps div { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 10px; font-size: 12px; background: #fff; border: 1px solid var(--bs-line); border-radius: 8px; }
.bs-mock-apps span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bs-ink-2); }
.bs-mock-apps em { padding: 1px 7px; font-size: 11px; font-style: normal; font-weight: 700; border-radius: 5px; }
.bs-mock-apps em.ok { color: #0f9f6e; background: #e3f6ef; }
.bs-mock-apps em.no { color: #d93838; background: #fde8e8; }
.bs-mock-apps em.none { color: #64748b; background: #eef1f6; }
.bs-mock-apps i { position: relative; height: 6px; background: #eef1f6; border-radius: 3px; overflow: hidden; }
.bs-mock-apps i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: #2f5bea; border-radius: 3px; }
.bs-mock-apps b { font-size: 12px; white-space: nowrap; }

/* 기능 카드 (3 × 2) : 위 작은 화면 + 아래 설명 */
.bs-fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.bs-fgrid.is-count-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bs-fgrid.is-count-1, .bs-fgrid.is-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin: 0 auto; }
.bs-fgrid > li { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--bs-line); border-radius: 16px; transition: transform .25s, box-shadow .25s; }
.bs-fgrid > li:hover { transform: translateY(-4px); box-shadow: var(--bs-shadow-lg); }
.bs-fmock { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; min-height: 190px; padding: 16px; overflow: hidden; background: linear-gradient(160deg, #f3f6fe, #eef3ff); border-bottom: 1px solid var(--bs-line); }
.bs-fgrid-text { padding: 18px 20px 20px; }
.bs-fgrid-text h3 { margin: 0 0 6px; font-size: 18px; }
.bs-fgrid-text p { margin: 0; font-size: 14px; color: var(--bs-muted); }
.bs-fm-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.bs-fm-head span { font-size: 12px; color: var(--bs-muted); }
.bs-fm-people { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bs-fm-people li { display: grid; grid-template-columns: 8px auto 1fr auto; align-items: center; gap: 8px; padding: 5px 10px; font-size: 12px; background: #fff; border-radius: 7px; }
.bs-fm-people span { color: var(--bs-muted); }
.bs-fm-people li:nth-child(3) b { color: #64748b; }
.bs-fm-people li:nth-child(4) b { color: #e5484d; }
.bs-fmock-status .bs-mock-status b { font-size: 20px; }
.bs-fmock-status .bs-mock-status div { padding: 6px 4px; }
.bs-fmock-usage .bs-mock-usage { background: #fff; padding: 8px 10px; }
.bs-fmock-usage .bs-mock-apps div:nth-child(n+3) { display: none; }
.bs-fm-block { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.bs-fm-block li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 13px; background: #fff; border: 1px solid var(--bs-line); border-radius: 9px; }
.bs-fm-block li i { width: 16px; color: #64748b; text-align: center; }
.bs-switch { position: relative; width: 30px; height: 17px; margin-left: auto; background: #cbd3e1; border-radius: 999px; }
.bs-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; background: #fff; border-radius: 50%; transition: transform .2s; }
.bs-switch.is-on { background: #e5484d; }
.bs-switch.is-on::after { transform: translateX(13px); }
.bs-fm-toast { display: flex; align-items: center; gap: 8px; margin: 0; padding: 7px 10px; font-size: 12px; font-weight: 600; color: #fff; background: #0b1530; border-radius: 8px; }
.bs-fm-toast i { color: #ff8a8a; }
.bs-fm-timeline { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bs-fm-timeline li { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 8px; font-size: 12px; }
.bs-fm-timeline div { position: relative; height: 14px; background: repeating-linear-gradient(90deg, #fff 0 calc(25% - 1px), #e5e9f2 calc(25% - 1px) 25%); border-radius: 4px; }
.bs-fm-timeline i { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); background: #2f5bea; border-radius: 4px; }
.bs-fm-timeline em { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); background: #94a3b8; border-radius: 2px; }
.bs-fm-legend { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--bs-muted); }
.bs-fm-legend em { margin-left: 6px; }
.bs-fm-table { width: 100%; font-size: 12px; background: #fff; border-collapse: collapse; border-radius: 8px; overflow: hidden; }
.bs-fm-table th { padding: 6px 8px; font-weight: 600; text-align: left; color: var(--bs-muted); background: #f5f7fb; }
.bs-fm-table td { padding: 6px 8px; border-top: 1px solid var(--bs-line); }
.bs-fm-table td b { color: #2f5bea; }
.bs-feat-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 28px; }
.bs-link.is-muted { color: var(--bs-muted); font-weight: 500; }
.bs-coming { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; padding: 14px 18px; background: rgba(255,255,255,.8); border: 1px dashed #c9d5fb; border-radius: 14px; }
.bs-coming-label { font-size: 14px; font-weight: 700; color: var(--bs-ink-2); }
.bs-coming-label i { color: #7c4dff; }
.bs-coming-chip { padding: 4px 12px; font-size: 13px; color: #5b3ad6; background: #f1ebff; border-radius: 999px; }
.bs-coming-ask { margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--bs-primary); }

/* 고민 */
.bs-bg-pain { background: linear-gradient(180deg, #fff 0%, #fff7f6 100%); }
.bs-bg-pain::before {
    right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%;
    background: radial-gradient(circle, rgba(229, 72, 77, .10), transparent 65%);
}
.bs-pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.bs-pains.is-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin: 0 auto; }
.bs-pains.is-count-1 { grid-template-columns: minmax(0, 480px); justify-content: center; }
.bs-pains li { position: relative; padding: 30px 26px 26px; background: #fff; border: 1px solid #f3dcdc; border-radius: 16px; box-shadow: 0 10px 30px rgba(229, 72, 77, .06); }
.bs-pains li::after { content: '?'; position: absolute; right: 18px; top: 8px; font-size: 56px; font-weight: 800; line-height: 1; color: color-mix(in srgb, var(--c) 12%, transparent); }
.bs-pains h3 { margin: 16px 0 6px; font-size: 19px; }
.bs-pains p { margin: 0; font-size: 15px; color: var(--bs-muted); }
.bs-pain-solve {
    display: flex; align-items: center; justify-content: center; gap: 12px; width: max-content; max-width: 100%; margin: 36px auto 0;
    padding: 14px 24px; font-size: 18px; color: #fff; background: var(--bs-primary); border-radius: 999px; box-shadow: 0 12px 28px rgba(47, 91, 234, .3);
    transition: transform .2s;
}
.bs-pain-solve:hover { transform: translateY(-2px); }
.bs-pain-solve .bs-logo-mark { width: 30px; height: 30px; color: var(--bs-primary); background: #fff; box-shadow: none; }
.bs-pain-solve .bs-logo-mark svg { width: 22px; height: 22px; }
.bs-pain-solve i { animation: bs-bob 1.6s ease-in-out infinite; }
@keyframes bs-bob { 50% { transform: translateY(3px); } }

/* 요금 (메인) */
.bs-bg-price { background: linear-gradient(180deg, #f5f8ff 0%, #fff 100%); }
.bs-bg-price::before {
    left: 50%; top: -200px; width: 900px; height: 400px; transform: translateX(-50%); border-radius: 50%;
    background: radial-gradient(ellipse, rgba(47, 91, 234, .12), transparent 70%);
}

/* 구역별 스크롤 : 새 구역 한 화면 맞춤 */
.is-snap #features .bs-head, .is-snap #pricing .bs-head, .is-snap #pains .bs-head { margin-bottom: 20px; }
.is-snap .bs-fmock { height: 150px; min-height: 0; padding: 12px 14px; gap: 6px; }
/* 한 화면용 작은 그림 : 칸 높이에 맞게 항목 줄이기 */
.is-snap .bs-fmock .bs-mock-status b { font-size: 17px; }
.is-snap .bs-fmock .bs-mock-status div { padding: 4px; }
.is-snap .bs-fmock .bs-fm-people li:nth-child(n+3),
.is-snap .bs-fmock .bs-mock-apps div:nth-child(n+3),
.is-snap .bs-fmock-usage .bs-mock-apps,
.is-snap .bs-fm-table tr:nth-child(n+4),
.is-snap .bs-fm-timeline li:nth-child(n+4) { display: none; }
.is-snap .bs-fmock-usage .bs-mock-usage { padding: 6px 10px; }
.is-snap .bs-fmock .bs-donut { width: 84px; height: 84px; }
.is-snap .bs-fmock .bs-donut::after { inset: 11px; }
.is-snap .bs-fmock .bs-donut b { font-size: 17px; }
.is-snap .bs-fm-block li { padding: 6px 10px; }
.is-snap .bs-fm-toast { padding: 5px 10px; }
.is-snap .bs-fm-table th, .is-snap .bs-fm-table td { padding: 5px 8px; }
.is-snap .bs-fmock-block .bs-fm-toast, .is-snap .bs-fmock-records .bs-fm-head { display: none; }
/* 세로가 낮은 PC 화면 (노트북 등) */
@media (max-height: 820px) {
    .is-snap .bs-fmock { height: 136px; padding-top: 10px; padding-bottom: 10px; }
    .is-snap .bs-fmock .bs-fm-people li:nth-child(n+2) { display: none; }
    .is-snap .bs-fm-legend { display: none; }
    .is-snap .bs-fmock-records .bs-fm-table tr:nth-child(n+3) { display: none; }
    .is-snap #pricing .bs-plan { padding: 20px 22px; }
    .is-snap #pricing .bs-plan-sum { min-height: 0; }
    .is-snap #pricing .bs-plan-price { margin-top: 10px; }
    .is-snap #pricing .bs-plan-note { margin-bottom: 14px; }
}
@media (max-height: 780px) {
    .is-snap .bs-fmock { height: 112px; }
    .is-snap .bs-fm-legend, .is-snap .bs-fmock .bs-fm-head span, .is-snap .bs-fm-timeline li:nth-child(n+3) { display: none; }
    .is-snap .bs-fmock .bs-mock-status b { font-size: 15px; line-height: 1.1; }
    .is-snap .bs-fmock .bs-donut { width: 72px; height: 72px; }
    .is-snap .bs-fmock .bs-donut::after { inset: 9px; }
    .is-snap .bs-fmock .bs-donut b { font-size: 15px; }
    .is-snap .bs-fmock-web .bs-mock-apps div:nth-child(n+3), .is-snap .bs-fm-block li:nth-child(n+3) { display: none; }
    .is-snap .bs-fmock-records .bs-fm-table td { padding-top: 4px; padding-bottom: 4px; }
    .is-snap .bs-fmock-web .bs-fm-head { display: none; }
    .is-snap #features .bs-lead, .is-snap #pricing .bs-lead { margin-top: 4px; font-size: 14px; }
    .is-snap #features .bs-title, .is-snap #pricing .bs-title { font-size: 30px; }
    .is-snap #pricing .bs-plan { padding: 16px 20px; }
    .is-snap #pricing .bs-plan-items { margin-top: 12px; padding-top: 10px; font-size: 14px; }
    .is-snap .bs-hero-title { font-size: 44px; }
    .is-snap .bs-hero-text { margin-top: 14px; font-size: 16px; }
    .is-snap .bs-hero-btns { margin-top: 22px; }
    .is-snap .bs-hero .bs-stats { margin-top: 20px; }
    .is-snap .bs-hero .bs-stats ul { padding: 16px 12px; }
    .is-snap .bs-mock-work .bs-mock-body { min-height: 300px; }
}
/* 한 화면 : '자세히 보기'와 '준비 중인 프로그램'을 한 줄로 */
.is-snap .bs-feat-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 24px; margin-top: 16px; }
.is-snap .bs-feat-bottom .bs-feat-foot, .is-snap .bs-feat-bottom .bs-coming { margin: 0; }
.is-snap .bs-fgrid { gap: 14px; }
.is-snap .bs-fgrid-text { padding: 12px 16px 14px; }
.is-snap .bs-fgrid-text h3 { font-size: 16px; margin-bottom: 2px; }
.is-snap .bs-fgrid-text p { font-size: 13px; }
.is-snap .bs-feat-foot { margin-top: 14px; }
.is-snap .bs-coming { margin-top: 10px; padding: 8px 14px; }
.is-snap #pricing .bs-plan { padding: 24px 24px; }
.is-snap #pricing .bs-plan-items { margin-top: 16px; padding-top: 14px; gap: 6px; }
.is-snap #pricing .bs-billing { margin-bottom: 20px; }

/* 메인화면 관리에서 장점·단계 칸을 줄였을 때 (PC) */
@media (min-width: 1025px) {
    .bs-benefits.is-count-3, .bs-steps.is-count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bs-benefits.is-count-2, .bs-steps.is-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-left: auto; margin-right: auto; }
    .bs-benefits.is-count-1, .bs-steps.is-count-1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
}

/* 회원 화면 (테마 회원 스킨) */
.bs-container .register.wdr { max-width: 760px; margin: 0 auto; }
#mb_login.wda { min-height: 100vh; }

/* =====================================================================
 * 반응형
 * ===================================================================== */
@media (max-width: 1200px) {
    .bs-header-inner { gap: 20px; }
    .bs-gnb a { padding: 8px 10px; }
    .bs-util-link { display: none; }
    .bs-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    :root { --bs-header-h: 64px; --bs-side: 20px; }
    .bs-gnb, .bs-util { display: none; }
    .bs-burger { display: block; }
    .bs-hero { padding: 40px 0 48px; }
    .bs-hero-inner, .bs-phero-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .bs-hero-title { font-size: 42px; }
    .bs-hero-visual { max-width: 620px; padding: 16px 0; }
    .bs-product-grid, .bs-product-grid.is-3, .bs-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bs-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
    .bs-steps::before { display: none; }
    .bs-plans, .bs-plans.is-count-4 { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin: 0 auto; gap: 28px; }
    .bs-plans.is-count-2 { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin: 0 auto; }
    .bs-faq-wrap, .bs-support-cols { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .bs-inq { grid-template-columns: minmax(0, 1fr); }
    .bs-inq-side { position: static; }
    .bs-cta-inner { flex-direction: column; align-items: flex-start; padding: 40px 32px; }
    .bs-foot-top { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 768px) {
    body { font-size: 15px; }
    .bs-section { padding: 64px 0; }
    .bs-section.is-tight { padding: 40px 0; }
    .bs-title { font-size: 26px; }
    .bs-title.is-sm { font-size: 21px; }
    .bs-lead { font-size: 15px; }
    .bs-pagehead { padding: 44px 0 36px; }
    .bs-pagehead-title { font-size: 28px; }
    .bs-pagehead-desc { font-size: 15px; }
    .bs-hero-title { font-size: 32px; }
    .bs-hero-text { font-size: 16px; }
    .bs-hero-btns .bs-btn { flex: 1 1 auto; }
    .bs-float-a { left: 0; bottom: 8px; }
    .bs-float-b { right: 0; }
    .bs-mock-body { min-height: 0; }
    .bs-mock-cards b { font-size: 14px; }
    .bs-mock-bars { height: 70px; }
    .bs-mock-list { display: none; }
    .bs-stats ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; padding: 20px 8px; }
    .bs-stats li:nth-child(3) { border-left: 0; }
    .bs-stats b { font-size: 24px; }
    .bs-chips { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--bs-side) * -1) 24px; padding: 0 var(--bs-side) 4px; scrollbar-width: none; }
    .bs-chips::-webkit-scrollbar { display: none; }
    .bs-chip { flex: none; }
    .bs-product-grid, .bs-product-grid.is-3, .bs-features, .bs-benefits, .bs-reviews { grid-template-columns: minmax(0, 1fr); }
    .bs-product-card, .bs-benefits li { padding: 22px; }
    .bs-steps { grid-template-columns: minmax(0, 1fr); }
    .bs-steps li { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; text-align: left; }
    .bs-steps em { grid-row: span 2; }
    .bs-steps h3 { margin: 4px 0 2px; }
    .bs-steps p { margin: 0; max-width: none; }
    .bs-faq-q { padding: 18px 2px; font-size: 16px; }
    .bs-faq-a { padding-left: 30px; }
    .bs-cta { padding-bottom: 64px; }
    .bs-cta h2 { font-size: 23px; }
    .bs-cta-btns { width: 100%; }
    .bs-cta-btns .bs-btn { flex: 1 1 auto; }
    .bs-phero { padding: 32px 0 56px; }
    .bs-phero h1 { font-size: 32px; }
    .bs-phero-tagline { font-size: 17px; }
    .bs-help-box { flex-direction: column; align-items: flex-start; }
    .bs-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 calc(var(--bs-side) * -1) 28px; padding: 0 var(--bs-side) 4px; scrollbar-width: none; }
    .bs-tabs::-webkit-scrollbar { display: none; }
    .bs-tabs a { flex: none; }
    .bs-form { padding: 24px 18px; border-radius: 14px; }
    .bs-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bs-check-grid, .bs-row-2 { grid-template-columns: minmax(0, 1fr); gap: 0 16px; }
    .bs-check-grid { gap: 8px; }
    .bs-lookup-form { grid-template-columns: minmax(0, 1fr); }
    .bs-done h1 { font-size: 24px; }
    .bs-done-info div, .bs-iq dl div { grid-template-columns: 90px 1fr; font-size: 14px; }
    .bs-foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #bs-footer { padding-bottom: 96px; }
    .bs-mobile-cta {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 850; display: flex; gap: 8px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--bs-line);
        box-shadow: 0 -6px 20px rgba(15, 23, 42, .06);
    }
    .bs-mobile-cta a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; font-size: 15px; font-weight: 700; border-radius: 10px; }
    .bs-mobile-cta .is-call { flex: 1; color: var(--bs-ink); background: var(--bs-soft); }
    .bs-mobile-cta .is-main { flex: 1.6; color: #fff; background: var(--bs-primary); }
    .bs-top { bottom: 84px; right: 14px; }
    #container.bs-container { padding: 28px var(--bs-side) 64px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
}

/* ---------- 반응형 : 근무 관리 그림 · 기능 카드 · 고민 ---------- */
@media (max-width: 1200px) {
    .bs-mock-nav { width: 112px; }
    .bs-mock-nav span { font-size: 12px; padding: 6px; }
}
@media (max-width: 1024px) {
    .bs-fgrid, .bs-fgrid[class*="is-count"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
    .bs-pains, .bs-pains[class*="is-count"] { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
}
@media (max-width: 768px) {
    .bs-mock-nav { display: none; }
    .bs-mock-work .bs-mock-body { min-height: 0; }
    .bs-mock-work .bs-mock-apps div:nth-child(n+3) { display: none; }
    .bs-donut { width: 72px; height: 72px; }
    .bs-donut::after { inset: 10px; }
    .bs-donut b { font-size: 15px; }
    .bs-fgrid, .bs-fgrid[class*="is-count"] { grid-template-columns: minmax(0, 1fr); }
    .bs-fmock { min-height: 150px; }
    .bs-pain-solve { font-size: 15px; padding: 12px 18px; }
    .bs-coming { justify-content: flex-start; }
}

/* =====================================================================
 * 카카오톡 문의 (사이트설정 > 카카오톡 채널 주소가 있을 때)
 * ===================================================================== */
.bs-kakao-ico { display: inline-flex; align-items: center; justify-content: center; }
.bs-kakao-ico svg { display: block; width: 20px; height: 20px; }
.bs-btn-kakao { margin-top: 0; color: #3a1d1d; background: #fee500; border-color: #fee500; }
.bs-btn-kakao:hover { background: #fada0a; transform: translateY(-1px); }
.bs-inq-side .bs-btn-kakao { margin-bottom: 10px; }
.bs-inq-call.is-sub { margin-top: 12px; font-size: 18px; color: var(--bs-ink-2); }

/* PC : 오른쪽 아래 떠 있는 버튼 (맨 위로 버튼은 그 위로) */
.bs-kakao-float {
    position: fixed; right: 20px; bottom: 24px; z-index: 810; display: inline-flex; align-items: center; gap: 8px;
    height: 52px; padding: 0 20px 0 16px; font-size: 15px; font-weight: 700; color: #3a1d1d; background: #fee500;
    border-radius: 999px; box-shadow: 0 10px 26px rgba(0, 0, 0, .16); transition: transform .2s, box-shadow .2s;
}
.bs-kakao-float:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .2); }
.bs-kakao-float .bs-kakao-ico svg { width: 24px; height: 24px; }
.bs-top.has-kakao { bottom: 88px; }

/* 전체메뉴 · 하단 · 고객지원 */
.bs-drawer-call.is-kakao { margin-top: auto; color: #3a1d1d; background: #fee500; }
.bs-drawer-call.is-kakao + .bs-drawer-call { margin-top: 8px; }
.bs-drawer-call.is-kakao b { color: #3a1d1d; }
.bs-foot-call .bs-foot-kakao { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 4px; padding: 10px 18px; font-size: 16px; font-weight: 700; color: #3a1d1d; background: #fee500; border-radius: 999px; }
.bs-foot-call a.is-sub { display: block; font-size: 18px; }
.bs-support-card.is-kakao .bs-ico { color: #3a1d1d; background: #fee500; }
.bs-support-card.is-kakao .bs-ico svg { width: 24px; height: 24px; }

/* 휴대폰 하단 고정 바의 카톡 버튼 */
.bs-mobile-cta .is-kakao { flex: 1; color: #3a1d1d; background: #fee500; }

/* PC 카톡 안내창 (QR + PC 카카오톡으로 열기) */
.bs-kakao-pop {
    position: fixed; right: 20px; bottom: 88px; z-index: 820; width: 280px; padding: 22px 22px 18px; text-align: center;
    background: #fff; border-radius: 18px; box-shadow: 0 20px 50px rgba(15, 23, 42, .22); animation: bsKakaoPop .18s ease-out;
}
.bs-kakao-pop[hidden] { display: none; }
@keyframes bsKakaoPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bs-kakao-pop-close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; font-size: 16px; color: #8a94a6; background: none; border: 0; border-radius: 50%; cursor: pointer; }
.bs-kakao-pop-close:hover { color: #111; background: #f1f3f7; }
.bs-kakao-pop-head { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 17px; color: #191919; }
.bs-kakao-pop-head .bs-kakao-ico { width: 30px; height: 30px; color: #3a1d1d; background: #fee500; border-radius: 50%; }
.bs-kakao-pop-head .bs-kakao-ico svg { width: 18px; height: 18px; }
.bs-kakao-pop-desc { margin: 10px 0 12px; font-size: 14px; line-height: 1.5; color: #5b6475; }
.bs-kakao-qr { display: flex; align-items: center; justify-content: center; width: 176px; height: 176px; margin: 0 auto 14px; padding: 8px; background: #fff; border: 1px solid #e6e9ef; border-radius: 12px; }
.bs-kakao-qr img, .bs-kakao-qr canvas { display: block; width: 158px !important; height: 158px !important; }
.bs-kakao-pop-pc { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; font-size: 15px; font-weight: 700; color: #3a1d1d; background: #fee500; border: 0; border-radius: 10px; cursor: pointer; }
.bs-kakao-pop-pc:hover { background: #fada0a; }
.bs-kakao-pop-form { display: inline-block; margin-top: 10px; font-size: 13px; color: #5b6475; }
.bs-kakao-pop-form:hover { color: #111; }

@media (max-width: 768px) {
    .bs-kakao-float, .bs-kakao-pop { display: none !important; }
    .bs-top.has-kakao { bottom: 84px; }
}