.brand-section1 {
  position: relative;
  width: 100%;
  overflow: hidden;
  text-align: left;
  color: white;
}

/* ✅ 공통 이미지 스타일: 마치 background-size: cover 처럼 보이게 */
.brand-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 핵심: cover 방식으로 배경처럼 */
  z-index: 0;
  display: block;
}

/* ✅ 오버레이 (기존 background-color: rgba(141, 79, 11, 0.6)) */
.brand-section1::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(141, 79, 11, 0.6);
  z-index: 1;
}

.brand-section1-inner {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  padding: 160px 50px 120px;
}

.brand-title {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 24px;
    letter-spacing: -2.2px;
}

.brand-subtitle {
    font-size: 20px;
    font-weight: 500;
    opacity: 0.9;
}

.section2-title,
.section3-title,
.performance-section4-title {
    font-size: 30px;
    font-weight: 700;
    color: #000;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.section2-highlight,
.section3-subtitle,
.performance-section4-subtitle,
.performance-section5-subtitle {
    display: inline-block;
    background-color: #ffe478;
    color: #000;
    font-size: 20px;
    font-weight: 400;
    padding: 10px 20px;
    border-radius: 10px;
}

.brand-section2 {
    background: #fef9f3;
    padding: 80px 24px;
}

.brand-section2-inner {
    max-width: 1800px;
    margin: 0 auto;
    display: flex;
    align-items: stretch; /* 텍스트 영역과 이미지 높이를 맞춤 */
    gap: 60px;
}

.section2-image {
    flex: 1 1 50%;
    display: flex; /* ✅ flex 사용 */
    justify-content: center; /* 좌우 가운데 정렬 */
    align-items: center; /* 상하 가운데 정렬 */
    overflow: hidden;
}

.section2-image img {
    width: 100%;
    height: auto; /* 시안처럼 세로 공간 꽉 채우기 */
    object-fit: contain; /* 이미지 비율 유지하며 잘림 처리 */
    display: block;
    border-radius: 0; /* 시안처럼 둥근 모서리 제거 */
}

.section2-text {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section2-title {
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #1e1e1e;
    margin-bottom: 20px;
}

.section2-highlight {
    font-family: 'Pretendard', sans-serif;
    background-color: #ffE478;
    padding: 14px 18px;
    font-weight: 400;
    font-size: 20px;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.5;
}

.section2-body {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.7;
    color: #444;
}


.brand-section3 {
    background: #fff;
    padding: 100px 24px;
}

.section3-inner {
    max-width: 1900px;
    margin: 0 auto;
    text-align: center;
}

.section3-title {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 10px;
}

.section3-cards {
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-top: 40px;
    flex-wrap: wrap;
}

.card {
    flex: 1 1 calc(33.33% - 16px);
    height: 900px; /* 적절한 높이 */
    overflow: hidden; /* 이것도 있으면 더 안전함 */

    /*background: transparent;*/
    text-align: center;
    position: relative;
    border-radius: 10px;
    /*opacity: 0;*/
    /*animation: fadeInUp 1s ease forwards;*/
    background-size: cover;
    /*background-position: center;*/
    background-repeat: no-repeat; /* ✅ 필수 */
    /*border-radius: 10px;*/
}


.card:nth-child(1) {
    background-image: url("../img/new/brand/brand_section3_img1.png");
}

.card:nth-child(2) {
    background-image: url("../img/new/brand/brand_section3_img2.png");
}

.card:nth-child(3) {
    background-image: url("../img/new/brand/brand_section3_img3.png");
}

/* 오버레이 */
.card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 135, 57, 0.85);
    z-index: 1;
    border-radius: 10px;

    /* 초기 상태 숨기고 아래에서 올라오기 */
    opacity: 0;
    transform: translateY(30px);
    /*animation: fadeOverlay 1s ease forwards;*/
}

.card img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.card-text {
    position: relative; /* ✅ 반드시 있어야 위에 올라감 */
    z-index: 2;
    top: 50%;
    left: 50%;
        /*transform: translate(-50%, -50%) translateY(30px); !* Y 오프셋 추가 *!*/

    color: #fff;
    text-align: center;

    opacity: 0;
    /*animation: fadeText 1s ease forwards;*/
}

.card.animate::before {
    animation: fadeOverlay 1s ease forwards;
}
.card.animate .card-text {
    animation: fadeText 1s ease forwards;
}

.card-title {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 8px;
}

.card-subtitle {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 6px;
}

.card-content {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

/* 4) 각 카드별 딜레이 (기존 nth-child 값을 재활용) */
.card:nth-child(1).animate::before,
.card:nth-child(1).animate .card-text {
    animation-delay: 0.6s;
}

.card:nth-child(2).animate::before,
.card:nth-child(2).animate .card-text {
    animation-delay: 1.2s;
}

.card:nth-child(3).animate::before,
.card:nth-child(3).animate .card-text {
    animation-delay: 1.8s;
}

@keyframes fadeOverlay {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2) 텍스트 애니메이션 (센터링 + Y축 이동) */
@keyframes fadeText {
  from {
    opacity: 0;
    /* 애초에 설정해 두었던 translate(-50%, -50%)를 여기에도 */
    transform: translate(-50%, -50%) translateY(30px);
  }
  to {
    opacity: 1;
    /* 끝에도 반드시 센터링 유지 */
    transform: translate(-50%, -50%) translateY(0);
  }
}



.brand-section4 {
    background: #fef9f3;
    padding: 120px 33px;
}

.section4-inner {
    max-width: 1800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 100px;
    flex-wrap: nowrap;
}

.section4-text {
    flex: 1 1 50%;
    text-align: right;
}

.section4-title {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 14px;
}

.section4-highlight {
    background-color: #ffe478;
    padding: 10px 16px;
    display: inline-block;
    border-radius: 4px;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
}

.section4-body {
    font-size: 20px;
    line-height: 1.8;
    color: #444;
}

.section4-image {
    flex: 1 1 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section4-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.char {
  opacity: 0;
  display: inline-block;
  animation: fadeIn 0.05s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}