/* acf.kr 메인 — 섹션 스타일 (기준: 1920 디자인, 콘텐츠 폭 1216) */

.inner {
  width: 100%;
  max-width: calc(var(--content-w) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ===== GNB ===== */
.gnb {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--gnb-h);
  background-color: var(--color-gray-400);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.gnb .inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-20);
}
.gnb__logo {
  display: flex;
  align-items: center;
  height: 40px;
}
.gnb__logo img {
  height: 40px;
  width: auto;
}
.gnb__nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4.17vw, 80px);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 120%;
}
.gnb__nav a {
  transition: color 0.2s;
}
/* 호버: 선택(현재 페이지)된 메뉴와 같은 핑크 + 굵기 700 (평소 400) */
.gnb__nav a:hover,
.gnb__nav a:active,
.gnb__nav a:focus-visible {
  color: var(--color-deeppink);
  font-weight: 700;
}

/* ===== 히어로 ===== */
.hero {
  position: relative;
  /* 영상(16:9) 전체가 잘리지 않게: 화면 폭 기준 16:9 고정, 높이 상한 없음 */
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-gray-200);
}
/* 배경 영상/이미지 자리: .hero__media 안에 <video> 또는 <img> 를 넣으면 cover 로 깔림 */
.hero__media,
.hero__media > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-gray-500);
}
.hero__title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.04vw;
  padding: 0 var(--gutter);
  color: var(--color-gray-300);
  font-family: var(--font-dunkelsans);
  font-weight: 900;
  font-style: normal;
  line-height: 1.2;
  text-align: center;
}
.hero__year {
  font-size: 6.67vw;
}
.hero__name {
  font-size: 3.33vw;
}

/* ===== 공통 섹션 헤드 / 버튼 ===== */
.sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-16);
  text-align: center;
}
.sec-title {
  font-size: var(--fs-40);
  font-weight: 700; /* 타이틀 Bold */
  letter-spacing: -0.03em;
  line-height: 150%;
}
.sec-desc {
  font-size: var(--fs-32);
  font-weight: 400; /* 서브타이틀 Regular */
  letter-spacing: -0.03em;
  line-height: 150%;
}
.btn-more {
  display: inline-flex;
  align-items: center;
  gap: 2px; /* 글자 끝 → 꺾쇠 22.9px (시안), 아이콘 칸 안쪽 여백 포함 */
  padding: var(--padding-8) var(--padding-20);
  border-radius: var(--br-100);
  background-color: var(--color-white);
  color: var(--color-black);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 32px;
  transition: background-color 0.2s, color 0.2s;
}
.btn-more:hover {
  background-color: var(--color-deeppink);
  color: var(--color-white);
}
.btn-more svg {
  width: 32px;
  height: 32px;
}

/* ===== IMPACT ===== */
.impact {
  position: relative;
  isolation: isolate;
  /* 모니터 크기와 관계없이 화면 한 장을 꽉 채움 */
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-48);
  padding: var(--section-py) var(--gutter);
  color: var(--color-white);
  background-color: var(--color-gray-200);
}
.impact__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
/* 1920×1080 기준 1689×2494 콜라주를 중앙 정렬 → 높이 231% · 폭 최소 88% */
.impact__bg img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 231%;
  width: auto;
  min-width: 88%;
  max-width: none;
  object-fit: cover;
  transform: translate(-50%, -50%);
}
/* JS 패럴랙스 활성 시: 상단 기준으로 붙이고 home.js 가 translateY 를 갱신 */
.impact.is-parallax .impact__bg img {
  top: 0;
  transform: translate3d(-50%, 0, 0);
  will-change: transform;
}
.impact__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
}
.impact .sec-desc {
  white-space: pre-wrap;
}

/* ===== GALLERY ===== */
.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-80);
  padding: var(--section-py) 0;
  color: var(--color-white);
}
.gallery__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-48);
}
/* 유튜브 하이라이트 영상: 아래 사진 3열 그리드와 같은 폭, 16:9 (누르기 전에는 썸네일만) */
.gallery__video {
  position: relative;
}
.gallery__video-play,
.gallery__video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 16px;
  background: #000;
}
.gallery__video-play {
  position: relative;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}
