/* ==========================================================================
   사업소개 메인 (/business) — 히어로 + ESG Value Chain (시안 C)
   색상 변수는 .bizm 안에서만 쓰도록 묶어 두었습니다.
   ========================================================================== */
.bizm {
  --navy-900: #081B38;
  --blue-600: #1857C3;
  --blue-500: #2A6FE8;
  --blue-100: #E8F0FC;
  --gray-50: #F5F7FA;
  --gray-200: #E3E8EF;
  --gray-500: #7A8699;
  --ink: #1A2333;

  color: var(--ink);
  line-height: 1.6;
}

/* ---------- 히어로 ---------- */
.bizm-hero { padding: 96px 0 88px; text-align: center; }

.bizm-label {
  display: block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--blue-600);
}

.bizm-hero h1 {
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--navy-900);
  animation: bizm-rise .7s ease both;
}

.bizm-hero p {
  margin-top: 22px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--gray-500);
  animation: bizm-rise .7s .12s ease both;
}

@keyframes bizm-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bizm-hero h1,
  .bizm-hero p { animation: none; }
}

/* ---------- ESG Value Chain : 좌우 대칭형 ----------
   이해관계자 ← 고객사 ← (서비스 제공) ← 대신 → 서비스
   기둥 한 점에서 모든 항목으로 곡선이 퍼지는 구조 (1:1 매칭 없음) */
.vc-wrap { padding: 0 0 104px; background: var(--gray-50); border-top: 1px solid var(--gray-200); }
.vcx { max-width: 1200px; margin: 0 auto; padding: 0 24px; word-break: keep-all; overflow-wrap: anywhere; }
.vcx ul { list-style: none; }
.vcx h2 { padding: 72px 0 40px; text-align: center; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: var(--navy-900); }

/* 좌우 같은 폭 → 가운데 기둥과 화살표가 정확히 중앙 */
.vcx-map {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px 140px 112px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
}

