/* =================================================================
   history.css — 연혁 페이지(history.php) 전용
   - 불러오는 곳: history.php ($page_styles)
   - 모바일 기준으로 먼저 작성하고, min-width 미디어쿼리로
     태블릿(640/768px)·PC(1024px 이상) 모양을 덧씌움
   - style.css "10. 연혁 기본 틀" 규칙 중 같은 이름(.history-section 등)은 여기서 덮어씀
   - 상단 배너 모양은 style.css "6. 서브 페이지 상단 배너" 구역
   ================================================================= */

/* ── 색상 변수 ── */
:root {
    --primary-green: #4caf50;
    --text-dark: #333333;
    --text-muted: #666666;
    --border-color: #e0e0e0;
}

/* ── 섹션 틀 ── */
.history-section {
    padding: 40px 16px;
    /* 모바일 기준 여백 */
    background-color: #ffffff;
}

.history-inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* ── 전체 레이아웃 (왼쪽 사진 + 오른쪽 연혁 타임라인) ──
   기본(모바일)은 위아래 배치, 1024px(PC) 이상에서 좌우 배치 */
.history-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

@media (min-width: 1024px) {
    .history-container {
        flex-direction: row;
        align-items: flex-start;
        gap: 60px;
    }
}

/* ── 왼쪽 사진 · 큰 연도 글자 ──
   모바일: 상단에 가볍게 위치 / PC: 스크롤 시 옆에 고정 */
.history-visual {
    flex: 1;
    width: 100%;
}

@media (min-width: 1024px) {
    .history-visual {
        position: sticky;
        top: 120px;
    }
}

.image-wrapper img {
    width: 100%;
    height: auto;
    max-height: 250px;
    /* 모바일에서 이미지가 너무 커서 화면 다 가리는 것 방지 */
    border-radius: 8px;
    object-fit: cover;
}

@media (min-width: 1024px) {
    .image-wrapper img {
        max-height: none;
        /* PC에선 원본 비율 */
    }
}

.big-year {
    font-size: 32px;
    font-weight: 800;
    color: var(--primary-green);
    margin-top: 15px;
    letter-spacing: -1px;
}

@media (min-width: 1024px) {
    .big-year {
        font-size: 48px;
        margin-top: 24px;
    }
}

/* ── 오른쪽 연혁 타임라인 (연도 블록 목록) ── */
.history-timeline {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

@media (min-width: 1024px) {
    .history-timeline {
        gap: 60px;
    }
}

.timeline-block {
    display: flex;
    flex-direction: column;
    border-left: 2px solid var(--border-color);
    /* 모바일에서는 왼쪽에 타임라인 선을 세워줌 */
    padding-left: 20px;
}

@media (min-width: 640px) {
    .timeline-block {
        flex-direction: row;
        border-left: none;
        /* 태블릿 이상부터는 선 없애고 가로 정렬 */
        padding-left: 0;
    }
}

/* 연도 표기 반응형 */
.timeline-year {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-green);
    min-width: 100px;
    margin-bottom: 12px;
    position: relative;
}

/* 모바일용 좌측 타임라인 점 위치 맞추기 */
.timeline-year::before {
    content: '';
    position: absolute;
    left: -26px;
    /* 타임라인 선 위에 정확히 안착 */
    top: 14px;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: var(--primary-green);
    border-radius: 50%;
}

@media (min-width: 640px) {
    .timeline-year {
        margin-bottom: 0;
        font-size: 24px;
    }

    .timeline-year::before {
        left: -15px;
        /* 가로 배열일 때 점 위치 재조정 (선택 사항인데 이미지 레이아웃 맞추려고 세팅) */
        display: none;
        /* PC 형태일 땐 굳이 세로선이 없으니 점을 숨기거나 위치 조정 가능 (여기선 모바일 특화로 선+점 구현) */
    }
}

/* ── 연도별 상세 목록 (월 · 내용) ── */
.timeline-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

.timeline-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 14px;
    line-height: 1.6;
}

.timeline-list li:last-child {
    margin-bottom: 0;
}

.month {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
    min-width: 30px;
    margin-right: 12px;
    margin-top: 1px;
    /* 텍스트 높이 정렬 */
}

.content {
    font-size: 15px;
    color: var(--text-muted);
    word-break: keep-all;
}

@media (min-width: 768px) {
    .month {
        font-size: 16px;
        min-width: 35px;
        margin-right: 15px;
    }

    .content {
        font-size: 16px;
    }
}

/* ------------------------------------------
   예전 인라인 style="" 속성을 옮긴 규칙 (상단 배너 아래 여백)
   ------------------------------------------ */
.history-spacer {
    margin-bottom: 100px;
}

/* 모바일(768px 이하): 배너 → 본문 사이 빈 공간이 너무 커서 줄임 (배너 아래 여백 약 56px로 통일) */
@media (max-width: 768px) {
    .letters-section .history-spacer {
        margin-bottom: 0;
    }

    .history-section {
        padding-top: 56px;
    }
}