/* ============================================================
   interactions.css  —  OAtech 인터랙션 전용 스타일
   ============================================================ */

/* ── 1. Scroll fade-in-up ─────────────────────────────────── */
.oa-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  will-change: opacity, transform;
}
.oa-animate.oa-visible {
  opacity: 1;
  transform: none;
}
.oa-animate[data-delay="1"] { transition-delay: 0.08s; }
.oa-animate[data-delay="2"] { transition-delay: 0.16s; }
.oa-animate[data-delay="3"] { transition-delay: 0.24s; }
.oa-animate[data-delay="4"] { transition-delay: 0.32s; }

@media (max-width: 768px) {
  .oa-animate { transform: translateY(12px); }
}
@media (prefers-reduced-motion: reduce) {
  .oa-animate { opacity: 1; transform: none; transition: none; }
}

/* ── 2. 네비 스크롤 효과 ──────────────────────────────────── */
.top_menu_header {
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  transition: background-color 0.3s ease;
}
.top_menu_header.header_scroll_on {
  background-color: #fff !important;
}

/* ── 3. 모바일 햄버거 네비게이션 ─────────────────────────── */
@media (max-width: 991px) {
  .oa-nav-button { display: block !important; }

  .top_menu_header .oa-nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    padding: 0;
    box-shadow: none;
  }
  .top_menu_header.nav-open .oa-nav-menu {
    display: block;
  }

  .top_menu_header .brix---header-menu-wrapper {
    margin-top: 12px;
    width: 100%;
  }
}

