/* ==========================================
   1. 상단 탭 시스템
   ========================================== */
.main-tabs { 
    display: flex; justify-content: center; gap: 30px; 
    background: var(--card-bg); padding: 15px 0; 
    border-bottom: 1px solid var(--border-color); 
    position: sticky; top: 0; z-index: 100; 
}

.tab-item { 
    color: #888; font-weight: bold; cursor: pointer; 
    padding: 5px 15px; border-radius: 20px; transition: 0.3s; 
}

.tab-item.active { 
    color: #ff6b6b; background: rgba(255, 107, 107, 0.1); 
}

.tab-content.hidden { display: none !important; }


/* ==========================================
   2. 스와이프 컨테이너 & 카드 외곽 (틀)
   ========================================== */
.swipe-section-container { 
    display: flex; flex-direction: column; align-items: center; 
    padding: 40px 20px; min-height: 700px; 
}

.swipe-container { 
    position: relative; width: 100%; max-width: 380px; 
    height: 500px; margin: 0 auto; 
}

.card-stack { position: relative; width: 100%; height: 100%; }

.user-card-item { 
    position: absolute; width: 100%; height: 100%; 
    perspective: 1000px; /* 3D 효과 */
    touch-action: none; 
    background: transparent !important; 
    border: none !important;
    box-shadow: none !important;
    /* transition은 JS에서 transform 제어 시 방해되지 않도록 필요한 것만 남김 */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}


/* ==========================================
   3. 3D 뒤집기 코어 (Card Inner)
   ========================================== */
.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    cursor: pointer;
}

/* 클래스 토글 시 뒤집기 실행 */
.user-card-item.flipped .card-inner {
    transform: rotateY(180deg);
}


/* ==========================================
   4. 카드 앞면 & 뒷면 공통 스타일
   ========================================== */
.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* 뒤집혔을 때 뒷면 안보이게 */
    border-radius: 25px;
    overflow: hidden;
    background: white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .card-front, 
[data-theme="dark"] .card-back { background: #1e1e1e; }

/* 앞면 이미지 설정 */
.card-front img { 
    width: 100%; height: 100%; object-fit: cover; pointer-events: none; 
}

/* 카드 정보 하단 그라데이션 */
.card-info { 
    position: absolute; bottom: 0; width: 100%; 
    padding: 30px 20px 20px; 
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); 
    color: white; text-align: left; 
}

