@charset "utf-8";
/************************************************************************************************************
                                          광주지방변호사회 소개 - 연혁
************************************************************************************************************/
:root {
    --primary-color: #064997; /* 이미지의 진한 블루 */
    --bg-light: #dedede;      /* 비활성 탭 배경 */
    --border-color: #ddd;
    --max-width: 1320px;
}

.history-container {
    max-width: var(--max-width);
    margin: 50px auto;
    padding: 0 20px;
    font-family: 'Noto Sans KR', sans-serif;
    line-height: 1.6;
    color: #333;
}

/* 상단 섹션 */
.history-item {
    margin-bottom: 40px;
}
.history-item .date {
    font-size: 2.7rem;
    color: var(--primary-color);
    margin-bottom: 10px;
    border-bottom: 2px dotted #aaa;
    display: block;
    padding-bottom: 5px;
}
.history-item .history_txt p {
    margin: 5px 0;
    word-break: keep-all;
	font-size: 1.9rem;
	font-weight: 400;
    color: #333;
}

/* 탭 스타일 */
.tabs {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 70px 0 0;
	border-top: 2px solid #223a5e;
    border-bottom: 1px solid #a1a1a1;
}
.tab-link {
    flex: 1;
    background: var(--bg-light);
    padding: 15px;
	font-size: 2rem;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
}
.tab-link.active {
    background: #223a5e;
    color: #fff;
}

/* 탭 컨텐츠 - PC 레이아웃 고정 */
.tab-content {
    display: none;
    padding: 60px 0;
}
.tab-content.active {
    display: block;
}

/* PC 레이아웃 고정 및 Sticky 적용 */
.flex-layout {
    display: flex;
    /* 중요: sticky가 작동하려면 align-items가 center가 아닌 flex-start여야 합니다 */
    align-items: flex-start; 
    gap: 70px;
    position: relative; /* 기준점 설정 */
}

.year-title {
    font-size: 5.5rem;
	text-align: center;
    font-weight: 700;
    flex: 0 0 400px;
    letter-spacing: -2px;

    /* --- 스크롤 고정 설정 시작 --- */
    position: -webkit-sticky; /* 사파리 브라우저 대응 */
    position: sticky;
    top: 100px;  /* 스크롤 시 상단에서 얼마만큼 떨어져 고정될지 결정 (헤더가 있다면 헤더 높이만큼 조절) */
    /* -------------------------- */
    
    height: auto;
    margin-top: 100px; /* 리스트의 첫 번째 항목과 높이를 맞추기 위한 여백 */
}

.detail-list {
    flex: 1;
    list-style: none;
    padding: 0;
}

.detail-list li {
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color); /* 가로 실선 */
}

.detail-list li:first-child {
    padding-top: 0;
}

.detail-list li strong {
    display: block;
    font-size: 28px;
    color: var(--primary-color);
    margin-bottom: 0px;
    font-weight: 700;
	letter-spacing: -1px;
}

.detail-list li span {
    font-size: 1.8rem;
	font-weight: 400;
    color: #333;
    line-height: 1.4;
    word-break: keep-all;
}
.only-mo { display:none; }

/* 모바일 대응 (Max 768px) */
@media (max-width: 768px) {
    /* 탭 2열 배열 */
    .tabs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tab-link {
		font-size: 1.5rem;
        border: 1px solid #ccc;
        margin: -1px 0 0 -1px;
    }

    /* 모바일에서는 세로 배치로 변경 */
    .flex-layout {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

.year-title {
        position: static;     /* 고정 속성을 해제하여 일반 흐름을 따름 */
        font-size: 32px;      /* 모바일에 적합한 크기로 조절 */
        width: 100%;          /* 가로 폭 전체 사용 */
        flex: none;
        margin-top: 0;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--border-color); /* 제목 강조를 위한 하단 선 */
        margin-bottom: 10px;
    }

    .detail-list li strong {
        font-size: 20px;
    }

    .detail-list li span {
        font-size: 15px;
    }
	.only-mo { display:inline; }
}