.gallery__video-play img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.gallery__video-play svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 48px;
  margin: -24px 0 0 -34px;
}
.gallery__video-play:hover img,
.gallery__video-play:focus-visible img {
  opacity: 1;
}
/* VIEW MORE: 사진 9장 아래 (사진과의 간격 48px) */
.gallery__more {
  margin-top: calc(var(--gap-48) - var(--gap-80));
}
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-20);
}
.gallery__item a {
  display: block;
  width: 100%;
  height: 100%;
}
.gallery__item {
  aspect-ratio: 392 / 500;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(160deg, #1d1d1d, #111);
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.gallery__item:hover img {
  transform: scale(1.04);
}

/* ===== FOOTER ===== */
.footer {
  /* 구분선 위: 갤러리 하단 160 + 푸터 상단 160 = 320 (시안) */
  padding: var(--section-py) 0;
  font-family: var(--font-montserrat);
  font-size: var(--fs-14);
}
.footer__line {
  height: 0;
  margin: 0 0 60px;
  border: 0;
  border-top: 1px solid var(--color-gray-300);
}
.footer .inner {
  display: flex;
  align-items: flex-start;
  gap: 65px;
}
.footer__logo {
  flex-shrink: 0;
  width: 224px;
  height: auto;
  color: var(--color-gray-100);
}
.footer__body {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-20);
}
.footer__info {
  display: grid;
  grid-template-columns: 110px auto;
  row-gap: var(--gap-20);
  line-height: 120%;
}
.footer__info dt {
  font-weight: 600;
}
.footer__info a:hover {
  text-decoration: underline;
}
.footer__side {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gap-20);
  font-family: var(--font-pretendard);
}
.footer__nav {
  display: flex;
  gap: 40px; /* 글자 폭이 달라도 메뉴 사이 간격이 같게 (고정 폭 대신 자동 폭) */
  font-size: var(--fs-18);
  font-weight: 700;
  line-height: 120%;
}
.footer__nav a {
  width: auto;
  transition: opacity 0.2s;
}
.footer__nav a:hover,
.footer__legal a:hover {
  opacity: 0.6;
}
.footer__legal {
  display: flex;
  align-items: center;
  gap: var(--gap-16);
  font-size: var(--fs-14);
  line-height: 1.2;
}
.footer__legal li + li::before {
  content: "ㅣ";
  margin-right: var(--gap-16);
}

/* ===== 반응형 ===== */
@media (max-width: 1024px) {
  .footer .inner {
    flex-direction: column;
    gap: var(--gap-48);
  }
  .footer__body {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .gnb__logo img {
    height: 32px;
  }
  .gnb__nav {
    font-size: var(--fs-14);
  }
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .footer__logo {
    width: 160px;
  }
  .footer__body {
    flex-direction: column;
    gap: var(--gap-48);
  }
  .footer__nav {
    flex-wrap: wrap;
    font-size: var(--fs-16);
  }
  .footer__nav a {
    width: auto;
  }
  .footer__legal {
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
  }
  .footer__legal li + li::before {
    margin-right: 8px;
  }
}

/* CONTACT 옆 화살표 아이콘 (글자색을 따라감) */
.has-ico {
  display: inline-flex;
  align-items: center;
}
.ico-arrow {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transform: translateY(0.5px); /* 글자 대문자 중심에 맞추는 광학 보정 */
}
@media (max-width: 768px) {
  .gnb__nav .ico-arrow {
    width: 20px;
    height: 20px;
  }
}

/* 푸터(글자 18px): 아이콘도 같은 비율(글자의 1.5배 = 27px), 위치 보정 없음 */
.footer__nav .ico-arrow {
  width: 27px;
  height: 27px;
  /* 줄 높이(18px × 120% = 21.6px)에 영향이 없게 위아래 균등하게 뺌 → 다른 메뉴와 글자 높이 동일 */
  margin: calc((21.6px - 27px) / 2) 0;
  transform: translateY(0);
}

/* 둔켈산스 로딩 중에는 제목을 숨겼다가(기본 글꼴 → 둔켈산스로 바뀌며 크기가 튀는 현상 방지) 로딩되면 부드럽게 표시.
   Adobe 로더가 <html> 에 wf-loading → wf-active(또는 3초 넘으면 wf-inactive) 클래스를 붙임 */
.hero__title {
  transition: opacity 0.25s ease;
}
.wf-loading .hero__title {
  opacity: 0;
}