.machine_intro_2,
.machine_intro_inner_2{
  overflow: visible !important;
}
.machine_intro_inner_2{
  position: relative;
  z-index: 1;
}


/* ✅ 배경 기준 잡기 */
.machine_intro_2{
  position: relative !important;
  min-height: 100vh !important;
  height: auto !important;
  background: transparent !important;
  isolation: isolate !important; /* ✅ z-index 스택 분리(강력) */
  overflow: visible !important;
}

/* 배경 레이어를 무조건 "뒤에" 깔고 화면에 표시 */
.machine_intro_2 > .machine_bg{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.machine_intro_2 > .machine_bg > img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* 컨텐츠는 배경 위로 무조건 올리기 */
.machine_intro_2 > .machine_intro_inner_2{
  padding-top: 200px;
  padding-bottom: 200px;
  position: relative !important;
  z-index: 2 !important;

}

/* =========================
   배경
   ========================= */

.machine_bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

.machine_bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================
   ✅ machine modal (추가)
   ========================= */

.machine_cell{ 
  cursor:pointer;
  margin: 0px 0px;
 }

.machine_modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;

  /* ✅ 중앙정렬 컨테이너로 사용 */
  align-items: center;
  justify-content: center;

  /* ✅ 화면 가장자리 여백 (잘림 방지) */
  padding: 24px;
  box-sizing: border-box;
}
.machine_modal.is-open{ display:flex; }

.machine_modal_dim{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.65) !important;
  backdrop-filter: blur(6px);
  z-index:0;
}

.machine_modal_panel{
  position:relative;
  z-index: 1;


  width:min(560px, 56vw);
  
  max-height: 70vh;
  overflow:auto;


  margin: 0;               /* ✅ 기존 7vh auto 0 제거 */
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: 18px;

  background:#FDD000 !important;
  border: 1px solid rgba(255, 200, 0, 0.65) !important;
  box-shadow: 0 0 28px rgba(255, 200, 0, 0.35) !important;
}

.machine_modal_close{
  position:absolute;
  right:14px;
  top:10px;
  font-size: 34px;
  background: transparent;
  color: #cfffff;
  border:0;
  cursor:pointer;
}

.machine_modal_title{
  margin:0 0 6px;
  font-size: clamp(18px, 2.2vw, 28px);
  color:#ffffff;
}

.machine_modal_desc{
  margin:0 0 14px;
  color: rgba(255,255,255,0.8);
  line-height:1.5;
}

.machine_modal_slider{
  display:flex;
  align-items:center;
  gap:12px;
}

.machine_modal_img{
  width:100%;
  height:auto;
  max-height: 52vh;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}

.machine_modal_prev,
.machine_modal_next{
  width:44px;
  height:44px;
  border-radius: 999px;
  border: 1px solid rgba(207,255,255,0.25);
  background: rgba(0,0,0,0.25);
  color:#cfffff;
  cursor:pointer;
}

.machine_modal_meta{
  margin-top: 14px;
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  line-height:1.6;
  white-space: pre-line;
}


/*그리드*/
/* ✅ 기기소개: 2 / 3 / 4 를 "가운데"로 보이게 배치 */
.machine_grid{
  display:grid !important;
  grid-template-columns: repeat(4, 370px) !important; /* 핵심 */
  justify-content: center !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}

/* =========================
   개별 좌우 간격 조절 가능 버전
   ========================= */

/* 1줄 2개 */
.machine_grid > .machine_cell:nth-child(1){
  grid-column: 2;
  margin-right:360px;
}

.machine_grid > .machine_cell:nth-child(2){
  grid-column: 3;
  margin-left:360px;
}


/* 2줄 3개 */
.machine_grid > .machine_cell:nth-child(3){
  grid-column: 1;
  margin-top:120px;
  margin-left:100px;
}

.machine_grid > .machine_cell:nth-child(4){
  grid-column: 2;
  margin-left:360px;
  margin-top:120px;
}

.machine_grid > .machine_cell:nth-child(5){
  grid-column: 4;
  margin-top:120px;
  margin-right: 100px;
}


/* 3줄 4개 */
.machine_grid > .machine_cell:nth-child(6){
  grid-column: 1;
  margin-top:120px;
}

.machine_grid > .machine_cell:nth-child(7){
  grid-column: 2;
  margin-top:120px;
}

.machine_grid > .machine_cell:nth-child(8){
  grid-column: 3;
  margin-top:120px;
}

.machine_grid > .machine_cell:nth-child(9){
  grid-column: 4;
  margin-top:120px;
}


/* 기본: 4개 줄(8칸에서 2칸씩 = 4개) */
/* ✅ hover 배경(노란색) 천천히 올라오게 */
.machine_grid > .machine_cell{
  position: relative;         /* 오버레이 기준 */
  border-radius: 18px;        /* 필요하면 */
  overflow: visible;           /* 오버레이가 밖으로 안삐져나오게 */
  justify-self: center;  /* 셀은 열 가운데로 */
}

