/* ========================================
   Layout - 컨테이너, 그리드, 섹션
   ======================================== */

/* 컨테이너 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

/* 섹션 공통 */
.section {
  padding: var(--spacing-xl) 0;
}

.section__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--spacing-lg);
  color: var(--color-text);
}

/* 세로 타이틀 레이아웃 */
.section--vertical-title {
  position: relative;
}

.section--vertical-title .container {
  display: flex;
  flex-direction: column;
}

.section__title--vertical {
  font-size: 25px !important;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  padding-top: 30px;
  margin-bottom: var(--spacing-md);
  text-transform: capitalize;
}

.section__content {
  flex: 1;
}

/* 2컬럼 콘텐츠 */
.section__content--2cols {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.section__col-left {
  flex: 1;
}

.section__col-right {
  flex: 1;
}

/* 슬로건 텍스트 (About 좌측) */
.section__slogan-sub {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

.section__slogan-main {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.3;
}

/* 데스크톱: 세로 타이틀 */
@media (min-width: 1200px) {
  .section--vertical-title {
    padding-left: 0;
  }
  
  .section--vertical-title .container {
    flex-direction: row;
    align-items: flex-start;
    padding-left: 0;
  }
  
  .section__title--vertical {
    position: absolute;
    left: 0;
    top: 30px;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    font-size: 25px !important;
    font-weight: 400;
    flex-shrink: 0;
  }
  
  .section__content--2cols {
    flex-direction: row;
    gap: var(--spacing-xl);
  }
  
  .section__slogan-main {
    font-size: 34px;
  }
}

/* 그리드 - 카드용 */
.grid {
  display: grid;
  gap: var(--spacing-md);
}

.grid--4cols {
  grid-template-columns: repeat(auto-fit, minmax(200px, max-content));
  justify-content: center;
}

.grid--5cols {
  grid-template-columns: repeat(auto-fit, minmax(180px, max-content));
  justify-content: center;
}

/* 플렉스 유틸리티 */
.flex {
  display: flex;
}

.flex--center {
  justify-content: center;
  align-items: center;
}

.flex--between {
  justify-content: space-between;
  align-items: center;
}

.flex--wrap {
  flex-wrap: wrap;
}

/* 반응형 */
@media (min-width: 768px) {
  .container {
    padding: 0 var(--spacing-md);
  }
  
  .section {
    padding: var(--spacing-2xl) 0;
  }
  
  .section__title {
    font-size: var(--font-size-2xl);
  }
  
  }