/* ============================================================
   Business — 사업 소개 페이지 (anchor-stack 변형)
   - 한솔 토큰(--wd-primary 등) 사용, 단위는 px (한솔 글로벌 스케일 1rem=16px와 충돌 방지)
   - hero는 hse_render_subvisual()이 그리는 .wd-subvisual을 사용 → 그 위에 패널이 -96px 오버랩
   ============================================================ */

.wd-business {
  --wd-bs-radius-md: 8px;
  --wd-bs-radius-lg: 24px;
  --wd-bs-radius-xl: 40px;
  --wd-bs-container: 1280px;
  --wd-bs-spacing: 60px;

  position: relative;
  display: block;
  background: var(--wd-surface-light);
}

.wd-business__brand {
  font-weight: 600;
  color: inherit;
}

.wd-business__mb-br { display: none; }

/* ----- Panel (다른 서브페이지의 wd-sub와 동일한 흰 배경/패딩) ----- */
.wd-business__panel {
  position: relative;
  /* z-index:-1인 .wd-business__bg가 흰 배경 뒤로 빠지지 않도록 stacking context 격리 */
  isolation: isolate;
  padding: 120px var(--wd-bs-spacing);
  background-color: #ffffff;
}

.wd-business__container {
  width: var(--wd-bs-container);
  max-width: 100%;
  margin: 0 auto;
}

/* ----- Intro headline ----- */
.wd-business__intro {
  margin: 80px 0 120px;
  text-align: center;
}

.wd-business__intro-title {
  font-size: 44px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--wd-text-primary);
  word-break: keep-all;
}

.wd-business__intro-desc {
  margin-top: 24px;
  color: var(--wd-text-tertiary);
  font-size: 20px;
  font-weight: 300;
  line-height: 1.6;
  word-break: keep-all;
}

/* ----- Layout: sequential list ----- */
.wd-business__layout {
  position: relative;
}

/* ----- Business list (each anchor section) ----- */
.wd-business__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wd-business__item {
  position: relative;
  padding-top: 120px;
  padding-bottom: 80px;
}

.wd-business__item + .wd-business__item {
  margin-top: 140px;
}

.wd-business__bg {
  position: absolute;
  z-index: -1;
  top: 40px;
  bottom: 0;
  left: -40px;
  width: calc(100% + 80px);
  border-radius: var(--wd-bs-radius-xl);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

/* 흰색 헤딩·리드 가독성 확보용 오버레이 — 좌상단 어둡게, 우하단으로 페이드
   5/7 미팅 W17: 주황색 ❌ → 다크 그레이 톤. 앞쪽 더 투명하게. */
.wd-business__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    rgba(28, 30, 34, 0.74) 0%,
    rgba(28, 30, 34, 0.62) 45%,
    rgba(28, 30, 34, 0.52) 100%
  );
  pointer-events: none;
}

.wd-business__inner { width: 100%; }
.wd-business__lead { display: block; }

.wd-business__title-block { color: var(--wd-text-inverse); }

.wd-business__title {
  display: block;
  margin-bottom: 16px;
  color: var(--wd-text-inverse);
  font-size: 54px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.wd-business__lead-desc {
  margin-bottom: 64px;
  min-height: 96px;
  max-width: 680px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 20px;
  font-weight: 300;
  line-height: 1.6;
  word-break: keep-all;
}

.wd-business__visual {
  position: relative;
  height: 420px;
  margin-bottom: 64px;
  border-radius: 24px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.wd-business__caption {
  position: absolute;
  bottom: 30px;
  right: 40px;
  padding-left: 12px;
  color: var(--wd-text-inverse);
  font-size: 14px;
  font-weight: 300;
}

.wd-business__caption::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--wd-text-inverse);
}

/* ----- Detail content blocks ----- */
.wd-business__detail { position: relative; }

.wd-business__txt {
  position: relative;
  max-width: 640px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  word-break: keep-all;
}

.wd-business__txt-box + .wd-business__txt-box {
  margin-top: 40px;
}

.wd-business__detail-title {
  display: block;
  margin-bottom: 16px;
  color: var(--wd-text-inverse);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  word-break: keep-all;
}

/* ----- BG / image variants per business ----- */
.wd-business__item--module   .wd-business__bg     { background-image: url('../images/business/module_bg.webp'); }
.wd-business__item--module   .wd-business__visual { background-image: url('../images/business/module_inner.webp'); }
.wd-business__item--ess      .wd-business__bg     { background-image: url('../images/business/ess_bg.webp'); }
.wd-business__item--ess      .wd-business__visual { background-image: url('../images/business/ess_inner.webp'); }
.wd-business__item--inverter .wd-business__bg     { background-image: url('../images/business/archi_bg.webp'); }
.wd-business__item--inverter .wd-business__visual { background-image: url('../images/business/archi_inner.webp'); }
.wd-business__item--om       .wd-business__bg     { background-image: url('../images/business/om_bg.webp'); }
.wd-business__item--om       .wd-business__visual { background-image: url('../images/business/om_inner.webp'); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1440px) {
  .wd-business__container {
    width: 100%;
    max-width: 1200px;
  }
}

@media (max-width: 1199px) {
  .wd-business__panel {
    padding: 80px 40px;
  }

  .wd-business__intro { margin: 56px 0 80px; }
  .wd-business__intro-title { font-size: 30px; }
  .wd-business__intro-desc { font-size: 17px; }
  .wd-business__intro-desc br { display: none; }

  .wd-business__item { padding-top: 80px; }
  .wd-business__item + .wd-business__item { margin-top: 90px; }

  .wd-business__bg {
    left: -40px;
    width: calc(100% + 80px);
    border-radius: 0;
  }

  .wd-business__title { font-size: 40px; }

  .wd-business__lead-desc {
    margin-bottom: 32px;
    min-height: 0;
    font-size: 17px;
  }
  .wd-business__lead-desc br { display: none; }

  .wd-business__visual {
    margin-bottom: 40px;
    border-radius: 12px;
    height: 320px;
  }

  .wd-business__txt br { display: none; }
}

@media (max-width: 768px) {
  .wd-business__panel {
    padding: 60px 20px;
  }
  .wd-business__container { width: 100%; }
  .wd-business__intro { margin: 40px 0 56px; }

  .wd-business__intro-title { font-size: 24px; }
  .wd-business__intro-desc { font-size: 15px; margin-top: 16px; }

  .wd-business__mb-br { display: inline; }

  .wd-business__item { padding-top: 60px; }
  .wd-business__item + .wd-business__item { margin-top: 60px; }

  .wd-business__bg { left: -20px; width: calc(100% + 40px); top: 20px; }
  .wd-business__title { font-size: 26px; }
  .wd-business__lead-desc { font-size: 15px; }

  .wd-business__visual { height: 220px; margin-bottom: 32px; }

  .wd-business__detail-title { font-size: 18px; }
  .wd-business__txt { font-size: 15px; }
}