/* 프리텐다드 폰트 적용 */
html {
    overflow-y: scroll; /* 항상 스크롤바를 표시하여 화면 너비 변화 방지 */
}
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;
}

/* --- New Header Styles --- */
/* 헤더 각 아이템의 기본 스타일 및 트랜지션 */
.header-item {
    background-color: transparent;
    backdrop-filter: blur(0px);
    border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
}

/* 스크롤 시 헤더 아이템에 적용될 Glassmorphism 스타일 */
.header-scrolled .header-item {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(229, 231, 235, 0.5); /* Tailwind gray-200 with opacity */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 헤더 텍스트 아이템의 기본 스타일 (로고와 로그아웃용) */
.header-text-item {
    background-color: transparent;
    backdrop-filter: blur(0px);
    border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
}

/* 스크롤 시 헤더 텍스트 아이템에 적용될 Glassmorphism 스타일 */
.header-scrolled .header-text-item {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(229, 231, 235, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 스크롤 시 메인 헤더 컨테이너는 투명하게 유지 */
.header-scrolled {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* 모바일 메뉴 애니메이션 */
.mobile-menu {
    transition: transform 0.3s ease-in-out;
}

/* 인플루언서 카드 Glassmorphism 스타일 (밝은 테마) */
.influencer-card {
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.3s ease-in-out;
    position: relative;
}
.influencer-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
/* Popup menu for influencer links */
.influencer-links-menu {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: white;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    border-radius: 0.5rem;
    z-index: 40;
    min-width: 160px;
    padding: 0.25rem;
}
.influencer-links-menu a {
    display: block;
    padding: 0.5rem 0.75rem;
    color: #111827;
    text-decoration: none;
    font-size: 0.9rem;
    border-radius: 0.375rem;
}
.influencer-links-menu a:hover {
    background: rgba(17,24,39,0.04);
}

/* 이메일 입력 오류 시 흔들리는 애니메이션 */
@keyframes shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
.shake {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}

/* 로고 정렬 */
.logo {
    margin-left: -1.5rem;
}
@media (min-width: 640px) {
    .logo {
        margin-left: -1.5rem;
    }
}
@media (min-width: 1024px) {
    .logo {
        margin-left: -1.5rem;
    }
}

/* 체크아웃 정렬 */
.auth-cart {
    margin-right: -1.5rem;
}
/* Prevent mobile zoom when focusing inputs in modal by using >=16px font-size */
#content-view-modal input, #content-view-modal textarea {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}
@media (min-width: 640px) {
    .auth-cart {
        margin-right: -1.5rem;
    }
}
@media (min-width: 1024px) {
    .auth-cart {
        margin-right: -1.5rem;
    }
}