/* 차똑 기관용 소개 /biz — 메인 랜딩(landing.css)의 틀 위에 기관용에만 필요한 조각.
   landing.css 는 다른 세션이 작업 중이라 여기에만 쓴다. 장면 그림(.og-ci-*)·예시 폰(.mk-*)은 org.css 것을 그대로 쓴다. */

.bz-badge{display:inline-block;margin:0 0 14px;padding:7px 12px;border-radius:999px;background:rgba(0,200,168,.12);color:var(--ac-tx);font:700 13px/1 var(--kr)}

/* ① 지금 겪고 계신 일 — 카드 3장 */
.bz-why{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bz-why li{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:18px 18px 22px}
.bz-why li>b{display:block;margin-top:16px;font:800 13px/1 var(--disp,var(--kr));color:var(--ac-lt,#2ADCBF)}
.bz-why h3{margin:8px 0 0;font:800 20px/1.35 var(--kr);letter-spacing:-.03em;color:#fff}
.bz-why p{margin:8px 0 0;font:400 15px/1.65 var(--kr);color:var(--on-dk2,rgba(255,255,255,.72))}
.bz-why p b{color:#fff}
.bz-art{height:200px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:#0F1A1E;overflow:hidden}
.bz-art .og-ci-dash{width:min(100%,290px);height:170px}
.bz-art .og-ci-book{width:min(92%,280px)}

/* ② 이렇게 — 방식 탭 + 예시 폰 넘기기 */
.bz-tabs{display:flex;gap:6px;margin-top:22px;padding:5px;border-radius:16px;background:#fff;box-shadow:0 1px 0 rgba(16,17,19,.04)}
.bz-tabs button{flex:1;min-height:56px;border:0;border-radius:12px;background:none;cursor:pointer;font:800 16px/1.2 var(--kr);color:var(--tx2,#3E504C);padding:8px 10px}
.bz-tabs button small{display:block;margin-top:3px;font:500 12.5px/1.3 var(--kr);color:var(--tx3,#5C7570)}
.bz-tabs button.on{background:var(--tx,#0E1A1B);color:#fff}
.bz-tabs button.on small{color:rgba(255,255,255,.72)}
.bz-demo[hidden]{display:none}
.bz-key{margin:16px 0 0;padding:12px 14px;border-radius:14px;background:var(--gold-soft,#FBF0D6);color:var(--gold-tx,#6B5320);font:500 15px/1.5 var(--kr)}
.bz-key b{color:var(--tx);font-weight:800}
.bz-demo .mk-row{margin:12px calc(-1 * var(--gut,20px)) 0;padding:8px var(--gut,20px) 6px;scroll-padding:0 var(--gut,20px)}
.bz-demo .mk-nav.prev{left:-4px}.bz-demo .mk-nav.next{right:-4px}
.bz-demo .mk-dots{margin:14px 0 0}
@media (min-width:1100px){.bz-demo .mk-row{justify-content:center}}

/* ③ 이런 곳에 먼저 */
.bz-who{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px}
.bz-who article{background:var(--surf);border:1px solid var(--edge);border-radius:18px;padding:24px 22px}
.bz-who span{font:32px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.bz-who b{display:block;margin-top:12px;font:800 19px/1.3 var(--kr);letter-spacing:-.02em;color:var(--tx)}
.bz-who p{margin:8px 0 0;font:400 15px/1.65 var(--kr);color:var(--tx2)}

/* ④ 요금 */
#price .h2 u{text-decoration:none;background:linear-gradient(transparent 62%,rgba(0,200,168,.35) 62%)}
.bz-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.bz-plan{position:relative;background:#fff;border:2px solid transparent;border-radius:20px;padding:22px 18px;text-align:center;box-shadow:0 1px 0 rgba(16,17,19,.04),0 18px 36px -28px rgba(16,17,19,.35)}
.bz-plan.on{border-color:var(--brand)}
.bz-plan em{position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:5px 10px;border-radius:999px;background:var(--brand);color:#04302A;font:800 12px/1 var(--kr);font-style:normal;white-space:nowrap}
.bz-plan b{display:block;font:800 20px/1.2 var(--kr);color:var(--tx)}
.bz-plan span{display:block;margin-top:6px;font:500 14px/1.3 var(--kr);color:var(--tx2)}
.bz-plan strong{display:block;margin-top:14px;font:800 22px/1 var(--kr);letter-spacing:-.02em;color:var(--tx)}
.bz-terms{margin-top:18px}
.bz-terms li:last-child{display:flex;margin-top:0}
.bz-tw{margin-top:18px;overflow-x:auto;background:#fff;border-radius:18px;box-shadow:0 1px 0 rgba(16,17,19,.04)}
.bz-tw table{width:100%;border-collapse:collapse;font:500 15px/1.4 var(--kr);min-width:300px}
.bz-tw caption{text-align:left;padding:16px 16px 4px;font:700 13px/1 var(--kr);color:var(--tx3,#5C7570)}
.bz-tw th{text-align:left;padding:10px 16px;font:600 12px/1 var(--kr);color:var(--tx3,#5C7570);border-bottom:1px solid var(--edge)}
.bz-tw td{padding:12px 16px;border-bottom:1px solid var(--edge);color:var(--tx);vertical-align:top}
.bz-tw tr:last-child td{border-bottom:0}
.bz-tw td small{display:block;margin-top:3px;font-size:12px;color:var(--tx3,#5C7570)}
.bz-cta{margin:22px 0 0;text-align:center}
.bz-cta .btn{display:inline-flex;justify-content:center;min-width:min(100%,320px)}

/* ⑤ 시작하기 4단계 */
.bz-steps{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.bz-steps li{background:var(--surf);border-radius:18px;padding:20px 18px}
.bz-steps i{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--tx);color:#fff;font:800 14px/1 var(--disp,var(--kr));font-style:normal}
.bz-steps b{display:block;margin-top:12px;font:800 17px/1.35 var(--kr);color:var(--tx)}
.bz-steps span{display:block;margin-top:6px;font:400 14px/1.55 var(--kr);color:var(--tx2)}

/* 마지막 — 쪽지가 명함이라 글자를 조금 작게 */
.last .peck-note em{font-size:11.5px;color:#5C4A24}

@media (max-width:860px){
  .bz-why,.bz-who{grid-template-columns:1fr}
  .bz-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .bz-plans{grid-template-columns:1fr;gap:16px}
  .bz-plan{display:grid;grid-template-columns:1fr auto;text-align:left;align-items:center;padding:18px}
  .bz-plan span{grid-column:1}
  .bz-plan strong{grid-column:2;grid-row:1/3;margin:0;font-size:20px}
  .bz-steps{grid-template-columns:1fr}
  .bz-tabs button{font-size:15px}
  .bz-tabs button small{font-size:11.5px}
  .bz-art{height:180px}
}

.bz-plan-note{display:block;margin-top:8px;font:500 12px/1.4 var(--kr);color:var(--tx3,#5C7570)}
@media (max-width:520px){.bz-plan-note{grid-column:1/-1;margin-top:6px}}
@media (max-width:520px){.bz-tw table{min-width:0;font-size:14px}.bz-tw th,.bz-tw td{padding:11px 8px}.bz-tw th:first-child,.bz-tw td:first-child{padding-left:14px}.bz-tw td:last-child,.bz-tw th:last-child{padding-right:14px;text-align:right}.bz-tw caption{padding:14px 14px 4px}}

/* 첫 화면: 전(명함) → 후(차 안 QR) — 똑이 한 마리 대신 기관의 아픈 곳을 그림으로 (회장님) */
.bz-chips{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bz-chips li{padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.72);color:var(--tx);font:700 14px/1 var(--kr);box-shadow:0 1px 0 rgba(4,48,42,.06)}
.hero-art.bz-ba{display:flex;flex-direction:column;align-items:center;gap:6px}
.hero-art.bz-ba::before{display:none}
.bz-ba-before,.bz-ba-after{position:relative;width:min(100%,340px);padding:16px 14px 14px;border-radius:22px;text-align:center}
.bz-ba-before{background:#0F1A1E}
.bz-ba-before p{margin:10px 0 0;font:700 13px/1.4 var(--kr);color:#FF9A88}
.bz-ba-after{background:#fff;box-shadow:0 18px 40px -22px rgba(4,48,42,.45)}
.bz-ba-tag{position:absolute;left:14px;top:-11px;padding:6px 10px;border-radius:999px;font:800 12px/1 var(--kr);z-index:3}
.bz-ba-tag.bad{background:#E0533D;color:#fff}
.bz-ba-tag.good{background:var(--brand);color:#04302A}
.bz-ba .og-ci-dash{width:100%;height:150px;margin:0 auto}
.bz-ba .og-ci-card{width:118px;padding:8px 10px;animation:none}
.bz-ba .og-ci-card b{font-size:13px}.bz-ba .og-ci-card em{font-size:11.5px}
.bz-ba .bz-c1{left:12px;right:auto;bottom:30px;transform:rotate(-10deg)}
.bz-ba .bz-c2{left:auto;right:10px;bottom:26px;transform:rotate(8deg)}
.bz-ba .bz-c3{left:50%;bottom:12px;transform:translateX(-50%) rotate(-2deg);box-shadow:0 10px 20px rgba(0,0,0,.55)}
.bz-ba-arrow{font:900 26px/1 var(--kr);font-style:normal;color:var(--ac-tx)}
.bz-ba-phone{height:300px;display:flex;justify-content:center;overflow:hidden}
.bz-ba-phone .mk-phone{transform:scale(.8);transform-origin:top center}
.bz-ba-res{display:flex;align-items:center;gap:10px;margin-top:-4px;padding:10px 14px;border-radius:14px;background:var(--surf);text-align:left}
.bz-ba-res span{font-size:20px}
.bz-ba-res p{margin:0;font:500 12.5px/1.4 var(--kr);color:var(--tx2)}
.bz-ba-res b{display:block;font:800 15px/1.3 var(--kr);color:var(--tx)}
@media (max-width:520px){.bz-ba-phone{height:250px}.bz-ba-phone .mk-phone{transform:scale(.66)}.bz-ba .og-ci-dash{height:130px}.bz-chips li{font-size:13px;padding:8px 11px}}
/* 폰에서는 제목이 먼저 — 그림은 그 아래 (회장님: "차량의 운전자 정보와 관리, 이제 간편하게"로 시작) */
.bz-chips{margin-bottom:22px}
@media (max-width:960px){
  .hero .hero-in{display:flex;flex-direction:column}
  .hero .hero-copy{order:1}
  .hero .hero-art.bz-ba{order:2;margin-top:34px;width:100%}
}

.bz-seat-note{margin:16px 0 0;font:500 13px/1.5 var(--kr);color:var(--tx3,#5C7570);text-align:center}