/* ===========================
   재미 카드 (혈액형 & 4군자 & 퍼스널 컬러)
   =========================== */

/* 재미 카드 그리드 컨테이너 */
.fun-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 60px;
    margin-bottom: 60px;
}

/* 재미 섹션 헤더 */
.fun-section-header {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px 20px;
    position: relative;
}

.fun-divider {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
    margin-bottom: 30px;
    position: relative;
}

.fun-divider::before {
    content: '✦';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    color: #d4af37;
    font-size: 24px;
    padding: 0 20px;
}

.fun-section-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a4838;
    margin-bottom: 12px;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.fun-icon-emoji {
    font-size: 32px;
    animation: funBounce 2s infinite;
}

@keyframes funBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.fun-section-description {
    font-size: 16px;
    color: #666;
    margin: 0;
}

.fun-card {
    background: white;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 3px solid transparent;
    display: flex;
    flex-direction: column;
    min-height: 380px;
}

.fun-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.fun-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    border-color: #d4af37;
}

.fun-card:hover::before {
    opacity: 1;
}

/* 배지 */
.fun-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, #ff6b9d, #ffa06b);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(255, 107, 157, 0.4);
    animation: funBadgePulse 2s infinite;
}

.fun-badge.traditional {
    background: linear-gradient(135deg, #2c5f4f, #1a4838);
    box-shadow: 0 4px 15px rgba(44, 95, 79, 0.4);
}

.fun-badge.color {
    background: linear-gradient(135deg, #a29bfe, #fd79a8);
    box-shadow: 0 4px 15px rgba(253, 121, 168, 0.4);
}

@keyframes funBadgePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* 아이콘 */
.fun-icon {
    width: 90px;
    height: 90px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.blood-symbol, .sagunja-symbol, .color-symbol {
    font-size: 50px;
}

.animal-symbol, .flower-symbol, .season-symbol {
    font-size: 50px;
}

/* 혈액형 아이콘 배경 */
.blood-all {
    background: linear-gradient(135deg, #e74c3c, #f39c12, #9b59b6, #3498db);
}

.blood-a {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.blood-b {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

.blood-o {
    background: linear-gradient(135deg, #f39c12, #e67e22);
}

.blood-ab {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

/* 4군자 아이콘 배경 */
.sagunja-all {
    background: linear-gradient(135deg, #ff9a9e, #a18cd1, #ffecd2, #56ab2f);
}

.sagunja-plum {
    background: linear-gradient(135deg, #ff9a9e, #fad0c4);
}

.sagunja-orchid {
    background: linear-gradient(135deg, #a18cd1, #fbc2eb);
}

.sagunja-chrysanthemum {
    background: linear-gradient(135deg, #ffecd2, #fcb69f);
}

.sagunja-bamboo {
    background: linear-gradient(135deg, #56ab2f, #a8e063);
}

/* 퍼스널 컬러 아이콘 배경 */
.color-all {
    background: linear-gradient(135deg, #ffeaa7, #a29bfe, #fd79a8, #74b9ff);
}

/* 제목 & 설명 */
.fun-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a4838;
    margin-bottom: 14px;
    line-height: 1.3;
}

.fun-description {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* 특성 태그 */
.fun-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.trait-tag {
    display: inline-block;
    background: rgba(212, 175, 55, 0.1);
    color: #d4af37;
    padding: 8px 14px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    border: 2px solid rgba(212, 175, 55, 0.3);
    transition: all 0.3s ease;
}

.trait-tag:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: rgba(212, 175, 55, 0.5);
    transform: translateY(-2px);
}

/* 버튼 */
.btn-fun {
    display: block;
    width: 100%;
    padding: 15px 30px;
    background: linear-gradient(135deg, #ff6b9d, #ffa06b);
    color: white;
    text-align: center;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    margin-top: auto;
}

.btn-fun.traditional {
    background: linear-gradient(135deg, #2c5f4f, #1a4838);
}

.btn-fun.color {
    background: linear-gradient(135deg, #a29bfe, #fd79a8);
}

.btn-fun::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-fun:hover::before {
    left: 100%;
}

.btn-fun:hover {
    background: linear-gradient(135deg, #ffa06b, #ff6b9d);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 107, 157, 0.4);
}

.btn-fun.traditional:hover {
    background: linear-gradient(135deg, #1a4838, #2c5f4f);
    box-shadow: 0 10px 30px rgba(44, 95, 79, 0.4);
}

.btn-fun.color:hover {
    background: linear-gradient(135deg, #fd79a8, #a29bfe);
    box-shadow: 0 10px 30px rgba(253, 121, 168, 0.4);
}

/* Dark Mode */
body.dark-mode .fun-section-title {
    color: #d4af37;
}

body.dark-mode .fun-section-description {
    color: #bbb;
}

body.dark-mode .fun-divider::before {
    background: #0f3460;
}

body.dark-mode .fun-card {
    background: #0f3460;
    border-color: rgba(212, 175, 55, 0.3);
}

body.dark-mode .fun-title {
    color: #d4af37;
}

body.dark-mode .fun-description {
    color: #bbb;
}

body.dark-mode .trait-tag {
    background: rgba(212, 175, 55, 0.2);
    border-color: rgba(212, 175, 55, 0.4);
}

/* Responsive */
@media (max-width: 1200px) {
    .fun-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .fun-card {
        padding: 30px;
        min-height: 360px;
    }
}

@media (max-width: 768px) {
    .fun-cards-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .fun-section-header {
        padding: 30px 15px 15px;
    }

    .fun-section-title {
        font-size: 24px;
        flex-direction: column;
        gap: 8px;
    }

    .fun-icon-emoji {
        font-size: 30px;
    }

    .fun-section-description {
        font-size: 15px;
    }

    .fun-card {
        padding: 28px;
        min-height: 340px;
    }

    .fun-icon {
        width: 80px;
        height: 80px;
    }

    .blood-symbol, .sagunja-symbol, .color-symbol {
        font-size: 44px;
    }

    .fun-title {
        font-size: 20px;
    }

    .fun-description {
        font-size: 14px;
    }

    .trait-tag {
        font-size: 12px;
        padding: 6px 12px;
    }

    .btn-fun {
        padding: 13px 24px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .fun-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .fun-section-header {
        padding: 25px 10px 10px;
    }

    .fun-section-title {
        font-size: 22px;
    }

    .fun-icon-emoji {
        font-size: 26px;
    }

    .fun-section-description {
        font-size: 14px;
    }

    .fun-divider::before {
        font-size: 20px;
        padding: 0 15px;
    }

    .fun-card {
        padding: 25px;
        min-height: 320px;
    }

    .fun-icon {
        width: 75px;
        height: 75px;
    }

    .blood-symbol, .sagunja-symbol, .color-symbol {
        font-size: 40px;
    }

    .fun-title {
        font-size: 19px;
    }

    .fun-description {
        font-size: 14px;
    }

    .trait-tag {
        font-size: 11px;
        padding: 5px 10px;
    }

    .btn-fun {
        padding: 12px 20px;
        font-size: 14px;
    }

    .fun-badge {
        font-size: 10px;
        padding: 5px 12px;
    }
}