/* ============================================================
   IBN GLOBAL — 공용 테마: 반응형 + 호버 인터랙션
   클래스는 enhance.js가 렌더된 DOM에 부여한다.
   inline style을 이기기 위해 !important 사용.
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }

/* ---------- 호버 인터랙션 (마우스 환경에서만) ---------- */
@media (hover: hover) and (pointer: fine) {

  .hv-btn {
    transition:
      transform .35s cubic-bezier(.2, .7, .2, 1),
      box-shadow .35s ease,
      border-color .35s ease,
      filter .3s ease,
      color .25s ease;
  }
  /* data-magnetic 요소는 자체 마그네틱 효과가 transform을 다루므로 제외 */
  .hv-btn:not([data-magnetic]):hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.1);
  }
  .hv-btn[data-magnetic]:hover {
    filter: brightness(1.1);
  }

  /* reveal 스크립트가 인라인 transition을 설정하므로 !important로 통합
     (opacity는 등장 애니메이션용으로 유지) */
  .hv-card {
    transition:
      opacity .7s ease,
      transform .4s cubic-bezier(.2, .7, .2, 1),
      border-color .35s ease,
      box-shadow .35s ease !important;
  }
  .hv-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(42, 240, 234, .4) !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .5) !important;
  }

  .hv-photo img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
  .hv-photo:hover img { transform: scale(1.045); }

  /* 협력 브랜드 로고 타일 */
  .hv-tile {
    transition:
      transform .3s cubic-bezier(.2, .7, .2, 1),
      box-shadow .3s ease;
  }
  .hv-tile:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 10px 28px rgba(42, 240, 234, .18);
  }

  a { transition: color .25s ease, border-color .3s ease, background-color .3s ease; }
}

/* 키보드 포커스 표시 */
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
#f-submit:focus-visible {
  outline: 2px solid #2af0ea;
  outline-offset: 3px;
}

/* ---------- 반응형: 태블릿 이하 — 2단 레이아웃을 1단으로 ---------- */
@media (max-width: 900px) {
  .rs-split { grid-template-columns: 1fr !important; }
}

/* ---------- 반응형: 모바일 ---------- */
@media (max-width: 768px) {
  /* 상단 고정 내비게이션 */
  .rs-nav { padding: 0 14px !important; height: 60px !important; }
  .rs-nav img { height: 30px !important; }
  .rs-nav-menu { gap: 12px !important; font-size: 11.5px !important; letter-spacing: .04em !important; }
  .rs-nav-menu .hv-btn { padding: 8px 13px !important; }

  /* 섹션 좌우 여백 축소 */
  .rs-pad { padding-left: 20px !important; padding-right: 20px !important; }
  /* 고정 내비 아래 첫 섹션의 과한 상단 여백 축소 */
  .rs-tall { padding-top: 104px !important; }

  /* 통계 3열 → 2열 */
  .rs-cols-3 { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }

  /* 고정폭 문구 줄바꿈 허용 */
  .rs-wrap { white-space: normal !important; }

  /* 히어로 뱃지(긴 영문) 축소 */
  .rs-badge { font-size: 11px !important; padding: 8px 14px !important; }

  /* 큼직한 CTA 버튼 축소 */
  a[data-magnetic] { padding: 16px 30px !important; font-size: 15px !important; }

  /* 문의 폼 카드 내부 여백 축소 */
  #contact-card { padding: 28px 20px !important; }
}

/* ---------- 반응형: 좁은 모바일 — 폼 2열 → 1열 ---------- */
@media (max-width: 560px) {
  .rs-cols-form { grid-template-columns: 1fr !important; }
}

/* ---------- 협력 브랜드 마퀴 (Reference 페이지) ---------- */
@keyframes brandMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* 마우스를 올리면 흐름 일시정지 */
.brand-track:hover { animation-play-state: paused !important; }

/* ---------- 메인 페이지: 섹션 구분선 + 스크롤 등장 효과 ---------- */
.fx-section { position: relative; }

/* 섹션 상단의 은은한 그라데이션 구분선 */
.fx-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1280px, calc(100% - 48px));
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(42, 240, 234, .35) 30%,
    rgba(254, 44, 85, .3) 70%,
    transparent 100%);
  pointer-events: none;
}

/* 스크롤로 화면에 들어올 때 부드럽게 떠오르며 등장 */
.fx-prep {
  opacity: 0;
  transform: translateY(36px);
}
.fx-section {
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
.fx-section.fx-in {
  opacity: 1;
  transform: none;
}

/* ---------- 모션 최소화 설정 존중 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}