/* BASIC css start */
.b2b-guide-m{
  color:#222;
  line-height:1.6;
  max-width:100%;
  margin:0 auto;
  padding:0 16px 90px; /* 하단 sticky 바 공간 확보 */
  font-size:14px;
}
.b2b-guide-m *{box-sizing:border-box;}

.b2b-guide-m h2.bg-h2{
  font-size:20px;
  font-weight:800;
  line-height:1.35;
  margin:20px 0 10px;
  color:#111;
}
.b2b-guide-m p.bg-lead{
  color:#555;
  margin:0 0 26px;
  font-size:13.5px;
}

.b2b-guide-m .bg-sec{margin:0 0 34px;}
.b2b-guide-m h3.bg-h3{
  margin:0 0 4px;
  padding-left:10px;
  border-left:4px solid #1B63B0;
  color:#111;
  font-weight:700;
  font-size:16px;
}
.b2b-guide-m p.bg-sub{
  color:#8b8b8b;
  margin:6px 0 16px 14px;
  font-size:12.5px;
}

/* ---------- 주문 방식 카드 (세로 스택) ---------- */
.b2b-guide-m .bg-order-stack{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.b2b-guide-m .bg-order-col{
  border:1px solid #ddd;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
.b2b-guide-m .bg-order-head{
  padding:14px 16px;
  background:#fafafa;
  border-bottom:1px solid #eee;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.b2b-guide-m .bg-order-head h4{
  font-weight:800;
  margin:0;
  color:#111;
  font-size:15px;
}
.b2b-guide-m .bg-order-head .bg-tag{
  display:inline-block;
  font-weight:700;
  font-size:11.5px;
  color:#1B63B0;
  border:1px solid #1B63B0;
  border-radius:999px;
  padding:3px 10px;
}
.b2b-guide-m .bg-order-col.b .bg-order-head .bg-tag{color:#8A5E12; border-color:#E4B33D;}

.b2b-guide-m .bg-order-rows{padding:12px 16px;}
.b2b-guide-m .bg-order-row{
  display:flex;
  gap:10px;
  padding:8px 0;
  border-bottom:1px dashed #eee;
}
.b2b-guide-m .bg-order-row:last-child{border-bottom:none;}
.b2b-guide-m .bg-order-row .lbl{
  flex:0 0 42px;
  color:#8b8b8b;
  font-weight:700;
  font-size:12.5px;
}
.b2b-guide-m .bg-order-row .val{
  color:#555;
  font-size:13px;
}
.b2b-guide-m .bg-order-row .val b{color:#222;}

.b2b-guide-m .bg-order-foot{padding:0 16px 16px;}
.b2b-guide-m .bg-btn{
  display:block;
  text-align:center;
  font-weight:700;
  font-size:13.5px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid #222;
  color:#222 !important;
  text-decoration:none;
  background:#fff;
}
.b2b-guide-m .bg-btn:active{background:#222; color:#fff !important;}
.b2b-guide-m .bg-btn.blue{border-color:#1B63B0; color:#1B63B0 !important;}
.b2b-guide-m .bg-btn.blue:active{background:#1B63B0; color:#fff !important;}

.b2b-guide-m .bg-note{
  margin:0;
  color:#666;
  background:#fafafa;
  border-top:1px solid #eee;
  padding:12px 16px;
  font-size:12px;
}
.b2b-guide-m .bg-note b{color:#333;}

/* ---------- 절차 요약 바 : 가로 스크롤 ---------- */
.b2b-guide-m .bg-flow-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin-bottom:18px;
  padding-bottom:4px;
}
.b2b-guide-m .bg-flow{
  display:flex;
  gap:8px;
  width:max-content;
}
.b2b-guide-m .bg-flow-step{
  flex:0 0 auto;
  min-width:88px;
  text-align:center;
  padding:12px 10px;
  font-weight:700;
  font-size:11.5px;
  color:#555;
  border:1px solid #ddd;
  border-radius:999px;
  background:#fafafa;
}
.b2b-guide-m .bg-flow-step em{
  display:block;
  font-style:normal;
  color:#1B63B0;
  font-weight:800;
  font-size:10.5px;
  margin-bottom:3px;
}

/* ---------- 토글(아코디언) ---------- */
.b2b-guide-m .bg-step-toggle{
  border:1px solid #ddd;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
}
.b2b-guide-m .bg-toggle-btn{
  padding:14px 16px;
  background:#fdfdfd;
  font-weight:700;
  font-size:13.5px;
  color:#1B63B0;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  list-style:none;
}
.b2b-guide-m .bg-toggle-btn::-webkit-details-marker{display:none;}
.b2b-guide-m .bg-toggle-btn .arrow-icon{
  font-style:normal;
  font-size:11px;
  transition:transform .3s ease;
  color:#888;
}
.b2b-guide-m .bg-step-toggle[open] .bg-toggle-btn{
  border-bottom:1px solid #eee;
  background:#f4f8fc;
}
.b2b-guide-m .bg-step-toggle[open] .arrow-icon{transform:rotate(180deg);}

.b2b-guide-m .bg-step-wrapper{padding:16px;}

/* ---------- 단계별 상세 (세로 스택) ---------- */
.b2b-guide-m .bg-step{
  padding:18px 0;
  border-top:1px solid #eee;
}
.b2b-guide-m .bg-step:first-child{border-top:none; padding-top:0;}
.b2b-guide-m .bg-step-num{
  font-weight:700;
  font-size:12px;
  color:#1B63B0;
  margin-bottom:6px;
}
.b2b-guide-m .bg-step-num b{
  font-size:16px;
  font-weight:800;
  color:#222;
  margin-left:4px;
}
.b2b-guide-m .bg-step-title{font-size:14px; font-weight:800; margin-bottom:8px;}
.b2b-guide-m .bg-step-body p{color:#555; margin:0 0 6px; font-size:13px;}
.b2b-guide-m .bg-step-body p:last-child{margin-bottom:0;}

.b2b-guide-m .bg-sub-box{
  margin-top:10px;
  border:1px solid #ddd;
  border-radius:10px;
  padding:12px 14px;
  background:#fafafa;
  color:#555;
  font-size:12.5px;
}
.b2b-guide-m .bg-sub-box .bg-sb-title{font-weight:700; color:#222; margin-bottom:6px;}
.b2b-guide-m .bg-sub-box ol{margin:0; padding-left:16px;}
.b2b-guide-m .bg-sub-box ol li{margin-bottom:3px;}

.b2b-guide-m .bg-warn{
  margin-top:10px;
  background:#FFF8E9;
  border:1px solid #E4B33D;
  border-radius:10px;
  padding:10px 12px;
  color:#8A5E12;
  font-size:12px;
}

/* ---------- 맞춤 구매 서비스 ---------- */
.b2b-guide-m .bg-service{
  padding:18px 0;
  border-top:1px solid #eee;
}
.b2b-guide-m .bg-service:first-child{border-top:none; padding-top:0;}
.b2b-guide-m .bg-service-tag span{
  display:inline-block;
  font-weight:700;
  font-size:12.5px;
  color:#1B63B0;
  background:#EEF4FA;
  border-radius:999px;
  padding:5px 12px;
  margin-bottom:8px;
}
.b2b-guide-m .bg-service-body p{color:#555; margin:0 0 6px; font-size:13px;}
.b2b-guide-m .bg-service-body p:last-child{margin-bottom:0;}
.b2b-guide-m .bg-service-note{color:#8b8b8b; margin-top:7px; font-size:12px;}

.b2b-guide-m .bg-final{
  margin-top:6px;
  border:1px solid #E4B33D;
  border-radius:12px;
  background:#FFF8E9;
  padding:16px 16px;
}
.b2b-guide-m .bg-final .bg-ft{font-weight:800; color:#8A5E12; margin-bottom:6px; font-size:13px;}
.b2b-guide-m .bg-final p{color:#6E4A0F; margin:0; font-size:12.5px;}

/* ---------- 하단 안내 블록 (페이지 내 footer) ---------- */
.b2b-guide-m .bg-footer{
  background:#124A87;
  color:#fff;
  border-radius:14px;
  padding:22px 18px;
  text-align:center;
}
.b2b-guide-m .bg-footer h4{
  font-weight:800;
  margin:0 0 6px;
  color:#fff;
  font-size:15px;
  line-height:1.4;
}
.b2b-guide-m .bg-footer p{
  color:rgba(255,255,255,.75);
  margin:0 0 16px;
  font-size:12px;
}
.b2b-guide-m .bg-footer .footer-btn{
  border-color:#fff;
  
  max-width:260px;
  margin:0 auto;
}
.b2b-guide-m .bg-footer .footer-btn:active{background:#fff; color:#124A87 !important;}

/* ---------- 화면 하단 고정 CTA 바 ---------- */
.bg-sticky-cta{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:50;
  display:flex;
  gap:8px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:#fff;
  border-top:1px solid #e5e5e5;
  box-shadow:0 -2px 10px rgba(0,0,0,.06);
}
.bg-sticky-btn{
  flex:1;
  text-align:center;
  padding:12px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  text-decoration:none;
}
.bg-sticky-btn.call{
  flex:0 0 30%;
  border:1px solid #1B63B0;
  color:#1B63B0 !important;
  background:#fff;
}
.bg-sticky-btn.main{
  background:#1B63B0;
  color:#fff !important;
}

/* 360px 이하 초소형 화면 보정 */
@media (max-width:360px){
  .b2b-guide-m{font-size:13px;}
  .bg-sticky-btn{font-size:12px; padding:11px 6px;}
}
/* BASIC css end */