/* ===== INDEX PAGE STYLES ===== */

/* Hero Banner */
.hero-banner {
  position: relative;
  width: 100%;
  height: 67.5rem; /* 1080px */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.hero-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0,0,0,0.4) 43.7%, transparent 78.2%);
  z-index: 1;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  max-width: 100rem; /* 1600px */
  width: 100%;
  padding: 0 2.5rem; /* 0 40px */
  color: var(--color-text-white);
}

.hero-title {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8px */
  margin-bottom: 2rem; /* 32px */
}

.hero-title-main {
  font-size: var(--font-size-4xl); /* 64px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-figma);
  color: var(--color-text-white);
}

.hero-title-sub {
  font-size: var(--font-size-2-5xl); /* 40px */
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-text-white);
}

/* Section Styles */
.section {
  padding: 7.5rem 0; /* 120px 0 */
  width: 100%;
}

.section-container {
  max-width: 100rem; /* 1600px */
  margin: 0 auto;
  padding: 0 2.5rem; /* 0 40px */
}

.section-title {
  text-align: center;
  margin-bottom: var(--spacing-16); /* 64px */
}

.section-title-sub {
  margin-bottom: var(--spacing-5); /* 20px */
}

.section-description {
  text-align: center;
  max-width: 80rem; /* 1280px */
  margin: 0 auto var(--spacing-16); /* 0 auto 64px */
}

.section-description p {
  font-size: var(--font-size-lg); /* 20px */
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-figma);
  color: var(--color-text-black);
}

/* We Are Section */
.we-are-image {
  width: 100%;
  height: 31.25rem; /* 500px */
  border-radius: var(--radius-xl); /* 20px */
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Why Choose Section */
.why-choose {
  background-color: var(--color-bg-contents);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.why-choose-container {
  max-width: 100rem; /* 1600px */
  margin: 0 auto;
  padding: 7.5rem 2.5rem; /* 120px 40px */
}

.why-choose-row {
  display: flex;
  gap: var(--spacing-24); /* 96px */
  align-items: center;
  margin-bottom: 1rem; /* 16px */
}

.why-choose-row:nth-child(2) .why-choose-content {
  order: 1 !important;
  text-align: right; /* 우측 정렬 */
}

.why-choose-row:nth-child(2) .why-choose-image {
  order: 2 !important;
}

.why-choose-image {
  width: 32rem; /* 512px */
  height: 15rem; /* 240px */
  border-radius: var(--radius-xl); /* 20px */
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.why-choose-content {
  flex: 1;
  padding: 0; 
}

.why-choose-title {
  font-size: var(--font-size-xl); /* 24px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-figma);
  color: var(--color-text-black);
  margin-bottom: 0.625rem; /* 10px */
}

.why-choose-text {
  font-size: var(--font-size-lg); /* 20px */
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-figma);
  color: var(--color-text-black);
}

.why-choose-text .highlight {
  color: var(--color-primary-600);
  font-weight: var(--font-weight-medium);
}

/* Business Process Section */
.process-cards {
  display: flex;
  gap: 2rem; /* 32px */
  align-items: flex-start;
}

.process-card {
  flex: 1;
  height: 35.4375rem; /* 567px */
  border-radius: var(--radius-xl); /* 20px */
  overflow: hidden;
  position: relative;
  background-color: #d9d9d9;
}

.process-card:nth-child(2) {
  margin-top: 6.25rem; /* 100px */
}

.process-card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.process-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 26.25rem; /* 420px */
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.1) 37.25%, transparent 50%);
}

.process-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem; /* 32px */
  color: var(--color-text-white);
  z-index: 2;
}

.process-card-title {
  font-size: var(--font-size-xl); /* 24px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-figma);
  color: var(--color-text-white);
  margin-bottom: 0.625rem; /* 10px */
}

.process-card-text {
  font-size: var(--font-size-lg); /* 20px */
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-figma);
  color: var(--color-text-white);
}

