/* LTD SECTION
-------------------------------------------------- */
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Noto Sans KR', sans-serif;
    background-color: #ffffff;
}
.ltd-section {
  position: relative;
  width: 100%;
  height: 100vh; /* 화면 전체 높이 사용 */
  min-height: 800px; /* 최소 높이 지정 */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('../../images/about_ltd_background.jpg') center center/cover no-repeat;
  overflow: hidden;
  padding: 60px 0px;
  box-sizing: border-box;
}

.ltd-container {
  max-width: 1200px; /* 콘텐츠 최대 너비 조정 */
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ltd-bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(80px, 12vw, 160px); /* 화면 너비에 따라 폰트 크기 조절 */
  line-height: 0.96;
  text-align: center;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.25);
  z-index: 1;
  user-select: none;
  pointer-events: none;
}

.ltd-content {
  display: flex;
  flex-direction: column;
  gap: 110px; /* 각 줄 사이의 간격 조정 */
  top: 10px;
  left: 140px;
  z-index: 2;
  position: relative;
  width: 100%;
  max-width: 1000px; /* 설명글 길이에 맞춰 조정 */
}

.ltd-row {
  display: flex;
  align-items: center;
  gap: 80px; /* 제목과 설명 사이의 간격 */
}

.ltd-title {
  font-family: 'Pretendard', sans-serif;
  font-weight: 800;
  font-size: 28px; /* 폰트 크기 조정 */
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  flex-shrink: 0;
  width: 130px; /* 제목 너비 고정 */
  text-align: left;
  color: #fff;
}

.ltd-description {
  font-family: 'Pretendard', sans-serif; /* 폰트 통일 */
  font-weight: 400;
  font-size: 28px; /* 폰트 크기 조정 */
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: #fff;
  text-align: left;
  text-align: justify;
  word-break: keep-all;
}

/* 반응형 디자인을 위한 Media Query */
@media (max-width: 768px) {
  .ltd-bg-text{
    line-height: 1.6;
    font-size: clamp(55px, 10vw, 120px);
  }
  .ltd-section {
    min-height: 0px;
    height: auto;
    margin-top: 100px;
    padding: 100px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .ltd-content {
    gap: 30px;
    align-items: center;
    text-align: center;
    left: 5px !important;
    top: 0 !important;
    justify-content: center !important;
  }

  .ltd-row {
     flex-direction: row !important;
     align-items: center;
     justify-content: flex-start; /* 왼쪽 정렬 */
     text-align: left;
     width: 100%; /* 부모 너비 채우기 */
     max-width: 400px; /* 최대 너비 제한 */
     padding: 0 0px;
     box-sizing: border-box;
  }

  .ltd-title {
     flex-shrink: 0; /* 너비 고정 */
     width: 90px; /* 고정 너비 */
     text-align: left;
     font-size: 20px;
     /* white-space: normal; */
  }

  .ltd-description {
    font-size: 16px;
    text-align: left; /* 왼쪽 정렬 */
    word-break: keep-all;
  }
}

/* 1200px 이하에서 ltd-section 반응형 개선
@media (max-width: 1200px) {
  .ltd-section {
    padding: 40px 10px;
    min-height: 500px;
  }
  .ltd-content {
    max-width: 90vw;
    gap: 40px;
    left: 0;
    top: 0;
  }
  .ltd-row {
    gap: 30px;
  }
} */

/* CEO Section
-------------------------------------------------- */
.ceo-section {
  width: 100%;
  /* max-width: 1600px; */
  margin: 0 0; /* 상하 마진은 0, 좌우 마진은 auto로 설정하여 중앙 정렬 */
  padding: 120px 0px; /* 섹션의 상하, 좌우 여백 */
  background-color: #f8f9fa; /* 배경색을 약간의 회색으로 지정하여 구분감 부여 */
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.ceo-container {
  max-width: 926px; /* Figma의 최대 너비를 기준으로 설정 */
  width: 100%;
  display: flex;
  flex-direction: column; /* 아이템들을 세로로 정렬 */
  align-items: center;    /* 아이템들을 가로축 중앙에 정렬 */
  gap: 30px; /* 각 아이템 사이의 수직 간격 */
  text-align: center; /* 모든 텍스트를 중앙 정렬 */
}

/* CEO 사진 스타일 */
.ceo-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%; /* 이미지를 원형으로 만듦 */
  object-fit: cover; /* 이미지 비율을 유지하며 채움 */
  margin-bottom: 20px; /* 사진과 제목 사이의 추가 간격 */
}

/* "CEO MESSAGE" 제목 스타일 */
.ceo-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  /* clamp()를 사용해 화면 크기에 따라 폰트 크기가 유연하게 변하도록 설정 */
  font-size: clamp(48px, 8vw, 90px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #000000;
  margin: 0;
}

/* 첫 번째 소개 문단 스타일 */
.ceo-intro {
  font-family: 'Pretendard', sans-serif;
  font-weight: 400; /* 100에서 400으로 변경 */
  font-size: 18px;
  line-height: 1.67; /* 30px */
  letter-spacing: -0.01em;
  color: #000000; /* 완전한 검정보다 부드러운 색상으로 가독성 향상 */
  max-width: 800px; /* Figma의 너비를 최대 너비로 설정 */
  margin: 0;
    word-break: keep-all;
}

/* 두 번째 강조 문단 스타일 */
.ceo-highlight {
  font-family: 'Pretendard', sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 4vw, 36px); /* 반응형 폰트 크기 */
  line-height: 1.56; /* 56px */
  letter-spacing: -0.01em;
  color: #000000;
  margin: 20px 0; /* 위아래 추가 여백으로 강조 */
  word-break: keep-all;
}

