@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles */

/* Navbar underline hover animation */
.nav-link {
  position: relative;
  display: inline-block;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background-color: #111827; /* tailwind gray-900/black tone */
  transition: width 200ms ease;
}

.nav-link:hover::after,
.nav-link:focus::after {
  width: 100%;
}

.nav-link.active::after {
  width: 100%;
}

/* Edge & IE 전용 호환 코드 */
@supports not (gap: 1rem) {
  /* gap을 지원하지 않는 브라우저용 */
  .flex.flex-col.md\:flex-row.justify-center.gap-4.md\:gap-8 {
    gap: 0 !important;
  }
  
  .flex.flex-col.md\:flex-row.justify-center.gap-4.md\:gap-8 > * {
    margin-bottom: 1rem;
  }
  
  @media (min-width: 768px) {
    .flex.flex-col.md\:flex-row.justify-center.gap-4.md\:gap-8 > * {
      margin-bottom: 0;
      margin-right: 2rem;
    }
    
    .flex.flex-col.md\:flex-row.justify-center.gap-4.md\:gap-8 > *:last-child {
      margin-right: 0;
    }
  }
}

/* Edge & IE 전용 3D 변환 호환성 */
@supports not (transform-style: preserve-3d) {
  .tilt-card {
    transform-style: flat !important;
  }
  
  .tilt-content {
    transform: none !important;
  }
}

/* Edge & IE 전용 transition 호환성 */
@supports not (transition: all 0.3s ease) {
  .transition-all {
    transition: none !important;
  }
  
  .duration-300 {
    transition-duration: 0s !important;
  }
}

/* Edge & IE 전용 border-radius 호환성 */
@supports not (border-radius: 1rem) {
  .rounded-2xl {
    border-radius: 0 !important;
  }
}

/* Edge & IE 전용 box-shadow 호환성 */
@supports not (box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25)) {
  .shadow-2xl {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  }
}

/* Edge & IE 전용 flexbox 호환성 */
@supports not (display: flex) {
  .flex {
    display: block !important;
  }
  
  .flex.flex-col.md\:flex-row.justify-center.gap-4.md\:gap-8 > * {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
  }
  
  @media (min-width: 768px) {
    .flex.flex-col.md\:flex-row.justify-center.gap-4.md\:gap-8 > * {
      display: inline-block;
      width: calc(25% - 1.5rem);
      margin-right: 2rem;
      vertical-align: top;
    }
    
    .flex.flex-col.md\:flex-row.justify-center.gap-4.md\:gap-8 > *:last-child {
      margin-right: 0;
    }
  }
}

/* Edge & IE 전용 hover 효과 호환성 */
@supports not (hover: hover) {
  .hover\:bg-\[#2941ff\]:hover {
    background-color: #2941ff !important;
  }
  
  .hover\:text-\[#ededed\]:hover {
    color: #ededed !important;
  }
  
  .group:hover .group-hover\:text-\[#ededed\] {
    color: #ededed !important;
  }
}

/* Edge & IE 전용 transform 호환성 */
@supports not (transform: scale(1.05)) {
  .group:hover .group-hover\:scale-105 {
    transform: none !important;
  }
}

/* Edge & IE 전용 backdrop-filter 호환성 */
@supports not (backdrop-filter: blur(10px)) {
  .backdrop-blur {
    backdrop-filter: none !important;
  }
}

/* Edge & IE 전용 CSS Grid 호환성 */
@supports not (display: grid) {
  .grid {
    display: block !important;
  }
  
  .grid.grid-cols-2.sm\:grid-cols-2.md\:grid-cols-3.gap-4.md\:gap-8 > * {
    display: inline-block;
    width: calc(50% - 0.5rem);
    margin-bottom: 1rem;
    vertical-align: top;
  }
  
  @media (min-width: 768px) {
    .grid.grid-cols-2.sm\:grid-cols-2.md\:grid-cols-3.gap-4.md\:gap-8 > * {
      width: calc(33.333% - 1rem);
      margin-right: 1rem;
    }
    
    .grid.grid-cols-2.sm\:grid-cols-2.md\:grid-cols-3.gap-4.md\:gap-8 > *:nth-child(3n) {
      margin-right: 0;
    }
  }
}

/* Edge & IE 전용 aspect-ratio 호환성 */
@supports not (aspect-ratio: 3/4) {
  .aspect-\[3\/4\] {
    position: relative !important;
    padding-bottom: 133.33% !important;
  }
  
  .aspect-\[3\/4\] > * {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
}