@font-face {
  font-family: 'PretendardGOV';
  src: url('/resources/fonts/hub/PretendardGOVVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

html:has(#hub-box) {
  font-size: clamp(10px, 1.25vw, 16px);

  @media (max-width: 767px) {
    & {
      font-size: 16px;
    }
  }
}

body:has(#hub-box) {
  margin: 0;
  padding: 0;
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    text-decoration: none;
    font-family: 'PretendardGOV';
  }
  img {
    display: block;
  }
}

#hub-box {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4.5rem;
  overflow: hidden; /* 스케일된 배경이 넘치지 않도록 */
  background: #000;
  @media (max-width: 767px) {
    & {
      gap: min(1.5rem, 3dvh);
    }
  }
  .bg-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;

    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transform: scale(1.1);
      transition: opacity 0.3s ease; /* opacity는 0.3초로 빠르게 */

      &:nth-child(1) {
        opacity: 1; /* 기본 배경 */
        transform: scale(1);
      }
    }
  }

  /* 첫 번째 박스 호버 시 두 번째 이미지 표시 */
  &:has(.box-item:nth-child(1):hover) .bg-box img:nth-child(2) {
    opacity: 1;
    animation: bgScaleIn 3s ease-out forwards;
  }

  /* 두 번째 박스 호버 시 세 번째 이미지 표시 */
  &:has(.box-item:nth-child(2):hover) .bg-box img:nth-child(3) {
    opacity: 1;
    animation: bgScaleIn 3s ease-out forwards;
  }

  /* 호버 시 기본 배경 숨기기 */
  &:has(.box-item:hover) .bg-box img:nth-child(1) {
    opacity: 0;
  }

  .title-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    white-space: nowrap;

    @media (max-width: 767px) {
      & {
        margin-top: 9.625dvh;
        gap: 0;
        flex-direction: column;
      }
    }
    .img-box {
      width: 43.125rem;
      @media (max-width: 767px) {
        & {
          width: 17.875rem;
        }
      }
      img {
        width: 100%;
        height: auto;
        object-fit: contain;
      }
    }
    .separator {
      width: 0.0625rem;
      height: 2.5rem;
      background: #fff;
      @media (max-width: 767px) {
        & {
          display: none;
        }
      }
    }
    .title-text {
      font-size: 3.75rem;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.0625rem;
      color: #fff;
      text-shadow: 0rem 0rem 0.25rem #1b1b1c33;

      @media (max-width: 767px) {
        & {
          font-size: 2.75rem;
        }
      }
    }
  }
  .content-box {
    display: flex;
    justify-content: center;
    align-items: center;
    @media (max-width: 767px) {
      & {
        flex: 1;
        margin-bottom: 11.625dvh;
      }
    }
    .inner-box {
      width: 100%;
      height: 100%;
      max-width: 90rem;
      display: flex;
      @media (max-width: 767px) {
        & {
          flex-direction: column;
          gap: 1.5rem;
          padding: 0 1rem 0 1rem;
        }
      }

      .box-item {
        padding: 6.6875rem 0;
        width: 100%;
        height: 100%;
        margin: 0 1.125rem;
        border-radius: 3rem;
        background: #ffffff14;
        backdrop-filter: blur(1rem);
        border: 1px solid rgba(205, 205, 205, 0.5);
        position: relative;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        br {
          display: none;
        }
        @media (max-width: 767px) {
          & {
            margin: 0;
            padding: 0.5rem 0;
            height: min(15.5rem, 31dvh);
            border-radius: 2.25rem;
            br {
              display: block;
            }
          }
        }
        &:nth-child(1):hover,
        &:nth-child(1):focus {
          background: #0070bd;
          border-color: #0070bd;

          .btn-text {
            background: #fff;
            & > p {
              color: #0b50d0;
            }
            & > img {
              filter: brightness(0) saturate(100%) invert(21%) sepia(89%) saturate(1800%) hue-rotate(180deg) brightness(90%) contrast(90%);
            }
          }
        }
        &:nth-child(2):hover,
        &:nth-child(2):focus {
          background: #00a7ac;
          border-color: #00a7ac;
          .btn-text {
            background: #fff;
            & > p {
              color: #007578;
            }
            & > img {
              filter: brightness(0) saturate(100%) invert(21%) sepia(89%) saturate(1800%) hue-rotate(180deg) brightness(90%) contrast(90%);
            }
          }
        }

        .img-box {
          height: 2rem;
          width: 100%;
          background-size: auto 100%;
          background-repeat: no-repeat;
          background-position: center center;
          @media (max-width: 767px) {
            & {
              height: 1.5rem;
            }
          }
        }
        &:nth-child(1) .img-box {
          background-image: url('/resources/images/hub/logo_incheon.svg');
        }

        &:nth-child(2) .img-box {
          background-image: url('/resources/images/hub/logo_ifez.svg');
        }
        &:nth-child(1):hover .img-box,
        &:nth-child(1):focus .img-box {
          background-image: url('/resources/images/hub/logo_incheon_active.svg');
        }
        &:nth-child(2):hover .img-box,
        &:nth-child(2):focus .img-box {
          background-image: url('/resources/images/hub/logo_ifez_active.svg');
        }

        .title-text {
          text-align: center;
          font-size: 3.5rem;
          font-weight: 700;
          line-height: 1.5;
          letter-spacing: 0.0625rem;
          color: #fff;
          text-shadow: 0rem 0rem 0.25rem #1b1b1c33;
          @media (max-width: 767px) {
            & {
              font-size: 2rem;
            }
          }
        }
        .sub-title-text {
          text-align: center;
          font-size: 1rem;
          font-weight: 700;
          line-height: 1.5;
          letter-spacing: 0.0625rem;
          color: #fff;
          text-shadow: 0rem 0rem 0.25rem #1b1b1c33;
          margin-bottom: 1.25rem;

          @media (max-width: 767px) {
            & {
              font-size: 1rem;
              margin-bottom: min(0.75rem, 1.5dvh);
              line-height: 1.2;
            }
          }
        }

        .btn-text {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0.6875rem 1rem;
          border: 0.0625rem solid #fff;
          gap: 0.25rem;
          border-radius: 312.5rem;
          margin-bottom: 2rem;
          & > p {
            font-size: 1.0625rem;
            font-weight: 400;
            line-height: 1.5;
            letter-spacing: 0;
            color: #fff;
          }
          & > img {
            width: 1.25rem;
            height: 1.25rem;
          }
          @media (max-width: 767px) {
            & {
              padding: min(0.6875rem, 1.375dvh) min(1rem, 2dvh);
              margin-bottom: 0.5rem;
              & > p {
                font-size: 0.9375rem;
              }
              & > img {
                width: 1rem;
                height: 1rem;
              }
            }
          }
        }
      }
    }
  }
}

@keyframes bgScaleIn {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}