/* ==================================================
타이틀 ============================================*/

.title-box {
  display: flex;              /* 옆으로 나란히 */
  align-items: center;        /* 세로 가운데 정렬 */
}

.title {
 white-space: nowrap;
}

.title-sub {
  flex: 1;               /* 남은 공간 꽉 채움 */
  overflow: hidden;      /* 너무 길면 잘리게 */
  text-overflow: ellipsis;
}
.title-btn {
  white-space: nowrap;
}

/* 모바일: 세로(아래로) 정렬 */
@media (max-width: 768px) {
  .title-box {
    flex-direction: column;   /* 아래로 쌓기 */
    align-items: stretch;     /* 가로폭 100% */
    gap: 8px;
  }

  .title-sub {
    white-space: normal;      /* 모바일에선 줄바꿈 허용 */
    overflow: visible;
    text-overflow: clip;
    margin-bottom:17px;
      
  }
    
 .title h1 {font-size: 40px; margin-bottom: 5px;}
 .title-sub h7 {font-size: 14px;}

  .title-btn {
    display: flex;
    justify-content: flex-start; /* 버튼 정렬 (center/right로 변경 가능) */
  }
}



/* =======================================
제품소개 ================================*/


 /* 섹션 컨테이너 */
.main-section{
  width:100%;
  height:650px;
  display:flex;
  position:relative;
  background-image:url('images/main/product_01.jpg'); /* 폴백 */
  background-size:cover;
  background-position:center;
  overflow:hidden;
}

/* 배경 크로스페이드 레이어들(JS가 하나 더 만듦) */
.hover-bg-layer,
.hover-bg-layer-next{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity .2s ease-in-out;
  z-index:1; pointer-events:none;
}

/* 각 칼럼 */
.menu-item{
  flex:1; position:relative; z-index:3;
  display:flex; align-items:flex-end; justify-content:flex-start;
  cursor:pointer; overflow:hidden;
}
.menu-item:not(:last-child){
  border-right:1px solid rgba(255,255,255,.2);
}

/* 항상 보이는 타이틀(h5를 밖으로 분리) */
.item-title{
  position:absolute; left:40px; bottom:7%; /* 초기 노출 위치 */
  color:#fff; margin:0; font-weight:700; font-size:30px;
  line-height:1.2; z-index:5;
  transform:translateY(0); transition:transform .45s ease, opacity .45s ease;
}

/* 파란 배경(컨텐츠 뒤, 텍스트 앞) */
.blue-box{
  position:absolute; left:0; bottom:0; width:100%; height:35%;
  background:#968568;
  transform:translateY(100%); opacity:0;
  transition:transform .5s ease, opacity .5s ease;
  z-index:3;
}

/* 본문/버튼 묶음 */
.content-inner{
  position:absolute; left:0; bottom:-27%; width:100%; height:35%;
  padding:40px; color:#fff; z-index:4;
  display:flex; flex-direction:column; gap:20px;

  /* 초기: 살짝 아래/투명 */
  transform:translateY(0); opacity:0;
  transition:transform .55s ease, opacity .55s ease;
}

/* hover 또는 active 시 상태 */
.menu-item:hover .blue-box,
.menu-item.active .blue-box{
  transform:translateY(0); opacity:.95;
}
.menu-item:hover .content-inner,
.menu-item.active .content-inner{
  transform:translateY(-105px); opacity:1;
}
.menu-item:hover .item-title,
.menu-item.active .item-title{
  transform:translateY(-100px); /* 살짝 상승 */
}

/* 화살표 버튼 */
.arrow-btn{
  position:absolute; right:35px; top:-25px;
  width:36px; height:36px; border-radius:50%;
  background:#fff; color:#222; font-size:20px; line-height:36px;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; transition:background-color .25s ease;
}
.arrow-btn:hover{ background:rgba(255,255,255,.45); }

/* ========== Responsive ========== */

/* 태블릿 이하: 세로 쌓기 시작 */
@media (max-width: 1024px) {
  .main-section{
    height: auto;                /* 섹션 높이를 컨텐츠에 맞춤 */
    flex-direction: column;      /* 가로 -> 세로 정렬 */
  }

  .menu-item{
    min-height: 320px;           /* 각 블럭의 기본 높이 */
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.2);
  }

  /* 항상 보이는 타이틀 위치 축소/상향 */
  .item-title{
    left: 20px;
    bottom: 10%;
    font-size: 22px;
  }

  /* 파란 배경과 컨텐츠 박스 높이를 조금 키움 */
  .blue-box{
    height: 50%;
  }
  .content-inner{
    height: 46%;
    padding: 24px;
    gap: 16px;
    bottom: -28%;
  }

  /* 활성/호버 시 상승량 조정(모바일은 클릭으로 active가 걸림) */
  .menu-item:hover .content-inner,
  .menu-item.active .content-inner{
    transform: translateY(-90px);
  }
  .menu-item:hover .item-title,
  .menu-item.active .item-title{
    transform: translateY(-100px);
  }

  /* 화살표 버튼 크기/위치 축소 */
  .arrow-btn{
    right: 20px;
    top: -6px;
    width: 32px; height: 32px; font-size: 18px;
  }
}

/* 모바일(폰) 최적화 */
@media (max-width: 600px) {
  .menu-item{
    min-height: 300px;
  }

  .item-title{
    left: 16px;
    bottom: 10%;
    font-size: 20px;
  }

  .blue-box{
    height: 160px;
  }
  .content-inner{
    height: 52%;
    padding: 16px;
    gap: 14px;
    bottom: -53%;
  }

  .menu-item:hover .content-inner,
  .menu-item.active .content-inner{
    transform: translateY(-95px);
  }
  .menu-item:hover .item-title,
  .menu-item.active .item-title{
    transform: translateY(-68px);
  }

  .arrow-btn{
    right: 14px;
    top: -32px;
    width: 28px; height: 28px; font-size: 16px;
  }

  /* 버튼이 많아도 줄바꿈 예쁘게 */
  .btn.btn-small.btn-white{
    display: none;
  }
}