﻿body {
/*    margin: 0;*/
/*    background: #fff;*/
/*    font-family: sans-serif;*/
}

.timeline-x {
    position: relative;
    height: auto;
}

/* 카드 */
.timeline-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0; /* 🔥 80 → 40으로 줄이기 */

    opacity: 0.8; /* 🔥 0.35 → 0.6로 올림 */
    transform: scale(0.98); /* 🔥 너무 작지 않게 */
    transition: all 0.4s ease;
    /*    opacity: 0.4;
    transform: scale(0.9);
    transition: all 0.4s ease;*/
}

/*    .timeline-card.show {
        opacity: 1;
        transform: translateY(0) scale(1);
    }*/

    /* 활성 */
    .timeline-card.active {
        opacity: 1;
        transform: scale(1.15);
    }

    /* hover */
    .timeline-card:hover {
        opacity: 1;
        transform: scale(1.2);
    }

/* 연도 */
.year {
    font-size: 60px;
    font-weight: bold;
    color: #2563eb;
}

/* 리스트 초기화 */
.timeline-list {
    list-style: none;
    padding: 0;
    margin: 15px 0 0;
    text-align: center;
}

    /* li 스타일 */
    .timeline-list li {
        display: flex; /* 🔥 핵심 */
        align-items: flex-start;
        justify-content: center;
        gap: 6px; /* 점과 텍스트 간격 */
        margin: 6px 0;
        max-width: 600px; /* 줄바꿈 정렬 유지 */
        text-align: left; /* 내부 텍스트는 왼쪽 */

        font-size: 15px;
        line-height: 1.6;

        /*        opacity: 0;
        transform: translateY(10px);
        transition: all 0.4s ease;*/
    }

        /* 커스텀 점 (포인트) */
        .timeline-list li::before {
            content: '';
            width: 6px;
            height: 6px;
            background: #2563eb;
            border-radius: 50%;
            margin-top: 7px; /* 텍스트와 수직 정렬 */
            flex-shrink: 0;
        }

.timeline-card.active .timeline-list li {
    color: #111;
}