/* Video Section */
.video-section {
  background-color: var(--color-bg-contents);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.video-container {
  max-width: 100rem; /* 1600px */
  margin: 0 auto;
  padding: 7.5rem 2.5rem; /* 120px 40px */
  display: flex;
  gap: 2.5rem; /* 40px */
  align-items: center;
}

.video-thumbnail {
  width: 45rem; /* 720px */
  height: 24.5625rem; /* 393px */
  border-radius: var(--radius-xl); /* 20px */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.video-play-button {
  width: 5.375rem; /* 86px */
  height: 5.375rem; /* 86px */
  background-color: rgba(0,0,0,0.3);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.video-play-button:hover {
  background-color: rgba(0,0,0,0.5);
  transform: scale(1.1);
}

.video-play-button svg {
  width: 1rem; /* 16px */
  height: 1rem; /* 16px */
  color: var(--color-text-white);
}

.video-content {
  flex: 1;
}

.video-title {
  font-size: var(--font-size-3xl); /* 48px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-figma);
  color: var(--color-text-black);
  margin-bottom: var(--spacing-3); /* 12px */
  text-align: center;
}

.video-description {
  font-size: var(--font-size-lg); /* 20px */
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-figma);
  color: var(--color-text-black);
  margin-bottom: var(--spacing-5); /* 20px */
}

.video-button {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem; /* 10px */
  height: 3rem; /* 48px */
  border: none;
  background: transparent;
  color: var(--color-text-black);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.video-button svg {
  width: 1.25rem; /* 20px */
  height: 1.25rem; /* 20px */
  transform: rotate(270deg);
}

/* News Section */
.news-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-8); /* 32px */
  align-items: stretch;
}

.news-card {
  overflow: hidden;
  transition: transform 0.3s ease;
  width: 100%; /* 전체 너비 사용 */
  max-width: 25rem; /* 400px - 최대 너비 제한 */
}

.news-card:hover {
  transform: translateY(-0.5rem);
}

.news-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
  cursor: pointer;
}

.news-card-image {
  width: 100%;
  height: 15rem; /* 240px */
  border-radius: var(--radius-xl); /* 20px */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-text-200); /* 회색 배경 */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.news-thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-card:hover .news-thumbnail-image {
  transform: scale(1.05);
}

.news-card-content {
  width: 100%;
  padding: var(--spacing-5) 0; /* 20px */
}

.news-card-title {
  margin-bottom: 0.25rem; /* 4px */
}

.news-card-date {
  font-size: var(--font-size-sm); /* 14px */
  font-weight: var(--font-weight-normal);
  line-height: 1;
  color: var(--color-text-700);
}

/* Partners Section */
.partners-logos {
  display: flex;
  gap: 2rem; /* 32px */
  align-items: center;
  justify-content: center;
}

.partner-logo {
  width: 18.375rem; /* 294px */
  height: 7.5rem; /* 120px */
  border-radius: var(--radius-xl); /* 20px */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-text-white);
}

.partner-logo img {
  max-width: 50%;
  max-height: 75%;
  object-fit: contain;
}

