@charset "utf-8";

/* ============================================================
   사업모델 페이지 공통 템플릿 (ODM · OEM · OBM)
   시안: Figma 3gC6DdCllqkGj4ATOQ8mMI  ODM 2048:3069

   세 페이지가 같은 뼈대를 쓴다. 다른 것은 글과 사진뿐이라
   페이지 파일에는 자료 객체만 두고 모양은 전부 여기에 둔다.

   구성
     bm-nav      ODM / OEM / OBM 페이지 이동 (탭처럼 보이지만 링크다)
     bm-intro    큰 키워드 + 아래 한 줄 + 오른쪽 설명
     bm-flow     진행 프로세스 — 번호 배지 + 네 칸짜리 줄
     bm-split    두 장 비교 카드 (제목 + 구분선 + 점 목록)
     bm-cases    수행 사례 카드
     bm-ask      문의 절차 — 왼쪽 글, 오른쪽 표

   통계 카드 · 설비 카드 · 섹션 제목은 인프라 페이지와 같은 부품이라
   /css/page-infra.css 를 그대로 쓴다. 다만 짚었을 때의 반응은
   이 페이지에서 다르게 잡는다 (아래 '짚었을 때' 참고).

   ── 짚었을 때 (마우스오버) 의 원칙 ──
   인프라 페이지는 카드가 떠오르고 그림자가 진다.
   여기서는 카드가 제자리에 있고 '선'과 '번호'가 반응한다 —
     · 이유 카드: 번호가 코발트 칸이 되고, 아래 구분선이 왼쪽에서 코발트로 그어진다
     · 사례 카드: CASE 번호 옆으로 짧은 선이 자라고, 꼬리표가 코발트가 된다
     · 프로세스:  배지가 한 단 짙어지고 그 줄의 글자가 진해진다
     · 비교 카드: 짚은 쪽만 코발트 테두리와 옅은 바탕을 얻는다
   그림자·들어올림은 쓰지 않는다.

   불러오는 차례
     <link rel="stylesheet" href="../css/page-infra.css">
     <link rel="stylesheet" href="../css/tab-table.css">
     <link rel="stylesheet" href="../css/business-model.css">
   ============================================================ */

.bm-page {
  --bm-point: #135a9c;      /* 시안 --color */
  --bm-deep:  #0e4b84;      /* 배지를 짚었을 때 */
  --bm-ink:   #222;         /* 시안 --black */
  --bm-soft:  #f8f8f8;      /* 프로세스 줄 · 사례 카드 바탕 */
  --bm-head:  #f4f4f4;      /* 표 머리띠 */
  --bm-line:  #e9e9e9;      /* 카드 안 구분선 (시안 Line 49) */
  --bm-tint:  rgba(19, 90, 156, .03);   /* 시안 오른쪽 비교 카드 바탕 */
}

/* ==================== 페이지 이동 (ODM / OEM / OBM) ====================
   시안 2048:3313 — 150 폭 셋, 아래로 1400 짜리 트랙과 검정 표시 막대 */
.bm-nav {
  position: relative;
  display: flex;
  margin-top: calc(90 * var(--u));    /* 시안 히어로 아래(909) → 메뉴(981) */
  border-bottom: calc(2 * var(--u)) solid var(--line-track);
}
.bm-nav__link {
  flex: none;
  min-width: calc(150 * var(--u));
  padding: 0 calc(20 * var(--u)) calc(20 * var(--u));
  font-family: "Open Sans", var(--font-base);
  font-weight: 400;
  font-size: max(calc(30 * var(--u)), 15px);
  line-height: 1.36;
  letter-spacing: -.02em;
  color: var(--gray);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s ease;
}
.bm-nav__link:hover { color: var(--ink-mid); }
.bm-nav__link[aria-current="page"] {
  font-weight: 700;
  color: var(--bm-ink);
}
.bm-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: calc(-2 * var(--u));
  left: 0;
  width: calc(150 * var(--u));
  height: calc(3 * var(--u));
  background: var(--bm-ink);
}
.bm-nav__link:nth-child(2)[aria-current="page"]::after { left: calc(150 * var(--u)); }
.bm-nav__link:nth-child(3)[aria-current="page"]::after { left: calc(300 * var(--u)); }
.bm-nav__link:not([aria-current="page"]) { position: relative; }
.bm-nav__link:not([aria-current="page"])::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-2 * var(--u));
  height: calc(3 * var(--u));
  background: rgba(34, 34, 34, .22);
  transform: scaleX(0);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.bm-nav__link:not([aria-current="page"]):hover::after { transform: scaleX(1); }

/* ==================== 인트로 ====================
   시안 2048:3308 — 왼쪽에 큰 키워드와 한 줄, 오른쪽에 설명 두 줄 */
