/* ===== Section 4 — News (개별 배경색, 캡션, 썸네일 반투명) ===== */

#section4.s4{
  --ratio-w: 18; --ratio-h: 9;
  --hero-w: 55%; --side-w: 15%;
  --hero-offset-y: 35px;
  --title-gap: clamp(20px, 3vw, 40px);

  background:#0a0a0a;
  margin:0; padding:0;
  min-height:auto !important; height:auto !important;

  display:grid; place-items:center; overflow:hidden;
}

.s4__stage{
  position:relative;
  inline-size:min(100svw, calc(100svh*(var(--ratio-w)/var(--ratio-h))));
  block-size:min(100svh, calc(100svw*(var(--ratio-h)/var(--ratio-w))));
  margin:0 auto;
}

/* 타이틀 */
.s4__title{
  --title-offset-y: -80px;

  position:absolute; left:50%;
  top: calc(
    50%
    - ( (var(--hero-w) * (9/16) * (var(--ratio-w)/var(--ratio-h)) ) / 2 )
    + var(--hero-offset-y)
    + var(--title-offset-y)
  );
  transform: translateX(-50%);
  inline-size: var(--hero-w);
  text-align: center;
  font:700 clamp(10px,2vw,18px)/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#fff; z-index:5;
  opacity:.7;

  white-space: normal;         /* ✅ 줄바꿈 허용 */
  overflow-wrap: break-word;   /* ✅ 긴 단어 줄바꿈 */
}

.s4__link{
  text-decoration:none;
  display:inline-block;
  transition: transform .25s ease;
}

.s4__title:hover,
.s4__title:focus-visible{
  transform: translate(-50%, -1.2px);
  outline: none;
}

/* 프레임과 개별 슬라이드 */
.s4__frame{ position:absolute; inset:0; overflow:hidden; background:transparent; }
.s4__track{ position:absolute; inset:0; display:flex; transition:transform .5s ease; }
.s4__slide{ position:relative; min-inline-size:100%; block-size:100%; }
.s4__bg{ position:absolute; inset:0; z-index:0; }

/* 중앙 히어로 */
.s4__heroLink{
  position:absolute; left:50%;
  top: calc(50% + var(--hero-offset-y, 0px));
  transform:translate(-50%,-50%);
  inline-size:var(--hero-w);
  display:block; z-index:3;

  /* ✅ 화면 과점유 방지 */
  max-inline-size: 90vw;
  max-block-size: 80vh;
}

.s4__heroLink,
.s4__heroLink * {
  color:#fff !important;
  text-decoration:none !important;
  border:0 !important; outline:0 !important; box-shadow:none !important;
  -webkit-text-decoration:none !important;
  text-decoration-color:transparent !important;
}

/* 이미지 박스 */
.s4__heroPh{
  aspect-ratio:16/9;
  background:#151515 center/cover no-repeat;
  inline-size:100%;
  display:block;
  border:0;
}

/* 캡션 */
.s4__meta{
  margin-top:2px;
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:8px;
  font-size: clamp(7px, 0.8vw, 10px);
  line-height:1.1;
  font-weight:400;
  color:#ddd;
  letter-spacing:0.15px;
  opacity:.7;

  white-space: normal;        /* ✅ 줄바꿈 */
  overflow-wrap: break-word;  /* ✅ 긴 단어 처리 */
}

.s4__metaL,
.s4__metaR{
  white-space:pre-line;
  flex:0 0 auto;
  max-width:45%;
}

.s4__metaL{ text-align:left;  padding:0 3px; }
.s4__metaR{ text-align:right; padding:0 3px; }

.s4__heroLink:hover .s4__title,
.s4__heroLink:hover .s4__meta { opacity:1; }

