/* 
 * utilities.css
 * 유틸리티 클래스 및 레이아웃 헬퍼
 */

/* 텍스트 truncate 유틸리티 */
.text-truncate-1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 간격 유틸리티 - Bootstrap 5에 이미 포함되어 있음
   Bootstrap의 gap-* 클래스를 사용하세요: gap-0, gap-1, gap-2, gap-3, gap-4, gap-5 */

/* 컨테이너 간격 개선 */
.container {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* 페이지별 통일된 레이아웃 */
.page-centered {
    max-width: 960px;
    margin: 0 auto;
}

/* 섹션 간격 */
section {
    margin-bottom: 1.5rem;
}

article {
    margin-bottom: 1rem;
}

/* 텍스트 간격 */
p {
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.lead {
    line-height: 1.7;
    font-size: 1.1rem;
}

/* 리스트 간격 */
ul, ol {
    padding-left: 1.5rem;
}

li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* 스티키 요소 개선 */
.sticky-top {
    transition: all 0.3s ease;
}

/* 반응형 개선 */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .display-6 {
        font-size: 1.75rem;
    }
}