/* 마지막 서명 문단 스타일 */
.ceo-signature {
  font-family: 'Pretendard', sans-serif;
  font-weight: 400; /* 800에서 400으로 변경 */
  font-size: 18px;
  line-height: 1.67; /* 30px */
  letter-spacing: -0.01em;
  color: #000000;
  max-width: 600 px;
  margin: 0;
  word-break: keep-all;
}

/* CEO 섹션 내의 strong 태그만 굵게 처리 */
.ceo-section strong {
  font-weight: 800;
}

/* 모바일 화면 대응 */
@media (max-width: 768px) {
  .ceo-section {
    padding: 80px 10px;
  }
  
  .ceo-intro, .ceo-signature {
    font-size: 16px;
  }
  .ceo-intro br {
        display: none;
  }
  .ceo-intro {
    text-align: justify;
    word-break: keep-all;
}

  .ceo-highlight br {
        display: none;
  }
.ceo-highlight {
    text-align: justify;
  word-break: keep-all;
}

.ceo-signature br {
        display: none;
    }
  .ceo-signature {
    text-align: justify;
    word-break: keep-all;
  }

}


/* Client Section
-------------------------------------------------- */
.client-section {
  width: 100%;
  max-width: 1600px;
  /* height: 50%; */
  margin: 0 auto;    /* 중앙 정렬 */
  padding: 80px 0;
  box-sizing: border-box;
  background-color: #fff; /* 배경색 */
}

/* 로고들이 보이는 창(window) 역할 */
.client-carousel {
  overflow: hidden; 
  position: relative;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

/* ▼▼▼▼▼ 이 부분이 꼭 필요합니다 ▼▼▼▼▼ */
/* 실제로 움직이는 로고들의 컨테이너 */
.client-logos {
  display: flex; /* 로고들을 가로로 정렬하는 핵심 속성 */
  align-items: center;
}
/* ▲▲▲▲▲ 여기까지 추가 ▲▲▲▲▲ */

/* 각 로고를 감싸는 div */
.client-logo {
  flex-shrink: 0; /* 로고 크기가 줄어들지 않도록 설정 */
  padding: 0 40px; /* 로고 사이의 좌우 간격 */
  box-sizing: border-box;
}

/* 로고 이미지 스타일 */
.client-logo img {
  /* max-height: 50px; */
  width: auto;      /* 높이에 맞춰 너비는 자동으로 조절 */
  filter: grayscale(100%);
  opacity: 1;
  transition: all 0.2s ease;
}

/* 모바일 화면 대응 */
@media (max-width: 768px) {
.client-section  {
  scale:0.9;
  padding: 30px 0px;
}
  
}


/* History Section
-------------------------------------------------- */
.history-section {
  width: 100%;
  padding: 0px 0; /* ✨ 패딩 값을 다시 늘려 상하 여백 확보 */
  color: #FFFFFF;
  overflow: hidden;
  background-color: #000000; /* 예시 배경 색상 */

}

.history-container {
  max-width: 1600px;
  padding-top: 50px;
  margin: 0 auto;
  /* padding: 0px 20px; */
  background-color: #000000;
  box-sizing: border-box;
}



.history-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 80px;
  margin: 0 0 10px 0;
  color: #FFFFFF;
}

.history-subtitle {
  font-family: 'Pretendard', sans-serif;
  font-size: 16px;
  color: #888888;
  margin: 0 0 0px 0;
}

.history-viewport {
  width: 100%;
  overflow: hidden;
  cursor: grab;
  user-select: none;
}
.history-viewport.is-grabbing {
  cursor: grabbing;
}

.history-timeline {
  position: relative;
  width: 3000px;
  height: 800px;
  /* scale:0.9; */
}

.timeline-curve {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  color: #000000;
  transform: translateY(-36%); /* ✨ 수정: 정확한 수직 중앙 정렬 */
  z-index: 0; /* ✨ 추가: 콘텐츠보다는 위로, 마커보다는 아래로 */
}

.history-year {
  position: absolute;
  width: 400px;
  height: 550px;
  transform: translateY(-10%); /* ✨ 수정: 정확한 수직 중앙 정렬 */
  z-index: 0; /* ✨ 추가: 라인보다 아래에 위치하도록 설정 */
}

.timeline-marker {
  width: 16px;
  height: 16px;
  background-color: #FFFFFF;
  border-radius: 10%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 1; /* ✨ 추가: 가장 위에 보이도록 설정 */
}

.year-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 40px;
  margin: 0 0 10px 0;
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
}

.year-events {
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  margin-top:30px;
  width: 100%;
}

.history-event {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  width: 560px;
}

.history-event .month {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 30px;
  color: #FFFFFF;
  line-height: 1;
  /* padding: 0px 5px; */
  display: inline-block;
  min-width: 50px; /* 두 자릿수도 충분히 들어갈 너비 (값은 조절 가능) */
  text-align: right; /* 숫자들을 오른쪽 기준으로 정렬 */
}

.history-event .description {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
  color: #cccccc;
  min-width: 50px;
  margin: 0;
}