/* ===== Section 4 — News (fixed ratio, contain-fit) ===== */

/* 섹션(부모): 중앙정렬 + 전역 min-height:100vh 같은거 무효화 */
#section4.s4{
  /* 원하는 전체 비율 */
  --ratio-w: 18;   /* 21로 바꾸면 21:9, 16이면 16:9 */
  --ratio-h: 9;

  /* 내부 카드 비율/크기 */
  --hero-w: 55%;
  --side-w: 15%;

  /* 타이틀과 히어로 사이 간격 */
  --title-gap: clamp(6px, 0.8vw, 12px);

  background:#0a0a0a;
  margin:0;
  padding:0;

  /* 🔧 전역 고정 높이 강제 해제 */
  min-height:auto !important;
  height:auto !important;

  display:grid;
  place-items:center;   /* stage 수직/수평 중앙 */
  overflow:hidden;
}

/* ✅ 화면의 가로·세로 중 '더 작은 쪽'에 맞춰 같은 비율로 함께 스케일 */
.s4__stage{
  position:relative;

  /* svw/svh: 모바일 툴바 변화에도 안정적인 뷰포트 단위 */
  inline-size: min(100svw, calc(100svh * (var(--ratio-w) / var(--ratio-h))));
  block-size:  min(100svh, calc(100svw * (var(--ratio-h) / var(--ratio-w))));

  /* 예전 풀블리드용 보정 제거 (aspect-ratio, -50vw 마진 등) */
  margin:0 auto;
}

/* 타이틀: 히어로 '바로 위'에 붙이기 (오버레이, 높이 추가 X) */
.s4__title{
  position:absolute; left:50%;
  /* 
    히어로 높이 = (히어로 너비%) * (9/16) * (stage 가로/세로 비 = ratio-w/ratio-h)
    중앙(50%)에서 히어로 높이의 절반만큼 위로 올리고, 간격(--title-gap)만큼 더 올림
  */
  top: calc(
    45% - (
      (var(--hero-w) * (9 / 16) * (var(--ratio-w) / var(--ratio-h))) / 2
    ) - var(--title-gap)
  );
  transform:translateX(-50%);
  margin:0; padding:0;
  font:700 clamp(12px,2.2vw,20px)/1.1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#fff; text-align:center; z-index:3; opacity: 80%;
}

/* 프레임은 stage를 꽉 채움 */
.s4__frame{ position:absolute; inset:0; overflow:hidden; background:#0a0a0a; }

/* 트랙/슬라이드 */
.s4__track{ position:absolute; inset:0; display:flex; gap:0; transition:transform .5s ease; }
.s4__slide{ position:relative; min-inline-size:100%; block-size:100%; }

/* 중앙 메인(가로형) — 정중앙 */
.s4__hero{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  inline-size:var(--hero-w);
  aspect-ratio:16/9;
  background:#151515 center/cover no-repeat;
  z-index:1;
}

/* 오른쪽 썸 — 오른쪽 끝 */
.s4__side{
  position:absolute; inset-inline-end:0; top:50%;
  transform:translateY(-50%);
  inline-size:var(--side-w);
  aspect-ratio:3/4;
  background:#232323 center/cover no-repeat;
  z-index:2;
}

/* 왼쪽 이전 썸 — 왼쪽 끝 */
.s4__peek{
  position:absolute; inset-inline-start:0; top:50%;
  transform:translateY(-50%);
  inline-size:var(--side-w);
  aspect-ratio:3/4;
  background:#1a1a1a center/cover no-repeat;
  pointer-events:none; z-index:2;
}

/* 큰 화살표는 사용 안 함 */
.s4__nav{ display:none !important; }

/* 사각형 사이의 작은 화살표(분리자) */
.s4__sep{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  background:transparent; border:none; color:#fff;
  font-size:18px; line-height:1; padding:0; margin:0; cursor:pointer;
  z-index:4; opacity:.9;
}
.s4__sep:hover{ opacity:1; }
.s4__sep--cta{ text-decoration:none; }

/* 두 사각형의 ‘딱 중간’ */
.s4__sep--left{
  left: calc( (var(--side-w) + (50% - (var(--hero-w) / 2))) / 2 );
}
.s4__sep--right{
  left: calc( ((50% + (var(--hero-w) / 2)) + (100% - var(--side-w))) / 2 );
}

/* 모바일: 썸 숨기고, 화살표 재배치 */
@media (max-width:900px){
  #section4.s4{ --hero-w:72%; --side-w:0; }
  .s4__side, .s4__peek{ display:none; }
  .s4__sep--left  { left: calc(50% - (var(--hero-w)/2) - 10px); }
  .s4__sep--right { left: calc(50% + (var(--hero-w)/2) + 10px); }
}