/* ==============================
   DESIGNMAIN 상단 메인비주얼 영역
   ============================== */

/* 1920*799 기준 PC 전체 */
.designmain-visual {
  width: 100%;
  min-width: 360px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* 기존 배경 제거: 배경이미지는 .designmain-inner에서 처리 */
  background: #87dbff; /* 또는 원하는 bg색상 */
  transition: background-image 0.2s;
  overflow: hidden;
}

.designmain-inner {
  width: 1920px;
  max-width: 100vw;
  height: calc(100vw * 799 / 1920);
  max-height: 799px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  /* 추가: PC/태블릿에서는 BG를 이쪽에! */
  background: url('images/allcomponent_1920.png') center center no-repeat;
  background-size: 100% 100%;
}

/* 1549px ~ 1025px: div 세로도 비율 축소, 백그라운드도 세로 비율로 축소 */
@media (max-width: 1749px) {
  .designmain-inner {
    width: 100vw;
    height: calc(100vw * 799 / 1920);
    max-width: 1749px;
    max-height: 799px;
    background-size: 100% 100%;
  }
  .designmain-visual {
    height: calc(100vw * 799 / 1920);
    min-height: 240px;
  }
}

/* 1549px ~ 1025px: div 세로도 비율 축소, 백그라운드도 세로 비율로 축소 */
@media (max-width: 1549px) {
  .designmain-inner {
    width: 100vw;
    height: calc(100vw * 799 / 1920);
    max-width: 1550px;
    max-height: 799px;
    background-size: 100% 100%;
  }
  .designmain-visual {
    height: calc(100vw * 799 / 1920);
    min-height: 240px;
  }
}

/* 1024px ~ 801px: 백그라운드, 비율 교체, inner도 반응형 */
@media (max-width: 1024px) {
  .designmain-inner {
    height: 617px;
    max-width: 100vw;
    width: 100vw;
    max-height: 617px;
    background-image: url('images/allcomponent_1024.png');
    background-size: 100% 100%;
  }
  .designmain-visual {
    height: 617px;
  }
}

/* 1024px 이하 : inner, visual 모두 가로 비율 축소(세로 617px → 더 줄어듦) */
@media (max-width: 1024px) {
  .designmain-visual,
  .designmain-inner {
    height: calc(100vw * 617 / 1024);
    max-height: 617px;
    min-height: 220px;
  }
}

/* 800px 이하 : 모바일 배경, 800px 전용 이미지, 483px 기준 */
@media (max-width: 800px) {
  .designmain-inner {
    height: 483px;
    width: 100vw;
    max-width: 100vw;
    max-height: 483px;
    background-image: url('images/allcomponent_800.png');
    background-size: 100% 100%;
  }
  .designmain-visual {
    height: 483px;
  }
  .designmain-visual,
  .designmain-inner {
    height: calc(100vw * 483 / 800);
    min-height: 180px;
    max-height: 483px;
  }
}

/* 600px 이하: BG이미지를 내부 img로 교체, 기존 BG 제거 */
@media (max-width: 600px) {
  .designmain-inner {
    background: none !important;
    width: 100% !important;
    padding: 0;
    height: auto !important;
    max-height: none !important;
    min-height: unset !important;
    display: block;
  }
  .designmain-visual {
    background: none !important;
    width: 100%;
    padding: 0;
    height: auto !important;
    max-height: none !important;
    min-height: unset !important;
    display: block;
  }
  .designmain-inner img.designmain-moimg {
    width: 100% !important;
    height: auto !important;
    display: block;
    border: none;
    background: none;
    margin: 0 auto;
  }
}

/* 혹시 작은 모바일 기기에서 최대 높이 제한 */
@media (max-width: 420px) {
  .designmain-visual,
  .designmain-inner {
    min-height: 240px;
  }
}


@media (max-width: 600px) {
  .designmain-inner img.designmain-moimg { display: block !important; }
}
@media (min-width: 601px) {
  .designmain-inner img.designmain-moimg { display: none !important; }
}