/* 사업영역 페이지: 왼쪽 모션 + 오른쪽 내용, 아래 특징·진행 방식·이용 방식, 오른쪽 목차 */

/* 블록 제목·목록·진행 단계 */
.be__t { font: 700 18px/1.4 var(--sans); letter-spacing: -.01em; color: var(--ink); padding-bottom: 14px; margin-bottom: 4px; border-bottom: 2px solid var(--ink); }
.be__list { list-style: none; margin: 0; padding: 0; }
.be__list li { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.be__list b { font-size: 16px; font-weight: 700; line-height: 1.5; }
.be__list span { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.be__tags { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.be__how { margin-top: 48px; }
.be__how ol { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; position: relative; }
.be__how ol::before { content: ""; position: absolute; left: 14px; right: 14px; top: 14px; height: 2px; background: var(--line); }
.be__how li { position: relative; display: flex; flex-direction: column; gap: 4px; padding-right: 8px; }
.be__how li span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--paper); border: 2px solid var(--blue); color: var(--blue-ink); font: 700 12px/1 var(--sans); font-variant-numeric: tabular-nums; margin-bottom: 10px; position: relative; }
.be__how li:first-child span { background: var(--blue); color: #fff; }
.be__how li b { font-size: 16px; line-height: 1.4; }
.be__how li small { font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.be__use { margin-top: 48px; }
.be__use .be__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
.be__use .be__list li { grid-template-columns: 1fr; gap: 2px; }
.be__use .note, .be__more { margin-top: 14px; }
@media (max-width: 767px) {
  .be__list li { grid-template-columns: 1fr; gap: 2px; }
  .be__use .be__list { grid-template-columns: 1fr; }
  .be__how ol { grid-template-columns: 1fr; gap: 0; }
  .be__how ol::before { left: 14px; right: auto; top: 14px; bottom: 14px; width: 2px; height: auto; }
  .be__how li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; padding: 0 0 16px; }
  .be__how li span { grid-row: span 2; margin: 0; }
}

/* 사업 한 칸: 왼쪽 모션 + 오른쪽 내용 */
.bf { padding-block: 80px; scroll-margin-top: 120px; }
.bf + .bf { border-top: 1px solid var(--line); }
.bf__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.bf__stage { background: var(--tint, #F5F6F8); border-radius: 20px; padding: 16px; }
.bmo { display: block; width: 100%; height: auto; }
.bm { transform-box: fill-box; will-change: transform, opacity; }
.bf__text .shead__p { margin-top: 10px; color: var(--ink-2); }
.bf__pts { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--line); }
.bf__pts li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 4px 20px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); }
.bf__pts b { font-weight: 700; font-size: 16px; line-height: 1.45; }
.bf__pts span { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.bf__text .be__tags { margin-top: 12px; }
.bf__text .shead__h { margin-top: 0; }
.bf__feat .be__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
.bf__feat .be__list li { grid-template-columns: 1fr; gap: 2px; }
@media (max-width: 767px) { .bf__pts li { grid-template-columns: 1fr; gap: 2px; } .bf__feat .be__list { grid-template-columns: 1fr; } }
.bf__panel { margin-top: 48px; }
.bf__panel .be__how { margin-top: 48px; }
@media (max-width: 1023px) { .bf__row { grid-template-columns: 1fr; gap: 28px; } .bf { padding-block: 56px; } }

/* 오른쪽 목차 (스크롤 스파이) */
.bspy { position: fixed; right: max(20px, 2.5vw); top: 50%; z-index: 30; width: 180px; opacity: 0; pointer-events: none; transition: opacity .3s; font: 400 13px/1.45 var(--sans); }
.bspy.is-on { opacity: 1; pointer-events: auto; }
.bspy ul { list-style: none; margin: 0; padding: 0; }
.bspy > ul { border-left: 1px solid var(--line); }
.bspy a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 1px solid transparent; color: #A3ABB8; text-decoration: none; transition: color .2s, border-color .2s; }
.bspy a:hover { color: var(--ink-2); }
.bspy > ul > li > a[aria-current] { color: var(--ink); font-weight: 600; border-left-color: var(--ink); }
@media (max-width: 1199px) { .bspy { display: none; } }
@media (prefers-reduced-motion: reduce) { .bspy, .bspy a { transition: none; } }
@media (min-width: 1200px) { .bf .wrap { padding-right: calc(var(--gut-r) + 210px); } }   /* 오른쪽 위치 표시가 내용을 가리지 않게 */

/* 글자 체계 정렬 (2026-10-27): 항목 제목 T4 · 설명 T6 · 본문 안 강조 T6+600 · 번호 T8 · 보조 T9 */
.be__t { font-size: var(--t4-size); line-height: var(--t4-lh); font-weight: 600; }
.bf__pts b { font-size: var(--t6-size); font-weight: 600; }
.bf__pts span { font-size: var(--t6-size); line-height: var(--t6-lh); }
.be__tags { font-size: var(--t9-size); line-height: var(--t9-lh); }
.be__how li span { font-size: var(--t8-size); font-weight: 600; }
.be__how li small, .be__list span { font-size: var(--t9-size); line-height: var(--t9-lh); }
.be__list b { font-weight: 600; }
.bspy a { font-size: var(--t8-size); }