/* Large devices */
@media (max-width: 1199px) {
  .h1,
  h1 {
    font-size: 54px;
    line-height: 1.3;
  }
  .h2,
  h2 {
    font-size: 36px;
    line-height: 1.3;
  }
  .h3,
  h3 {
    font-size: 30px;
  }
  .h4,
  h4 {
    font-size: 24px;
  }
  .h5,
  h5 {
    font-size: 20px;
  }
  .h6,
  h6 {
    font-size: 16px;
  }
}

/* Small devices */
@media (max-width: 767px) {
  .h1,
  h1 {
    font-size: 40px;
  }
  .h2,
  h2 {
    font-size: 34px;
    line-height: 1.3;
  }
  .h3,
  h3 {
    font-size: 26px;
  }
  .h4,
  h4 {
    font-size: 22px;
  }
  .h5,
  h5 {
    font-size: 18px;
  }
  .h6,
  h6 {
    font-size: 16px;
  }
}

/* Extra small devices */
@media (max-width: 575px) {
  .h1,
  h1 {
    font-size: 28px;
    line-height: 1.35;
  }
  .h2,
  h2 {
    font-size: 22px;
  }
  .h3, h3{font-size:18px;}
  .h4,
  h4 {
    font-size: 14px;
    line-height: 1.333;
  }
  p {
    font-size: 14px !important;
    line-height: 1.333;
    margin:5px 0 !important;
  }
}

/* Extra small devices */
@media (max-width: 375px) {
  .h1,
  h1 {
    font-size: 32px;
  }
  
}





/* 화면 너비가 769px 이상일 때 (태블릿/PC) */
@media (min-width: 769px) {
  .pc-only {
    display: block !important; /* 기본값인 none을 덮어써서 보이게 함 */
  }
  .mobile-only {
    display: none !important; /* 기본값인 block을 덮어써서 숨김 */
  }
}

/* ✅ 모바일일 경우 (최대 576px) 반 크기로 축소 */
@media (max-width: 576px) {

  /* =================================
   Breadcumb Overlay & Text Color
  ====================================*/

  /* 1. 반투명한 흰색 오버레이(마스크)를 추가합니다. */
  .breadcumb-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); /* 30% 투명도의 흰색 배경 */
    z-index: 1; /* 오버레이를 콘텐츠 아래, 배경 이미지 위에 위치시킵니다. */
  }

  /* 2. 텍스트가 있는 콘텐츠 영역을 오버레이 위로 올립니다. */
  .breadcumb-wrapper .container {
    position: relative; /* z-index를 적용하기 위해 필요합니다. */
    z-index: 2; /* 오버레이(z-index: 1)보다 위에 위치시킵니다. */
  }
  .breadcumb-wrapper .breadcumb-title {
    color: #000000; /* 검은색 */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  }

  .step-wrapper {
    gap: 0.3rem;
    font-size: 14px;
  }
  .step-box {
    flex: 1 1 90px;
    min-width: 90px;
    max-width: 90px;
    padding: 0.8rem 0.5rem;
    min-height: 80px;
  }

  .step-box:not(:last-child)::after {
    width: 0.5rem;
    right: -0.5rem;
  }

  #hotel-popup-main, #thotel-popup-main {
    min-width: 0 !important; /* ✅ 최소 너비 제한을 해제합니다. */
    width: 90vw;  /* ✅ 화면 너비의 90%를 차지하도록 설정합니다. (추천) */
    max-width: 300px !important; /* 기존 max-width는 그대로 두셔도 좋습니다. */
  }


  .widget-area {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .resort-del{position: relative; text-align: right;}
  .th-btn{font-size: 14px;
  font-weight: 400;
  border-radius: 5px;}
  .th-btn.style4 {padding: 5px 10px;}




  
}