/* 6.281.0 제품 소개(bizsoft/landing.php — /company/ · /family/) 새 모양 — 기능 상세(feature.css)와 같은 결.
   색 = --ld-ac(제품 색 — 비즈키퍼 = 테마 파랑, 아이안심 = 제품 색 청록), 회색은 slate 고정. 글꼴은 테마 --bs-font. 그림 = 테마 .oks(theme.css). */
.ld { --ld-ac: var(--bs-primary, #2563eb); --ld-ink: #0f172a; --ld-ink2: #334155; --ld-mut: #64748b; --ld-line: #e2e8f0; --ld-soft: #f8fafc; color: var(--ld-ink); }
.ld *, .ld *::before, .ld *::after { box-sizing: border-box; }
.ld h1, .ld h2, .ld h3, .ld p, .ld b, .ld small { word-break: keep-all; }

/* ── 첫 화면 ── */
.ld-hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(120deg, color-mix(in srgb, var(--ld-ac) 86%, #000) 0%, var(--ld-ac) 50%, color-mix(in srgb, var(--ld-ac) 70%, #fff) 100%); }
.ld-hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; }
.ld-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 56px; padding-top: 96px; padding-bottom: 150px; }
.ld-eyebrow { display: inline-block; margin: 0 0 20px; padding: 7px 14px; font-size: 13.5px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; }
.ld-hero h1 { margin: 0 0 22px; font-size: 46px; font-weight: 800; line-height: 1.28; letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.ld-hero h1 strong { font-weight: 800; color: #fff; background: linear-gradient(transparent 62%, rgba(255, 255, 255, .28) 62%); }
.ld-lead { max-width: 560px; margin: 0; font-size: 17px; line-height: 1.78; color: rgba(255, 255, 255, .9); }
.ld-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.ld-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 52px; padding: 0 26px; font-size: 16px; font-weight: 700; border-radius: 12px; text-decoration: none; transition: background .15s, transform .15s; }
.ld-btn.is-w { color: var(--ld-ac); background: #fff; }
.ld-btn.is-w:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4); }
.ld-btn.is-o { color: #fff; border: 1.5px solid rgba(255, 255, 255, .65); }
.ld-btn.is-o:hover { background: rgba(255, 255, 255, .12); }
.ld-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 14px; color: rgba(255, 255, 255, .85); }
.ld-trust i { margin-right: 5px; color: #fff; }
.ld-hero-v { position: relative; min-width: 0; }
.ld-shot { position: relative; padding: 10px; background: #fff; border-radius: 18px; box-shadow: 0 34px 70px -26px rgba(15, 23, 42, .55); }
.ld-shot .oks { border-radius: 10px; overflow: hidden; }
.ld-shot-ic { display: flex; align-items: center; justify-content: center; min-height: 260px; font-size: 76px; color: var(--ld-ac); background: color-mix(in srgb, var(--ld-ac) 7%, #fff); border-radius: 10px; }
.ld-hero-v .ld-shot { transform: perspective(1400px) rotateY(-6deg); }
.ld-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 13px 17px; color: var(--ld-ink); background: #fff; border-radius: 16px; box-shadow: 0 20px 44px -16px rgba(15, 23, 42, .5); }
.ld-float > i { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 18px; color: #fff; background: var(--ld-ac); border-radius: 12px; }
.ld-float b { display: block; font-size: 15px; font-weight: 800; }
.ld-float small { display: block; font-size: 12.5px; color: var(--ld-mut); }
.ld-float.is-a { left: -34px; bottom: 40px; }
.ld-float.is-b { right: -18px; top: -22px; }

/* ── 핵심 칸 줄(첫 화면 아래에 걸침) ── */
.ld-tiles-s { position: relative; z-index: 2; margin-top: -84px; }
.ld-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ld-tiles li { display: flex; align-items: flex-start; gap: 14px; padding: 22px 20px; background: #fff; border: 1px solid var(--ld-line); border-radius: 18px; box-shadow: 0 18px 40px -24px rgba(15, 23, 42, .35); }
.ld-tiles b { display: block; margin: 2px 0 5px; font-size: 16px; font-weight: 800; color: var(--ld-ink); }
.ld-tiles small { display: block; font-size: 13.5px; line-height: 1.55; color: var(--ld-mut); }
.ld-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: var(--ld-ac); background: color-mix(in srgb, var(--ld-ac) 10%, #fff); border-radius: 14px; }
.ld-ic svg { width: 24px; height: 24px; }

/* ── 공통 제목 ── */
.ld-eye { margin: 0 0 12px; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .1em; color: var(--ld-ac); }
.ld-h2 { margin: 0; font-size: 36px; font-weight: 800; line-height: 1.3; letter-spacing: -.03em; color: var(--ld-ink); text-wrap: balance; }
.ld-h2.is-c { text-align: center; }
.ld-sub { max-width: 640px; margin: 14px auto 0; text-align: center; font-size: 16.5px; line-height: 1.7; color: var(--ld-mut); }

/* ── 기능 묶음(그림 + 기능 목록, 좌우 번갈아) ── */
.ld-groups { padding: 110px 0 40px; background: #fff; }
.ld-grp { padding: 70px 0; }
.ld-grp.is-alt { background: var(--ld-soft); border-top: 1px solid #eef2f6; border-bottom: 1px solid #eef2f6; }
.ld-grp:first-of-type { margin-top: 40px; }
.ld-grp-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 56px; }
.ld-grp.is-alt .ld-grp-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ld-grp.is-alt .ld-grp-t { order: 2; }
.ld-grp-eye { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14.5px; font-weight: 800; color: var(--ld-ac); }
.ld-grp-eye > i { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 14px; color: #fff; background: var(--ld-ac); border-radius: 9px; }
.ld-grp-eye small { padding: 2px 8px; font-size: 12px; color: var(--ld-ac); background: color-mix(in srgb, var(--ld-ac) 10%, #fff); border-radius: 999px; }
.ld-grp h3 { margin: 0 0 22px; font-size: 30px; font-weight: 800; line-height: 1.32; letter-spacing: -.03em; color: var(--ld-ink); }
.ld-fl { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ld-fl a { display: flex; align-items: center; gap: 13px; padding: 11px 12px; margin: 0 -12px; color: inherit; text-decoration: none; border-radius: 12px; transition: background .15s; }
.ld-fl a > i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 16px; color: var(--ld-ac); background: color-mix(in srgb, var(--ld-ac) 9%, #fff); border-radius: 10px; }
.ld-fl a > span { flex: 1; min-width: 0; }
.ld-fl b { display: block; font-size: 15.5px; font-weight: 800; color: var(--ld-ink); }
.ld-fl small { display: block; overflow: hidden; margin-top: 2px; font-size: 13px; color: var(--ld-mut); white-space: nowrap; text-overflow: ellipsis; }
.ld-fl em { flex: none; color: #cbd5e1; font-size: 18px; transition: color .15s, transform .15s; }
.ld-grp.is-alt .ld-fl a:hover { background: #fff; }
.ld-fl a:hover { background: var(--ld-soft); }
.ld-fl a:hover b { color: var(--ld-ac); }
.ld-fl a:hover em { color: var(--ld-ac); transform: translateX(3px); }
.ld-grp-v { min-width: 0; }
.ld-grp-v .ld-shot { box-shadow: 0 30px 60px -28px rgba(15, 23, 42, .32); border: 1px solid var(--ld-line); }
.ld-all { padding-top: 46px; text-align: center; }
.ld-all a { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 24px; font-size: 15.5px; font-weight: 700; color: var(--ld-ac); background: color-mix(in srgb, var(--ld-ac) 8%, #fff); border-radius: 12px; text-decoration: none; }
.ld-all a:hover { color: #fff; background: var(--ld-ac); }

/* ── 왜 ── */
.ld-why { padding: 100px 0; background: var(--ld-soft); border-top: 1px solid #eef2f6; }
.ld-why-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 46px 0 0; padding: 0; list-style: none; }
.ld-why-g li { padding: 28px 24px; background: #fff; border: 1px solid var(--ld-line); border-radius: 18px; }
.ld-why-g b { display: block; margin: 18px 0 8px; font-size: 18px; font-weight: 800; color: var(--ld-ink); }
.ld-why-g p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--ld-mut); }

/* ── 시작 순서 ── */
.ld-steps-s { padding: 100px 0; background: #fff; }
.ld-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 50px 0 0; padding: 0; list-style: none; counter-reset: none; }
.ld-steps::before { content: ''; position: absolute; top: 24px; left: 12%; right: 12%; border-top: 2px dashed color-mix(in srgb, var(--ld-ac) 35%, #fff); }
.ld-steps li { position: relative; text-align: center; }
.ld-steps em { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; font-style: normal; font-size: 19px; font-weight: 800; color: #fff; background: var(--ld-ac); border: 5px solid #fff; border-radius: 50%; box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--ld-ac) 70%, #000); }
.ld-steps b { display: block; margin: 16px 0 8px; font-size: 17px; font-weight: 800; color: var(--ld-ink); }
.ld-steps p { max-width: 240px; margin: 0 auto; font-size: 14.5px; line-height: 1.7; color: var(--ld-mut); }

/* ── 자주 묻는 질문(6.281.1 — 아코디언은 테마 .bs-faq-* · bizsoft.js) ── */
.ld-faq { padding: 100px 0; background: #fff; border-top: 1px solid #eef2f6; }
.ld-faq-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
.ld-eye.is-l { text-align: left; }
.ld-faq-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; font-size: 15px; font-weight: 700; color: var(--ld-ac); text-decoration: none; }
.ld-faq-list { min-width: 0; }

/* ── 고객지원 · 다른 제품 ── */
.ld-sup { padding: 90px 0; background: var(--ld-soft); border-top: 1px solid #eef2f6; }
.ld-sup-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 40px 0 0; padding: 0; list-style: none; }
.ld-sup-g a { display: flex; align-items: center; gap: 14px; height: 100%; padding: 20px; color: inherit; text-decoration: none; background: #fff; border: 1px solid var(--ld-line); border-radius: 16px; transition: border-color .15s, box-shadow .15s; }
.ld-sup-g a:hover { border-color: var(--ld-ac); box-shadow: 0 14px 30px -18px rgba(15, 23, 42, .35); }
.ld-sup-g b { display: block; font-size: 15.5px; font-weight: 800; color: var(--ld-ink); }
.ld-sup-g small { display: block; margin-top: 2px; font-size: 13px; color: var(--ld-mut); }
.ld-other { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding: 24px 28px; color: inherit; text-decoration: none; background: #fff; border: 1px solid var(--ld-line); border-radius: 18px; }
.ld-other small { display: block; font-size: 13.5px; color: var(--ld-mut); }
.ld-other b { display: block; margin-top: 3px; font-size: 18px; font-weight: 800; color: var(--ld-ink); }
.ld-other-b { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 20px; font-size: 14.5px; font-weight: 700; color: var(--ld-ac); border: 1.5px solid var(--ld-ac); border-radius: 10px; }
.ld-other:hover .ld-other-b { color: #fff; background: var(--ld-ac); }

/* ── 마무리 띠 ── */
.ld-cta { color: #fff; background: linear-gradient(120deg, #0f172a, color-mix(in srgb, var(--ld-ac) 55%, #0f172a)); }
.ld-cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding-top: 66px; padding-bottom: 66px; }
.ld-cta p { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.4; letter-spacing: -.02em; color: #fff; }
.ld-cta .ld-btns { margin-top: 0; }

@media (max-width: 1024px) {
    .ld-hero-in { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-top: 70px; padding-bottom: 130px; }
    .ld-hero-v .ld-shot { transform: none; }
    .ld-float.is-a { left: 10px; }
    .ld-float.is-b { right: 10px; }
    .ld-tiles, .ld-why-g, .ld-sup-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ld-grp-in, .ld-grp.is-alt .ld-grp-in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .ld-grp.is-alt .ld-grp-t { order: 0; }
    .ld-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
    .ld-steps::before { display: none; }
    .ld-faq-in { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 640px) {
    .ld-hero-in { padding-top: 52px; padding-bottom: 110px; }
    .ld-hero h1 { font-size: 30px; }
    .ld-lead { font-size: 15px; }
    .ld-btn { height: 48px; padding: 0 20px; font-size: 15px; }
    .ld-float { position: static; margin-top: 10px; }
    .ld-hero-v { display: grid; }
    .ld-shot { padding: 5px; border-radius: 12px; }
    .ld-tiles, .ld-why-g, .ld-sup-g, .ld-steps { grid-template-columns: minmax(0, 1fr); }
    .ld-tiles-s { margin-top: -70px; }
    .ld-h2 { font-size: 26px; }
    .ld-grp h3 { font-size: 23px; }
    .ld-groups { padding: 72px 0 20px; }
    .ld-grp { padding: 48px 0; }
    .ld-why, .ld-steps-s, .ld-sup, .ld-faq { padding: 70px 0; }
    .ld-cta p { font-size: 21px; }
}