/* =======================
   HISTORY PAGE (최종 반응형 - 역순 정렬 + 폰트 계층)
   ======================= */

:root {
    --history-red: #e11d2e;
    --history-gray: #555;
    --history-black: #111;
}

/* ====== 전체 영역 ====== */
.history-content-wrap {
    position: relative;
    width: 100%;
    text-align: center;
    overflow: hidden;
    margin: clamp(4rem, 6vw, 8rem) auto;
    font-family: "Noto Sans KR", system-ui, sans-serif;
    background: #fff;
}

/* ====== 배경 ====== */
.history-bg {
    position: relative;
    width: 100%;
    z-index: 1;
}
.history-bg img {
    display: block;
    width: 100%;
    height: auto;
}
.history-bg .bg-half {
    width: 60%;
    object-fit: cover;
    margin-top: -10rem;
}
.history-bg .bg-line {
    width: 100%;
    object-fit: contain;
    margin: 3rem 0;
    padding-top: 7rem;
}
.history-bg .bg-full {
    width: 100%;
    object-fit: cover;
}

/* ====== 타임라인 ====== */
.timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    align-items: start;
    gap: clamp(3rem, 6vw, 8rem);
    margin: -55vw auto 0;
    position: relative;
    z-index: 5;
    padding: clamp(18vw, 22vw, 26vw) clamp(4vw, 6vw, 8vw) 0;
    max-width: 92%;
}

/* ====== 블록 ====== */
.timeline-block {
    text-align: center;
}

/* 연도 */
.timeline-block .year {
    font-size: 1.8vw;
    font-weight: 800;
    color: var(--history-red);
    margin-bottom: 1vw;
}

/* 이미지 */
.history-img {
    width: 100%;
    border-radius: 0.8vw;
    margin-bottom: 2vw;
}

/* 텍스트 영역 */
.timeline-text {
    text-align: left;
    line-height: 1.6;
    color: #333;
    margin-top: 3vw;
}
.timeline-text p {
    margin-bottom: 0.8vw;
}

/* ====== 타임라인 상세 항목 ====== */
.timeline-item {
    margin-bottom: 1.8rem;
}

.timeline-item .date {
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    font-weight: 900;
    color: #000;
    letter-spacing: 0.5px;
    margin-bottom: 0.3rem;
}

.timeline-item .title {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 500;
    color: #222;
    margin-bottom: 0.2rem;
    line-height: 1.5;
}

.timeline-item .desc {
    font-size: clamp(0.85rem, 1.2vw, 0.95rem);
    font-weight: 400;
    color: #555;
    margin-bottom: 0.2rem;
}

/* =========================================================
   RESPONSIVE BREAKPOINTS
   ========================================================= */

/* --- 1200px 이하 --- */
@media (max-width: 1200px) {
    /* 배경 제거 */
    .history-bg {
        display: none !important;
    }

    /* 타임라인 → 세로 + 역순 */
    .timeline {
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        gap: 3rem;
        margin: 0 auto;
        text-align: center;
        padding: 0 2rem;
    }

    .timeline-block {
        text-align: center;
        margin: 0 auto;
        width: 90%;
    }

    .year-2025 { order: 1; }
    .year-2024 { order: 2; }
    .year-2023 { order: 3; }

    .timeline-block .year {
        font-size: 1.6rem;
        color: var(--history-red);
        margin-bottom: 1rem;
    }

    .timeline-text {
        font-size: 1rem;
        color: #333;
        text-align: left;
        width: 90%;
        margin: 0 auto;
    }

    .history-img {
        width: 90%;
        border-radius: 10px;
        margin: 1rem auto 1.5rem;
    }
}

/* --- 800px 이하 --- */
@media (max-width: 800px) {
    .timeline {
        flex-direction: column-reverse;
        gap: 3rem;
        padding: 0 0rem;
    }

    .timeline-block .year {
        font-size: 1.5rem;
    }

    .timeline-text {
        font-size: 0.95rem;
    }

    .year-2025 { order: 1; }
    .year-2024 { order: 2; }
    .year-2023 { order: 3; }
}

/* --- 600px 이하 --- */
@media (max-width: 600px) {
    .timeline {
        flex-direction: column-reverse;
        gap: 2rem;
        padding: 0 0rem;
    }

    .timeline-block {
        width: 95%;
    }

    .timeline-block .year {
        font-size: 1.4rem;
    }

    .timeline-text {
        font-size: 0.9rem;
    }

    .history-img {
        width: 90%;
        margin: 1rem auto 1.5rem;
    }

    .year-2025 { order: 1; }
    .year-2024 { order: 2; }
    .year-2023 { order: 3; }
}