@charset "utf-8";
/* ==========================================================================
   성장전략 페이지 (content/strategy.php) — 2026-08-26 폴리시
   --------------------------------------------------------------------------
   archive 클론이 아니라 레거시 섹션 3개의 구성 remap (quality.css 와 같은 성격).
   타이포는 역할(bmtech-type.css), 간격은 스케일(bmtech-rhythm.css)을 탄다.

   고친 것:
     1. 도입 플로우(.strategy_flow): 원형 인포그래픽(하늘색/회색/남색 원)
        → 번호 카드 3장 + 화살표. 원은 PPT 시절 잔재로, 사이트 어디에도
        없는 형태 언어였다. 최종 단계(--c)만 액센트 솔리드로 목표 강조.
     2. 4대 전략(.hub_grid): 4색 채움 블록 → 품질·RnD 와 같은
        흰 카드 + 헤어라인 + 번호 + 체크서클. 색 4개가 한 화면에 깔리면
        액센트 1색 규율이 무너진다.
     3. GE 협력(.ge_collab_body): 중앙 정렬 h5/p 교차 스택 → 좌측 정렬
        헤어라인 행. 밑줄 h5 는 base 가 이미 제거, 여기선 배치만.
   ========================================================================== */

/* --- 1. 도입 밴드 (인라인 style 핵 대체) ----------------------------------- */
.wd-strategy-band {
  background-color: var(--bmt-surface-alt);
  padding-bottom: var(--bmt-band-pad);
}

/* --- 도입 플로우: 원 3개 → 카드 3장 ---------------------------------------- */
.strategy_flow {
  counter-reset: wd-sf;
  align-items: stretch;
  gap: 20px;
  width: min(1600px, 100vw);
  margin: 0 auto;
  padding: 0 var(--bmt-gutter);
  box-sizing: border-box;
  flex-wrap: nowrap;
}

.strategy_flow_step {
  flex: 1;
  width: auto;
  height: auto;
  border-radius: var(--bmt-radius-lg);
  padding: 32px 30px 36px;
  text-align: left;
  display: block;
  box-sizing: border-box;
}

.strategy_flow_step::before {
  counter-increment: wd-sf;
  content: "0" counter(wd-sf);
  display: block;
  margin-bottom: 14px;
  color: var(--bmt-accent);
  font-family: var(--bmt-font-num);
  font-size: var(--bmt-fs-sm);
  font-weight: var(--bmt-fw-semi);
  letter-spacing: .04em;
}

.strategy_flow_step--a,
.strategy_flow_step--b {
  background-color: var(--bmt-surface);
  border: var(--bmt-border);
  color: var(--bmt-body);
}

.strategy_flow_step p {
  margin: 0 0 8px;
  font-size: var(--bmt-fs-base);
  line-height: var(--bmt-lh-tight);
  color: var(--bmt-body);
}
.strategy_flow_step p:last-child { margin-bottom: 0; }

.strategy_flow_step--b strong,
.strategy_flow_step--c strong {
  display: block;
  margin: 0 0 12px;
  font-size: var(--bmt-fs-h4);
  font-weight: var(--bmt-fw-bold);
  letter-spacing: var(--bmt-ls-heading);
  color: var(--bmt-ink);
}

/* 최종 단계 — 목표만 액센트 솔리드 */
.strategy_flow_step--c {
  background-color: var(--bmt-accent);
  border: 1px solid var(--bmt-accent);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.strategy_flow_step--c::before { color: rgba(255, 255, 255, .7); }
.strategy_flow_step--c strong  { color: var(--bmt-inverse); margin: 0; }

.strategy_flow_arrow {
  align-self: center;
  width: auto;
  color: var(--bmt-muted);
  font-size: var(--bmt-fs-h4);
}

/* --- 2. 4대 전략: 채움 4색 → 표준 카드 ------------------------------------- */
.hub_grid {
  counter-reset: wd-hub;
  gap: 40px;
}

.hub_grid_cell,
.hub_grid_cell--1,
.hub_grid_cell--2,
.hub_grid_cell--3,
.hub_grid_cell--4 {
  background-color: var(--bmt-surface);
  border: var(--bmt-border);
  border-radius: var(--bmt-radius-lg);
  color: var(--bmt-body);
  padding: 40px 44px 44px;
}

.hub_grid_cell::before {
  counter-increment: wd-hub;
  content: "0" counter(wd-hub);
  display: block;
  margin-bottom: 10px;
  color: var(--bmt-accent);
  font-family: var(--bmt-font-num);
  font-size: var(--bmt-fs-sm);
  font-weight: var(--bmt-fw-semi);
  letter-spacing: .04em;
}

.hub_grid_cell h4 {
  margin: 0 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--bmt-line-soft);
  color: var(--bmt-ink);
}

.hub_grid_cell p {
  position: relative;
  margin: 0 0 12px;
  padding-left: 30px;
  font-size: var(--bmt-fs-base);
  font-weight: var(--bmt-fw-reg);
  color: var(--bmt-body);
}
.hub_grid_cell p:last-child { margin-bottom: 0; }
.hub_grid_cell p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23004b9b'/%3E%3Cpath d='M5.5 10.2l3 3 6-6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* --- 3. GE 협력: 중앙 스택 → 좌 제목 / 우 본문 헤어라인 행 ------------------
   ge-materials(품질 페이지)와 같은 행 구도 — head 와 같은 컨테이너 축이라
   정렬이 어긋나지 않는다 (820px 중앙 박스는 head 좌측 정렬과 축이 달라 실패) */
.ge_collab_body { text-align: left; }

.ge_collab_row {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding: 36px 0;
  border-top: 1px solid var(--bmt-line);
}

.ge_collab_row h5 {
  width: 40%;
  flex-shrink: 0;
  margin: 0;
  color: var(--bmt-ink);
}

.ge_collab_row p {
  flex: 1;
  margin: 0;
  max-width: 560px;
  font-size: var(--bmt-fs-base);
  line-height: var(--bmt-lh-body);
  color: var(--bmt-body);
  word-break: keep-all;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .strategy_flow { flex-wrap: wrap; }
  .strategy_flow_step { flex: none; width: 100%; }
  .strategy_flow_arrow { width: 100%; transform: rotate(90deg); height: 28px; }
  .hub_grid { gap: 24px; grid-template-columns: 1fr; }
  .hub_grid_cell { padding: 28px 24px; }
  .ge_collab_row { flex-direction: column; gap: 12px; padding: 24px 0; }
  .ge_collab_row h5 { width: 100%; }
  .ge_collab_row h5 br { display: none; }
}