/* 컨테이너 및 래퍼 설정 */
.knowledge-tarot-wrapper {
    width: 100%;
    padding: 40px 0;
    box-sizing: border-box;
}

.tarot-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px; /* 기존 15px에서 25px로 간격 확대 */
    perspective: 1000px;
}

/* 개별 카드 기본 설정 */
.tarot-card {
    width: calc(20% - 20px); /* 넓어진 간격에 맞춰 너비 조정 */
    min-width: 140px;
    max-width: 200px;
    aspect-ratio: 150 / 243; /* 알려주신 실제 원본 이미지 비율 적용 */
    cursor: pointer;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease, filter 0.6s ease;
}

/* 3D 회전을 위한 내부 컨테이너 */
.tarot-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
}

/* 카드 양면 공통 속성 */
.tarot-card-front, 
.tarot-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari 지원 */
    backface-visibility: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    overflow: hidden;
}

/* -------------------------------------------
   수정된 카드 뒷면 (직접 업로드한 이미지 컨셉)
------------------------------------------- */
.tarot-card-front {
    background-color: #132844; 
    /* cover 대신 100% 100%를 사용하여 상하좌우 잘림 없이 딱 맞게 출력 */
    background-size: 100% 100%; 
    background-position: center;
    background-repeat: no-repeat;
    
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}



/* 기존에 있던 .tarot-card-front .tarot-design-overlay 와 .tarot-card-front span 코드는 이제 필요 없으므로 삭제하셔도 됩니다. */

/* -------------------------------------------
   카드 앞면 (뒤집혔을 때 글 정보)
------------------------------------------- */
.tarot-card-back {
    background-color: #ffffff;
    transform: rotateY(180deg); /* 초기에는 뒤집혀 있음 */
    display: flex;
    flex-direction: column;
    border: 2px solid #132844;
}

.tarot-thumb {
    width: 100%;
    height: 55%;
    background-size: cover;
    background-position: center;
    background-color: #f0f0f0;
}

.tarot-thumb.no-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 3rem;
}

.tarot-title {
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 45%;
    box-sizing: border-box;
}

.tarot-title h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
    color: #132844;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 세 줄 이상 말줄임 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 700;
}

.click-to-read {
    font-size: 0.8rem;
    color: #132844;
    font-weight: bold;
    text-align: right;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    transition-delay: 0.4s; /* 카드가 뒤집힌 후 서서히 등장 */
}

/* -------------------------------------------
   인터랙션 및 애니메이션 로직 (가챠 시스템 연출)
------------------------------------------- */

/* 1. 컨테이너에 상태 클래스가 붙었을 때 (하나라도 선택된 경우) */
.tarot-container.card-selected-state .tarot-card:not(.selected) {
    transform: scale(0.85); /* 크기 축소 */
    opacity: 0.3; /* 반투명 */
    filter: grayscale(100%); /* 회색 필터 */
    cursor: default;
    pointer-events: none; /* 클릭 차단 */
}

/* 2. 선택된 카드의 180도 회전 및 포커스 */
.tarot-card.selected {
    transform: scale(1.05) translateY(-10px); /* 살짝 커지며 위로 떠오름 */
    z-index: 10;
}

.tarot-card.selected .tarot-card-inner {
    transform: rotateY(180deg);
}

.tarot-card.selected .click-to-read {
    opacity: 1;
    transform: translateY(0);
}

/* -------------------------------------------
   모바일 반응형 (Flexbox)
------------------------------------------- */
@media (max-width: 768px) {
    .tarot-container {
        gap: 10px;
    }
    .tarot-card {
        width: calc(33.333% - 10px); /* 모바일에서는 가로 3열~2열로 유연하게 배치 */
        min-width: 100px;
    }

    .tarot-card-front span {
        font-size: 1.1rem;
    }
}


/* 모바일 환경(화면 너비 768px 이하) 타로 카드 텍스트 최적화 */
@media (max-width: 768px) {
    .tarot-title {
        padding: 8px 6px !important; /* 하얀 바탕 안쪽 상하좌우 여백 대폭 축소 */
    }
    
    .tarot-title h3 {
        font-size: 0.75rem !important; /* 제목 글자 크기 축소 */
        line-height: 1.2 !important; /* 줄 간격 최적화 */
        -webkit-line-clamp: 2 !important; /* 모바일에서는 깔끔하게 2줄까지만 표시 */
    }

    .click-to-read {
        font-size: 0.65rem !important; /* '읽어보기' 화살표 텍스트 크기 축소 */
        transform: translateY(5px); /* 등장 위치 살짝 조정 */
    }
}