/* Video Modal Styles */
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-modal-content {
  position: relative;
  width: 80%;
  
  height: 60vh;
  background-color: var(--color-text-black);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.video-modal-close {
  position: absolute;
  top: 11rem;
  
  color: var(--color-text-white);
  background-color: rgba(0, 0, 0, 0.7);
  border: 2px solid var(--color-text-white);
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10001;
  transition: all 0.3s ease;
}

.video-modal-close:hover {
  background-color: rgba(0, 0, 0, 0.9);
  border-color: var(--color-primary-500);
  transform: scale(1.1);
}

.video-modal-video {
  width: 100%;
  height: 100%;
}

.video-modal-video iframe {
  width: 100%;
  height: 100%;
}





/* Responsive Design - 레이아웃만 관리 */
@media (max-width: 1200px) {
  .section-container {
    padding: 0 2rem; /* 0 32px */
  }
  
  .why-choose-row {
    gap: 4rem; /* 64px */
  }
  
  .video-container {
    padding: 7.5rem 5rem; /* 120px 80px */
  }
}

@media (max-width: 992px) {
  .why-choose .why-choose-container .why-choose-content-wrapper .why-choose-row {
    flex-direction: column !important;
    gap: 2rem; /* 32px */
    text-align: center;
  }
  
  .why-choose-row:nth-child(2) .why-choose-content {
    order: 2 !important; /* 모바일에서는 order 제거 */
    text-align: center; /* 모바일에서는 중앙 정렬 */
  }
  
  .why-choose-row:nth-child(2) .why-choose-image {
    order: 1 !important; /* 모바일에서는 order 제거 */
  }
  
  .process-cards {
    display: block;
    flex-direction: column;
    gap: 2rem; /* 32px */
  }
  
  .process-card {
    height: 25rem; /* 400px - 모바일에 맞게 조정 */
    margin-bottom: 2rem; /* 카드 간 간격 */
  }
  
  .process-card:last-child {
    margin-bottom: 0; /* 마지막 카드는 하단 마진 제거 */
  }
  
  .process-card:nth-child(2) {
    margin-top: 0;
  }
  
  .video-container {
    flex-direction: column;
    text-align: center;
    padding: 7.5rem 2rem; /* 120px 32px */
  }
  
  .video-thumbnail {
    width: 100%;
    max-width: 45rem; /* 720px */
  }
  
  .news-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .news-card {
    max-width: 100%;
  }
  
  .partners-logos {
    flex-wrap: wrap;
    gap: 1.5rem; /* 24px */
  }
  
  .partner-logo {
    width: calc(50% - 0.75rem);
    min-width: 15rem; /* 240px */
  }
}

@media (max-width: 768px) {
  .hero-banner {
    height: 50rem; /* 800px */
  }
  
  .hero-content {
    padding: 0 1.5rem; /* 0 24px */
  }
  
  .section {
    padding: 5rem 0; /* 80px 0 */
  }
  
  .section-container {
    padding: 0 1.5rem; /* 0 24px */
  }
  
  .why-choose-container {
    padding: 5rem 1.5rem; /* 80px 24px */
  }
  
  .video-container {
    padding: 5rem 1.5rem; /* 80px 24px */
  }
  
  .partner-logo {
    width: 100%;
    min-width: auto;
  }
  
  .video-modal-content {
    width: 95%;
    height: 50vh;
  }
  
  .video-modal-close {
    top: 0.5rem;
    right: 1rem;
    font-size: 1.5rem;
  }
}

@media (max-width: 576px) {
  .hero-banner {
    height: 40rem; /* 640px */
  }
  
  .hero-content {
    padding: 0 1rem; /* 0 16px */
  }
  
  .section {
    padding: 3rem 0; /* 48px 0 */
  }
  
  .news-cards {
    grid-template-columns: 1fr;
  }
  
  .section-container {
    padding: 0 1rem; /* 0 16px */
  }
  
  .why-choose-container {
    padding: 3rem 1rem; /* 48px 16px */
  }
  
  .video-container {
    padding: 3rem 1rem; /* 48px 16px */
  }
  
  .why-choose-image {
    width: 100%;
    height: 12rem; /* 192px */
  }
  
  .process-card {
    height: 25rem; /* 400px */
    margin-bottom: 2rem; /* 카드 간 간격 */
  }
  
  .process-card:last-child {
    margin-bottom: 0; /* 마지막 카드는 하단 마진 제거 */
  }
  
  .video-thumbnail {
    height: 18rem; /* 288px */
  }
}

/* Animation Classes */
.fade-in {
  opacity: 0;
  transform: translateY(2rem);
  transition: all 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.slide-in-left {
  opacity: 0;
  transform: translateX(-3rem);
  transition: all 0.6s ease;
}

.slide-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-in-right {
  opacity: 0;
  transform: translateX(3rem);
  transition: all 0.6s ease;
}

.slide-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}