/* Tailwind CSS Base Styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Component Classes */
@layer components {
  /* Section Title with underline */
  .section-title {
    @apply mb-8 relative pb-2;
  }
  .section-title:after {
    content: "";
    @apply absolute bottom-0 left-0 w-12 h-1 bg-primary;
  }

  /* Card Component */
  .card-component {
    @apply rounded-xl overflow-hidden shadow-lg transition-all duration-300 bg-white;
  }
  .card-component:hover {
    @apply -translate-y-1 shadow-2xl;
  }

  /* Button variants */
  .btn-gradient {
    @apply bg-gradient-to-r from-primary to-secondary text-white px-6 py-3 rounded-lg font-semibold transition-all duration-300 hover:shadow-lg;
  }

  /* Form styles */
  .form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200;
  }

  .form-checkbox {
    @apply w-4 h-4 text-primary bg-gray-100 border-gray-300 rounded focus:ring-primary focus:ring-2;
  }

  /* Header gradient */
  .header-gradient {
    @apply text-center mb-10 p-8 bg-gradient-to-br from-blue-500 to-purple-600 text-white rounded-2xl shadow-xl;
  }

  /* Loading overlay */
  .loading-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
  }

  .loading-spinner {
    @apply w-12 h-12 border-4 border-gray-300 border-t-primary rounded-full animate-spin;
  }

  /* Navigation and Dropdown Enhancement */
  /* 네비게이션 헤더 */
  .nav-header {
    position: relative;
    z-index: 1000;
  }

  /* 사용자 메뉴 드롭다운 */
  .user-dropdown {
    position: absolute;
    z-index: 1050 !important;
    pointer-events: auto;
    transform: translateY(0);
    transition: all 0.2s ease-in-out;
  }

  .user-dropdown.hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .user-dropdown:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* 모바일 메뉴 */
  .mobile-menu {
    position: relative;
    z-index: 1040 !important;
    pointer-events: auto;
  }

  .mobile-menu.hidden {
    display: none;
  }

  /* 드롭다운 메뉴 아이템 */
  .user-dropdown a,
  .mobile-menu a {
    position: relative;
    z-index: inherit;
    pointer-events: auto;
    display: block;
  }

  /* 버튼 클릭 영역 확보 */
  .user-menu-button {
    position: relative;
    z-index: 1051;
    pointer-events: auto;
  }
}

/* Skin-specific styles that require custom CSS */
@layer utilities {
  /* Responsive skin container */
  .skin-responsive-container {
    container-type: inline-size;
    max-width: 100%;
  }

  .skin-vertical-image {
    position: relative;
    width: 100%;
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: top center;
    min-height: 100px;
    height: auto;
    overflow: visible;
    --responsive-padding: 0px;
  }

  .skin-responsive-text {
    @apply flex items-center justify-center;
  }

  .skin-text {
    position: relative;
    z-index: 2;
    word-wrap: break-word;
    line-height: 1.3;
    box-sizing: border-box;
  }

  /* Container queries for skin responsiveness */
  @container (max-width: 400px) {
    .skin-vertical-image {
      min-height: 80px;
    }
  }

  /* Media queries for skin responsiveness */
  @media (max-width: 480px) {
    .skin-vertical-image {
      min-height: 80px;
      height: auto !important;
      aspect-ratio: auto;
      overflow: visible;
    }

    .skin-text {
      line-height: 1.2;
      overflow-wrap: break-word;
      hyphens: auto;
      overflow: visible;
    }

    .skin-vertical-image.text-overflow {
      aspect-ratio: auto;
      min-height: 100px;
      overflow: visible;
    }
  }

  @media (min-width: 481px) and (max-width: 768px) {
    .skin-vertical-image {
      min-height: 100px;
      overflow: visible;
    }

    .skin-text {
      line-height: 1.3;
      overflow-wrap: break-word;
      hyphens: auto;
      overflow: visible;
    }

    .skin-vertical-image.text-overflow {
      aspect-ratio: auto;
      min-height: 120px;
      overflow: visible;
    }
  }

  @media (min-width: 769px) {
    .skin-vertical-image {
      min-height: 120px;
      overflow: visible;
    }

    .skin-text {
      line-height: 1.4;
      overflow-wrap: break-word;
      overflow: visible;
    }

    .skin-vertical-image.text-overflow {
      min-height: 150px;
      overflow: visible;
    }
  }

  /* Gradient line */
  .gradient-line {
    @apply h-0.5 bg-gradient-to-r from-primary to-secondary rounded-full my-5 shadow-sm;
  }

  /* Text overflow handling */
  .skin-vertical-image.text-overflow .skin-text {
    padding-top: calc(var(--responsive-padding) * 0.8);
    padding-bottom: calc(var(--responsive-padding) * 0.8);
    height: auto;
    min-height: auto;
    overflow: visible;
    white-space: normal;
  }

  .skin-vertical-image:not(.text-overflow) {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Additional skin utilities */
  .skin-static-image {
    @apply max-w-full h-auto block mx-auto;
  }

  .skin {
    @apply mt-8 p-5 rounded-lg bg-no-repeat bg-cover bg-center;
  }
}

/* Field styles that can be used with Tailwind */
.field {
  @apply transition-all duration-200;
}

.field:hover {
  @apply -translate-y-0.5 shadow-lg;
}

.field-label {
  @apply font-semibold mb-2 text-gray-700 text-lg;
}

.field-value {
  @apply p-3 bg-gray-50 rounded border border-gray-200;
}

/* Post styles */
.post {
  @apply border border-gray-200 p-4 rounded;
}

.post-title {
  @apply text-xl font-bold mb-3 text-gray-800;
}

/* Navigation */
.navigation {
  @apply flex justify-center space-x-2 mt-6;
}

/* 높은 우선순위로 z-index 강제 적용 */
.nav-priority {
  z-index: 9999 !important;
  position: relative;
}

.dropdown-priority {
  z-index: 9998 !important;
  position: absolute;
}