/* CI 히어로 */
.ci-hero {
    position: relative;
    width: 100%;
    height: 800px; /* 시안의 검은 배경 높이에 맞춰 조정 */
    background-color: #000;
    overflow: hidden;
}

.ci-hero .bg {
    position: absolute;
    inset: 0;
    background: url('/img/kcnc_outline_logo.jpg') no-repeat;
    background-size: cover; 
    background-position: center;
    z-index: 1;
}
/* CI 설명 및 워드마크 */
.ci-description {
	   background-color:rgba(255, 255, 255, 1);
}
.ci-page .inner {
    max-width: 1300px; /* 시안의 콘텐츠 폭 */
    margin: 0 auto;
    padding: 0 50px; /* 좌우 여백 확보 */
}
.ci-intro {
    display: flex;
    justify-content: space-between;
    gap: 100px;
    padding: 100px 0; /* 상하 여백 */
    color: rgba(0, 0, 0, 1);
	
}

.ci-intro h3 {
    flex: 0 0 auto; /* 제목 너비 유지 */
    width: 300px;
    font-size: 32px;
}

.ci-intro p {
    flex: 1;
    font-size: 16px;
    line-height: 1.8;
    
}
h4 { 
color: rgba(0, 0, 0, 1); font-size: 32px; font-weight: 700; margin-bottom: 30px; padding-bottom: 15px; }
.wordmark-section{
	padding-bottom: 100px;
	
}
.wordmark-section {
    /* 섹션 전체 높이 유지 */
    height: 900px; 
   padding-bottom:200px;
   
}

.wordmark-grid { 
    display: flex; 
    gap: 24px; 
    /* 좌우 영역의 높이를 동일하게 맞춤 */
    align-items: stretch; 
    height: 100%;
}

.mark-card { 	
    background: #F9F9F9;  
    /* 패딩 대신 정렬 위주로 제어 */
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    position: relative; 
   
}

.mark-card .label { 
    position: absolute; 
    top: 30px; 
    left: 30px; 
    font-size: 14px; 
    color: rgba(0, 0, 0, 1); 
    font-weight: 600; 
}

/* logo img*/
.mark-card img { 
    width: 65%; /* 카드 폭에 비례하게 조절 */
    max-width: 400px; /* 너무 커지지 않게 제한 */
    height: auto;
}

/* 좌측 큰 로고 카드 */
.main-mark { 
    flex: 1.3; 
}

/* 우측 브랜드 로고 그룹 */
.mark-sub-group { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    gap: 24px; 
}

.mark-sub-group .mark-card { 
    /* 우측 카드는 그룹 내에서 균등하게 높이를 나눠 가짐 */
    flex: 1; 
}

/* 우측 카드 내 로고 크기는 좌측보다 조금 작게 조절 */
.mark-sub-group .mark-card img {
    width: 55%;
    max-width: 250px;
}
/* 컬러 시스템 */
.color-system {
    background-color: #fff;
    padding-bottom: 100px;
}

/* 제목 스타일 (이전 섹션들과 통일) */
.color-system h4 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 40px;
}