.bm-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, calc(714 * var(--u)));
  align-items: start;
  gap: calc(40 * var(--u));
  margin-top: calc(92 * var(--u));    /* 시안 메뉴(1043) → 제목(1135) */
}
.bm-intro__key {
  position: relative;
  display: inline-block;
  margin: 0;
  padding-bottom: calc(10 * var(--u));
  font-family: "Open Sans", var(--font-base);
  font-weight: 700;
  font-size: calc(70 * var(--u));
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--bm-point);
  white-space: nowrap;
}
/* 타이핑이 끝난 뒤 왼쪽부터 그어지는 밑줄. 스크립트가 없으면 처음부터 보인다 */
.bm-intro__key::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(5 * var(--u));
  background: var(--bm-point);
  transform-origin: left;
}
.js .bm-intro__key::after { transform: scaleX(0); }
.js .bm-intro__key.is-typed::after {
  transform: scaleX(1);
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
.bm-intro__ch { display: inline-block; white-space: pre; }

.bm-intro__sub {
  margin: calc(18 * var(--u)) 0 0;
  font-size: max(calc(23 * var(--u)), 14px);
  letter-spacing: -.02em;
  color: var(--gray);
}
/* 설명은 본문이 아니라 선언문이다 (2026-09-11 — 확정 문구가 한 문장으로 짧아져 본문 크기로는 칸이 비어 보였다).
   두 줄로 의도해 나누고(<br class="infra-br">), 핵심 구절만 <em> 으로 코발트를 준다 */
.bm-intro__desc {
  margin: calc(18 * var(--u)) 0 0;
  font-weight: 400;
  font-size: max(calc(27 * var(--u)), 17px);
  line-height: 1.45;
  letter-spacing: -.03em;
  color: var(--ink);
  word-break: keep-all;
}
.bm-intro__desc em {
  font-style: normal;
  font-weight: 600;
  color: var(--bm-point);
}
/* 설명 아래 키워드 한 줄 — 숫자가 아니라 사업 방식의 성격을 말하는 낱말 셋 */
.bm-intro__tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--u)) calc(14 * var(--u));
  margin: calc(26 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
  font-size: max(calc(15 * var(--u)), 12px);
  letter-spacing: .02em;
  color: var(--gray);
}
.bm-intro__tags li { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.bm-intro__tags li + li::before {
  content: "";
  width: 1px;
  height: .9em;
  background: currentColor;
  opacity: .45;
}
.bm-intro + .infra-stats { margin-top: calc(65 * var(--u)); }   /* 시안 1254 → 1319 */

/* ==================== 통계 카드 — 이 페이지에서는 떠오르지 않는다 ====================
   선이 자라고 숫자가 코발트가 되는 것만 남긴다 */
.bm-page .infra-stat:hover,
.bm-page .infra-stat.is-near,
.js .bm-page .infra-stat[data-reveal].is-in:hover,
.js .bm-page .infra-stat[data-reveal].is-in.is-near {
  box-shadow: none;
  transform: none;
}

/* ==================== 진행 프로세스 ====================
   시안 2048:3241 — 왼쪽 85 배지 + 오른쪽 1280 짜리 줄 */
.bm-flow { margin-top: calc(74 * var(--u)); }

.bm-flow__head,
.bm-flow__row {
  display: grid;
  grid-template-columns: calc(85 * var(--u)) minmax(0, 1fr);
  gap: calc(35 * var(--u));
  align-items: center;
}
.bm-flow__head { margin-bottom: calc(30 * var(--u)); }
.bm-flow__row + .bm-flow__row { margin-top: calc(30 * var(--u)); }
/* 세로선이 배지 뒤로 가도록 줄을 쌓임 맥락에 올린다 */
.bm-flow__row { position: relative; z-index: 1; }

.bm-flow__cells {
  display: grid;
  /* 시안 칸 중심 486.5 / 899.5 / 1308.5 / 1511.5 를 1280 기준 비율로 옮겼다 */
  grid-template-columns: 17.3% 49.8% 16.6% 16.3%;
  align-items: center;
  min-height: calc(85 * var(--u));
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  border-radius: calc(10 * var(--u));
}
.bm-flow__head .bm-flow__cells { background: var(--bm-head); }
.bm-flow__head .bm-flow__cell {
  font-weight: 500;
  font-size: max(calc(25 * var(--u)), 13px);
  letter-spacing: -.02em;
  color: var(--bm-ink);
}
/* 짝수 줄만 바탕이 깔린다 (시안 02 · 04).
   목록 첫 자식은 세로선(div)이라 li 만 세는 nth-of-type 을 쓴다 */
.bm-flow__row:nth-of-type(even) .bm-flow__cells { background: var(--bm-soft); }

.bm-flow__cell {
  padding: 0 calc(6 * var(--u));
  font-weight: 300;
  font-size: max(calc(21 * var(--u)), 13px);   /* 시안 23 */
  line-height: 1.4;
  letter-spacing: -.03em;
  color: var(--ink-body);
  text-align: center;
  word-break: keep-all;
  transition: color .3s ease;
}

.bm-flow__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(85 * var(--u));
  height: calc(85 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--bm-point);
  font-family: "Open Sans", var(--font-base);
  font-weight: 700;
  font-size: calc(37 * var(--u));
  letter-spacing: -.03em;
  color: var(--color-white);
  transition: background-color .3s ease, opacity .5s ease-out, transform .5s cubic-bezier(.22, .61, .36, 1);
}

/* 배지를 잇는 세로선. 배지 뒤에 깔린다 */
.bm-flow__list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bm-flow__line {
  position: absolute;
  z-index: 0;
  left: calc(42.5 * var(--u));
  top: calc(42.5 * var(--u));
  bottom: calc(42.5 * var(--u));
  width: calc(2 * var(--u));
  background: var(--line-track);
  transform: translateX(-50%);
  pointer-events: none;
}
.bm-flow__fill {
  position: absolute;
  inset: 0;
  background: var(--bm-point);
  transform: scaleY(0);
  transform-origin: top;
}

/* ---------- 등장 ----------
   선이 일정한 속도로 그어지고 각 단계는 선이 닿는 시각에 켜진다.
   배지는 조금 작게 있다가 제 크기로 — 돌아가지는 않는다 */
.js .bm-flow__list { --bm-line-dur: 1.2s; --bm-step: .4s; }
.js .bm-flow.is-in .bm-flow__fill {
  transform: scaleY(1);
  transition: transform var(--bm-line-dur) linear;
}
.js .bm-flow .bm-flow__badge { opacity: 0; transform: scale(.86); }
.js .bm-flow.is-in .bm-flow__badge {
  opacity: 1;
  transform: none;
  transition-delay: 0s, calc(var(--d, 0) * var(--bm-step)), calc(var(--d, 0) * var(--bm-step));
}
.js .bm-flow .bm-flow__cells {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease-out, transform .5s ease-out;
}
.js .bm-flow.is-in .bm-flow__cells {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--d, 0) * var(--bm-step) + .12s);
}
.js .bm-flow .bm-flow__head .bm-flow__cells,
.js .bm-flow.is-in .bm-flow__head .bm-flow__cells { transition-delay: 0s; }

/* ---------- 짚었을 때 — 배지가 한 단 짙어지고 글자가 진해진다 ---------- */
.bm-flow__row:hover .bm-flow__badge,
.js .bm-flow.is-in .bm-flow__row:hover .bm-flow__badge {
  background: var(--bm-deep);
  transition-delay: 0s;
}
.bm-flow__row:hover .bm-flow__cell { color: var(--bm-ink); }

/* 좁은 화면용 번호 스텝 — 넓은 화면에서는 없다 */
.bm-flow__steps { display: none; }