/* 썸네일 사이드 */
.s4__side, .s4__peek{
  position:absolute; top:50%; transform:translateY(-50%);
  inline-size:var(--side-w); aspect-ratio:8/9;
  background:#1a1a1a no-repeat; background-size:200% 100%;
  z-index:2; opacity:.6;
}
.s4__peek{ inset-inline-start:0; background-position:right center; pointer-events:none; }
.s4__side{ inset-inline-end:0; background-position:left center; background-color:#232323; }
.s4__side:hover, .s4__peek:hover{ opacity:.75; }

/* 작은 화살표 */
.s4__sep{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  background:transparent; border:none; color:#fff;
  font-size:18px; cursor:pointer; z-index:4; opacity:.9;
}
.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 );
}
.s4__sep--cta{ text-decoration:none; }

#s4-track,
#s4-track li { list-style:none; }

/* 첫 슬라이드 오버레이 */
#s4-track > li:first-child .s4__bg::after {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(
    180deg,
    rgba(10,10,10,0.95) 0%,
    rgba(54,42,48,0.85) 40%,
    rgba(15,24,15,0.85) 100%
  );
  pointer-events:none;
  z-index:1;
}


/* === Letterboxed hero (<=900px): 16:9 유지, 중앙 정렬, 여백에 화살표 === */
@media (max-width: 900px){
  /* 0) 섹션 변수: 좌우 여백(화살표 공간) + 상하 여백(레터박스) */
  #section4.s4{
    --gutter: 24px;   /* 좌/우 화살표용 여백 */
    --vpad:   16px;   /* 상/하 레터박스 여백 */
    --hero-offset-y: 0px; /* 정확히 수직 중앙 */
  }
  @media (max-width:560px){
    #section4.s4{ --gutter: 20px; --vpad: 14px; }
  }

  /* 1) 텍스트/부가요소 숨기기 (큰 사진 + 화살표만 남김) */
  .s4__title, .s4__meta, .s4__side, .s4__peek { display:none !important; }

  /* 2) 스테이지 안에 여백을 줘서 레터박스(검정 테두리) 확보 */
  #section4 .s4__stage{
    padding: var(--vpad) var(--gutter);  /* 상하/좌우 여백 */
    box-sizing: border-box;
    margin: 0 auto;
  }

  /* 3) 히어로: 16:9 유지, 세로에 맞춰 축소 + 중앙 정렬 */
  .s4__heroLink{
    position: absolute; left:50%; top:50%;
    transform: translate(-50%, -50%);     /* 섹션 세로/가로 중앙 */
    /* 폭 제한: (화살표 여백 제외한 폭) vs (세로 여백 제외한 높이에 맞는 16:9 폭) 중 작은 값 */
    inline-size: min(
      calc(100% - (var(--gutter) * 6)),
      calc((100svh - (var(--vpad) * 6)) * (16/9))
    );
    /* 높이 제한: 세로 여백 제외한 영역까지만 */
    max-block-size: calc(100svh - (var(--vpad) * 2));
    z-index: 3;
  }
  .s4__heroPh{
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;       /* 세로에 맞춰 자연 축소 */
    object-fit: cover;
    background-size: cover;
  }

  /* 4) 화살표: 레터박스(검정 여백) 안쪽에 고정 */
  .s4__sep{
    top: 50%;
    transform: translateY(-50%) !important;  /* X축 -50% 제거 */
    width: 44px; height: 44px;
    display: grid !important; place-items: center;
    z-index: 6; pointer-events: auto;
    color: transparent;                      /* 내부 텍스트 숨김 */
  }
  .s4__sep--left  { left:  var(--gutter) !important; right: auto !important; }
  .s4__sep--right { right: var(--gutter) !important; left:  auto !important; }

  /* 기호 방향을 강제로 고정 (기기별 뒤집힘 방지) */
  .s4__sep::before{ font-size:22px; line-height:1; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.35); content:''; }
  .s4__sep--left::before  { content:'‹'; }
  .s4__sep--right::before { content:'›'; }
  .s4__sep--cta::before   { content: '»'; }   /* 원하면 '>>' 로 바꿔도 됨 */
}