:root{
  --vm-max:1320px;
}
html,body{
    width:100%;
    height:100vh;
    margin:0;                /* 기본 여백 제거 */
    padding:0;
    font-family: "Pretendard";
    line-height: 1.4;          /* 행간 140% */
    letter-spacing: -0.025em;   /* 자간 -2.5% */
    color:#111;
    background-color: #ffffff; /* 원하는 색 */
}


/* ───────── 헤더 배경 ───────── */
.header-bg{
  height: 800px;                       /* 원하는 높이 */
  position: relative;
  display: grid;
  place-items: center;                 /* 가로·세로 중앙 */
  text-align: center;
  color: #fff;                         /* 글자 색 */
  overflow: hidden;
}

/* 배경 이미지 적용 */
.header-bg--image{
  background: url('/asset/images/about/main.png') center bottom/cover no-repeat;
}

.vm-section{
    max-width:var(--vm-max);
    display:flex;
    justify-content: center; /* 가로 */
    align-items: center;      /* 세로 */
    margin-inline: auto;
    margin-top : 100px;
}

.vm-hero{
  margin:16px auto;
  display:flex;
  gap:160px;
  
  
}

.vm-hero__eyebrow{
  font-weight:600;
  font-size:42px;
}

.vm-hero__lead{
    width:672px;
    font-size:clamp(16px, 1.4vw, 18px);
}

.manufacturing{
    max-width:var(--vm-max);
    display:flex;
    justify-content: center; /* 가로 */
    align-items: center;      /* 세로 */
    margin-inline: auto;
    margin-top : 100px;
    flex-direction: column;
    gap:40px;
    margin-bottom: 100px;
}
.manufacturing__hero{
    text-align: center;
    display: flex;
    flex-direction: column; /* 세로 스택이면 */
    gap:8px;
}
.manufacturing__title{
    font-size: 32px;
    font-weight: 600;
}
.manufacturing__lead{
    font-size: 16px;
    font-weight: 500;
    color:#767676;
}
.manufacturing__wrap{
    display: flex;            /* 가로 방향 */
    flex-direction: row;      /* 기본값이라 생략 가능 */
    gap:12px;
}
.manufacturing__wrap img{
    width: 432px;
    height: 280px;
    object-fit: cover; /* 크롭 허용(권장) / contain은 여백 */
}
.manufacturing__cate{
    display: flex;
    flex-direction: column; /* 세로 스택이면 */
    gap:20px;
}
.manufacturing__cate__hero{
    width: 432px;
    display: flex;
    flex-direction: column; /* 세로 스택이면 */
    gap:12px;
}
.manufacturing__cate__title{
    font-size: 20px;
    font-weight: 600;
}
.manufacturing__cate__lead{
    font-size: 14px;
    font-weight: 500;
    color:#767676;
}




/* 1024px 이하 반응형 */
@media (max-width: 1024px) {

  .header-bg{
    height: 520px;         /* 헤더 높이 축소 */
    padding-inline: 24px;
  }
  .header-bg--image{
    background-position: center bottom;
    background-size: cover;
  }

  .vm-section{
    margin-top: 10px;
    padding-inline: 24px;  /* 좌우 여백 */
  }

  .vm-hero{
    flex-direction: column;      /* 세로 스택 */
    gap: 24px;                   /* 간격 축소 */
    margin: 8px auto 0;
  }
  .vm-hero__eyebrow{
    font-size: clamp(28px, 5vw, 36px);
  }
  .vm-hero__lead{
    width: 100%;                 /* 고정폭 해제 */
    font-size: clamp(15px, 1.6vw, 17px);
  }
  .manufacturing{
    margin-top: 20px;
    margin-bottom: 40px;
    gap: 24px;
    padding-inline: 24px;
    align-items: stretch;        /* 폭 100% 사용 */
  }
  .manufacturing__hero{
    text-align: left;            /* 가독성 위해 좌정렬 */
    gap: 6px;
  }
  .manufacturing__title{
    font-size: clamp(28px, 5vw, 36px);
  }
  .manufacturing__lead{
    font-size: 14px;
  }
  .manufacturing__wrap{
    flex-direction: column;      /* 이미지+텍스트 세로 스택 */
    gap: 16px;
  }
  .manufacturing__wrap img{
    width: 100%;
    height: auto;                /* 비율 유지 */
    aspect-ratio: 27 / 17;       /* 대략 432x280 비율 유지 */
    object-fit: cover;
  }

  .manufacturing__cate{
    gap: 4px;
  }
  .manufacturing__cate__hero{
    width:100%;
    gap: 4px;
  }
  .manufacturing__cate__title{
    font-size: 18px;
  }
  .manufacturing__cate__lead{
    font-size: 12px;
    
  }
}

/* 600px 이하(폰 최적화) 추가 보정 */
@media (max-width: 600px) {
  .header-bg{ height: 440px; padding-inline: 16px; }
  .vm-section{ padding-inline: 16px; }
  .manufacturing{ padding-inline: 16px; }

  .vm-hero{ gap: 16px; }
  .vm-hero__eyebrow{ font-size: clamp(24px, 6.2vw, 30px); }
  .vm-hero__lead{ font-size: 15px; }

  .manufacturing__title{ font-size: clamp(20px, 5.2vw, 24px); }
  .manufacturing__lead{ font-size: 13px; }

  .manufacturing__wrap img{
    aspect-ratio: 16 / 10;      /* 더 와이드하게 보정(선택) */
  }
}