@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-wrap.bs-narrow { max-width: var(--bs-max); }     /* 6.46.2 5.46.9 의 '.bs-narrow { max-width: none }' 이 .bs-wrap 의 사이트 폭까지 지워 요금 안내 자주 묻는 질문 · 결제 끝 · 문의 내역이 화면 끝까지 늘어났음 — 폭은 사이트 폭(--bs-max) */
.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); white-space: nowrap; } /* 5.3.3 '내 문의' 가 두 줄로 꺾이던 것 */
.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: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bs-drawer-util li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.bs-drawer-util a {
    display: flex; align-items: center; justify-content: center; height: 46px; font-size: 15px; font-weight: 600;
    color: var(--bs-ink-2); background: var(--bs-soft); border: 1px solid var(--bs-line); border-radius: 10px;
    transition: background .2s, border-color .2s, color .2s;
}
.bs-drawer-util a:hover, .bs-drawer-util a:focus-visible { color: var(--bs-primary); background: #fff; border-color: currentColor; }
.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(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 32px; }     /* 5.46.9 카드 수만큼 폭을 나눔(2개면 반씩 — 전 3칸 고정이라 2개면 오른쪽이 빔), 넓으면 3칸까지 */
.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(auto-fit, minmax(300px, 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; 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, 1fr)); }     /* 5.46.9 2개면 폭 가득(전 400px 씩 가운데) */
.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: 20px 22px; list-style: none; font-size: 15px; background: #f4f7fb; border: 0; border-radius: 12px; }     /* 6.49.1 아래 기능 목록 = 옅은 바탕 상자(사용자 2026-10-14) */
.bs-plan-items i { margin-right: 6px; color: var(--bs-primary); }
.bs-plan-ctrl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin: 0 auto 10px; }
.bs-plan-ctrl + .bs-plans, .bs-qty-hint + .bs-plans { margin-top: 26px; }
.bs-lic { padding: 14px 16px 16px; background: #fff; border: 1px solid var(--bs-line); border-radius: 14px; }
.bs-lic-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.bs-lic-head > b { font-size: 16px; color: var(--bs-ink); }
.bs-lic-sum { padding: 3px 12px; font-size: 13px; font-weight: 700; color: var(--bs-primary); background: #eaf0ff; border: 1px solid #cddbff; border-radius: 999px; }
.bs-lic-sum b { font-size: 14px; }
.bs-lic-row { display: flex; flex-wrap: wrap; gap: 12px; }
.bs-qty { display: flex; flex-direction: column; gap: 6px; }
.bs-qty label { font-size: 13px; font-weight: 700; color: var(--bs-ink-2); }
.bs-qty-box { display: flex; align-items: stretch; height: 42px; border: 1px solid var(--bs-line); border-radius: 10px; overflow: hidden; background: #f7f9fc; }
.bs-qty-btn { width: 44px; font-size: 12px; color: var(--bs-ink-2); background: #f1f4f9; border: 0; cursor: pointer; }
.bs-qty-btn:hover { color: #fff; background: var(--bs-primary); }
.bs-qty-in { width: 84px; font-size: 18px; font-weight: 800; text-align: center; color: var(--bs-ink); background: #fff; border: 0; border-left: 1px solid var(--bs-line); border-right: 1px solid var(--bs-line); border-radius: 0; -moz-appearance: textfield; }
.bs-qty-in::-webkit-outer-spin-button, .bs-qty-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bs-qty-in:focus { outline: 2px solid var(--bs-primary); outline-offset: -2px; }
.bs-lic[data-standalone] { padding: 16px 18px 14px; background: #f8faff; }
.bs-lic[data-standalone] .bs-lic-row > .bs-qty { flex: 1 1 220px; }
.bs-lic[data-standalone] .bs-qty-in { flex: 1; width: auto; min-width: 60px; }
.bs-input.is-bad { border-color: #e5484d; box-shadow: 0 0 0 3px rgba(229, 72, 77, .12); }
.bs-ch-kakao { display: inline-block; margin-left: 6px; padding: 1px 8px; font-size: 11px; font-weight: 700; vertical-align: middle; color: #3a1d1d; background: #fee500; border-radius: 999px; }
.bs-inq-send [hidden] { display: none !important; }
.bs-inq-send.has-kakao { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bs-inq-send-help { margin: 10px 0 0; font-size: 13px; line-height: 1.6; text-align: center; color: var(--bs-muted); }
@media (max-width: 480px) { .bs-inq-send.has-kakao { grid-template-columns: minmax(0, 1fr); } }
.bs-done-kakao { margin: 24px 0 8px; padding: 20px; text-align: left; background: #fffbe0; border: 1px solid #f6e27a; border-radius: 16px; }
.bs-done-kakao > p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--bs-ink-2); }
.bs-done-kakao > p b:first-child { font-size: 16px; color: #3a1d1d; }
.bs-done-kakao textarea { width: 100%; margin-bottom: 12px; font-size: 13px; line-height: 1.6; color: var(--bs-ink-2); background: #fff; resize: none; }
.bs-done-kakao-tip { margin: 10px 0 0 !important; font-size: 13px !important; color: #0a7a52 !important; }
.bs-lic-desc { font-size: 13px; color: var(--bs-muted); }
.bs-lic-pick { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; }
.bs-lic-label { flex: 0 0 auto; min-width: 44px; padding-top: 9px; font-size: 13px; font-weight: 700; color: var(--bs-ink-2); }
.bs-lic-plans { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-pick { position: relative; cursor: pointer; }
.bs-pick input { position: absolute; opacity: 0; pointer-events: none; }
.bs-pick span { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; font-size: 14px; font-weight: 700; color: var(--bs-ink-2); background: #fff; border: 1px solid var(--bs-line); border-radius: 999px; transition: all .15s; }
.bs-pick small { font-size: 12px; font-weight: 500; color: var(--bs-muted); }
.bs-pick small.is-off { color: var(--bs-ok); font-weight: 700; }
.bs-pick:hover span { border-color: #b8c7ee; }
.bs-pick input:checked + span { color: var(--bs-primary); background: #eaf0ff; border-color: var(--bs-primary); }
.bs-pick input:checked + span small { color: var(--bs-primary); }
.bs-pick input:focus-visible + span { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.bs-lic-est.is-empty { color: var(--bs-muted); border-color: var(--bs-line); }
.bs-lic-est { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 14px 0 0; padding: 10px 14px; font-size: 14px; color: var(--bs-ink-2); background: #fff; border: 1px dashed #cddbff; border-radius: 10px; }
.bs-lic-est b { font-size: 18px; color: var(--bs-primary); }
.bs-lic-est small { font-size: 12.5px; color: var(--bs-muted); }
.bs-lic-hint { margin: 10px 0 0; font-size: 13px; color: var(--bs-muted); }
.bs-lic-hint i { color: var(--bs-primary); }
.bs-pp-admin { display: block; margin-top: 6px; font-size: 13px; color: var(--bs-muted); }
.bs-pp-admin i { color: #9aa3b5; }
.bs-plan-ctrl { align-items: flex-end; }
.bs-qty-hint { margin: 0; font-size: 14px; text-align: center; color: var(--bs-muted); }
.bs-qty-hint i { color: var(--bs-primary); }
.bs-qty-hint b { color: var(--bs-ink); }
.bs-qty-now { margin-left: 4px; color: var(--bs-primary); }
.bs-qty-now b { color: var(--bs-primary); }
.bs-pp-total { display: block; margin-top: 6px; font-size: 14px; color: var(--bs-ink-2); }
.bs-pp-total b { font-size: 16px; font-weight: 800; letter-spacing: 0; color: var(--bs-primary); }
.bs-pp-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.bs-pp-tags:empty { display: none; }
.bs-pp-tags em { padding: 2px 8px; font-size: 12px; font-style: normal; font-weight: 700; border-radius: 999px; }
.bs-pp-tags .is-vol { color: #1d4ed8; background: #e8efff; }
.bs-pp-tags .is-year { color: #0a7a52; background: #e3f7ee; }
.bs-plan-price del[hidden], .bs-pp-total[hidden] { display: none; }
/* 6.51.0 상세 기능 비교표(lib/bizsoft.lib.php bs_compare_html — 요금 안내 · 제품 화면 요금제 아래) · 6.277.3 상세 기능 비교표 새 모양(사용자 2026-10-30 '너무 안 이뻐') — 둥근 판 · 세로줄 없음 · 묶음은 작은 머리 · ✓ 는 초록 동그라미 · 추천 요금제 열은 옅은 색 */
.bs-cmp { margin: 64px 0 0; }
.bs-cmp-title { margin: 0 0 18px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--bs-ink); }
.bs-cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: #fff; border: 1px solid var(--bs-line); border-radius: 16px; box-shadow: 0 6px 24px rgba(20, 40, 80, .05); }
.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: 13px 18px; border-bottom: 1px solid #eef1f5; text-align: center; vertical-align: middle; }
.bs-cmp-t tbody tr:last-child th, .bs-cmp-t tbody tr:last-child td { border-bottom: 0; }
.bs-cmp-t thead th { position: relative; padding: 22px 18px 18px; font-size: 18px; font-weight: 800; color: var(--bs-ink); background: #fff; border-bottom: 1px solid var(--bs-line); }
.bs-cmp-t thead th small { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--bs-primary); }     /* 6.51.6 맞춤 견적 요금제 */
.bs-cmp-t thead th.is-best::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--bs-primary); }
.bs-cmp-t thead th.is-best em { display: inline-block; margin-left: 6px; padding: 2px 8px; font-size: 11.5px; font-style: normal; font-weight: 700; vertical-align: 3px; color: #fff; background: var(--bs-primary); border-radius: 999px; }
.bs-cmp-t .is-best { background: color-mix(in srgb, var(--bs-primary) 5%, #fff); }
.bs-cmp-t tbody th[scope="row"] { width: 30%; padding-left: 26px; text-align: left; font-weight: 500; color: var(--bs-ink-2, var(--bs-ink)); background: #fff; }
.bs-cmp-t tr.is-g th { padding: 20px 26px 8px; text-align: left; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--bs-primary); background: #fff; border-bottom: 1px solid #eef1f5; }
.bs-cmp-t tbody tr:first-child.is-g th { padding-top: 16px; }
.bs-cmp-t td { font-weight: 600; color: var(--bs-ink); line-height: 1.5; }
.bs-cmp-t td .ck { box-sizing: border-box; display: inline-block; width: 26px; height: 26px; padding: 5px; vertical-align: middle; color: #16a34a; background: #e7f6ec; border-radius: 50%; }
.bs-cmp-t td .no { font-weight: 400; color: #cfd5de; }
.bs-cmp-t td.is-span { padding-left: 24px; padding-right: 24px; }
.bs-cmp-t .is-corner { width: 30%; }
@media (hover: hover) {
    .bs-cmp-t tbody tr:not(.is-g):hover th, .bs-cmp-t tbody tr:not(.is-g):hover td { background: #f6f9fd; }
}
.bs-price-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 0 0 22px; padding: 12px 16px; list-style: none; font-size: 14.5px; color: var(--bs-ink-2, var(--bs-ink)); background: var(--bs-soft, #f4f7fb); border-radius: 12px; }     /* 6.277.0 요금 카드 위 띠 */
.bs-price-strip li { display: inline-block; text-align: center; }     /* 6.277.3 휴대폰 폭에서 글이 조각마다 줄바뀜되던 것(inline-flex) */
.bs-price-strip .fa { color: var(--bs-primary); }
.bs-price-strip b { color: var(--bs-ink); }
.bs-price-strip small { font-size: 12.5px; color: var(--bs-muted); }
@media (max-width: 640px) {
    .bs-cmp { margin-top: 40px; }
    .bs-cmp-title { font-size: 21px; }
    .bs-cmp-t { font-size: 13.5px; }
    .bs-cmp-t th, .bs-cmp-t td { padding: 11px 10px; }
    .bs-cmp-t tbody th[scope="row"], .bs-cmp-t tr.is-g th { padding-left: 14px; }
    .bs-cmp-t tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; }
}
/* 6.50.0 요금 카드 [무료 제공 기능] 단추 · 창(테마 inc/plan_cards.php — 내용은 요금제마다 관리 화면 '무료 제공 기능') — 6.50.2 창 다시(작은 폭 · 체크 줄 · 이름 / 설명 두 줄) */
.bs-plan-free { display: block; margin: 10px auto 0; padding: 0; font: inherit; font-size: 14px; color: var(--bs-muted); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }     /* 6.50.3 밑줄 글로 되돌림(사용자 — 더 깔끔) */
.bs-plan-free:hover { color: var(--bs-primary); }
.bs-free-dlg svg { display: block; flex: none; }
.bs-free-dlg { width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 0; border: 0; border-radius: 18px; box-shadow: 0 24px 70px rgba(15, 30, 60, .22); color: var(--bs-ink); overflow: auto; }
.bs-free-dlg[open] { animation: bsFreeIn .18s ease-out; }
@keyframes bsFreeIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.bs-free-dlg::backdrop { background: rgba(15, 23, 42, .38); backdrop-filter: blur(2px); }
.bs-free-in { padding: 22px 24px 20px; }     /* 안쪽 틀 — 창 바깥(배경)을 누를 때만 닫히게 */
.bs-free-head { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; }
.bs-free-head > div { flex: 1; min-width: 0; }
.bs-free-ic { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; height: 40px; border-radius: 12px; font-size: 17px; color: var(--bs-primary); background: var(--bs-primary-l, #eef4ff); }
.bs-free-head h3 { margin: 2px 0 2px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.bs-free-head p { margin: 0; font-size: 12.5px; color: var(--bs-muted); }
.bs-free-head form { margin: -4px -6px 0 0; }
.bs-free-x { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; font-size: 15px; color: #8a93a3; background: none; border: 0; border-radius: 8px; cursor: pointer; }
.bs-free-x:hover { color: var(--bs-ink); background: #f1f4f8; }
.bs-free-list { display: grid; gap: 2px; margin: 0; padding: 6px; list-style: none; background: #f6f8fb; border-radius: 12px; }
.bs-free-list li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 9px; }
.bs-free-list li + li { border-top: 1px solid #e8edf3; border-radius: 0; }
.bs-free-list .ck { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; height: 20px; margin-top: 1px; border-radius: 50%; font-size: 10px; color: #fff; background: var(--bs-primary); }
.bs-free-list li > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bs-free-list b { font-size: 14px; font-weight: 700; line-height: 1.45; color: var(--bs-ink); }
.bs-free-list b.is-solo { font-weight: 600; }
.bs-free-list small { font-size: 13px; line-height: 1.5; color: var(--bs-muted); }
.bs-free-foot { display: flex; justify-content: flex-end; margin: 16px 0 0; }
.bs-free-ok { min-width: 96px; height: 40px; padding: 0 18px; font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: var(--bs-primary); border: 0; border-radius: 10px; cursor: pointer; }
.bs-free-ok:hover { filter: brightness(.95); }
@media (max-width: 640px) { .bs-free-in { padding: 18px 16px 16px; } }
/* 6.48.1 요금표 위 줄 — 결제 주기 · 인원 고르기(옅은 판 + 고른 칸은 흰 바탕 · 파란 글자, 연 결제 위 꼬리표) */
.bs-plan-ctrl.has-badge { padding-top: 12px; }
.bs-plans-wrap .bs-billing, .bs-plans-wrap .bs-cnt { display: flex; align-items: center; gap: 2px; width: max-content; max-width: 100%; margin: 0; padding: 3px; background: #e9eef6; border: 0; border-radius: 10px; }
.bs-plans-wrap .bs-billing button, .bs-plans-wrap .bs-cnt button { position: relative; height: 34px; padding: 0 18px; font-size: 15px; font-weight: 600; color: #6b7686; background: none; border: 0; border-radius: 8px; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.bs-plans-wrap .bs-billing button:hover, .bs-plans-wrap .bs-cnt button:hover { color: var(--bs-ink); }
.bs-plans-wrap .bs-billing button.is-on, .bs-plans-wrap .bs-cnt button.is-on { color: var(--bs-primary); background: #fff; box-shadow: 0 1px 4px rgba(20, 40, 80, .14); }
.bs-plans-wrap .bs-billing .bs-bill-badge { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); margin: 0; padding: 2px 8px; font-size: 12px; font-style: normal; font-weight: 800; line-height: 1.35; white-space: nowrap; color: #fff; background: var(--bs-primary); border-radius: 6px; }
.bs-plans-wrap .bs-billing .bs-bill-badge:empty { display: none; }
.bs-plans-wrap .bs-billing button.is-on .bs-bill-badge { color: #fff; }
@media (max-width: 760px) {
    .bs-plans-wrap .bs-billing, .bs-plans-wrap .bs-cnt { width: 100%; }
    .bs-plans-wrap .bs-billing button { flex: 1 1 0; padding: 0 10px; }
    .bs-plans-wrap .bs-cnt { flex-wrap: wrap; justify-content: center; }     /* 6.48.4 고르기 칸 없이 단추만 — 좁으면 두 줄 */
    .bs-plans-wrap .bs-cnt button { flex: 1 0 auto; padding: 0 12px; }
}
/* 6.48.0 요금표 금액 — 위 '[할인 사유] 정상가 ○원(줄)' · 가운데 월 금액(1인 기준) · 아래 합계 줄 */
.bs-plan-price .bs-pp-why { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 2px; }
.bs-plan-price .bs-pp-why[hidden] { display: none; }
.bs-plan-price .bs-pp-reason { font-size: 15px; font-style: normal; font-weight: 800; color: var(--bs-sale, #f07c00); }
.bs-plan-price .bs-pp-why del { display: inline; font-size: 15px; color: var(--bs-muted); text-decoration: line-through; }
.bs-plan-price .bs-pp-main { display: block; }
.bs-plan-price .bs-pp-why:not([hidden]) + .bs-pp-main b { color: var(--bs-sale, #f07c00); }
.bs-plan-price .bs-pp-per { font-size: 20px; font-weight: 700; color: var(--bs-ink); }
.bs-plan-price .bs-pp-basis { font-size: 15px; color: var(--bs-ink-2, var(--bs-muted)); }
.bs-plan-price .bs-pp-total { font-size: 15px; color: var(--bs-muted); }
.bs-plan-price .bs-pp-total b { font-size: 15px; font-weight: 600; color: var(--bs-muted); }
.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; margin: 40px 0 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); gap: 24px; align-items: start; }   /* 4.48.1 폼이 사이트 폭을 모두 쓰고, 안내(.bs-inq-side)는 아래 가로 줄 */
.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(3, minmax(0, 1fr)); gap: 10px; }   /* 4.48.2 문의 종류가 셋이라 3칸으로 폭을 다 채움 */
.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(auto-fit, minmax(240px, 1fr)); gap: 8px; }   /* 4.48.2 프로그램이 하나여도 폭을 다 채움 */
.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; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; position: static; }
.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: var(--bs-max); 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); }
/* 6.36.1 꼬리말 아래쪽 두 칸 — 왼쪽 약관 · 사업자 정보, 오른쪽 끝 에스크로 마크 · 저작권(좁으면 위아래로) */
.bs-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 18px 40px; }
.bs-foot-l { min-width: 0; }
.bs-foot-r { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; text-align: right; }
.bs-foot-r .bs-escrow { margin: 0 !important; }
.bs-foot-r .bs-foot-copy { margin: 12px 0 0; }
#bs-footer .bs-foot-bottom { padding-bottom: 110px; }     /* 맨 아래까지 내려도 오른쪽 아래 떠 있는 [↑] · [카톡 문의] 가 에스크로 마크 · 저작권 글을 덮지 않게 */
@media (max-width: 640px) { .bs-foot-r { align-items: flex-start; margin-left: 0; text-align: left; } }

.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)); }     /* 5.46.9 폭 가득(전 820px) */
.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(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.bs-pains[hidden] { display: none; }
.bs-pains.is-count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bs-pains.is-count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bs-pains.is-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }     /* 5.46.9 2 · 3개도 폭 가득 */
.bs-pains.is-count-1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.bs-pains li { position: relative; display: flex; flex-direction: column; padding: 18px 16px 14px; background: #fff; border: 1px solid #f3dcdc; border-radius: 14px; box-shadow: 0 8px 24px rgba(229, 72, 77, .05); transition: transform .2s, box-shadow .2s; }
.bs-pains li:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(229, 72, 77, .10); }
.bs-pain-top { display: flex; align-items: center; gap: 10px; }
.bs-pain-top .bs-ico { flex: 0 0 auto; width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }
.bs-pains h3 { margin: 0; font-size: 15.5px; line-height: 1.35; word-break: keep-all; }
.bs-pains p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--bs-muted); word-break: keep-all; }
.bs-pain-fix { display: flex; align-items: flex-start; gap: 6px; margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--bs-primary); word-break: keep-all; }
.bs-pain-fix i { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 10px; color: #fff; background: var(--bs-primary); border-radius: 50%; }
.bs-pains p + .bs-pain-fix { margin-top: 12px; border-top: 1px dashed #eceff5; }
/* 준비 중 */
.bs-pains.is-coming li { background: #fcfcfe; border-color: #e3e7f0; border-style: dashed; box-shadow: none; }
.bs-pains.is-coming .bs-pain-fix { color: #6b7385; }
.bs-pains.is-coming .bs-pain-fix i { background: #9aa3b5; }
.bs-pain-soon { position: absolute; top: -9px; right: 12px; padding: 2px 9px; font-size: 11px; font-style: normal; font-weight: 700; color: #b45309; background: #fff4de; border: 1px solid #f7d9a3; border-radius: 999px; }
/* 탭 */
.bs-pain-tabs { display: flex; justify-content: center; gap: 6px; width: max-content; max-width: 100%; margin: -6px auto 22px; padding: 5px; background: #fff; border: 1px solid #efe3e3; border-radius: 999px; box-shadow: 0 6px 18px rgba(15, 23, 42, .05); }
.bs-pain-tabs button { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 18px; font-size: 15px; font-weight: 700; color: var(--bs-ink-2); background: none; border: 0; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.bs-pain-tabs button span { min-width: 22px; padding: 1px 7px; font-size: 12px; color: var(--bs-primary); background: #eaf0ff; border-radius: 999px; }
.bs-pain-tabs button.is-on { color: #fff; background: var(--bs-primary); }
.bs-pain-tabs button.is-on span { color: var(--bs-primary); background: #fff; }
.bs-pain-tabs button.is-coming.is-on { background: #b45309; }
.bs-pain-tabs button.is-coming.is-on span { color: #b45309; }
@media (max-width: 1200px) { .bs-pains, .bs-pains.is-count-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .bs-pains, .bs-pains[class*="is-count"] { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; } }
@media (max-width: 768px) { .bs-pains, .bs-pains[class*="is-count"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; } .bs-pain-tabs button { padding: 0 12px; font-size: 14px; } }
/* 6.32.5 휴대폰 고민 탭 — 탭 이름이 두 줄로 꺾이던 것: 탭 줄을 폭 가득 셋으로 나누고 이름은 한 줄 */
@media (max-width: 560px) { .bs-pain-tabs { width: 100%; gap: 4px; padding: 4px; box-sizing: border-box; }
  .bs-pain-tabs button { flex: 1 1 0; min-width: 0; justify-content: center; gap: 4px; padding: 0 6px; font-size: 13px; white-space: nowrap; letter-spacing: -.02em; }
  .bs-pain-tabs button span { min-width: 0; padding: 1px 6px; font-size: 11px; } }
@media (max-width: 480px) { .bs-lic-row { flex-wrap: nowrap; gap: 10px; } .bs-lic-row > .bs-qty, .bs-lic[data-standalone] .bs-lic-row > .bs-qty { flex: 1 1 0; min-width: 0; } .bs-lic-row .bs-qty label { font-size: 12.5px; white-space: nowrap; } .bs-lic-row .bs-qty-box { height: 44px; }     /* 6.32.1 휴대폰도 대상자 · 관리자 한 줄에 둘(세로로 쌓여 길던 것) */
    .bs-qty-box { width: 100%; } .bs-qty-in { flex: 1; } .bs-lic { width: 100%; }
    .bs-pains, .bs-pains[class*="is-count"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; } .bs-pains li { padding: 14px 12px 12px; } .bs-pains p { display: none; } .bs-pain-top { flex-direction: column; align-items: flex-start; gap: 8px; } .bs-pains h3 { font-size: 14.5px; } .bs-pain-fix { padding-top: 10px; font-size: 12.5px; } .bs-pain-soon { right: 8px; } }
.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 #pricing .bs-lic { padding: 10px 14px 12px; } .is-snap #pricing .bs-lic-head { margin-bottom: 6px; } .is-snap #pricing .bs-qty-box { height: 38px; } .is-snap #pricing .bs-pp-admin { display: none; } .is-snap #pricing .bs-billing button { height: 36px; }
    .is-snap #pricing .bs-plan-ctrl { margin-bottom: 6px; } .is-snap #pricing .bs-plan-ctrl + .bs-plans, .is-snap #pricing .bs-qty-hint + .bs-plans { margin-top: 18px; }
    .is-snap #pricing .bs-plan { padding: 24px 24px 22px; } .is-snap #pricing .bs-plan-price { margin-top: 12px; } .is-snap #pricing .bs-plan-note { margin-bottom: 14px; } .is-snap #pricing .bs-plan-items { margin-top: 16px; padding-top: 14px; gap: 7px; }
    .is-snap #pricing .bs-plan-sum { min-height: 0; } .is-snap #pricing .bs-pp-tags { display: none; } .is-snap #pricing .bs-plan-items { gap: 4px; font-size: 14px; } .is-snap #pricing .bs-head { margin-bottom: 12px; } .is-snap #pricing .bs-plan-price b { font-size: 34px; } .is-snap #pricing .bs-pp-total:not([hidden]) { display: inline-block; margin: 0 0 0 8px; } .is-snap #pricing .bs-plan-price del:not([hidden]) { display: inline-block; margin-right: 6px; }
    .is-snap .bs-pains p { display: none; }
    .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: 12px; padding-bottom: 12px; 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; padding-bottom: 14px; gap: 6px; }
.is-snap #pricing .bs-billing { margin-bottom: 0; }

/* 메인화면 관리에서 장점·단계 칸을 줄였을 때 (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)); }
    .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: none; margin: 0; }     /* 5.46.9 회원가입 화면도 폭 가득(전 760px) */
#mb_login.wda { min-height: 100vh; }

/* =====================================================================
 * 반응형
 * ===================================================================== */
@media (max-width: 1200px) {
    .bs-header-inner { gap: 20px; }
    .bs-gnb a { padding: 8px 10px; }
    .bs-util { gap: 6px; }
    .bs-util-link { padding-left: 4px; padding-right: 4px; font-size: 13px; }
    .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(3, minmax(0, 1fr)); gap: 8px; }     /* 6.32.1 휴대폰도 문의 종류 셋을 한 줄에(두 줄로 길던 것) */
    .bs-type span { gap: 6px; padding: 12px 4px; font-size: 13px; } .bs-type span i { font-size: 18px; }
    .bs-check-grid, .bs-row-2 { grid-template-columns: minmax(0, 1fr); gap: 0 16px; }
    .bs-check-grid { gap: 8px; }
    .bs-iq-pds { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }     /* 6.32.1 프로그램 고르기도 한 줄에(숨긴 칸은 자리 없음) */
    .bs-iq-pds .bs-check span { gap: 6px; padding: 12px 10px; font-size: 13px; white-space: nowrap; } .bs-iq-pds .bs-check input:not(:checked) + span::after { display: none; }     /* 고르지 않은 칸은 ✓ 자리 없이 — 이름이 꺾이지 않게 */
    .bs-type span { word-break: keep-all; }
    .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; }
}
@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; }
}

/* 근무관리 [대시보드](근무관리를 쓰는 회원 · 기간 안, lib/bizsoft.lib.php 의 bs_pcroom_dash) */
.bs-dash-btn .fa { margin-right: 4px; }
.bs-dash-m { display: none; }
@media (max-width: 1024px) {
    .bs-dash-m { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; margin-left: auto; border-radius: 9px;
        font-size: 14px; font-weight: 700; color: #fff; background: var(--bs-primary); white-space: nowrap; }
    .bs-dash-m + .bs-burger { margin-left: 6px; }
}


/* ── 온라인 결제(4.23.0, 페이앱) : 요금표의 [먼저 문의하기] · 주문서(bizsoft/order.php) · 결과(order_done.php) ── */
.bs-plan-ask { display: block; margin: 8px 0 0; text-align: center; font-size: 13px; color: var(--bs-muted); text-decoration: underline; }
.bs-plan-ask:hover { color: var(--bs-primary); }
.bs-order .bs-fieldset { margin-bottom: 18px; }
.bs-order-plan { margin: 0 0 8px; font-size: 16px; }
.bs-order-plan span { display: block; margin-top: 2px; font-size: 13px; color: var(--bs-muted); }
.bs-order-now { margin: 0 0 12px; padding: 10px 12px; font-size: 13px; color: var(--bs-ink-2); background: var(--bs-soft); border-radius: 10px; }
.bs-order-bill { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bs-order-bill label { display: flex; align-items: center; gap: 8px; padding: 14px; border: 1px solid var(--bs-line); border-radius: 12px; cursor: pointer; }
.bs-order-bill label:has(input:checked) { border-color: var(--bs-primary); background: var(--bs-primary-l); }
.bs-order-bill em { margin-left: 4px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--bs-primary); }
.bs-order-qty { display: flex; flex-wrap: wrap; gap: 14px; }
.bs-order-qty label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.bs-order-qty .bs-input { width: 110px; }
.bs-order-qty small { font-weight: 400; color: var(--bs-muted); }
.bs-order-who { margin: 0 0 10px; font-size: 14px; }
.bs-label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.bs-hint { margin: 8px 0 0; font-size: 13px; color: var(--bs-muted); }
.bs-order-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 6px 0 14px; padding: 16px 18px; background: var(--bs-soft); border-radius: 14px; }
.bs-order-total > span { font-weight: 600; }
.bs-order-total b { font-size: 26px; color: var(--bs-primary); }
.bs-order-total small { flex-basis: 100%; font-size: 13px; color: var(--bs-muted); }
.bs-order .bs-agree { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14px; }
.bs-order-result { padding: 24px; border: 1px solid var(--bs-line); border-radius: 16px; }
.bs-order-result h2 { margin: 0 0 8px; font-size: 22px; }
.bs-order-result.is-paid h2 { color: #0f9f6e; }
.bs-order-result.is-cancel h2, .bs-order-result.is-fail h2 { color: #c0392b; }
.bs-order-dl { display: grid; gap: 6px; margin: 16px 0; }
.bs-order-dl div { display: flex; gap: 12px; font-size: 14px; }
.bs-order-dl dt { flex: none; width: 80px; color: var(--bs-muted); }
.bs-order-dl dd { margin: 0; }
.bs-order-h { margin: 32px 0 10px; font-size: 16px; }
.bs-order-list { display: flex; flex-direction: column; border-top: 1px solid var(--bs-line); }
.bs-order-row { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--bs-line); font-size: 14px; color: inherit; text-decoration: none; }
.bs-order-row em { font-style: normal; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #eef1f6; color: #64748b; }
.bs-order-row.is-paid em { background: #e3f6ef; color: #0f9f6e; }
.bs-order-row.is-cancel em { background: #fdecec; color: #c0392b; }
@media (max-width: 640px) {
    .bs-order-bill { grid-template-columns: 1fr; }
    .bs-order-row { grid-template-columns: 1fr auto; }
    .bs-order-row span:first-child { grid-column: 1 / -1; color: var(--bs-muted); font-size: 12px; }
}

/* ── 4.48.6 숫자 입력 : 쿠팡처럼 — 가운데 숫자, 오른쪽에 ▲ ▼ 가 위아래로 ─────────────────────────────────────
   ① 문의 · 요금 화면의 기존 −/＋ 상자(.bs-qty-box)는 같은 버튼을 ▲ ▼ 모양으로 다시 배치  ② 그 밖의 숫자 입력은 bizsoft.js 의 initNumber 가 .bs-num 으로 감쌈 */
.bs-qty-box, .bs-num { display: grid !important; grid-template-columns: minmax(0, 1fr) 32px; grid-template-rows: 1fr 1fr; height: 46px; border: 1px solid #d5dce8; border-radius: 10px; overflow: hidden; background: #fff; }
.bs-qty-box { height: 50px; }
.bs-qty-box > .bs-qty-in, .bs-num > input { grid-column: 1; grid-row: 1 / 3; width: 100% !important; min-width: 0; height: 100% !important; margin: 0; padding: 0 8px !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; font-size: 18px; font-weight: 800; text-align: center; color: var(--bs-ink, #1b1f27); -moz-appearance: textfield; appearance: textfield; outline: none; }
.bs-qty-in::-webkit-outer-spin-button, .bs-qty-in::-webkit-inner-spin-button, .bs-num > input::-webkit-outer-spin-button, .bs-num > input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bs-qty-box > .bs-qty-btn, .bs-num > button { grid-column: 2; position: relative; width: auto; height: auto; padding: 0; border: 0; border-left: 1px solid #e3e8ef; background: #fff; font-size: 0; color: transparent; cursor: pointer; }
.bs-qty-box > .bs-qty-btn i { display: none; }
.bs-qty-box > .bs-qty-btn[data-step="1"], .bs-num > button.up { grid-row: 1; border-bottom: 1px solid #e3e8ef; }
.bs-qty-box > .bs-qty-btn[data-step="-1"], .bs-num > button.dn { grid-row: 2; }
.bs-qty-box > .bs-qty-btn::before, .bs-num > button::before { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border: solid #555d6b; border-width: 0 2px 2px 0; }
.bs-qty-box > .bs-qty-btn[data-step="1"]::before, .bs-num > button.up::before { transform: translate(-50%, -30%) rotate(-135deg); }
.bs-qty-box > .bs-qty-btn[data-step="-1"]::before, .bs-num > button.dn::before { transform: translate(-50%, -70%) rotate(45deg); }
.bs-qty-box > .bs-qty-btn:hover, .bs-num > button:hover { background: #f3f7ff; }
.bs-qty-box > .bs-qty-btn:hover::before, .bs-num > button:hover::before { border-color: var(--bs-primary, #2f6feb); }
.bs-num > button:disabled { opacity: .35; cursor: default; background: #fff; }
.bs-qty-box:focus-within, .bs-num:focus-within { border-color: var(--bs-primary, #2f6feb); box-shadow: 0 0 0 3px rgba(47, 111, 235, .16); }
#forder .bs-num { height: 50px; }
#forder .bs-num > input { height: 100% !important; border: 0 !important; }

/* 4.51.4 고민 '예정' 탭 · 카드 — 준비중(주황)과 구분되게 보라 */
.bs-pain-tabs button.is-plan.is-on { background: #6d28d9; }
.bs-pain-tabs button.is-plan.is-on span { color: #6d28d9; }
.bs-pain-soon.is-plan { color: #6d28d9; background: #f3edff; border-color: #ddd0fb; }
.bs-pains.is-plan .bs-pain-fix i { background: #a78bfa; }

/* 6.8.5 자동등록방지(캡차) — legend 안 '자동등록방지' 글자(회원가입 label 13px 규칙)가 그림 · 소리 막대 위에 겹치던 것, 휴대폰의 소리 듣기 막대(▶)는 숨김(새로고침 단추는 그대로) */
#captcha legend { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0); white-space: nowrap; }
#captcha.m_captcha audio { display: none !important; }
#captcha.m_captcha #captcha_key { height: 40px; line-height: 40px; box-sizing: border-box; vertical-align: top; }     /* 새로고침 단추(40px)와 같은 높이 */