/* 커스텀 스타일 */
body {
    background-color: #f8f9fa;
}

.glass-effect {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 기본 블루 그라데이션 텍스트 */
.gradient-text {
    background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 로고용 핑크 그라데이션 텍스트 */
.gradient-text-pink {
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-bg {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.hover-lift {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.1);
}

#mobile-menu {
    transition: transform 0.3s ease-in-out;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 반응형 디자인 추가 스타일 */
@media (max-width: 640px) {
    #main-header {
        height: 4rem;
    }
    #main-header > div {
        padding-left: 1rem;
        padding-right: 1.1rem;
    }
    
    /* 모바일에서 헤더 레이아웃 조정 */
    #main-header > div > div {
        gap: 0.75rem;
    }
    
    /* 모바일에서 로고 텍스트 크기 조정 */
    #main-header a[href="/"] > div:last-child > span:first-child {
        font-size: 1.3rem;
    }
    #main-header a[href="/"] > div:last-child > span:last-child {
        font-size: 0.68rem;
        display: block;
    }
    
    /* 모바일에서 로고 아이콘 크기 조정 */
    #main-header a[href="/"] > div:first-child {
        width: 2.4rem;
        height: 2.4rem;
        margin-right: 0.6rem;
    }
    
    /* 모바일에서 텍스트 크기 조정 방지 */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important; /* iOS 줌 방지 */
    }
    
    /* 모바일에서 텍스트 오버플로우 방지 */
    h1, h2, h3, h4, h5, h6 {
        word-break: keep-all;
        overflow-wrap: break-word;
    }
    
    /* 모바일에서 버튼 터치 영역 확보 */
    button, a[role="button"], .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* 모바일에서 카드 패딩 조정 */
    .card, .rounded-2xl {
        padding: 1rem !important;
    }
    
    /* 모바일 메뉴 드로어 정렬 */
    #mobile-menu {
        width: 100%;
        max-width: 20rem;
        right: 0;
        left: auto;
    }
    
    #mobile-menu-overlay {
        left: 0;
        right: 0;
    }
}

/* 텍스트 overflow 처리 */
.truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

/* 모바일에서 테이블/리스트 항목 가독성 개선 */
@media (max-width: 768px) {
    .mobile-stack {
        flex-direction: column;
    }
    
    .mobile-full-width {
        width: 100%;
    }
    
    /* 모바일에서 긴 텍스트 처리 */
    p, span, div {
        word-break: keep-all;
        overflow-wrap: break-word;
    }
    
    /* 모바일에서 그리드 간격 조정 */
    .grid {
        gap: 0.75rem !important;
    }
    
    /* 모바일에서 입력 필드 간격 조정 */
    .space-y-4 > * + * {
        margin-top: 1rem;
    }
    
    .space-y-6 > * + * {
        margin-top: 1.25rem;
    }
}

/* 애니메이션 */
@keyframes bounce-slow {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.animate-bounce-slow {
    animation: bounce-slow 2s infinite;
}

/* 상품 상세 탭 스타일 */
.tab-content {
    min-height: 200px;
}

.tab-content br {
    display: block;
    content: "";
    margin: 0.75em 0;
}

/* 모바일에서 탭 버튼 텍스트 크기 조정 */
@media (max-width: 640px) {
    .tab-content {
        font-size: 14px;
    }
    
    /* 모바일에서 긴 단어 줄바꿈 */
    .word-break-keep-all {
        word-break: keep-all;
        overflow-wrap: break-word;
    }
    
    /* 모바일에서 상품명 텍스트 처리 */
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: keep-all;
    }
    
    /* 모바일에서 상품 카드 버튼 레이아웃 수정 */
    .grid > div {
        min-width: 0;
        width: 100%;
    }
    
    /* 모바일에서 상품 카드 내부 flex 버튼 컨테이너만 적용 */
    .bg-white.rounded-2xl .flex.gap-1\.5,
    .bg-white.rounded-2xl .flex.gap-2 {
        min-width: 0;
    }
    
    .bg-white.rounded-2xl .flex.gap-1\.5 > *,
    .bg-white.rounded-2xl .flex.gap-2 > * {
        min-width: 0;
        flex-shrink: 1;
    }
}