/* ── 4. 드롭다운 ─────────────────────────────────────────── */
/* .oa-dropdown-list: oatech.css에 display:none / .oa--open → display:block 이미 있음 */
/* 애니메이션만 추가 */
.oa-dropdown-list {
  transition: opacity 0.15s ease, transform 0.15s ease;
  transform: translateY(-6px);
  opacity: 0;
  pointer-events: none;
}
.oa-dropdown-list.oa--open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.top_menu_header .oa-dropdown-list {
  transition: none;
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

/* ── 5. 탭 (w-tabs) ──────────────────────────────────────── */
.oa-tab-link {
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
/* oatech.css에 .oa-tab-pane{display:none} / .oa--tab-active{display:block} 이미 있음 */

/* ── 6. FAQ 아코디언 ──────────────────────────────────────── */
.uui-faq02_answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.uui-faq02_accordion.is-open .uui-faq02_answer {
  max-height: 800px;
}
.uui-faq02_question {
  cursor: pointer;
  user-select: none;
  transition: opacity 0.15s;
}
.uui-faq02_question:hover { opacity: 0.75; }

/* + 아이콘 → − */
.accordion-icon_vertical-line {
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.uui-faq02_accordion.is-open .accordion-icon_vertical-line {
  transform: rotate(90deg);
  opacity: 0;
}

/* ── 7. Toggle 카드 (ON/OFF) ─────────────────────────────── */
/* is-on 상태 선택자는 JS가 .brix---card 에 추가 → 섹션 16 참조 */
[class*="toggle-switch-"] { cursor: pointer; }

/* 기본 위치 고정(position:absolute 기반 레이아웃 안정) */
[class*="toggle-button-"] { left: 0; }

/* ON 이미지/OFF 이미지 기본 숨김 */
[class*="square-icon-"][class$="-on"] { display: none; }

/* OFF/ON 텍스트 기본 색상 */
[class*="text-toggle-"].off { color: #fff; }
[class*="text-toggle-"].on  { color: inherit; }

/* ── 8. CMS Award 카드 ───────────────────────────────────── */
.rt-about-two-award-card { cursor: pointer; }


/* ── 9. 무한 로고 스크롤 ─────────────────────────────────── */
@keyframes oa-loop-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes oa-loop-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.loop_left_01,
.loop_right01,
.int_loop_left_01 { overflow: hidden; }

/* 애니메이션은 JS가 생성한 .logo-track 단일 래퍼에만 적용 */
.logo-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.loop_left_01 .logo-track,
.int_loop_left_01 .logo-track {
  animation: oa-loop-left 18s linear infinite;
}
.loop_right01 .logo-track {
  animation: oa-loop-right 22s linear infinite;
}
.loop_left_01:hover .logo-track,
.loop_right01:hover .logo-track,
.int_loop_left_01:hover .logo-track { animation-play-state: paused; }

/* 개별 inner 요소는 flex 레이아웃만 유지, 애니메이션 없음 */
.loop_left_01 .logo_left,
.loop_right01 .logo_right,
.int_loop_left_01 .int_logo_left { display: flex; }

@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none !important; }
}

/* ── 10. Testimonial 슬라이더 (w-slider) ─────────────────── */
.oa-slider { position: relative; overflow: hidden; }
.oa-slider-mask {
  display: flex;
  overflow-x: scroll !important; /* scrollLeft로 슬라이드 이동 */
  overflow-y: hidden !important;
  scroll-behavior: smooth;
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none;      /* IE/Edge */
}
.oa-slider-mask::-webkit-scrollbar { display: none; } /* Chrome/Safari */
/* brix 템플릿이 마스크에 max-width:390px를 적용 — 슬라이더 내에서 무력화 */
.oa-slider .brix---slider-mask-width-390px {
  max-width: 100% !important;
  width: 100% !important;
}
.oa-slide {
  flex: 0 0 auto;
  /* 너비는 JS에서 설정 */
}
.oa-slider-arrow-left,
.oa-slider-arrow-right {
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s;
}
.oa-slider-arrow-left:hover,
.oa-slider-arrow-right:hover { opacity: 0.7; }

.oa-slider-nav { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.oa-slider-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.oa-slider-dot.oa--current {
  background: var(--main_green01, #2e7d32);
  transform: scale(1.25);
}

/* ── 10. 숫자 카운트업 ───────────────────────────────────── */
/* big_txt는 tabular-nums으로 숫자 너비 고정 → 레이아웃 흔들림 방지 */
.big_txt { font-variant-numeric: tabular-nums; }

/* ── 11. 타임라인 진행선 ─────────────────────────────────── */
/* setting_line은 oatech.css에서 height:100% / background:green 으로 정의됨
   JS가 .timeline-fill 클래스를 붙이면 scaleY(0) 으로 숨겨지고
   뷰포트 진입 시 .timeline-fill--visible 로 전환됨 */
.timeline-fill {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.timeline-fill.timeline-fill--visible {
  transform: scaleY(1);
}
@media (prefers-reduced-motion: reduce) {
  .timeline-fill { transform: none; transition: none; }
}

/* ── 12. 카드 / 버튼 hover ───────────────────────────────── */
.brix---card,
.solutioncard3,
.key_card,
.flexcard,
.prwcard01,
.prwcard02,
.rt-about-two-award-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.brix---card:hover,
.solutioncard3:hover,
.key_card:hover,
.flexcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.09);
}

.brix---btn-primary,
.brix---btn-primary-small,
.button,
.uui-button-6,
.uui-button-7 {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.brix---btn-primary:hover,
.brix---btn-primary-small:hover,
.button:hover,
.uui-button-6:hover,
.uui-button-7:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}

.brix---card-link-icon-wrapper {
  transition: transform 0.2s ease;
}
.brix---card-link-icon-wrapper:hover { transform: translateY(-3px); }

/* 네비 링크: color transition만 사용, underline 없음 */
.brix---header-nav-link {
  position: relative;
  transition: color 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .brix---card, .solutioncard3, .key_card,
  .flexcard, .prwcard01, .prwcard02,
  .rt-about-two-award-card,
  .brix---btn-primary, .brix---btn-primary-small,
  .button, .uui-button-6, .uui-button-7,
  .brix---card-link-icon-wrapper,
  .brix---header-nav-link { transition: none; }
}

/* ── 13. company/intro_sec01 텍스트 overflow 수정 ────────────
   oatech.css의 .intro_sec01_txt_wrap { margin-right: -58% }가
   컨테이너 밖으로 넘침 → 섹션에 overflow:hidden 적용 */
.intro_sec01 { overflow: hidden; }

/* ── 14. 후기 카드 height 제약 전면 해제 ──────────────────────
   oatech.css 모바일 미디어쿼리가 max-height/min-height를 300px로 재정의 →
   interactions.css가 뒤에 로드되지 않으면 오버라이드 불가
   !important로 모든 뷰포트에서 JS 높이 계산이 정확히 동작하게 함 */
.brix---card-testimonial-v13 {
  max-height: none !important;
  min-height: 0 !important;   /* JS scrollHeight 측정 정확도 확보 */
}
.main_section08 .oa-slider { height: auto; }
.main_section08 .oa-slider-mask { overflow-y: hidden; }

/* ── 15. 메인 고객 후기 슬라이더 viewport 재정렬 ─────────────────
   데스크톱: 3장 중심 + 좌우 카드 peek 구조.
   Webflow 기본 390px mask를 해제하고 섹션 전용 slide 폭을 재계산. */
.main_section08 {
  --review-gap: clamp(18px, 1.8vw, 28px);
  --review-peek: clamp(54px, 4.4vw, 96px);
  --review-arrow-offset: clamp(8px, 1.2vw, 18px);
}

/* 태블릿 이상 공통 레이아웃 */
@media screen and (min-width: 768px) {
  .main_section08 .brix---slider-wrapper {
    position: relative;
    overflow: visible;
  }

  .main_section08 .brix---slider-mask-width-390px,
  .main_section08 .oa-slider-mask {
    width: 100%;
    max-width: none;
    height: auto;
    overflow: hidden;
  }

  .main_section08 .brix---slide-item-mg {
    margin-right: var(--review-gap);
  }

  .main_section08 .brix---card-testimonial-v13 {
    width: 100%;
  }

  .main_section08 .brix---btn-slider-arrow-left---testimonial-v12,
  .main_section08 .brix---btn-slider-arrow-right---testimonial-v12 {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  .main_section08 .brix---btn-slider-arrow-left---testimonial-v12 {
    left: var(--review-arrow-offset);
  }

  .main_section08 .brix---btn-slider-arrow-right---testimonial-v12 {
    right: var(--review-arrow-offset);
  }

  .main_section08 .brix---btn-slider-arrow-left---testimonial-v12:hover,
  .main_section08 .brix---btn-slider-arrow-right---testimonial-v12:hover {
    transform: translateY(-50%) scale(.95);
  }
}

/* 태블릿 (768–991px): 변수 및 컨테이너 재정의 */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .main_section08 {
    --review-gap: 20px;
    --review-peek: 44px;
    --review-arrow-offset: 6px;
  }

  .main_section08 .container-4 {
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* 데스크톱 (992px+): 컨테이너 최대 폭 */
@media screen and (min-width: 992px) {
  .main_section08 .container-4 {
    max-width: 1280px;
  }
}

/* ── 16. 부가서비스 토글 상태 복원 ───────────────────────────
   JS는 .brix---card 에 .is-on 을 추가한다 (interactions.js 참조).
   cursor:pointer / -on 기본 숨김은 섹션 7 전역 규칙으로 커버됨. */
.card-with-toggle .brix---card {
  position: relative;
}

.card-with-toggle [class^="toggle-button-"] {
  transition: transform 0.22s ease;
}

.card-with-toggle [class^="text-toggle-"].off,
.card-with-toggle [class^="text-toggle-"].on {
  color: #6b7280;
  transition: color 0.22s ease;
}

.card-with-toggle .brix---card:not(.is-on) [class^="text-toggle-"].off,
.card-with-toggle .brix---card.is-on [class^="text-toggle-"].on {
  color: #fff;
}

.card-with-toggle .brix---card.is-on [class^="toggle-button-"] {
  transform: translateX(100%);
}

.card-with-toggle .brix---card.is-on img[class^="square-icon-"]:not([class$="-on"]) {
  display: none;
}

.card-with-toggle .brix---card.is-on img[class^="square-icon-"][class$="-on"] {
  display: block;
}