.color-table {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.color-row {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 20px 40px; /* 기본 높이 */
    box-sizing: border-box;
    color: #000; /* 기본 글자색 */
}

/* 시안의 핵심: 메인 컬러 행만 높게 설정 */
.purple-row {
    background-color: #5D13EA;
    height: 280px; /* 시안 비중 반영 */
    color: #fff;
    align-items: flex-start; /* 텍스트 상단 배치 */
    padding-top: 40px;
}

.white-row { background-color: #ffffff; border-bottom: 1px solid #eee; }
.gray-row { background-color: #E8E8E8; }
.black-row { background-color: #000000; color: #fff; }

.color-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
/* RGB 영역 */
.color-info .codes span:first-child {
    width: 220px; /* 시작점을 맞추기 위한 고정 폭 설정 */
    text-align: left; /* 칸 안에서는 왼쪽 정렬하여 시작점 통일 */
}

/* HEX 영역 */
.color-info .codes span:last-child {
    width: 140px; /* 시작점을 맞추기 위한 고정 폭 설정 */
    text-align: left; /* 칸 안에서는 왼쪽 정렬하여 시작점 통일 */
}
.color-info .name {
    font-size: 18px;
    font-weight: 600;
}

/* 컬러 코드 영역 우측 정렬 및 간격 */
.color-info .codes {
    display: flex;
    gap: 80px; /* RGB와 HEX 사이 간격 */
    font-size: 16px;
    font-weight: 500;
    text-align: right;
}

.color-info .codes span {
    /* 텍스트가 오른쪽 끝에 붙도록 설정 */
    display: block;
    width: 100%;
}

.color-info .codes span {
	
    min-width: 150px; /* 코드 숫자가 바뀌어도 정렬이 유지되도록 설정 */
}
/* 갤러리 그리드 */
.brand-gallery {
    background-color: #fff;
    padding-bottom: 120px; /* 푸터와의 간격 확보 */
}

.gallery-grid { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
}



.gallery-item img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
  
}

/* 첫째 줄 높이 */
.gallery-item.large { 
    height: 500px; /* 시안에 맞춰 약간 높임 */
}

/* 줄 공통 설정 */
.gallery-group { 
    display: flex; 
    gap: 20px; 
    height: 400px; /* 둘째, 셋째 줄의 높이를 통일 */
}

/* 둘째 줄: 7대 3 비율 */
.row-7-3 .gallery-item:first-child { flex: 6; }
.row-7-3 .gallery-item:last-child { flex: 4; }

/* 셋째 줄: 3대 7 비율 */
.row-3-7 .gallery-item:first-child { flex: 4; }
.row-3-7 .gallery-item:last-child { flex: 6; }






/*mobile~~~~~~~*/

@media (max-width: 768px) {

   h4 {
    font-size: 18px;
  }

  /* 1. 히어로 높이 최적화 (시안 비율 반영) */
  .ci-hero {
    width: 100%;
    height: 350px; /* 500px에서 축소하여 가독성 확보 */
  }
  
  .ci-hero .bg {
    background-position: center 30%; /* 로고 윤곽선이 모바일에서도 예쁘게 걸치도록 조정 */
  }
	
	
  .wordmark-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
  }

  .mark-sub-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .mark-card {
    background: #f4f4f4;
    padding: 20px;
    

  }

 .wordmark-section {
    height: auto !important;   
   padding-bottom: 30px !important; 
  }

  .wordmark-grid {
    display: grid !important;
    grid-template-columns: 1fr; 
    gap: 15px;
  }

  .mark-sub-group {
    display: contents;  /*  구조 flatten */
  }
  
  .mark-card {
    height: 120px;              /* 카드 높이 통일 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
  }

  .mark-card img {
    max-height: 40px;           /*  로고 높이 통일 */
    width: auto;
  }

  .mark-card .label {
    top: 10px;
    left: 15px;
    font-size: 12px;
  }

  .mark-card img {
    width: 100%;
    
    max-width:200px !important;
    height: auto;
  }
/* 3. 컬러 시스템 */
  .color-table {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .color-row {
    height: auto; /* 고정 높이 대신 내부 패딩으로 제어하여 글자 겹침 방지 */
    min-height: 70px;
    display: flex;
    align-items: center;
    padding: 15px;
  }
  
  .purple-row {
    height: 140px; /* 메인 퍼플은 모바일에서도 조금 더 강조 */
  }

  .color-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .color-info .name {
    font-size: 14px;
    font-weight: 600;
  }

  .color-info .codes {
    display: flex;
    flex-direction: column; /* 가로 배열에서 세로 배열로 변경하여 좁은 화면 대응 */
    gap: 4px;
    font-size: 12px;
    color: #666;
    text-align: left;
  }
  
  .purple-row .color-info .codes {
    color: rgba(255,255,255,0.8);
  }
  .gallery-grid {
    transform: scale(0.85);   /* 🔥 전체 축소 */
    transform-origin: top center;
  }

  .contact{
     padding: 40px 20px;
  }
    .contact-wrap {
  
      display: flex;

    
    flex-direction: column;
    gap: 30px;
  }

  .contact-left {
 	margin-top :10%;
    width: 100%;
     order: 2; 
  }
	
	
  .contact-left h2 {
  	font-size:26px;
  	font-weight:700;
  }	
	
	
  .contact-right {
    width: 100%;
        order: 1; 
  }

  .map-box img {
    width: 100%;
    height: auto;
    display: block;
  }
  
   .ci-page .inner {
    padding: 0 20px;
  }

  .section-padding {
    padding: 40px 0;
  }

  
  .ci-intro {
    display: flex;
    flex-direction: column;  
    gap: 15px;
    padding: 40px 0;
  }
  

   

  .ci-intro h3 {
    font-size: 18px;
    margin-bottom: 10px;
    width: auto; 
  }

  .ci-intro p {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
        width: 100%;
  }
  
  
  /*gallary update*/
  
  
    .brand-gallery {
    padding-bottom: 10px;  
  }

  .gallery-grid {
    transform: scale(0.75);     
    transform-origin: top center;
  }

  .gallery-item.large {
    height: 300px;   /*  기존 500 → 축소 */
  }

  .gallery-group {
    height: 240px;   /*  기존 400 → 축소 */
  }
}