/* 기본 컨테이너 */
.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 20px; }

/* 행(Row) */
.row { display: flex; flex-wrap: wrap; margin-left: -12px; margin-right: -12px; }

/* 열(Col) */
.col { flex: 1; padding-left: 12px; padding-right: 12px; }

/* 2열 */
.col-2 { width: 50%; padding-left: 12px; padding-right: 12px; }

/* 3열 */
.col-3 { width: 33.3333%; padding-left: 12px; padding-right: 12px; }

/* 4열 */
.col-4 { width: 25%; padding-left: 12px; padding-right: 12px; }

/* 가운데 정렬 */
.flex-center { display: flex; align-items: center; justify-content: center; }

/* 좌측 정렬 */
.flex-start { display: flex; align-items: center; justify-content: flex-start; }

/* 우측 정렬 */
.flex-end { display: flex; align-items: center; justify-content: flex-end; }

/* 공간 나누기 (양쪽) */
.flex-between { display: flex; justify-content: space-between; align-items: center; }

/* 세로 정렬(열 방향) */
.flex-column { display: flex; flex-direction: column; }

/* 기본 섹션 간격 */
.section { padding: 100px 0; }

/* 섹션 배경색 */
.bg-light { background: #f9f9f9; }
.bg-dark { background: #222; color: #fff; }

/* 반응형 대응 (모바일 기준) */
@media (max-width: 768px) {
  .col-2, .col-3, .col-4 { width: 100%; }
  .section { padding: 60px 0; }
}


@media (max-width: 480px) { /*  .section { overflow: auto; }*/ .flex-between { 
flex-direction: column; } .row { row-gap: 80px; } }