:root{
    --maxw: 1280px;
    --navy: green;
    --text: #111;
    --muted:#5c6b78;
    --mat-max: 1200px;
    --mat-gap: clamp(24px, 4vw, 48px);
    --adv-max: 1200px;
    --ink:#111; 
    --line:#ebeff3; 
    --brand:#1f4a35;
    --serif-stack: "Times New Roman", Times, "Nimbus Roman No9 L",
                 "Liberation Serif", "Tinos", serif;
}

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: 400px;                       /* 원하는 높이 */
  position: relative;
  display: grid;
  place-items: center;                 /* 가로·세로 중앙 */
  text-align: center;
  color: #fff;                         /* 글자 색 */
  overflow: hidden;
}

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

/* 가독성 위한 어둡기 오버레이 */
.header-bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.35)); /* 전체 살짝 어둡게 */
}

/* 내용 래퍼 (너비 제한) */
.header-bg__inner{
  position: relative;                  /* 오버레이 위로 */
  z-index: 1;
  max-width: var(--vm-max, 1200px);
  width: 100%;
  padding: 0 20px;
  margin: 0 auto;
  
}

.header-bg__subtitle-wrap {
    margin-top: 20px;
    display: flex;
    gap: 10px;                /* 두 글자 사이 간격 */
    justify-content: center; /* 가운데 정렬 */
    
}
.header-bg__subtitle{
  margin: 0;
  color: white;
  font-weight: 800;
  font-size: clamp(18px, 1.6vw, 24px);
}
.header-bg__subtitle2{
  margin: 0;
  color: white;
  font-weight: 300;
  font-size: clamp(16px, 1.6vw, 20px);
  font-family: var(--serif-stack);
  width:60%;
}
/* 반응형 높이 살짝 조정(선택) */
@media (max-width: 1024px){
  .header-bg{ height: 360px; }
}


.venico-intro__logo{
  width: clamp(140px, 18vw, 220px);
  height:auto;
  display:block;
  margin: 0 auto clamp(4px, 1vw, 8px);
  margin-top: clamp(12px, 4vw, 40px); /* 수치는 취향대로 조절 */
}
/*-----------------------intro-----------------*/

.venico-intro{
  background:#fff;
  color:var(--ink);
  padding: clamp(20px, 4vw, 40px) 20px clamp(16px, 3vw, 24px);
}


.venico-intro__container{
  max-width: 768px;
  margin: 0 auto;
  text-align:left;
}


/* venico 인트로의 span 간 간격 */
.venico-intro__container span{
  display: block;          /* 인라인 → 블록 */
  margin: 10px 0;          /* 위아래 여백 */
  line-height: 1.9;        /* 가독성 */
  font-weight: 500;
}

/* 두 번째 span만 조금 더 띄우고 싶다면(선택) */
.venico-intro__container p {
  margin: 0 0 1.2em; /* 아래쪽만 여백 */
}

.venico-intro__container span + span{
  margin-top: 64px;
}

/* ----------------------- Materials Section ----------------- */
.materials{
    margin-bottom:80px;
}
.materials__container
{
    max-width:var(--mat-max);
    margin:0 auto;
    padding:48px 24px 0px;

}
.materials__title{font-size:28px;font-weight:500; margin-bottom: 20px;}

/* 그리드 레이아웃 설정 */
.materials__list {
    display: grid;
    /* 반응형 그리드: 최소 260px 너비 유지하며 자동 채움 */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 40px;
    max-width:var(--mat-max);
    margin:0 auto;
    padding:0px 24px 0px;

}

/* 개별 아이템 카드 */
.mat-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* 텍스트 중앙 정렬 */
    text-align: center;
}

/* 이미지 영역 */
.mat-item__img-box {
    margin: 0 0 20px 0; /* 이미지와 텍스트 사이 간격 */
    width: 100%;
    border-radius: 10px; /* 이미지 모서리 둥글게 (이미지 참고) */
    overflow: hidden;
    background-color: #f4f4f4; /* 이미지 로딩 전 배경색 */
}

.mat-item__img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 찌그러지지 않고 꽉 차게 */
    display: block;
    transition: transform 0.3s ease;
}

/* (선택사항) 마우스 올렸을 때 이미지 살짝 확대 */
.mat-item:hover .mat-item__img-box img {
    transform: scale(1.05);
}

/* 텍스트 정보 영역 */
.mat-item__info {
    color: var(--text);
}


.mat-item__code {
    font-size: 18px;
    font-weight: 500; /* 굵게 */
}




.mat-item__size {
  font-size: 14px;
  color: #111;
  font-weight: 400;
    
}

.mat-item__thickness {
  font-size: 14px;
  color: #111;
  font-weight: 400;
}