@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

.aeo-page-wrapper {
  font-family: 'Noto Sans KR', 'Montserrat', sans-serif;
}

/* 커스텀 AOS 효과 재현용 스타일 */
.aos-target {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.aos-target.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* 럭셔리 모노톤 아코디언 트랜지션 (CSS Grid 우회 트릭으로 완벽히 부드러운 높이 애니메이션 실현) */
.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-content.active {
  grid-template-rows: 1fr;
}

.accordion-inner {
  overflow: hidden;
}

.faq-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  opacity: 0;
}

/* ai-bot.php style Accordion transition and dimming classes */
.accordion-grid {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-item.active .accordion-grid {
  grid-template-rows: 1fr;
}

.accordion-trigger {
  transition: all 0.3s ease;
}
.accordion-trigger:focus,
.accordion-trigger:active,
.accordion-trigger:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.accordion-trigger svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-item.active .accordion-trigger svg,
.accordion-item.active .accordion-trigger iconify-icon {
  transform: rotate(180deg);
}

.accordion-item {
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease;
}

.accordion-item.inactive-fade {
  opacity: 0.3;
}

/* 기하학적 인터랙티브 도형 마우스 효과 */
.shape-container {
  perspective: 1000px;
}

/* SEO 전용: 정밀 격자 및 확장 서클 애니메이션 */
.seo-circle {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.8s;
}
.interactive-shape:hover .seo-circle {
  transform: scale(1.15) rotate(15deg);
  border-color: #0f172a;
}

.seo-grid-line {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.8s;
}
.interactive-shape:hover .seo-grid-line {
  transform: scaleY(1.1) translateX(5px);
}

/* GEO 전용: LLM 시냅스 연결망 및 반응형 레이어 슬라이드 애니메이션 */
.geo-node {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), fill 0.8s;
}
.interactive-shape:hover .geo-node {
  transform: translate(6px, -6px) scale(1.1);
  fill: #0f172a;
}

.geo-path {
  transition: stroke-dashoffset 1.2s ease-in-out, stroke 0.8s;
  stroke-dasharray: 8;
  stroke-dashoffset: 0;
}
.interactive-shape:hover .geo-path {
  stroke-dashoffset: -16;
  stroke: #0f172a;
}

/* AEO 전용: 음성 인터랙티브 이퀄라이저 파동 애니메이션 */
.aeo-wave {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), fill 0.8s;
}
.interactive-shape:hover .aeo-wave-1 {
  transform: scaleY(1.5);
  fill: #0f172a;
}
.interactive-shape:hover .aeo-wave-2 {
  transform: scaleY(1.3);
  fill: #1e293b;
}
.interactive-shape:hover .aeo-wave-3 {
  transform: scaleY(1.6);
  fill: #0f172a;
}

/* AEO 강조 카드 전용 호버 효과 */
.interactive-shape.aeo-highlight:hover .aeo-wave-1 {
  fill: #ffffff;
}
.interactive-shape.aeo-highlight:hover .aeo-wave-2 {
  fill: #cbd5e1;
}
.interactive-shape.aeo-highlight:hover .aeo-wave-3 {
  fill: #ffffff;
}