/* ==================== 선택하는 이유 — 인프라 카드의 반응을 이 페이지식으로 ====================
   떠오름·그림자·윗선은 끄고, 번호 칸과 아래 구분선이 반응한다 */
.bm-page .infra-card:hover,
.bm-page .infra-card.is-near,
.js .bm-page .infra-card[data-reveal].is-in:hover,
.js .bm-page .infra-card[data-reveal].is-in.is-near {
  border-color: var(--infra-card);
  box-shadow: none;
  transform: none;
}
.bm-page .infra-card:hover::before,
.bm-page .infra-card.is-near::before { transform: scaleX(0); }
.bm-page .infra-card:hover .infra-card__title,
.bm-page .infra-card.is-near .infra-card__title { color: var(--bm-ink); }

/* 번호가 코발트 칸이 된다. 좌우 여백만큼 당겨 두어 제목 자리는 그대로다 */
.bm-page .infra-card__no {
  padding: .12em .42em;
  margin-left: -.42em;
  border-radius: calc(5 * var(--u));
  line-height: 1.2;
  transition: background-color .35s ease, color .35s ease;
}
.bm-page .infra-card:hover .infra-card__no {
  background: var(--bm-point);
  color: var(--color-white);
}
/* 아래 구분선이 왼쪽에서 코발트로 그어진다 */
.bm-page .infra-card__spec { position: relative; }
.bm-page .infra-card__spec::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--bm-point);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.bm-page .infra-card:hover .infra-card__spec::before { transform: scaleX(1); }
.bm-page .infra-card__desc,
.bm-page .infra-card__spec { transition: color .35s ease, border-color .35s ease; }
.bm-page .infra-card:hover .infra-card__desc { color: var(--ink-mid); }
.bm-page .infra-card:hover .infra-card__spec { color: var(--ink-mid); border-top-color: var(--infra-div); }

/* ==================== 두 장 비교 ====================
   시안 2048:3150 — 680 × 305, 제목 + 구분선 + 점 목록.
   시안은 오른쪽(SPCI 가 맡는 쪽)에 코발트 테두리와 옅은 바탕을 늘 깔아 두었지만,
   그러면 한 장만 도드라져 보인다. 여기서는 제목 색과 점 색으로만 구별하고
   테두리·바탕은 짚은 쪽에만 준다 */
.bm-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(40 * var(--u));
  margin-top: calc(63 * var(--u));    /* 시안 설명(3818) → 카드(3881) */
}
.bm-split__card {
  min-height: calc(305 * var(--u));
  padding: calc(35 * var(--u)) calc(50 * var(--u)) calc(30 * var(--u));
  border: 1px solid var(--infra-card);
  border-radius: calc(15 * var(--u));
  background: var(--color-white);
  transition: border-color .4s ease, background-color .4s ease;
}
.bm-split__title {
  margin: 0;
  font-family: "Open Sans", var(--font-base);
  font-weight: 800;
  font-size: calc(30 * var(--u));
  line-height: 1.2;
  letter-spacing: -.03em;
  color: var(--bm-ink);
  word-break: keep-all;
}
.bm-split__list {
  margin: calc(31 * var(--u)) 0 0;    /* 시안 제목 아래(3952) → 선(3983) */
  padding: calc(18 * var(--u)) 0 0;   /* 시안 선(3983) → 첫 줄 가운데(4020) */
  border-top: 1px solid var(--bm-line);
  list-style: none;
  transition: border-color .4s ease;
}
.bm-split__list li {
  position: relative;
  padding-left: calc(22 * var(--u));
  font-weight: 300;
  font-size: max(calc(19 * var(--u)), 14px);   /* 시안 20 */
  line-height: calc(38 * var(--u));
  letter-spacing: -.03em;
  color: #838383;
  word-break: keep-all;
}
.bm-split__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(19 * var(--u));
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  margin-top: calc(-3 * var(--u));
  border-radius: 50%;
  background: #c9c9c9;                /* 시안 왼쪽 점 (Ellipse 75) */
}
/* SPCI 가 맡는 쪽 — 제목과 점만 코발트, 글자는 한 단 진하게 (시안 #222) */
.bm-split__card--accent .bm-split__title { color: var(--bm-point); }
.bm-split__card--accent .bm-split__list li { color: var(--bm-ink); }
.bm-split__card--accent .bm-split__list li::before { background: var(--bm-point); }

.bm-split__card:hover {
  border-color: var(--bm-point);
  background: var(--bm-tint);
}
.bm-split__card:hover .bm-split__list { border-top-color: rgba(19, 90, 156, .3); }

/* 좁은 화면용 스위치 — 넓은 화면에서는 hidden 속성으로 감춰져 있다 */
.bm-split__switch[hidden] { display: none; }

/* ==================== 수행 사례 ====================
   시안 2048:3116 — 680 × 400 라운드 20, 바탕 #f8f8f8 */
.bm-cases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(40 * var(--u));
  margin-top: calc(63 * var(--u));    /* 시안 설명(4436) → 카드(4499) */
}
.bm-case {
  min-height: calc(400 * var(--u));
  padding: calc(44 * var(--u)) calc(68 * var(--u));
  border-radius: calc(20 * var(--u));
  background: var(--bm-soft);
}
/* CASE 번호 옆으로 짚으면 짧은 선이 자란다 */
.bm-case__no {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  margin: 0;
  font-family: "Open Sans", var(--font-base);
  font-weight: 600;
  font-size: max(calc(17 * var(--u)), 12px);
  letter-spacing: .02em;
  color: var(--bm-point);
}
.bm-case__no::after {
  content: "";
  width: 0;
  height: 1px;
  background: var(--bm-point);
  transition: width .5s cubic-bezier(.22, .61, .36, 1);
}
.bm-case:hover .bm-case__no::after { width: calc(56 * var(--u)); }
.bm-case__title {
  margin: calc(18 * var(--u)) 0 0;
  font-weight: 600;
  font-size: calc(30 * var(--u));
  line-height: 1.3;
  letter-spacing: -.03em;
  color: var(--bm-ink);
  word-break: keep-all;
}
.bm-case__body {
  margin: calc(38 * var(--u)) 0 0;
  font-weight: 300;
  font-size: max(calc(19 * var(--u)), 14px);   /* 시안 20 */
  line-height: 1.5;
  letter-spacing: -.03em;
  color: var(--ink-body);
  word-break: keep-all;
  transition: color .35s ease;
}
.bm-case__tag {
  margin: calc(28 * var(--u)) 0 0;
  font-weight: 300;
  font-size: max(calc(14 * var(--u)), 12px);   /* 시안 13 */
  letter-spacing: -.03em;
  color: var(--gray);
  word-break: keep-all;
  transition: color .35s ease;
}
.bm-case:hover .bm-case__body { color: var(--ink-mid); }
.bm-case:hover .bm-case__tag { color: var(--bm-point); }

