/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Pretendard Font Face Definitions - 자체 호스팅 */
@font-face {
  font-family: 'Pretendard';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Pretendard-Regular.woff2") format('woff2');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Pretendard-Medium.woff2") format('woff2');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Pretendard-SemiBold.woff2") format('woff2');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Pretendard-Bold.woff2") format('woff2');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Pretendard-ExtraBold.woff2") format('woff2');
}

/* Box sizing reset */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Select element reset */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
  outline: none;
}

/* Ensure proper rendering of HTML5 elements */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}

/* Reset margins and paddings */
html, body {
  margin: 0;
  padding: 0;
}

/* Links */
a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  text-decoration: none;
}

/* 애니메이션 정의 */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-out-right {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* 애니메이션 클래스 */
.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

.animate-slide-in-right {
  animation: slide-in-right 0.3s ease-out;
}

.animate-slide-out-right {
  animation: slide-out-right 0.3s ease-out;
}

/* 라인 클램프 유틸리티 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 글래스모피즘 효과를 위한 backdrop-filter 지원 */
@supports (backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0)) {
  .backdrop-blur-sm {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  
  .backdrop-blur {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  
  .backdrop-blur-md {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  
  .backdrop-blur-lg {
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
  }
}

/* 그라데이션 텍스트 */
.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

/* 추가 유틸리티 */
.mix-blend-overlay {
  mix-blend-mode: overlay;
}

/* 그림자 효과 */
.shadow-[0_20px_50px_rgba(8,_112,_184,_0.2)] {
  box-shadow: 0 20px 50px rgba(8, 112, 184, 0.2);
}

.shadow-[0_20px_50px_rgba(8,_112,_184,_0.3)] {
  box-shadow: 0 20px 50px rgba(8, 112, 184, 0.3);
}

.shadow-[0_10px_40px_rgba(0,_0,_0,_0.1)] {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* 스크린 리더 전용 텍스트 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Pretendard 폰트 전역 적용 */
body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}

/* Select 요소 스타일 개선 */
select.custom-select {
  /* Reset overrides */
  display: block;
  width: 100%;
  
  /* Remove all appearances */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  /* Background and arrow */
  background-color: white;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  
  /* Padding and spacing */
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  
  /* Typography */
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #111827;
  
  /* Borders - explicit */
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  
  /* Interactions */
  outline: none;
  cursor: pointer;
  
  /* Transitions */
  transition-property: border-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

select.custom-select:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%233b82f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  outline: none;
}

/* Select 옵션 스타일링 - 크로스 브라우저 대응 */
select.custom-select option {
  background-color: white;
  color: #111827;
  padding: 0.5rem 1rem;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
}

select.custom-select option:hover,
select.custom-select option:focus,
select.custom-select option:checked {
  background-color: #3b82f6;
  color: white;
}

/* Firefox 전용 스타일 */
@-moz-document url-prefix() {
  select.custom-select {
    text-indent: 0.01px;
    text-overflow: '';
  }
  
  select.custom-select option {
    background-color: white;
    color: #111827;
  }
  
  select.custom-select option:hover,
  select.custom-select option:checked {
    background-color: #3b82f6 !important;
    color: white !important;
  }
}

/* 드롭다운 열렸을 때 스타일 보정 */
select.custom-select:focus,
select.custom-select:active {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Chrome/Edge 드롭다운 옵션 스타일 */
select.custom-select::-ms-expand {
  display: none;
}

/* Safari 전용 스타일 */
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {
    select.custom-select {
      -webkit-appearance: none;
      background-position: right 0.7rem center;
    }
  }
}

/* 버튼 텍스트 흰색 강제 적용 */
.text-white {
  color: white !important;
}