/* HCG 추가 반응형 보정 — 벤더 납품본(style.css / media.css)에 얹는다.
 *
 * ⚠️ 이 파일은 우리 소유다. 벤더 갱신본이 style.css·media.css를 통째로 덮어써도 남는다.
 *    갱신 시 할 일은 landing.html / landing.en.html 의 <link> 한 줄을 다시 넣는 것뿐이다.
 *    반드시 media.css **뒤에** 링크할 것 — 뒤에 와야 벤더 값을 이긴다.
 *
 * 국문·영문 공용. 영문 전용 보정(Event Information 라벨 정렬, 아젠다 하단 안내 문구)은
 * landing.en.html 안의 <style>에 따로 둔다.
 */

/* ── 히어로 높이를 내용에 맞춘다 ──────────────────────────────
 * 벤더 구조는 `.hero-bg`(배경, 흐름 안) 위에 `.hero-inner`(내용, position:absolute)를 겹치고
 * `#hero`에 높이를 직접 박는다(880px 이하 100vh, 580px 이하 820px 고정).
 * 내용이 absolute라 높이를 만들지 못하므로, 카피가 길어지면 맨 아래 카운트다운이
 * #hero 밖으로 밀려 보이지 않는다.
 * → 배경을 absolute로 깔고 내용을 흐름 안(static)에 두어 내용이 높이를 결정하게 한다.
 *   고정 높이를 키우는 방식은 화면 크기·문구 길이마다 다시 맞춰야 해서 쓰지 않았다.
 */
@media (max-width: 880px) {
  #hero {
    height: auto;
    min-height: 100vh;
  }

  #hero .hero-bg {
    position: absolute;
    inset: 0;
    height: 100%;
  }

  /* 배경이 내용 높이만큼 늘어나므로 영상·노이즈도 그 영역을 덮어야 한다.
     벤더 값(video: width 120% / height auto)을 그대로 두면 아래가 검게 남아
     히어로의 빛무리가 사라진다. opacity·mix-blend-mode는 벤더 값을 유지한다. */
  #hero .hero-bg .hero-video,
  #hero .hero-bg .noise {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ⚠️ `static`으로 두면 안 된다. 배치된 요소(.hero-bg, absolute)가 배치되지 않은 요소보다
     위에 그려지기 때문에, 노이즈 레이어(mix-blend-mode: multiply)가 글자를 덮어 전체가
     회색으로 죽는다. `relative`는 흐름 안에 남아 높이를 만들면서도 배경 위로 올라온다. */
  #hero .hero-inner {
    position: relative;
    z-index: 2;
    /* ⚠️ 벤더 기본값 `left: 50%` + `transform: translateX(-50%)`를 **둘 다** 풀어야 한다.
       relative에서 left는 요소를 그만큼 밀어내므로, transform만 없애면 화면 절반만큼
       오른쪽으로 밀려 오른쪽이 잘린다. */
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    height: auto;
    padding-bottom: 8rem;
  }

  /* DATE / VENUE / AUDIENCE — 3등분(li 30% + 세로 구분선)이라 문구가 길면 여러 줄로 감긴다.
     한 줄에 하나씩 쌓고 구분선을 없앤다. */
  #hero .hero-inner .right ul {
    flex-wrap: wrap;
    gap: 2rem;
  }

  #hero .hero-inner .right li {
    width: 100%;
    border-right: none;
  }

  #hero .hero-inner .right .cont {
    padding: 0;
  }
}

@media (max-width: 580px) {
  #hero .hero-inner .right li {
    width: 100%;
  }
}

/* ── Why Attend 카드 ──────────────────────────────────────
 * 벤더는 1100px 이하에서 2단(width: calc(50% - 10px))에 높이를 148px / 200px로 박고
 * li에 overflow:hidden을 걸어 둔다. 문구가 길면 넘친 문장이 잘려 사라진다.
 * 한 줄에 한 장씩 쌓고 높이는 내용에 맞춘다.
 */
@media (max-width: 1100px) {
  #why .why-inner .box-wrap li {
    width: 100%;
    height: auto;
  }
}