/* 좁은 화면용 자리 표시 점 — 넓은 화면에서는 없다 */
.bm-cases__dots { display: none; }

/* ==================== 문의 절차 ====================
   시안 2048:3092 — 왼쪽에 글(463), 오른쪽에 표(800) */
.bm-ask {
  display: grid;
  grid-template-columns: minmax(0, calc(523 * var(--u))) minmax(0, calc(800 * var(--u)));
  justify-content: space-between;
  gap: calc(40 * var(--u));
  align-items: start;
}
.bm-ask__lead {
  margin: calc(30 * var(--u)) 0 0;
  font-weight: 300;
  font-size: max(calc(21 * var(--u)), 14px);   /* 시안 23 */
  line-height: 1.5;
  letter-spacing: -.03em;
  color: var(--ink-mid);
  word-break: keep-all;
}
.bm-ask__note {
  margin: calc(39 * var(--u)) 0 0;
  font-weight: 300;
  font-size: max(calc(19 * var(--u)), 14px);   /* 시안 20 */
  line-height: 1.55;
  letter-spacing: -.03em;
  color: var(--ink-body);
  word-break: keep-all;
}
.bm-ask__note a {
  color: var(--bm-point);
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* ==================== 히어로 패럴랙스 ====================
   값은 js/business-model.js 가 --bm-shift 로 넣는다 */
.js .bm-page .page-hero__photo {
  transform: translate3d(0, var(--bm-shift, 0px), 0) scale(1.06);
  will-change: transform;
}

/* ==================== 등장 ==================== */
.js .bm-case[data-reveal],
.js .bm-split__card[data-reveal] { transition-delay: calc(var(--d, 0) * .1s); }

/* ==================== 각주 ====================
   시안 OEM 2048:2933 — 비교 카드 아래 '*' 로 시작하는 한 줄 */
.bm-foot {
  position: relative;
  margin: calc(30 * var(--u)) 0 0 calc(60 * var(--u));   /* 시안 카드(2947) → 각주(2968), 들여쓰기 260 → 320 */
  padding-left: calc(20 * var(--u));                    /* 시안 '*'(320) → 글자(340) */
  font-weight: 300;
  font-size: max(calc(17 * var(--u)), 13px);
  line-height: 1.6;
  letter-spacing: -.03em;
  color: var(--gray);
  word-break: keep-all;
}
/* '*' 는 절대 배치 — flex 로 두면 글 안의 링크가 따로 떨어져 벌어진다 */
.bm-foot::before {
  content: "*";
  position: absolute;
  left: 0;
  top: 0;
  font-size: max(calc(20 * var(--u)), 14px);
  line-height: 1.4;
}
.bm-foot a {
  color: var(--ink-mid);
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* 통계값이 한글일 때는 시안이 30 이다 (숫자·영문은 35) */
.bm-page .infra-stat__value--ko { font-size: calc(30 * var(--u)); }

/* ==================== 확장 경로 판 ====================
   시안 OEM 2048:2914 — 인프라 페이지의 .infra-panel 과 같은 부품이다.
   제목 안의 강조만 코발트로 */
.bm-page .infra-panel__title em {
  font-style: normal;
  color: var(--bm-point);
}
/* 판 목록 안의 덧말 — 시안 OBM '(2026년 4월 기준)' */
.bm-muted {
  font-size: .85em;
  color: var(--gray);
  white-space: nowrap;
}

/* ============================================================
   OEM 시그니처 — "정밀 생산"  (body.bm-sig-rise)

   키워드는 글자가 아래에서 올라오고 (js 가 translateY 를 넣는다),
   프로세스 줄은 좌우 교차로 미끄러져 들어오고,
   이유 카드는 짚으면 바탕이 코발트로 반전된다 (인증특허 카드 패턴).
   패럴랙스는 ODM 과 반대 방향 (js 가 부호를 바꾼다).
   ============================================================ */
/* 키워드가 두 줄(Toll / Manufacturing)이어도 밑줄은 덩어리 아래 한 번 */
.bm-sig-rise .bm-intro__key { line-height: 1; }

/* ---- 프로세스: 배지는 그대로, 칸이 홀짝으로 왼쪽·오른쪽에서 들어온다 ---- */
.js .bm-sig-rise .bm-flow .bm-flow__cells { transform: translateX(40px); }
.js .bm-sig-rise .bm-flow .bm-flow__row:nth-of-type(even) .bm-flow__cells { transform: translateX(-40px); }
.js .bm-sig-rise .bm-flow .bm-flow__head .bm-flow__cells { transform: translateY(12px); }
.js .bm-sig-rise .bm-flow.is-in .bm-flow__cells,
.js .bm-sig-rise .bm-flow.is-in .bm-flow__row:nth-of-type(even) .bm-flow__cells { transform: none; }

/* ---- 이유 카드: 짚으면 코발트로 반전 ---- */
.bm-sig-rise .infra-card {
  transition: background-color .4s ease, border-color .4s ease;
}
.bm-sig-rise .infra-card__title,
.bm-sig-rise .infra-card__desc,
.bm-sig-rise .infra-card__spec,
.bm-sig-rise .infra-card__no { transition: color .4s ease, background-color .4s ease, border-color .4s ease; }
.bm-sig-rise .infra-card:hover,
.js .bm-sig-rise .infra-card[data-reveal].is-in:hover {
  background: var(--bm-point);
  border-color: var(--bm-point);
}
.bm-sig-rise .infra-card:hover .infra-card__title { color: var(--color-white); }
.bm-sig-rise .infra-card:hover .infra-card__desc { color: rgba(255, 255, 255, .8); }
.bm-sig-rise .infra-card:hover .infra-card__spec {
  color: rgba(255, 255, 255, .7);
  border-top-color: rgba(255, 255, 255, .3);
}
/* 번호 칸은 ODM 의 코발트 대신 흰 칸에 코발트 글자 */
.bm-sig-rise .infra-card:hover .infra-card__no {
  background: var(--color-white);
  color: var(--bm-point);
}
/* ODM 의 구분선 긋기는 쓰지 않는다 */
.bm-sig-rise .infra-card:hover .infra-card__spec::before { transform: scaleX(0); }

/* ============================================================
   OBM 시그니처 — "브랜드의 완성"  (body.bm-sig-blur)

   키워드는 덩어리째 흐림(8px)에서 선명하게 — 세 페이지 중 가장 묵직하게.
   프로세스 줄은 가운데 단계가 먼저, 바깥쪽으로 퍼지며 켜진다.
   카드 호버는 따로 두지 않고 공통 반응(번호 칸 · 구분선)을 쓴다.
   마지막 CTA 띠는 꾸미지 않는다 — 옅은 바탕에 글과 링크 하나.
   ============================================================ */
/* ---- 키워드: 흐림 → 선명 ---- */
.js .bm-intro__key--blur {
  opacity: 0;
  filter: blur(8px);
}
.js .bm-intro__key--blur.is-shown {
  opacity: 1;
  filter: blur(0);
  transition: opacity .9s ease-out, filter .9s ease-out;
}
/* 두 줄(Import / Substitution)은 시안 줄 간격이 85 다 */
.bm-sig-blur .bm-intro__key { line-height: 1.21; }
/* 키워드만 rise 로 바꾼 페이지(OBM, body.bm-key-rise)는 OEM 과 같은 줄 간격 */
.bm-key-rise .bm-intro__key { line-height: 1; }

/* ---- 프로세스: 가운데 → 바깥 ----
   --bm-n 은 줄 수(js 가 넣는다). 가운데와의 거리만큼 늦게 켜진다 */
.js .bm-sig-blur .bm-flow__list { --bm-mid: calc((var(--bm-n, 4) - 1) / 2); }
.js .bm-sig-blur .bm-flow.is-in .bm-flow__badge {
  transition-delay: 0s,
    calc(max(var(--d, 0) - var(--bm-mid), var(--bm-mid) - var(--d, 0)) * var(--bm-step)),
    calc(max(var(--d, 0) - var(--bm-mid), var(--bm-mid) - var(--d, 0)) * var(--bm-step));
}
.js .bm-sig-blur .bm-flow .bm-flow__cells { transform: scale(.97); }
.js .bm-sig-blur .bm-flow.is-in .bm-flow__cells {
  transform: none;
  transition-delay: calc(max(var(--d, 0) - var(--bm-mid), var(--bm-mid) - var(--d, 0)) * var(--bm-step) + .12s);
}
/* 선은 가운데에서 위아래로 자란다 */
.js .bm-sig-blur .bm-flow__fill { transform-origin: center; }

/* ---- 카드 ----
   따로 두지 않는다. 위 '선택하는 이유' 의 공통 반응(번호 칸 · 구분선)을 그대로 쓴다 */

/* ---- CTA: 문의로 이어 주는 띠 ----
   시안에는 없는 띠다. 바꾸거나 빼기 쉽게 한 덩어리로 둔다.
   이 페이지의 사례 카드와 같은 어법 — 옅은 바탕에 글, 오른쪽에 코발트 링크 하나.
   그라데이션·흐르는 판은 쓰지 않는다 (꾸민 티가 난다) */
.bm-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(40 * var(--u));
  margin-top: calc(120 * var(--u));
  padding: calc(56 * var(--u)) calc(68 * var(--u));
  border-radius: calc(20 * var(--u));
  background: var(--bm-soft);
}
.bm-cta__title {
  margin: 0;
  font-weight: 600;
  font-size: calc(30 * var(--u));
  line-height: 1.35;
  letter-spacing: -.03em;
  color: var(--bm-ink);
  word-break: keep-all;
}
.bm-cta__desc {
  margin: calc(12 * var(--u)) 0 0;
  font-weight: 300;
  font-size: max(calc(19 * var(--u)), 14px);
  line-height: 1.6;
  letter-spacing: -.03em;
  color: var(--ink-body);
  word-break: keep-all;
}
.bm-cta__link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(14 * var(--u));
  padding: calc(16 * var(--u)) calc(34 * var(--u));
  border: 1px solid var(--bm-point);
  border-radius: 999px;
  font-weight: 600;
  font-size: max(calc(18 * var(--u)), 14px);
  letter-spacing: -.02em;
  color: var(--bm-point);
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease;
}
/* 글자 뒤의 짧은 선 — 사례 카드의 CASE 번호 선과 같은 요소다 */
.bm-cta__link::after {
  content: "";
  width: calc(22 * var(--u));
  height: 1px;
  background: currentColor;
  transition: width .35s cubic-bezier(.22, .61, .36, 1);
}
.bm-cta__link:hover {
  background: var(--bm-point);
  color: var(--color-white);
}
.bm-cta__link:hover::after { width: calc(34 * var(--u)); }