.machine_grid > .machine_cell::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255, 215, 0, 0.22); /* 노란색(원하는 진하게 조절) */
  opacity:0;
  transition: opacity .5s ease;        /* 천천히 */
  pointer-events:none;
  z-index:0;

  border-radius: 18px;
}

/* ✅ 반응형(태블릿): 3개씩 */
@media (max-width: 900px){
  .machine_grid{ grid-template-columns: repeat(6, 1fr) !important; }
  .machine_grid > .machine_cell{ grid-column: span 2 !important; }

  /* 태블릿에서는 강제 배치 해제(깨짐 방지) */
  .machine_grid > .machine_cell:nth-child(1),
  .machine_grid > .machine_cell:nth-child(2),
  .machine_grid > .machine_cell:nth-child(3),
  .machine_grid > .machine_cell:nth-child(4),
  .machine_grid > .machine_cell:nth-child(5){
    grid-column: span 2 !important;
  }
}

/* ✅ 반응형(모바일): 2개씩 */
@media (max-width: 520px){
  .machine_grid{ grid-template-columns: repeat(4, 1fr) !important; }
  .machine_grid > .machine_cell{ grid-column: span 2 !important; }
}


/* ✅ 셀이 “한 줄로 쭉” 늘어나는 거 방지 */
.machine_cell{
  min-height: clamp(110px, 11vw, 160px);
}

/* ✅ 박스(네온) 자체 줄이기 - 가장 체감 큼 */
.machine_box{
  width: min(100%, clamp(140px, 14vw, 190px));
  height: auto;
  transition: opacity .25s ease;
  will-change: opacity;
}

.machine_box.is-fading{
  opacity: 0;
}



/*이미지 두장을 겹쳐서 변하는 것처럼 보이게 하는 부분*/
/* ✅ hover 크로스페이드(두 장 겹치기) */
/* ✅ hover 크로스페이드(두 장 겹치기) */
.machine_cell{ position: relative; }

.machine_box_wrap{
  position: relative;
  display: inline-block;
}

/* 기본값(없으면 229로) */
.machine_cell .machine_box_wrap{ width:229px; }

/* data-size별 크기 */
.machine_cell[data-size="229"] .machine_box_wrap{ width:260px; }
.machine_cell[data-size="500"] .machine_box_wrap{ width:370px; }

/* 두 이미지 모두 wrap 기준 100% */
.machine_box_wrap img,
.machine_box_wrap .machine_box,
.machine_box_wrap .machine_box_hover{
  width:100%;
  height:auto;
  display:block;
}

.machine_box_wrap .machine_box_hover{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition: opacity .35s ease;
}

.machine_box_wrap .machine_box{
  transition: opacity .35s ease;
}

.machine_cell.is-hover .machine_box{ opacity:0; }
.machine_cell.is-hover .machine_box_hover{ opacity:1; }

/*타이틀 이미지*/
.machine_top_title{
  position:absolute;
  top:5%;              /* 위에서 5% */
  left:50%;
  transform:translateX(-50%);
  width:clamp(200px, 25vw, 500px);
  z-index:5;
  pointer-events:none;
}



/*모달(팝업창)*/
.machine_modal_body{
  display:flex;
  flex-direction:column;
  gap: 14px;
}


.machine_modal_topimg,
.machine_modal_bottomimg
.machine_modal_extraimg{
  height:auto;
  width:80%;
  max-height: 42vh;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}
/*유튜브 아래 이미지 2개*/
.machine_modal_extraimg{
  width:60%;
  max-height:42vh;
  object-fit:contain;
  border-radius:14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}


/* 글 1줄(하얀색 밑줄) */
.machine_modal_line1{
  color:#000000; /* 글씨 검정 */

  font-size: clamp(18px, 2.1vw, 26px);
  font-weight: 800;
  line-height: 1.25;

  display:inline-block;
  padding-bottom: 6px;

  border-bottom: 2px solid #ffffff; /* 밑줄 흰색 */
}

/* 글 1줄 */
.machine_modal_line2{
  color: rgba(255,255,255,0.82);
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.55;
  white-space: pre-line;
}


/*유튜브*/
.machine_modal_video{
  width:100%;
  aspect-ratio: 16/9;
}

.machine_modal_video iframe{
  width:100%;
  height:100%;
  border-radius:14px;
}

/* ✅ 그리드( fadeUp2 ) 띠용 등장 */
.machine_intro_2 .fadeUp2{
  opacity: 0;
  transform: scale(0.72);
  will-change: transform, opacity;
}

.machine_intro_2 .fadeUp2.bb-show{
  animation: bb_pop_in .36s cubic-bezier(.2, 1.4, .35, 1) both;
}

@keyframes bb_pop_in {
  0%   { transform: scale(0.72); opacity: 0; }
  65%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1.00); opacity: 1; }
}