/* 뒷면 상세 설정 */
.card-back {
    transform: rotateY(180deg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.card-back p { margin: 8px 0; color: #666; font-size: 0.95rem; }
[data-theme="dark"] .card-back p { color: #ccc; }


/* ==========================================
   5. 버튼 & 액션 스타일
   ========================================== */
/* 하단 버튼 레이아웃 */
/* 하단 버튼 레이아웃 */
.swipe-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* 버튼 사이 간격 */
    margin-top: 35px;
    z-index: 100;
}

.btn-swipe {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    transition: transform 0.2s, background-color 0.2s;
}

/* 🔍 돋보기 버튼 스타일 (가운데) */
.btn-swipe.detail-view {
    width: 55px;  /* 양옆 버튼보다 살짝 작게 해서 밸런스 조정 */
    height: 55px;
    font-size: 22px;
    color: var(--primary-color);
    border: 1px solid rgba(255, 107, 107, 0.2);
}

.btn-swipe.nope { color: #f44336; font-size: 26px; }
.btn-swipe.like { color: #4caf50; font-size: 26px; }

/* 누를 때 쫀득한 효과 */
.btn-swipe:active {
    transform: scale(0.9);
}

/* 스와이프 애니메이션 (JS에서 클래스 추가 시 작동) */
.swipe-left { 
    transform: translate(-150%, -10%) rotate(-20deg) !important; 
    opacity: 0 !important; 
}
.swipe-right { 
    transform: translate(150%, -10%) rotate(20deg) !important; 
    opacity: 0 !important; 
}

.no-more-box { padding-top: 200px; text-align: center; color: #888; }

/* 모바일 헤더 */
.mobile-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 20px; background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    position: sticky; top: 0; z-index: 1000;
}
.menu-btn { background: none; border: none; font-size: 24px; color: var(--text-color); cursor: pointer; }
.logo { font-weight: bold; font-size: 1.2rem; color: var(--primary-color); }

/* 사이드 메뉴 기본 상태 (숨김) */
.side-menu {
    position: fixed; top: 0; left: -280px; /* 왼쪽으로 숨김 */
    width: 280px; height: 100%; background: var(--card-bg);
    z-index: 2001; transition: 0.3s ease-in-out;
    box-shadow: 5px 0 15px rgba(0,0,0,0.3);
    display: flex; flex-direction: column;
}

/* 메뉴 활성화 상태 */
.side-menu.active { left: 0; }

.menu-header {
    padding: 25px; display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--border-color);
}
.close-btn { background: none; border: none; font-size: 30px; color: #888; }

.menu-items { padding: 20px 0; flex-grow: 1; }
.menu-item {
    display: block; padding: 15px 25px; color: var(--text-color);
    text-decoration: none; font-size: 1.1rem; transition: 0.2s;
}
.menu-item:hover, .menu-item.active {
    background: rgba(255, 107, 107, 0.1); color: var(--primary-color);
}

/* 배경 오버레이 */
.menu-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 2000;
    display: none;
}
.menu-overlay.active { display: block; }

/* 사이드 메뉴 하단 영역 */
.menu-footer {
    padding: 20px;
    border-top: 1px solid var(--border-color);
    margin-top: auto; /* 메뉴가 짧아도 무조건 맨 아래로 밀어냄 */
}

/* 로그아웃 버튼 스타일 */
.btn-logout {
    width: 100%;
    padding: 12px;
    background: #f8f9fa; /* 밝은 회색 계열 */
    color: #ff4d4d;    /* 경고/로그아웃 느낌의 레드 */
    border: 1px solid #ddd;
    border-radius: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* 마우스 올렸을 때 (Hover) */
.btn-logout:hover {
    background: #fff0f0;
    border-color: #ffcccc;
}

/* 다크모드 대응 */
[data-theme="dark"] .btn-logout {
    background: #2a2a2a;
    border-color: #444;
    color: #ff6b6b;
}
[data-theme="dark"] .btn-logout:hover {
    background: #332222;
}

/* 카드 이미지 터치 차단 (매우 중요) */
.card-front img {
    pointer-events: none;       /* 마우스/터치 이벤트가 이미지를 통과하게 함 */
    -webkit-user-drag: none;    /* 드래그 방지 */
    user-select: none;          /* 텍스트/이미지 선택 방지 */
    -webkit-touch-callout: none; /* 꾹 눌렀을 때 나오는 메뉴 방지 */
}

/* 카드 뒷면의 글자들도 터치 방해 안 되게 설정 */
.card-back *:not(button) {
    pointer-events: none;
}

/* 카드 자체의 터치 동작 설정 */
.user-card-item {
    touch-action: none; /* JS에서 모든 방향을 제어하겠다는 선언 */
}

/* 카드 전체에 하이라이트 및 선택 방지 적용 */
.user-card-item, .card-inner, .card-front, .card-back *:not(button), .card-front  img {
    /* 탭할 때 생기는 파란색/회색 하이라이트 제거 */
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important; /* 꾹 누르면 나오는 메뉴 방지 */
    -webkit-user-select: none !important;   /* 텍스트 선택 방지 */
    user-select: none !important;
    outline: none !important;
}
/* 2. 버튼만! 버튼만은 터치를 다시 살려냅니다 (추가) */
.card-back button, 
.card-back .btn-secondary {
    pointer-events: auto !important;
    position: relative; /* 터치 영역 확실히 확보 */
    z-index: 10;        /* 카드 내부에서 가장 위로 */
}

/* 이미지가 드래그되는 현상 원천 차단 */
.card-front img {
    pointer-events: none; 
    -webkit-user-drag: none;
}

.btn-premium {
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    background: linear-gradient(45deg, #ffd700, #ff8c00); /* 황금빛 그라데이션 */
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
    transition: 0.3s;
}

.btn-premium:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
}