/* ============================================================
   좁은 화면 (≤768)

   같은 내용을 다른 모양으로 보여 준다. 위에서 아래로 늘어놓기만 하면
   화면 몇 장을 넘겨도 카드만 이어져 지루하다.
     프로세스   번호 스텝 + 가로로 넘기는 카드
     이유       아코디언 (첫 장만 펼쳐 둔다)
     조달       스위치로 한 장씩
     사례       가로로 넘기는 카드 + 점
   ============================================================ */
@media (max-width: 768px) {
  .bm-nav {
    margin-top: var(--sp-block);       /* 히어로 → 메뉴 */
    overflow-x: auto;
    scrollbar-width: none;
  }
  .bm-nav::-webkit-scrollbar { display: none; }
  .bm-nav__link {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 calc(10 * var(--u)) calc(12 * var(--u));
    font-size: max(calc(16 * var(--u)), 15px);
  }
  .bm-nav__link[aria-current="page"]::after { left: 0; right: 0; width: auto; }
  .bm-nav__link:nth-child(2)[aria-current="page"]::after,
  .bm-nav__link:nth-child(3)[aria-current="page"]::after { left: 0; }
  .bm-nav__link:not([aria-current="page"]):hover::after { transform: scaleX(0); }

  .bm-intro {
    grid-template-columns: 1fr;
    gap: calc(12 * var(--u));
    margin-top: var(--sp-block);       /* 메뉴 → 첫 섹션 */
  }
  .bm-intro__key { font-size: calc(34 * var(--u)); padding-bottom: calc(6 * var(--u)); }
  .bm-intro__key::after { height: calc(3 * var(--u)); }
  .bm-intro__sub { margin-top: calc(10 * var(--u)); font-size: max(calc(14 * var(--u)), 13px); }
  .bm-intro__desc {
    margin-top: calc(8 * var(--u));
    font-size: max(calc(19 * var(--u)), 17px);
    line-height: 1.5;
  }
  .bm-intro__tags {
    margin-top: calc(14 * var(--u));
    gap: calc(6 * var(--u)) calc(10 * var(--u));
    font-size: max(calc(12 * var(--u)), 12px);
  }
  .bm-intro__tags li { gap: calc(10 * var(--u)); }
  .bm-intro + .infra-stats { margin-top: var(--sp-block); }

  /* ---------- 프로세스: 번호 스텝 + 가로 카드 ---------- */
  .bm-flow { margin-top: var(--sp-head); }
  .bm-flow__head,
  .bm-flow__line,
  .bm-flow__badge { display: none; }

  .bm-flow__steps {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 calc(6 * var(--u)) calc(16 * var(--u));
  }
  /* 첫 동그라미 가운데에서 마지막 동그라미 가운데까지 */
  .bm-flow__steps-line {
    position: absolute;
    left: calc(18 * var(--u));
    right: calc(18 * var(--u));
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: var(--line-track);
  }
  .bm-flow__steps-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--bm-point);
    transition: width .35s ease;
  }
  .bm-flow__step {
    position: relative;
    z-index: 1;
    width: calc(36 * var(--u));
    height: calc(36 * var(--u));
    padding: 0;
    border: 2px solid #dcdcdc;
    border-radius: 50%;
    background: var(--color-white);
    font-family: "Open Sans", var(--font-base);
    font-weight: 700;
    font-size: max(calc(13 * var(--u)), 12px);
    color: var(--gray);
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
  }
  .bm-flow__step.is-done { border-color: var(--bm-point); color: var(--bm-point); }
  .bm-flow__step.is-on {
    border-color: var(--bm-point);
    background: var(--bm-point);
    color: var(--color-white);
    transform: scale(1.12);
  }

  /* 카드 줄 — 좌우 여백까지 밀려 나가 끝이 보이게 */
  .bm-flow__list {
    display: flex;
    gap: calc(12 * var(--u));
    margin: 0 calc(-16 * var(--u));
    padding: calc(4 * var(--u)) calc(16 * var(--u)) calc(6 * var(--u));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 calc(16 * var(--u));
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .bm-flow__list::-webkit-scrollbar { display: none; }
  .bm-flow__row,
  .bm-flow__row + .bm-flow__row {
    display: block;
    flex: 0 0 84%;
    margin: 0;
    scroll-snap-align: center;
  }
  .bm-flow__cells,
  .bm-flow__row:nth-of-type(even) .bm-flow__cells {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(6 * var(--u));
    height: 100%;
    min-height: 0;
    padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));
    border-radius: calc(12 * var(--u));
    background: var(--bm-soft);
  }
  .bm-flow__cell {
    padding: 0;
    font-size: max(calc(13 * var(--u)), 13px);
    line-height: 1.55;
    text-align: left;
  }
  /* 칸 이름을 값 위에 작게 — 머리띠가 없으므로 */
  .bm-flow__cell[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-top: calc(6 * var(--u));
    font-size: max(calc(11 * var(--u)), 11px);
    letter-spacing: .04em;
    color: var(--gray);
  }
  /* 단계 이름은 제목처럼, 앞에 번호를 붙인다 (배지를 감췄으므로) */
  .bm-flow__cell:first-child {
    display: flex;
    align-items: baseline;
    gap: calc(8 * var(--u));
    padding-bottom: calc(10 * var(--u));
    border-bottom: 1px solid #e6e6e6;
    font-weight: 700;
    font-size: max(calc(16 * var(--u)), 15px);
    color: var(--bm-ink);
  }
  .bm-flow__cell:first-child::before {
    content: "0" counter(bm-step);
    font-family: "Open Sans", var(--font-base);
    font-weight: 700;
    font-size: max(calc(13 * var(--u)), 12px);
    color: var(--bm-point);
  }
  .bm-flow__list { counter-reset: bm-step; }
  .bm-flow__row { counter-increment: bm-step; }
  /* 등장은 한꺼번에 — 가로로 놓인 카드에 차례 지연은 어색하다 */
  .js .bm-flow.is-in .bm-flow__cells { transition-delay: 0s; }
  .bm-flow__row:hover .bm-flow__cell { color: var(--ink-body); }
  .bm-flow__row:hover .bm-flow__cell:first-child { color: var(--bm-ink); }

  /* ---------- 이유: 아코디언 ---------- */
  .bm-page .infra-cards { gap: calc(8 * var(--u)); }
  .bm-page .infra-card {
    padding: 0;
    border-radius: calc(12 * var(--u));
  }
  .bm-page .infra-card__head {
    gap: calc(10 * var(--u));
    padding: calc(14 * var(--u)) calc(16 * var(--u));
  }
  .bm-page .infra-card__no { margin-left: 0; padding: .1em .4em; }
  .bm-page .infra-card__title { flex: 1 1 auto; }
  /* 제목 전체가 버튼이다. 오른쪽 끝에 꺾쇠 */
  .infra-card__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }
  .infra-card__btn::after {
    content: "";
    flex: none;
    width: calc(8 * var(--u));
    height: calc(8 * var(--u));
    margin-left: calc(12 * var(--u));
    border-right: 1.5px solid var(--gray);
    border-bottom: 1.5px solid var(--gray);
    transform: rotate(45deg);
    transition: transform .3s ease, border-color .3s ease;
  }
  .bm-page .infra-card.is-open .infra-card__btn::after {
    border-color: var(--bm-point);
    transform: rotate(225deg) translate(-2px, -2px);
  }
  .bm-page .infra-card.is-open { border-color: rgba(19, 90, 156, .45); }
  .bm-page .infra-card.is-open .infra-card__no { background: var(--bm-point); color: var(--color-white); }
  .bm-fold {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s cubic-bezier(.22, .61, .36, 1);
  }
  .bm-fold__in { overflow: hidden; }
  .bm-page .infra-card.is-open .bm-fold { grid-template-rows: 1fr; }
  .bm-page .bm-fold .infra-card__desc {
    margin: 0 calc(16 * var(--u)) 0;
    font-size: max(calc(14 * var(--u)), 13px);
    line-height: 1.6;
  }
  .bm-page .bm-fold .infra-card__spec {
    margin: calc(12 * var(--u)) calc(16 * var(--u)) 0;
    padding: calc(10 * var(--u)) 0 calc(14 * var(--u));
    font-size: max(calc(12 * var(--u)), 11px);
  }
  /* 손가락에는 마우스오버가 없다 — 펼침 여부만 상태다 */
  .bm-page .infra-card.is-near,
  .js .bm-page .infra-card[data-reveal].is-in.is-near { transform: none; border-color: var(--infra-card); }
  .bm-page .infra-card.is-open.is-near { border-color: rgba(19, 90, 156, .45); }
  .bm-page .infra-card:hover .infra-card__no { background: none; color: var(--bm-point); }
  .bm-page .infra-card.is-open:hover .infra-card__no { background: var(--bm-point); color: var(--color-white); }
  .bm-page .infra-card:hover .infra-card__spec::before { transform: scaleX(0); }
  .bm-page .infra-card:hover .infra-card__desc,
  .bm-page .infra-card:hover .infra-card__spec { color: inherit; }
  .bm-page .infra-card:hover .infra-card__desc { color: #838383; }
  .bm-page .infra-card:hover .infra-card__spec { color: var(--gray); }

  /* ---------- 조달: 스위치 + 한 장 ---------- */
  .bm-split__switch {
    position: relative;
    display: flex;
    margin-top: var(--sp-head);
    padding: calc(3 * var(--u));
    border-radius: calc(10 * var(--u));
    background: #f1f1f1;
  }
  /* 고른 쪽 뒤로 흰 판이 미끄러진다 */
  .bm-split__switch::before {
    content: "";
    position: absolute;
    top: calc(3 * var(--u));
    bottom: calc(3 * var(--u));
    left: calc(3 * var(--u));
    width: calc(50% - 3 * var(--u));
    border-radius: calc(8 * var(--u));
    background: var(--color-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    transform: translateX(calc(var(--on, 0) * 100%));
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
  }
  .bm-split__tab {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    padding: calc(10 * var(--u)) calc(6 * var(--u));
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    font-size: max(calc(13 * var(--u)), 12px);
    letter-spacing: -.03em;
    color: var(--gray);
    word-break: keep-all;
    cursor: pointer;
    transition: color .3s ease;
  }
  .bm-split__tab[aria-selected="true"] { color: var(--bm-ink); }
  .bm-split__tab[aria-selected="true"]:nth-child(3) { color: var(--bm-point); }   /* 오른쪽(SPCI) 쪽 */

  .bm-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: calc(10 * var(--u));
  }
  .bm-split__card {
    grid-area: 1 / 1;
    min-height: 0;
    padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u));
    border-radius: calc(12 * var(--u));
  }
  /* 리빌의 `.js [data-reveal].is-in { opacity:1; transform:none }` (0,3,0) 을 이겨야
     안 고른 카드가 숨겨진다 — 그래서 선택자를 길게 잡는다 */
  .bm-split__card,
  .js .bm-split__card[data-reveal].is-in {
    opacity: 0;
    visibility: hidden;
    transform: translateX(calc(12 * var(--u)));
    transition: opacity .3s ease, transform .35s cubic-bezier(.22, .61, .36, 1), visibility 0s .3s;
  }
  .bm-split__card:first-child,
  .js .bm-split__card[data-reveal].is-in:first-child { transform: translateX(calc(-12 * var(--u))); }
  .bm-split__card.is-on,
  .js .bm-split__card[data-reveal].is-in.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .bm-split__card--accent.is-on { border-color: var(--bm-point); background: var(--bm-tint); }
  /* 제목은 스위치에 이미 있다 — 읽어 주기만 하고 감춘다 */
  .bm-split__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .bm-split__list {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .bm-split__list li {
    padding-left: calc(14 * var(--u));
    font-size: max(calc(14 * var(--u)), 13px);
    line-height: calc(30 * var(--u));
  }
  .bm-split__list li::before {
    top: calc(15 * var(--u));
    width: calc(4 * var(--u));
    height: calc(4 * var(--u));
    margin-top: calc(-2 * var(--u));
  }
  .bm-split__card:hover { border-color: var(--infra-card); background: var(--color-white); }
  .bm-split__card--accent.is-on:hover { border-color: var(--bm-point); background: var(--bm-tint); }

  /* ---------- 사례: 가로 카드 + 점 ---------- */
  .bm-cases {
    display: flex;
    gap: calc(12 * var(--u));
    margin: var(--sp-head) calc(-16 * var(--u)) 0;
    padding: 0 calc(16 * var(--u)) calc(4 * var(--u));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 calc(16 * var(--u));
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .bm-cases::-webkit-scrollbar { display: none; }
  .bm-case {
    flex: 0 0 84%;
    min-height: 0;
    padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(20 * var(--u));
    border-radius: calc(14 * var(--u));
    scroll-snap-align: center;
  }
  .bm-case__title { margin-top: calc(8 * var(--u)); font-size: calc(18 * var(--u)); }
  .bm-case__body {
    margin-top: calc(12 * var(--u));
    font-size: max(calc(14 * var(--u)), 13px);
    line-height: 1.7;
  }
  .bm-case__tag { margin-top: calc(12 * var(--u)); font-size: max(calc(12 * var(--u)), 11px); }
  .bm-case:hover .bm-case__no::after { width: 0; }
  .bm-case:hover .bm-case__body { color: var(--ink-body); }
  .bm-case:hover .bm-case__tag { color: var(--gray); }
  /* 가로로 놓인 카드에 차례 지연은 어색하다 */
  .js .bm-case[data-reveal] { transition-delay: 0s; }

  .bm-cases__dots {
    display: flex;
    justify-content: center;
    gap: calc(6 * var(--u));
    margin-top: calc(14 * var(--u));
  }
  .bm-cases__dot {
    width: calc(6 * var(--u));
    height: calc(6 * var(--u));
    padding: 0;
    border: 0;
    border-radius: calc(3 * var(--u));
    background: #d4d4d4;
    transition: width .3s ease, background-color .3s ease;
  }
  .bm-cases__dot.is-on { width: calc(18 * var(--u)); background: var(--bm-point); }

  /* ---------- 각주 — 들여쓰기 없이 카드 폭에 맞춘다 ---------- */
  .bm-foot {
    margin: calc(14 * var(--u)) 0 0;
    padding-left: calc(12 * var(--u));
    font-size: max(calc(12 * var(--u)), 12px);
    line-height: 1.65;
  }
  .bm-foot::before { font-size: max(calc(14 * var(--u)), 13px); line-height: 1.45; }
  /* 한글 통계값도 다른 칸과 같은 크기로 (page-infra.css 의 24 보다 한 단 작게) */
  .bm-page .infra-stat__value--ko { font-size: calc(21 * var(--u)); }

  /* ---------- 문의 절차 ---------- */
  .bm-ask {
    grid-template-columns: 1fr;
    gap: calc(18 * var(--u));
  }
  .bm-ask__lead { margin-top: calc(12 * var(--u)); font-size: max(calc(14 * var(--u)), 13px); line-height: 1.7; }
  .bm-ask__note { margin-top: calc(12 * var(--u)); font-size: max(calc(13 * var(--u)), 12px); line-height: 1.7; }

  /* 패럴랙스는 끈다 */
  .js .bm-page .page-hero__photo { transform: none; will-change: auto; }

  /* OBM — CTA 는 세로로 쌓는다 */
  .bm-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(18 * var(--u));
    margin-top: calc(36 * var(--u));
    padding: calc(24 * var(--u)) calc(20 * var(--u));
    border-radius: calc(14 * var(--u));
  }
  .bm-cta__title { font-size: calc(20 * var(--u)); }
  .bm-cta__desc { margin-top: calc(8 * var(--u)); font-size: max(calc(13 * var(--u)), 13px); }
  .bm-cta__link {
    padding: calc(12 * var(--u)) calc(22 * var(--u));
    font-size: max(calc(14 * var(--u)), 13px);
  }
  .bm-cta__link:hover { background: none; color: var(--bm-point); }

  /* OEM — 손가락에는 반전 호버가 없다. 가로 카드에 좌우 슬라이드도 없다 */
  .bm-sig-rise .infra-card:hover,
  .js .bm-sig-rise .infra-card[data-reveal].is-in:hover { background: var(--color-white); border-color: var(--infra-card); }
  .bm-sig-rise .infra-card.is-open:hover { border-color: rgba(19, 90, 156, .45); }
  .bm-sig-rise .infra-card:hover .infra-card__title { color: var(--bm-ink); }
  .bm-sig-rise .infra-card:hover .infra-card__desc { color: #838383; }
  .bm-sig-rise .infra-card:hover .infra-card__spec { color: var(--gray); border-top-color: var(--infra-div); }
  .bm-sig-rise .infra-card:hover .infra-card__no { background: none; color: var(--bm-point); }
  .bm-sig-rise .infra-card.is-open:hover .infra-card__no { background: var(--bm-point); color: var(--color-white); }
  .js .bm-sig-rise .bm-flow .bm-flow__cells,
  .js .bm-sig-rise .bm-flow .bm-flow__row:nth-of-type(even) .bm-flow__cells { transform: translateY(12px); }
  .js .bm-sig-rise .bm-flow.is-in .bm-flow__cells { transform: none; }
}

/* ==================== 모션 최소화 ====================
   시그니처(타이핑 · 밑줄 · 배지 · 선 그리기 · 패럴랙스)를 전부 끄고
   기본 페이드인만 남긴다 */
@media (prefers-reduced-motion: reduce) {
  /* .js 를 붙여 둔다 — 미디어쿼리는 특이도를 올려 주지 않는다 */
  .js .bm-intro__key::after { transform: scaleX(1); transition: none; }
  .bm-intro__ch { opacity: 1 !important; }

  .js .bm-flow .bm-flow__badge,
  .js .bm-flow.is-in .bm-flow__badge { opacity: 1; transform: none; transition: background-color .3s ease; }
  .js .bm-flow .bm-flow__cells,
  .js .bm-flow.is-in .bm-flow__cells { opacity: 1; transform: none; transition: none; }
  .js .bm-flow__fill,
  .js .bm-flow.is-in .bm-flow__fill { transform: none; transition: none; }

  .bm-flow__steps-fill,
  .bm-flow__step,
  .bm-split__switch::before,
  .bm-split__card,
  .bm-fold,
  .bm-cases__dot,
  .infra-card__btn::after,
  .bm-case__no::after,
  .bm-page .infra-card__no,
  .bm-page .infra-card__spec::before { transition: none; }
  .bm-flow__step.is-on { transform: none; }

  /* OBM — 흐림을 끈다. 키워드는 처음부터 선명하게 */
  .js .bm-intro__key--blur { opacity: 1; filter: none; transition: none; }
  .js .bm-sig-blur .bm-flow .bm-flow__cells { transform: none; }
  .bm-cta__link::after { transition: none; }

  /* OEM — 좌우 슬라이드도 끈다. 글자 올라오기는 js 가 인라인으로 넣지 않는다 */
  .js .bm-sig-rise .bm-flow .bm-flow__cells,
  .js .bm-sig-rise .bm-flow .bm-flow__row:nth-of-type(even) .bm-flow__cells { transform: none; }
  .bm-sig-rise .infra-card { transition: background-color .3s ease, border-color .3s ease; }

  .js .bm-page .page-hero__photo { transform: none; will-change: auto; }
}