:root{
  /* 레이아웃 */
  --ba-max:1280px;
  --ba-pad:clamp(20px,5vw,48px);
  --ba-gap:clamp(16px,2vw,24px);
  --ba-card-h:clamp(280px,36vw,460px);

  /* 팔레트( cases 섹션과 동일 ) */
  --brand:        #0E1D4A;   /* 메인 네이비 */
  --surface:      #F4F6FB;   /* 밝은 섹션 배경 */
  --ink-strong:   #0B1724;   /* 본문/타이틀 진한 텍스트 */
  --ink-muted:    #4A6078;   /* 보조 텍스트 */
}

/* ▼ 한 화면 가득 + 세로 중앙 + 배경 톤 통일(케이스 섹션과 동일) */
#business-area{
  position: relative;
  background: var(--surface);
  color: var(--ink-strong);

  /* ✅ 전역 스냅 기준과 통일: 섹션 자체는 항상 100svh */
  min-height: 100svh;
  height: auto;                  /* 고정 높이 제거 */
  padding: 0;
  display: grid;
  align-content: center;

  /* ✅ 스냅 경계 1px 여유 → 1→2 구간 ‘두 번 스크롤’ 해소 */
  scroll-margin-top: calc(var(--header-h, 0px) + 1px);
  scroll-margin-bottom: var(--dock-h, 0px);
}

/* 은은한 네이비 틴트(케이스 섹션과 동일 패턴) */
#business-area::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 70% 20%, rgba(14,29,74,.05), transparent 60%),
    radial-gradient(900px 520px at 20% 70%,  rgba(14,29,74,.04), transparent 65%);
}

/* 내용 위로 올리기 */
.ba-container{
  position: relative;
  z-index: 1;
  width:min(var(--ba-max), 100% - 2*var(--ba-pad));
  margin:0 auto;
}

/* 헤더 */
.ba-head{
  display:grid;
  grid-template-columns:minmax(460px,1.1fr) minmax(420px,.9fr);
  gap:clamp(20px,3.5vw,48px);
  align-items:center;
  margin-bottom:clamp(20px,4vw,36px);
}
.ba-eyebrow{
  font-family:ui-serif,Georgia,"Times New Roman",serif;
  font-weight:700; letter-spacing:.08em; opacity:.85;
  color:var(--brand); font-size:12px; margin-bottom:10px;
}
.ba-title{
  font-size:clamp(26px,3.3vw,44px);
  line-height:1.25; letter-spacing:-.02em; margin:0; font-weight:800;
  color:var(--ink-strong);
}

/* 카운터 */
.ba-metrics{ display:flex; justify-content:flex-end; gap:clamp(32px,6vw,88px); align-items:center; }
.ba-metric{ text-align:center }
.ba-micon{ width:42px; height:42px; display:grid; place-items:center; background:#e9eef6; border-radius:10px; margin:0 auto 10px; }
.ba-num{
  font-family:ui-serif,Georgia,"Times New Roman",serif;
  font-size:clamp(24px,3.2vw,40px); font-weight:800;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  color:var(--ink-strong);
}
.ba-num em{ font-style:normal; font-size:.44em; margin-left:.14em; color:#2b3c59; }
.ba-label{ margin-top:4px; color:var(--brand); font-weight:700; font-size:13px; }

/* 스포트라이트 */
.ba-split{ display:flex; gap:var(--ba-gap); align-items:stretch; min-height:var(--ba-card-h); }
.ba-panel{
  position:relative; flex:1; height:var(--ba-card-h);
  border-radius:10px; overflow:hidden; isolation:isolate; background:#000;
  transition:flex .7s ease;
}
.ba-panel.active{ flex:4; }
.ba-panel img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1); transition:transform .6s ease;
}
.ba-panel.active img{ transform:scale(1.04); }
.ba-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%); }
.ba-text{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(16px,2.6vw,24px); color:#fff; }
.ba-kicker{
  font-family:ui-serif,Georgia,"Times New Roman",serif; font-weight:800; letter-spacing:.06em;
  color:#d7dbe0; opacity:.9; margin-bottom:8px; font-size:13px;
}
.ba-name{ font-size:clamp(20px,2vw,28px); font-weight:900; margin-bottom:8px; }
.ba-desc{ color:rgba(255,255,255,.92); font-size:14px; line-height:1.7; max-width:52ch; opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease; }
.ba-panel.active .ba-desc{ opacity:1; transform:none; }
.ba-cover{ position:absolute; inset:0; z-index:3; border:0; background:transparent; cursor:pointer; }
.ba-cover:focus-visible{ outline:3px solid #fff7; outline-offset:-4px; border-radius:10px; }

/* reveal */
.reveal-left,.reveal-up{ will-change:transform,opacity; }
.reveal-left{ opacity:0; transform:translate3d(-48px,0,0); transition:transform .8s cubic-bezier(.2,.65,.2,1), opacity .8s ease; }
.reveal-up{   opacity:0; transform:translate3d(0,28px,0);   transition:transform .8s cubic-bezier(.2,.65,.2,1), opacity .8s ease; }
.is-inview.reveal-left,.is-inview.reveal-up{ opacity:1; transform:translate3d(0,0,0); }

/* 반응형 */
@media (max-width:980px){
  /* ▼ 모바일에선 스냅 미적용이므로 자동 높이 + 여백 복원 */
  #business-area{ height:auto; padding:56px 0 84px; }

  .ba-head{ grid-template-columns:1fr; align-items:start; }
  .ba-metrics{ justify-content:center; }
}
@media (max-width:680px){
  .ba-split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--ba-gap); min-height:unset; }
  .ba-panel{ height:clamp(190px,44vw,240px); flex:initial; }
  .ba-panel.active{ flex:initial; }
  .ba-desc{ display:none; }
  .ba-cover{ pointer-events:none; }
  .ba-name{ font-size:clamp(16px,4vw,20px); }
  .ba-kicker{ font-size:12px; }
}
@media (prefers-reduced-motion:reduce){
  .reveal-left, .reveal-up{ opacity:1; transform:none !important; transition:none !important; }
  .ba-panel, .ba-panel img, .ba-desc{ transition:none !important; }
}