.vcx-lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
.vcx-lines.ready { opacity: 1; }
.vcx-lines path { fill: none; stroke: #B4C2D8; stroke-width: 1.6; transition: stroke .2s, stroke-width .2s; }
.vcx-lines path.l { marker-end: url(#vcx-ah); }
.vcx-lines path.r { marker-end: url(#vcx-dot); }
.vcx-lines path.r.on { stroke: var(--blue-500); stroke-width: 2; marker-end: url(#vcx-dot-on); }

.vcx-colh { grid-row: 1; padding-bottom: 14px; font-size: 13.5px; font-weight: 700; color: var(--gray-500); }
.vcx-colh.l { grid-column: 1; justify-self: end; width: 212px; margin-right: 96px; text-align: center; }
/* 왼쪽 머리글이 알약 위 가운데에 있듯, 오른쪽 머리글도 서비스 카드 폭(.vcx-svcs 의 padding-left 이후)의 가운데에 둡니다 */
.vcx-colh.r { grid-column: 5; padding-left: 96px; text-align: center; }

/* 기둥: 캡슐형 */
.vcx-pillar {
  position: relative;
  z-index: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 28px 0;
  text-align: center;
  border-radius: 999px;
}
.vcx-pillar b { font-size: 22px; font-weight: 900; letter-spacing: -0.01em; line-height: 1.2; }
.vcx-pillar span { font-size: 12.5px; font-weight: 600; }

.vcx-cust { grid-column: 2; color: #fff; background: var(--navy-900); box-shadow: 0 0 0 8px rgba(8, 27, 56, .05), 0 20px 40px rgba(8, 27, 56, .22); }
.vcx-cust span { color: rgba(255, 255, 255, .65); }
.vcx-dai { grid-column: 4; color: #fff; background: linear-gradient(180deg, #4C86F2, var(--blue-600) 55%, #12429E); box-shadow: 0 0 0 8px rgba(42, 111, 232, .08), 0 20px 40px rgba(24, 87, 195, .26); }
.vcx-dai span { color: rgba(255, 255, 255, .82); }

/* 가운데 화살표 */
.vcx-flow { position: relative; z-index: 2; grid-column: 3; grid-row: 2; align-self: center; padding: 0 16px; text-align: center; }
.vcx-flow span { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 800; line-height: 1.45; color: var(--navy-900); }
.vcx-flow svg { display: block; width: 100%; height: 20px; }
.vcx-flow path { fill: var(--blue-500); }

/* 왼쪽: 이해관계자 (캡슐 라벨) */
.vcx-stakes {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
  padding: 8px 96px 8px 0;
}
.vcx-stake {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 212px;
  min-height: 52px;
  padding: 10px 18px;
  text-align: center;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy-900);
  background: #fff;
  border: 1px solid #E1E7F0;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(8, 27, 56, .07);
}

/* 오른쪽: 서비스 (박스 없이, 호버 시에만 은은한 배경) */
.vcx-svcs { position: relative; z-index: 2; grid-column: 5; grid-row: 2; display: flex; flex-direction: column; gap: 6px; padding-left: 96px; }
.vcx-card { display: block; padding: 16px 18px; border-radius: 18px; transition: background .2s, box-shadow .2s; }
.vcx-card h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.4; color: var(--navy-900); transition: color .2s; }
.vcx-card p { margin-top: 5px; font-size: 14px; line-height: 1.7; color: var(--gray-500); }
.vcx-card:hover { background: #fff; box-shadow: 0 10px 26px rgba(8, 27, 56, .08); }
.vcx-card:hover h3 { color: var(--blue-600); }
.vcx-card:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }

@media (max-width: 1180px) {
  .vcx-map { grid-template-columns: minmax(0, 1fr) 100px 124px 100px minmax(0, 1fr); }
  .vcx-stakes { padding-right: 64px; }
  .vcx-colh.l { margin-right: 64px; }
  .vcx-stake,
  .vcx-colh.l { width: 184px; }
  .vcx-svcs { padding-left: 64px; }
  .vcx-colh.r { padding-left: 64px; }
  .vcx-pillar b { font-size: 19px; }
}

/* 모바일·태블릿: 세로 한 줄 (곡선 숨김) */
@media (max-width: 1023px) {
  .vcx-map { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 12px; max-width: 600px; margin: 0 auto; }
  .vcx-map > * { grid-column: 1 !important; grid-row: auto !important; }
  .vcx-lines,
  .vcx-colh { display: none; }
  .vcx-pillar { flex-direction: row; align-items: baseline; gap: 10px; padding: 18px; }
  .vcx-pillar b { font-size: 20px; }
  .vcx-dai { order: 1; }
  .vcx-svcs { order: 2; gap: 10px; padding: 0; }
  .vcx-card { background: #fff; box-shadow: 0 6px 18px rgba(8, 27, 56, .06); }
  .vcx-flow { order: 3; padding: 6px 0; }
  .vcx-flow svg { width: 44px; height: 18px; margin: 14px auto 12px; transform: rotate(-90deg); }
  .vcx-cust { order: 4; }
  .vcx-stakes { order: 5; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 6px 0 0; }
  .vcx-stake { width: auto; min-height: 40px; padding: 6px 16px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .vcx * { transition: none !important; }
}

/* ---------- 하단 서비스 카드 그리드 ---------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 72px auto 0;
  padding: 0 24px;
}

.svc-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: box-shadow .25s, transform .2s cubic-bezier(.2, .7, .3, 1), border-color .25s;
}
.svc-card:hover { box-shadow: 0 18px 44px rgba(8, 27, 56, .12); transform: translateY(-4px); }
.svc-card:active { box-shadow: 0 8px 20px rgba(8, 27, 56, .10); transform: translateY(-1px) scale(.985); }
.svc-card.pressed { animation: svc-press .3s cubic-bezier(.2, .7, .3, 1); }

@keyframes svc-press {
  0% { transform: scale(.985); }
  55% { transform: translateY(-4px) scale(1.008); }
  100% { transform: translateY(-4px) scale(1); }
}

.svc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--gray-200);
}
.svc-head .who { font-weight: 800; color: var(--navy-900); }

.svc-body { display: flex; flex: 1; flex-direction: column; padding: 26px 24px 24px; }

.svc-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 800;
  color: var(--blue-600);
  background: var(--blue-100);
  border-radius: 9px;
}

.svc-body h3 { margin-bottom: 10px; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--navy-900); }
.svc-body p { flex: 1; font-size: 14.5px; line-height: 1.75; color: var(--gray-500); }

.svc-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-600);
}
.svc-more::after { content: "↗"; font-size: 12px; }
.svc-more:hover { text-decoration: underline; }

@media (max-width: 960px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .svc-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .svc-card.pressed { animation: none; } }