/* CI 본문: 페이지 제목은 공통 section-heading 사용 */
.ci-section { padding-block: var(--tf-content-space); }
.ci-section__inner, .ci-content { display: flex; flex-direction: column; }
.ci-section__inner, .ci-content { gap: var(--number-160); }

/* CI 소제목과 설명 */
.ci-logo-card header, .ci-rule > header, .ci-colors > header { display: flex; flex-direction: column; gap: var(--number-12); }
.ci-logo-card h3, .ci-rule h3, .ci-colors h3 { margin: 0; color: var(--color-text-normal); font-size: 2.5rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.ci-logo-card p, .ci-rule p, .ci-colors p { margin: 0; color: var(--color-text-normal); font-size: 1.125rem; line-height: 1.5; overflow-wrap: break-word; }

/* 심볼마크·기본 CI·사용 규정 이미지는 데스크톱 원본을 비례 축소 */
.ci-logo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tf-gutter); }
.ci-logo-card { display: flex; min-width: 0; flex-direction: column; gap: var(--number-24); }
.ci-logo-card figure, .ci-rule figure { margin: 0; overflow: hidden; border-radius: var(--number-24); }
.ci-logo-card img, .ci-rule img { display: block; width: 100%; height: auto; }

/* 최소 여백 규정 */
.ci-rule { display: flex; flex-direction: column; gap: var(--number-24); }

/* 주요 색상 */
.ci-colors { display: flex; flex-direction: column; gap: var(--number-40); }
.ci-color-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tf-gutter); }
.ci-color-item { min-width: 0; }
.ci-color-item h4 { margin: 0 0 var(--number-24); font-size: 1.5rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.ci-color-item__body { display: grid; min-height: 6.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--number-20); }
.ci-color-swatch { display: block; width: 100%; height: 6.25rem; }
.ci-color-swatch--symbol { background: #ab7f1d; }
.ci-color-swatch--word { background: var(--tf-black); }
.ci-color-item dl { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; margin: 0; color: var(--color-text-normal); font-size: 1.125rem; line-height: 1.5; }
.ci-color-item dl > div { display: flex; gap: var(--number-12); }
.ci-color-item dt { flex-shrink: 0; font-weight: 600; }
.ci-color-item dd { margin: 0; }

/* 1200 시안: 섹션 간격 80px */
@media (max-width: 1919.98px) {
  .ci-section__inner, .ci-content { gap: var(--number-80); }
}

/* 태블릿: 로고 소개는 한 열, 색상 정보는 각 견본 아래 배치 */
@media (max-width: 1199.98px) {
  .ci-logo-grid { grid-template-columns: minmax(0, 1fr); gap: var(--number-40); }
  .ci-logo-card header, .ci-rule > header, .ci-colors > header { gap: var(--number-8); }
  .ci-logo-card h3, .ci-rule h3, .ci-colors h3 { font-size: 2rem; }
  .ci-logo-card p, .ci-rule p, .ci-colors p { font-size: 1rem; }
  .ci-color-item__body { grid-template-columns: minmax(0, 1fr); gap: var(--number-20); }
  .ci-color-item dl { min-height: 6.25rem; gap: var(--number-8); }
}

/* 모바일: 소제목 22px, 색상 항목도 한 열로 배치 */
@media (max-width: 767.98px) {
  .ci-section__inner, .ci-content { gap: var(--number-40); }
  .ci-logo-card h3, .ci-rule h3, .ci-colors h3 { font-size: 1.375rem; font-weight: 600; line-height: 1.5; }
  .ci-color-grid { grid-template-columns: minmax(0, 1fr); gap: var(--number-32); }
  .ci-color-item h4 { margin-bottom: var(--number-12); font-size: 1.25rem; font-weight: 600; line-height: 1.5; }
  .ci-color-item__body { gap: var(--number-16); }
  .ci-color-item dl { min-height: 0; font-size: 1rem; }
}