/* One shared gateway design for every specialist center and clinic page. */

#ys-bien-main:is(.ys-center-page, .ys-clinic-page) .ys-gateway {
  padding-bottom: clamp(100px, 8vw, 140px) !important;
}

#ys-bien-main:is(.ys-center-page, .ys-clinic-page) .ys-gateway-copy {
  margin-bottom: 32px !important;
}

#ys-bien-main:is(.ys-center-page, .ys-clinic-page) .ys-gateway-copy h2 {
  margin: 14px 0 0 !important;
  color: #223226 !important;
  font-family: "Noto Serif KR", "Nanum Myeongjo", serif !important;
  font-size: clamp(38px, 2.9vw, 56px) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

#ys-bien-main:is(.ys-center-page, .ys-clinic-page) .ys-gateway-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

#ys-bien-main:is(.ys-center-page, .ys-clinic-page) .ys-gateway-card {
  position: relative !important;
  display: flex !important;
  min-height: 164px !important;
  padding: 26px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  color: #223226 !important;
  text-decoration: none !important;
  border: 1px solid rgba(255, 255, 255, .64) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, .72), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .30)) !important;
  box-shadow: 0 22px 64px rgba(86, 104, 74, .06), inset 0 1px 0 rgba(255, 255, 255, .82) !important;
  transition: transform .24s ease, background .24s ease, border-color .24s ease, box-shadow .24s ease !important;
}

#ys-bien-main:is(.ys-center-page, .ys-clinic-page) .ys-gateway-card::before {
  display: none !important;
  content: none !important;
}

#ys-bien-main:is(.ys-center-page, .ys-clinic-page) .ys-gateway-card::after {
  position: absolute !important;
  right: 24px !important;
  bottom: 22px !important;
  color: #506c44 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  opacity: 0 !important;
  transform: translateX(-10px) !important;
  transition: opacity .22s ease, transform .22s ease !important;
  content: "→" !important;
}

#ys-bien-main:is(.ys-center-page, .ys-clinic-page) .ys-gateway-card:hover {
  color: #223226 !important;
  transform: translateY(-5px) !important;
  border-color: rgba(80, 108, 68, .20) !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, .84), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .38)) !important;
  box-shadow: 0 26px 72px rgba(34, 50, 38, .09), inset 0 1px 0 rgba(255, 255, 255, .86) !important;
}

#ys-bien-main:is(.ys-center-page, .ys-clinic-page) .ys-gateway-card:hover::after {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

#ys-bien-main:is(.ys-center-page, .ys-clinic-page) .ys-gateway-card strong {
  color: #223226 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  transform: none !important;
  transition: color .24s ease !important;
}

#ys-bien-main:is(.ys-center-page, .ys-clinic-page) .ys-gateway-card:hover strong {
  color: #223226 !important;
  transform: none !important;
}

#ys-bien-main:is(.ys-center-page, .ys-clinic-page) .ys-gateway-card em {
  position: static !important;
  display: block !important;
  color: rgba(34, 50, 38, .48) !important;
  font-family: "Manrope", "Pretendard", sans-serif !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  transition: color .24s ease !important;
}

#ys-bien-main:is(.ys-center-page, .ys-clinic-page) .ys-gateway-card:hover em {
  color: rgba(34, 50, 38, .48) !important;
  opacity: 1 !important;
  transform: none !important;
}

@media (max-width: 1024px) {
  #ys-bien-main:is(.ys-center-page, .ys-clinic-page) .ys-gateway-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  #ys-bien-main:is(.ys-center-page, .ys-clinic-page) .ys-gateway {
    padding-bottom: 72px !important;
  }

  #ys-bien-main:is(.ys-center-page, .ys-clinic-page) .ys-gateway-copy {
    margin-bottom: 22px !important;
  }

  #ys-bien-main:is(.ys-center-page, .ys-clinic-page) .ys-gateway-copy h2 {
    font-size: clamp(25px, 6.65vw, 31px) !important;
  }

  #ys-bien-main:is(.ys-center-page, .ys-clinic-page) .ys-gateway-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #ys-bien-main:is(.ys-center-page, .ys-clinic-page) .ys-gateway-card {
    min-height: 132px !important;
    padding: 22px !important;
    border-radius: 24px !important;
  }

  #ys-bien-main:is(.ys-center-page, .ys-clinic-page) .ys-gateway-card strong {
    font-size: 19px !important;
    line-height: 1.32 !important;
  }

  #ys-bien-main:is(.ys-center-page, .ys-clinic-page) .ys-gateway-card::after {
    right: 22px !important;
    bottom: 20px !important;
    font-size: 20px !important;
  }

  #ys-bien-main:is(.ys-center-page, .ys-clinic-page) .ys-gateway-card em {
    font-size: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #ys-bien-main:is(.ys-center-page, .ys-clinic-page) .ys-gateway-card {
    transition: none !important;
  }
}