/* =========================================================
   YEON VENDOR / GALLERY SECTIONS
========================================================= */

.yeon-vendor-section {
  position: relative !important;
  padding: 76px 0 84px !important;
  overflow: hidden !important;
}

.yeon-vendor-section .vendor-inner {
  width: min(1600px, calc(100% - 56px)) !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
}

.vendor-hall {
  background: #fffbf2 !important;
}

.vendor-studio {
  background: #e3ebff !important;
}

.vendor-honeymoon {
  background: #7cbdff !important;
}

.vendor-dress,
.vendor-movie {
  background: #ffffff !important;
}

.vendor-brand {
  background: #fffbf2 !important;
}

.vendor-head {
  display: grid !important;
  grid-template-columns: 370px 1fr !important;
  gap: 36px !important;
  align-items: end !important;
  margin-bottom: 30px !important;
}

.vendor-title {
  text-align: left !important;
}

.vendor-title p {
  margin: 0 0 6px !important;
  color: #111111 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 19px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

.vendor-studio .vendor-title p {
  color: #111 !important;
}

.vendor-dress .vendor-title p {
  color: #9eacd6 !important;
}

.vendor-brand .vendor-title p {
  color: #dbcfb4 !important;
}

.vendor-title h3 {
  margin: 0 !important;
  color: #111111 !important;
  font-size: 60px !important;
  line-height: 1.22 !important;
  letter-spacing: -0.015em !important;
}

#weddingdress .vendor-title h3 strong {
  color: #8b9cd7 !important;
}

.vendor-title h3 strong {
  display: block !important;
  color: #111111 !important;
  /* font-size: 65px !important; */
  line-height: 1.14 !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

.vendor-studio .vendor-title h3,
.vendor-honeymoon .vendor-title h3 {
  color: #ffffff !important;
  font-weight: 800 !important;
}

.vendor-studio .vendor-title h3 strong {
  color: #111 !important;
}

.vendor-studio .vendor-title h3 .vendor-hot-label {
  color: #aeb9df !important;
  font-family: inherit !important;
  font-weight: 800 !important;
}

.vendor-movie .vendor-title h3 strong {
  color: #aeb9df !important;
}

.vendor-brand .vendor-title h3 strong {
  color: #dbcfb4 !important;
}

.vendor-honeymoon .vendor-title h3 strong {
  color: #111111 !important;
}

.vendor-tabs {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

.vendor-tabs button {
  min-width: 110px !important;
  height: 45px !important;
  padding: 0 16px !important;
  border: 1px solid #dce2ee !important;
  background: #ffffff !important;
  color: #333333 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 0 !important;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease !important;
}

#weddinghall .vendor-tabs button {
  border: 1px solid #e5dcc8 !important;
}

.vendor-tabs button:hover {
  transform: translateY(-2px) !important;
  border-color: #aeb9df !important;
}

.vendor-tabs button.is-active {
  background: #aeb9df !important;
  border-color: #aeb9df !important;
  color: #ffffff !important;
}

#weddinghall .vendor-tabs button.is-active {
  background: #333 !important;
  border-color: #333 !important;
  color: #ffffff !important;
}

#weddinghall .vendor-tabs button:hover {
  transform: translateY(-2px) !important;
  border-color: #111 !important;
}

#best-brand .vendor-tabs button.is-active {
  background: #333 !important;
  border-color: #333 !important;
  color: #ffffff !important;
}

#best-brand .vendor-tabs button:hover {
  transform: translateY(-2px) !important;
  border-color: #111 !important;
}

.vendor-tabs-dark button.is-active {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
}

.brand-tabs {
  justify-content: flex-end !important;
}

.vendor-grid {
  display: grid !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.vendor-grid-5 {
  grid-template-columns: repeat(5, 1fr) !important;
}

.vendor-grid-4 {
  grid-template-columns: repeat(4, 1fr) !important;
}

.vendor-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  /* min-height: 320px !important; */
  background: #ffffff !important;
  overflow: hidden !important;
  opacity: 1 !important;
  transform: scale(1) !important;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease !important;
}

.vendor-card.is-hidden {
  display: none !important;
}

.vendor-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 28px rgba(85, 95, 130, 0.12) !important;
}

.vendor-card img {
  position: absolute !important;
  inset: 0 0 46px 0 !important;
  width: 100% !important;
  height: calc(100% - 46px) !important;
  object-fit: cover !important;
  z-index: 1 !important;
}

.vendor-card strong {
  position: relative !important;
  z-index: 2 !important;
  height: 46px !important;
  background: #ffffff !important;
  color: #111111 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

.vendor-card-large {
  /* min-height: 600px !important; */
}

.vendor-brand .vendor-card {
  /* min-height: 320px !important; */
  background: #fafafa !important;
}

.vendor-brand .vendor-card img {
  object-fit: cover !important;
  /*padding: 40px 36px 60px !important;*/
  background: #fafafa !important;
}

/* 드레스 화살표 */
.vendor-arrows {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  margin-top: 28px !important;
}

.vendor-arrows button {
  position: relative !important;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid #b9bdc7 !important;
  background: #ffffff !important;
}

.vendor-arrows button + button {
  margin-left: -1px !important;
}

.vendor-arrows button::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 10px !important;
  height: 10px !important;
  border-top: 1px solid #777 !important;
  border-left: 1px solid #777 !important;
}

.vendor-arrows button:first-child::before {
  transform: translate(-35%, -50%) rotate(-45deg) !important;
}

.vendor-arrows button:last-child::before {
  transform: translate(-65%, -50%) rotate(135deg) !important;
}

/* 혼수 버튼 */
.honsu-benefit-btn {
  position: relative !important;
  width: 220px !important;
  height: 50px !important;
  margin: 34px auto 0 !important;
  background: #c5baa0 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  transition:
    transform 0.25s ease,
    background 0.25s ease !important;
}

.honsu-benefit-btn:hover {
  background: #111111 !important;
  transform: translateY(-4px) !important;
}

.honsu-benefit-btn span {
  font-size: 25px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
}

/* 등장 모션 */
.yeon-vendor-section.is-visible .vendor-card {
  animation: vendorCardUp 0.55s ease both !important;
}

.yeon-vendor-section.is-visible .vendor-card:nth-child(1) {
  animation-delay: 0.03s !important;
}
.yeon-vendor-section.is-visible .vendor-card:nth-child(2) {
  animation-delay: 0.06s !important;
}
.yeon-vendor-section.is-visible .vendor-card:nth-child(3) {
  animation-delay: 0.09s !important;
}
.yeon-vendor-section.is-visible .vendor-card:nth-child(4) {
  animation-delay: 0.12s !important;
}
.yeon-vendor-section.is-visible .vendor-card:nth-child(5) {
  animation-delay: 0.15s !important;
}

@keyframes vendorCardUp {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 반응형 */
@media (max-width: 1200px) {
  .vendor-head {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .vendor-tabs {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}

@media (max-width: 900px) {
  .vendor-grid-5 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .vendor-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .vendor-title h3 {
    font-size: 40px !important;
  }

  .vendor-title h3 strong {
    /* font-size: 46px !important; */
  }
}

@media (max-width: 600px) {
  .yeon-vendor-section {
    padding: 56px 0 62px !important;
  }

  .yeon-vendor-section .vendor-inner {
    width: calc(100% - 28px) !important;
  }

  .vendor-grid-5,
  .vendor-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .vendor-card {
    min-height: 180px !important;
  }

  .vendor-card-large {
    min-height: 300px !important;
  }

  .vendor-tabs button {
    min-width: calc(50% - 4px) !important;
    font-size: 12px !important;
  }

  .vendor-title h3 {
    font-size: 34px !important;
  }

  .vendor-title h3 strong {
    /* font-size: 38px !important; */
  }
}

/* =========================================================
   VENDOR SLIDER - 웨딩샵 / 스튜디오 / 허니문
========================================================= */

.vendor-dress .vendor-slider-wrap,
.vendor-studio .vendor-slider-wrap,
.vendor-honeymoon .vendor-slider-wrap {
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}

.vendor-dress .vendor-slide-track,
.vendor-studio .vendor-slide-track,
.vendor-honeymoon .vendor-slide-track {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 12px !important;
  transition: transform 0.55s cubic-bezier(0.22, 0.8, 0.25, 1);
  will-change: transform !important;
}

.vendor-dress .vendor-slide-track .vendor-card,
.vendor-studio .vendor-slide-track .vendor-card,
.vendor-honeymoon .vendor-slide-track .vendor-card {
  flex: 0 0 calc((100% - 36px) / 4) !important;
  min-width: calc((100% - 36px) / 4) !important;
}

.vendor-dress .vendor-slide-track .vendor-card.is-hidden,
.vendor-studio .vendor-slide-track .vendor-card.is-hidden,
.vendor-honeymoon .vendor-slide-track .vendor-card.is-hidden {
  display: none !important;
}

/* 우측 아래 화살표 */
.vendor-dress .vendor-arrows,
.vendor-studio .vendor-arrows,
.vendor-honeymoon .vendor-arrows {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0 !important;
  margin-top: 28px !important;
}

.vendor-dress .vendor-arrows button,
.vendor-studio .vendor-arrows button,
.vendor-honeymoon .vendor-arrows button {
  position: relative !important;
  width: 48px !important;
  height: 48px !important;
  border: 1px solid #b9bdc7 !important;
  background: #ffffff !important;
  border-radius: 0 !important;
  transition:
    background 0.25s ease,
    border-color 0.25s ease !important;
}

.vendor-dress .vendor-arrows button + button,
.vendor-studio .vendor-arrows button + button,
.vendor-honeymoon .vendor-arrows button + button {
  margin-left: -1px !important;
}

.vendor-dress .vendor-arrows button::before,
.vendor-studio .vendor-arrows button::before,
.vendor-honeymoon .vendor-arrows button::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 14px !important;
  height: 14px !important;
  border-top: 2px solid #777d8c !important;
  border-left: 2px solid #777d8c !important;
}

.vendor-dress .vendor-prev::before,
.vendor-studio .vendor-prev::before,
.vendor-honeymoon .vendor-prev::before {
  transform: translate(-35%, -50%) rotate(-45deg) !important;
}

.vendor-dress .vendor-next::before,
.vendor-studio .vendor-next::before,
.vendor-honeymoon .vendor-next::before {
  transform: translate(-65%, -50%) rotate(135deg) !important;
}

.vendor-dress .vendor-arrows button:hover,
.vendor-studio .vendor-arrows button:hover,
.vendor-honeymoon .vendor-arrows button:hover {
  background: #aeb9df !important;
  border-color: #aeb9df !important;
}

.vendor-dress .vendor-arrows button:hover::before,
.vendor-studio .vendor-arrows button:hover::before,
.vendor-honeymoon .vendor-arrows button:hover::before {
  border-color: #ffffff !important;
}

/* Keep honeymoon navigation visible even when all cards fit in one view. */
.vendor-honeymoon .vendor-arrows .swiper-button-lock {
  display: block !important;
}

/* 반응형 */
@media (max-width: 900px) {
  .vendor-dress .vendor-slide-track .vendor-card,
  .vendor-studio .vendor-slide-track .vendor-card,
  .vendor-honeymoon .vendor-slide-track .vendor-card {
    flex: 0 0 calc((100% - 12px) / 2) !important;
    min-width: calc((100% - 12px) / 2) !important;
  }
}

@media (max-width: 600px) {
  .vendor-dress .vendor-slide-track .vendor-card,
  .vendor-studio .vendor-slide-track .vendor-card,
  .vendor-honeymoon .vendor-slide-track .vendor-card {
    flex: 0 0 100% !important;
    min-width: 100% !important;
  }

  .vendor-dress .vendor-arrows,
  .vendor-studio .vendor-arrows,
  .vendor-honeymoon .vendor-arrows {
    margin-top: 18px !important;
  }
}

/* =========================================================
   YEON REAL SKETCH SECTION
========================================================= */

.yeon-sketch-section {
  position: relative !important;
  padding: 78px 0 92px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  text-align: center !important;
}

.yeon-sketch-section .sketch-inner {
  position: relative !important;
  width: min(1360px, calc(100% - 40px)) !important;
  max-width: 1360px !important;
  margin: 0 auto !important;
  z-index: 2 !important;
}

.sketch-title {
  margin-bottom: 42px !important;
  text-align: center !important;
}

.sketch-title h3 {
  margin: 0 !important;
  color: #111111 !important;
  font-size: 60px !important;
  line-height: 1.22 !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
}

.sketch-title h3 strong {
  display: block !important;
  color: #8b9cd7 !important;
  font-size: 70px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.sketch-title h3 strong em {
  display: inline-block !important;
  margin-right: 8px !important;
  color: #9eacd6 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 64px !important;
  font-weight: 400 !important;
  font-style: italic !important;
  letter-spacing: -0.08em !important;
  /*transform: translateY(6px) rotate(-5deg) !important;*/
}

.sketch-visual-wrap {
  position: relative !important;
  width: 100% !important;
  height: 600px !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

.sketch-slide {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(24px) scale(0.98) !important;
  transition:
    opacity 0.55s ease,
    transform 0.55s ease,
    visibility 0.55s ease !important;
}

.sketch-slide.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
}

.sketch-slide img {
  display: block !important;
  width: 100% !important;
  height: 560px !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 0px !important;
}

.sketch-slide::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 50px 0 !important;
  background: #eef1f8 !important;
  z-index: -1 !important;
  border-radius: 4px !important;
}

/* 코딩 정보박스 */
.sketch-info-card {
  position: absolute !important;
  right: -14px !important;
  bottom: 26px !important;
  width: 455px !important;
  min-height: 104px !important;
  padding: 24px 30px !important;
  background: #dfe6f7 !important;
  border-radius: 0px !important;
  text-align: left !important;
  z-index: 10 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.sketch-info-card strong {
  display: block !important;
  color: #111111 !important;
  font-size: 25px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: -0.055em !important;
}

.sketch-info-card p {
  margin: 8px 0 0 !important;
  color: #8a8a8a !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  letter-spacing: -0.04em !important;
}

.sketch-info-card.is-changing {
  animation: sketchInfoChange 0.45s ease both !important;
}

@keyframes sketchInfoChange {
  0% {
    opacity: 0;
    transform: translateX(22px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* STEP */
.sketch-step-wrap {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 0 !important;
  margin-top: 18px !important;
  padding-top: 22px !important;
}

.sketch-line {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 22px !important;
  height: 1px !important;
  background: #9eacd6 !important;
  z-index: 1 !important;
}

.sketch-step {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 52px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: #111111 !important;
  text-align: center !important;
  cursor: pointer !important;
  margin-top: 10px;
}

.sketch-step i {
  position: absolute !important;
  top: -50px !important;
  left: 50% !important;
  width: 40px !important;
  height: 40px !important;
  transform: translateX(-50%) scale(0) !important;
  border-radius: 50% !important;
  background: #9eacd6 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  opacity: 0 !important;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease !important;
}

.sketch-step i::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -6px !important;
  transform: translateX(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 7px solid transparent !important;
  border-right: 7px solid transparent !important;
  border-top: 9px solid #9eacd6 !important;
}

.sketch-step span {
  display: block !important;
  color: #212121 !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.045em !important;
  transition: color 0.25s ease !important;
}

.sketch-step.is-active i {
  opacity: 1 !important;
  transform: translateX(-50%) scale(1) !important;
  animation: sketchStepPop 0.42s cubic-bezier(0.18, 1.55, 0.42, 1) both !important;
}

.sketch-step:hover span {
  color: #9eacd6 !important;
}

@keyframes sketchStepPop {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.4);
  }
  65% {
    opacity: 1;
    transform: translateX(-50%) scale(1.18);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

.sketch-watermark {
  position: absolute !important;
  left: 50% !important;
  bottom: -110px !important;
  transform: translateX(-50%) !important;
  z-index: -1 !important;
  color: #f0f2f8 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 92px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

/* 등장 모션 */
.yeon-sketch-section.is-visible .sketch-title {
  animation: sketchTitleUp 0.72s ease both !important;
}

.yeon-sketch-section.is-visible .sketch-visual-wrap {
  animation: sketchVisualUp 0.75s ease 0.12s both !important;
}

.yeon-sketch-section.is-visible .sketch-step-wrap {
  animation: sketchStepWrapUp 0.7s ease 0.22s both !important;
}

@keyframes sketchTitleUp {
  0% {
    opacity: 0;
    transform: translateY(26px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sketchVisualUp {
  0% {
    opacity: 0;
    transform: translateY(34px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sketchStepWrapUp {
  0% {
    opacity: 0;
    transform: translateY(22px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 반응형 */
@media (max-width: 1024px) {
  .sketch-title h3 {
    font-size: 38px !important;
  }

  .sketch-title h3 strong {
    font-size: 42px !important;
  }

  .sketch-title h3 strong em {
    font-size: 54px !important;
  }

  .sketch-info-card {
    right: 20px !important;
    width: 420px !important;
  }
}

@media (max-width: 768px) {
  .yeon-sketch-section {
    padding: 58px 0 70px !important;
  }

  .yeon-sketch-section .sketch-inner {
    width: calc(100% - 28px) !important;
  }

  .sketch-title {
    margin-bottom: 30px !important;
  }

  .sketch-title h3 {
    font-size: 30px !important;
  }

  .sketch-title h3 strong {
    font-size: 33px !important;
  }

  .sketch-title h3 strong em {
    font-size: 44px !important;
    display: block !important;
    margin: 0 auto 2px !important;
  }

  .sketch-visual-wrap {
    height: auto !important;
    padding-bottom: 0 !important;
  }

  .sketch-slide {
    position: relative !important;
    display: none !important;
    inset: auto !important;
  }

  .sketch-slide.is-active {
    display: block !important;
  }

  .sketch-slide img {
    height: 270px !important;
  }

  .sketch-info-card {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    width: calc(100% - 24px) !important;
    min-height: auto !important;
    margin: -38px auto 0 !important;
    padding: 20px 22px !important;
    /* border-radius: 6px !important; */
  }

  .sketch-info-card strong {
    font-size: 21px !important;
  }

  .sketch-info-card p {
    font-size: 14px !important;
  }

  .sketch-step-wrap {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px 0 !important;
    margin-top: 34px !important;
    padding-top: 0 !important;
  }

  .sketch-line {
    display: none !important;
  }

  .sketch-step {
    min-height: 48px !important;
    display: flex;
    align-items: center;
  }

  .sketch-step i {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: scale(0) !important;
    margin: 0 auto 8px !important;
  }

  .sketch-step i::after {
    display: none !important;
  }

  .sketch-step span {
    font-size: 13px !important;
  }

  .sketch-watermark {
    font-size: 48px !important;
    bottom: -54px !important;
  }

  .sketch-step.is-active i {
    background: #9eacd6 !important;
    transform: scale(1) !important;
  }

  .sketch-step i {
    transform: scale(1) !important;
    opacity: 1 !important;
    /* transform: translateX(-50%) scale(1) !important; */
    animation: sketchStepPop 0.42s cubic-bezier(0.18, 1.55, 0.42, 1) both !important;
    background: #e7ebf7 !important;
    position: static !important;
  }
}

@media (max-width: 480px) {
  .sketch-title h3 {
    font-size: 26px !important;
  }

  .sketch-title h3 strong {
    font-size: 29px !important;
  }

  .sketch-slide img {
    height: 230px !important;
  }

  .sketch-step-wrap {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* =========================================================
   YEON TIMING / PERK SECTION
========================================================= */

.yeon-timing-section {
  position: relative !important;
  padding: 82px 0 86px !important;
  background: linear-gradient(135deg, #a4bdff 0%, #dee7ff 100%) !important;
  overflow: hidden !important;
}

.yeon-timing-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(255, 255, 255, 0.22),
      transparent 30%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(255, 255, 255, 0.12),
      transparent 34%
    ) !important;
  pointer-events: none !important;
}

.yeon-timing-section .timing-inner {
  position: relative !important;
  z-index: 2 !important;
  width: min(1400px, calc(100% - 40px)) !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 640px !important;
  gap: 70px !important;
  align-items: center !important;
}

.timing-title {
  text-align: left !important;
  opacity: 0;
  transform: translateX(-34px);
}

.timing-title p {
  margin: 0 0 12px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 23px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
}

.timing-title h3 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 65px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

.timing-title h3 strong {
  display: block !important;
  color: #111111 !important;
  font-size: 70px !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
}

.timing-title span {
  display: block !important;
  margin-top: 22px !important;
  color: rgba(255, 255, 255, 0.62) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.38em !important;
  line-height: 1.2 !important;
}

.timing-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.timing-grid li {
  opacity: 0;
  transform: translateY(34px);
}

.timing-card {
  width: 100% !important;
  min-height: 230px !important;
  padding: 34px 24px 30px !important;
  background: #ffffff !important;
  border-radius: 5px !important;
  text-align: center !important;
  box-shadow: 0 12px 24px rgba(75, 86, 126, 0.08) !important;
  transition:
    transform 0.32s ease,
    box-shadow 0.32s ease !important;
}

.timing-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 36px rgba(75, 86, 126, 0.16) !important;
}

.timing-icon {
  height: 64px !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 50px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 6px 10px rgba(111, 125, 180, 0.18)) !important;
}

.timing-card strong {
  display: block !important;
  color: #111111 !important;
  font-size: clamp(20px, 2.6vw, 28px) !important;
  line-height: 1.34 !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

.timing-card p {
  margin: 4px 0 0 !important;
  color: #9eacd6 !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}

@media (max-width: 1400px) {
  .timing-title h3 strong,
  .timing-title h3 {
    font-size: 61px !important;
  }
}

/* 모션 */
.yeon-timing-section.is-visible .timing-title {
  animation: timingTitleIn 0.75s ease forwards !important;
}

.yeon-timing-section.is-visible .timing-grid li {
  animation: timingCardUp 0.68s ease forwards !important;
}

.yeon-timing-section.is-visible .timing-grid li:nth-child(1) {
  animation-delay: 0.1s !important;
}

.yeon-timing-section.is-visible .timing-grid li:nth-child(2) {
  animation-delay: 0.22s !important;
}

.yeon-timing-section.is-visible .timing-grid li:nth-child(3) {
  animation-delay: 0.34s !important;
}

.yeon-timing-section.is-visible .timing-grid li:nth-child(4) {
  animation-delay: 0.46s !important;
}

.yeon-timing-section.is-visible .timing-icon {
  animation: timingIconPop 0.65s cubic-bezier(0.18, 1.55, 0.42, 1) both !important;
}

.yeon-timing-section.is-visible .timing-grid li:nth-child(1) .timing-icon {
  animation-delay: 0.36s !important;
}

.yeon-timing-section.is-visible .timing-grid li:nth-child(2) .timing-icon {
  animation-delay: 0.48s !important;
}

.yeon-timing-section.is-visible .timing-grid li:nth-child(3) .timing-icon {
  animation-delay: 0.6s !important;
}

.yeon-timing-section.is-visible .timing-grid li:nth-child(4) .timing-icon {
  animation-delay: 0.72s !important;
}

@keyframes timingTitleIn {
  0% {
    opacity: 0;
    transform: translateX(-34px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes timingCardUp {
  0% {
    opacity: 0;
    transform: translateY(34px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes timingIconPop {
  0% {
    transform: scale(0.45) rotate(-8deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.18) rotate(4deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

/* 반응형 */
@media (max-width: 1024px) {
  .yeon-timing-section .timing-inner {
    grid-template-columns: 1fr !important;
    gap: 38px !important;
  }

  .timing-title {
    text-align: center !important;
  }

  .timing-title h3 {
    font-size: 44px !important;
  }

  .timing-title h3 strong {
    font-size: 48px !important;
  }

  .timing-grid {
    width: min(560px, 100%) !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 768px) {
  .yeon-timing-section {
    padding: 58px 0 64px !important;
  }

  .yeon-timing-section .timing-inner {
    width: calc(100% - 28px) !important;
  }

  .timing-title p {
    font-size: 17px !important;
  }

  .timing-title h3 {
    font-size: 33px !important;
  }

  .timing-title h3 strong {
    font-size: 37px !important;
  }

  .timing-title span {
    margin-top: 16px !important;
    font-size: 11px !important;
    letter-spacing: 0.22em !important;
  }

  .timing-grid {
    gap: 12px !important;
  }

  .timing-card {
    min-height: 190px !important;
    padding: 26px 12px 24px !important;
  }

  .timing-icon {
    height: 52px !important;
    font-size: 42px !important;
  }

  .timing-card strong {
    font-size: 18px !important;
  }

  .timing-card p {
    font-size: 17px !important;
  }
}

@media (max-width: 480px) {
  .timing-grid {
    grid-template-columns: 1fr !important;
  }

  .timing-title h3 {
    font-size: 29px !important;
  }

  .timing-title h3 strong {
    font-size: 32px !important;
  }

  .timing-card {
    min-height: auto !important;
    padding: 28px 18px 26px !important;
  }
}

/* =========================================================
   YEON FAQ SECTION
========================================================= */

.yeon-faq-section {
  position: relative !important;
  padding: 82px 0 88px !important;
  background: #f5f7fb !important;
  overflow: hidden !important;
  text-align: center !important;
}

.yeon-faq-section .faq-inner {
  width: min(960px, calc(100% - 40px)) !important;
  max-width: 960px !important;
  margin: 0 auto !important;
}

.faq-title {
  margin-bottom: 42px !important;
  text-align: center !important;
}

.faq-title h3 {
  margin: 0 !important;
  color: #111111 !important;
  font-size: 60px !important;
  line-height: 1.28 !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

.faq-title h3 strong {
  display: block !important;
  color: #9eacd6 !important;
  font-size: 65px !important;
  font-weight: 800 !important;
}

.yeon-faq-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.yeon-faq-list li {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

.faq-question {
  position: relative !important;
  width: 100% !important;
  min-height: 58px !important;
  padding: 0 64px 0 42px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #222222 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  text-align: left !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.04em !important;
  box-shadow: 0 8px 18px rgba(83, 95, 130, 0.06) !important;
  cursor: pointer !important;
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease !important;
}

.faq-question span {
  flex: 0 0 auto !important;
  color: #9eacd6 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  font-family: Georgia, "Times New Roman", serif !important;
}

.faq-question::after {
  content: "+" !important;
  position: absolute !important;
  right: 34px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #9eacd6 !important;
  font-size: 25px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  transition: transform 0.25s ease !important;
}

.yeon-faq-list li.is-open .faq-question {
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(83, 95, 130, 0.08) !important;
}

.yeon-faq-list li.is-open .faq-question::after {
  content: "-" !important;
  transform: translateY(-50%) rotate(180deg) !important;
}

.faq-question:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 24px rgba(83, 95, 130, 0.1) !important;
}

.faq-answer {
  display: none;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 18px 38px 4px 38px !important;
  text-align: left !important;
}

.yeon-faq-list li.is-open .faq-answer {
  display: flex;
}

.faq-answer i {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #8b9cd7 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 16px !important;
  line-height: 0.75 !important;
  font-style: normal !important;
  letter-spacing: -0.06em !important;
}

.faq-answer p {
  margin: 6px 0 0 !important;
  color: #555555 !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  letter-spacing: -0.03em !important;
}

/* 등장 모션 */
.yeon-faq-section.is-visible .faq-title {
  animation: faqTitleUp 0.7s ease both !important;
}

.yeon-faq-section.is-visible .yeon-faq-list li {
  animation: faqItemUp 0.55s ease both !important;
}

.yeon-faq-section.is-visible .yeon-faq-list li:nth-child(1) {
  animation-delay: 0.05s !important;
}
.yeon-faq-section.is-visible .yeon-faq-list li:nth-child(2) {
  animation-delay: 0.1s !important;
}
.yeon-faq-section.is-visible .yeon-faq-list li:nth-child(3) {
  animation-delay: 0.15s !important;
}
.yeon-faq-section.is-visible .yeon-faq-list li:nth-child(4) {
  animation-delay: 0.2s !important;
}
.yeon-faq-section.is-visible .yeon-faq-list li:nth-child(5) {
  animation-delay: 0.25s !important;
}
.yeon-faq-section.is-visible .yeon-faq-list li:nth-child(6) {
  animation-delay: 0.3s !important;
}
.yeon-faq-section.is-visible .yeon-faq-list li:nth-child(7) {
  animation-delay: 0.35s !important;
}
.yeon-faq-section.is-visible .yeon-faq-list li:nth-child(8) {
  animation-delay: 0.4s !important;
}

@keyframes faqTitleUp {
  0% {
    opacity: 0;
    transform: translateY(26px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes faqItemUp {
  0% {
    opacity: 0;
    transform: translateY(22px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 반응형 */
@media (max-width: 768px) {
  .yeon-faq-section {
    padding: 58px 0 64px !important;
  }

  .yeon-faq-section .faq-inner {
    width: calc(100% - 28px) !important;
  }

  .faq-title {
    margin-bottom: 30px !important;
  }

  .faq-title h3 {
    font-size: 31px !important;
  }

  .faq-title h3 strong {
    font-size: 34px !important;
  }

  .faq-question {
    min-height: 54px !important;
    padding: 0 48px 0 24px !important;
    font-size: 16px !important;
  }

  .faq-question span {
    font-size: 21px !important;
  }

  .faq-question::after {
    right: 24px !important;
  }

  .faq-answer {
    padding: 14px 20px 4px 20px !important;
    gap: 10px !important;
  }

  .faq-answer i {
    flex-basis: 34px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 14px !important;
  }

  .faq-answer p {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
}

@media (max-width: 480px) {
  .faq-title h3 {
    font-size: 27px !important;
  }

  .faq-title h3 strong {
    font-size: 30px !important;
  }

  .faq-question {
    font-size: 15px !important;
    padding-left: 20px !important;
  }
}

/* =========================================================
   YEON LOCATION SECTION
========================================================= */

.yeon-location-section {
  position: relative !important;
  padding: 82px 0 86px !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.yeon-location-section .location-inner {
  width: min(1040px, calc(100% - 40px)) !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 420px !important;
  gap: 72px !important;
  align-items: center !important;
}

.yeon-location-section .location-copy {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: left !important;
  box-shadow: none !important;
  opacity: 0;
  transform: translateX(-34px);
}

.location-kicker {
  margin: 0 0 12px !important;
  color: #555555 !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  letter-spacing: -0.04em !important;
}

.yeon-location-section .location-copy h3 {
  margin: 0 !important;
  color: #111111 !important;
  font-size: 45px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -0.065em !important;
}

.yeon-location-section .location-copy h3 strong {
  display: block !important;
  color: #9eacd6 !important;
  font-size: 47px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  letter-spacing: -0.07em !important;
}

.location-info-list {
  margin: 32px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 11px !important;
}

.location-info-list li {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  color: #111111 !important;
  font-size: 19px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
}

.location-info-list li b {
  color: #e9474b !important;
  font-weight: 700 !important;
}

/* 아이콘 CSS */
.loc-icon {
  position: relative !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  display: inline-block !important;
  color: #9eacd6 !important;
}

.loc-date::before {
  content: "" !important;
  position: absolute !important;
  left: 2px !important;
  top: 3px !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid #9eacd6 !important;
  border-radius: 50% !important;
}

.loc-date::after {
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  top: 7px !important;
  width: 6px !important;
  height: 7px !important;
  border-left: 2px solid #9eacd6 !important;
  border-bottom: 2px solid #9eacd6 !important;
}

.loc-pin::before {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  top: 1px !important;
  width: 14px !important;
  height: 14px !important;
  background: #9eacd6 !important;
  border-radius: 50% 50% 50% 0 !important;
  transform: rotate(-45deg) !important;
}

.loc-pin::after {
  content: "" !important;
  position: absolute !important;
  left: 9px !important;
  top: 6px !important;
  width: 4px !important;
  height: 4px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
}

.loc-ticket::before {
  content: "" !important;
  position: absolute !important;
  left: 1px !important;
  top: 5px !important;
  width: 19px !important;
  height: 13px !important;
  border: 2px solid #9eacd6 !important;
  border-radius: 3px !important;
  transform: rotate(-22deg) !important;
}

.loc-ticket::after {
  content: "" !important;
  position: absolute !important;
  left: 8px !important;
  top: 3px !important;
  width: 2px !important;
  height: 17px !important;
  background: repeating-linear-gradient(
    to bottom,
    #9eacd6 0,
    #9eacd6 3px,
    transparent 3px,
    transparent 5px
  ) !important;
  transform: rotate(-22deg) !important;
}

.location-apply-btn {
  position: relative !important;
  width: 290px !important;
  height: 56px !important;
  margin-top: 38px !important;
  background: #9eacd6 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 52px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  overflow: hidden !important;
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease !important;
}

.location-apply-btn span {
  font-size: 28px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}

.location-apply-btn::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -80% !important;
  width: 55% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.28),
    transparent
  ) !important;
  transform: skewX(-24deg) !important;
  animation: locationBtnShine 2.8s ease-in-out infinite !important;
}

.location-apply-btn:hover {
  background: #111111 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 28px rgba(83, 95, 130, 0.18) !important;
}

.yeon-location-section .location-photo {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
  opacity: 0;
  transform: translateX(34px);
}

.yeon-location-section .location-photo img {
  display: block !important;
  width: 100% !important;
  height: 430px !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.yeon-location-section.is-visible .location-copy {
  animation: locationCopyIn 0.72s ease forwards !important;
}

.yeon-location-section.is-visible .location-photo {
  animation: locationPhotoIn 0.72s ease 0.16s forwards !important;
}

@keyframes locationCopyIn {
  0% {
    opacity: 0;
    transform: translateX(-34px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes locationPhotoIn {
  0% {
    opacity: 0;
    transform: translateX(34px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes locationBtnShine {
  0% {
    left: -80%;
  }
  44%,
  100% {
    left: 130%;
  }
}

/* 기존 map-box 숨김 */
.yeon-location-section .map-box {
  display: none !important;
}

/* 반응형 */
@media (max-width: 1024px) {
  .yeon-location-section .location-inner {
    grid-template-columns: 1fr 380px !important;
    gap: 46px !important;
  }

  .yeon-location-section .location-copy h3 {
    font-size: 39px !important;
  }

  .yeon-location-section .location-copy h3 strong {
    font-size: 41px !important;
  }

  .yeon-location-section .location-photo img {
    height: 390px !important;
  }
}

@media (max-width: 768px) {
  .yeon-location-section {
    padding: 58px 0 64px !important;
  }

  .yeon-location-section .location-inner {
    width: calc(100% - 28px) !important;
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .yeon-location-section .location-copy {
    text-align: center !important;
  }

  .location-kicker {
    font-size: 15px !important;
  }

  .yeon-location-section .location-copy h3 {
    font-size: 31px !important;
  }

  .yeon-location-section .location-copy h3 strong {
    font-size: 34px !important;
  }

  .location-info-list {
    width: fit-content !important;
    max-width: 100% !important;
    margin: 26px auto 0 !important;
    gap: 10px !important;
  }

  .location-info-list li {
    font-size: 16px !important;
    text-align: left !important;
  }

  .location-apply-btn {
    width: 260px !important;
    height: 52px !important;
    margin-top: 30px !important;
    gap: 34px !important;
    font-size: 15px !important;
  }

  .yeon-location-section .location-photo img {
    height: 300px !important;
  }
}

@media (max-width: 480px) {
  .yeon-location-section .location-copy h3 {
    font-size: 27px !important;
  }

  .yeon-location-section .location-copy h3 strong {
    font-size: 30px !important;
  }

  .location-info-list li {
    font-size: 14px !important;
  }

  .location-apply-btn {
    width: 100% !important;
  }

  .yeon-location-section .location-photo img {
    height: 250px !important;
  }
}

/* =========================================================
   YEON LOCATION MAP SECTION
========================================================= */

.yeon-map-section {
  position: relative !important;
  padding: 72px 0 78px !important;
  background: #282a31 !important;
  overflow: hidden !important;
  text-align: center !important;
}

.yeon-map-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(158, 172, 214, 0.16),
      transparent 36%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0)) !important;
  pointer-events: none !important;
}

.yeon-map-section .map-inner {
  position: relative !important;
  z-index: 2 !important;
  width: min(960px, calc(100% - 40px)) !important;
  max-width: 960px !important;
  margin: 0 auto !important;
}

.map-title {
  margin-bottom: 28px !important;
  text-align: center !important;
  opacity: 0;
  transform: translateY(24px);
}

.map-title p {
  margin: 0 0 4px !important;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.16em !important;
}

.map-title h3 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 70px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* 실제 지도 영역 */
.map-box {
  position: relative !important;
  width: 100% !important;
  height: 400px !important;
  margin: 0 auto !important;
  background: #f2f2f2 !important;
  overflow: hidden !important;
  opacity: 0;
  transform: translateY(32px);
}

.map-box iframe,
.map-box #kakaoMap {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

/* 하단 주소 */
.map-address {
  margin-top: 22px !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  opacity: 0;
  transform: translateY(20px);
}

.map-address strong {
  position: relative !important;
  display: inline-block !important;
  color: #ffffff !important;
  font-size: 25px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}

.map-address strong::before {
  content: "At." !important;
  display: inline-block !important;
  margin-right: 5px !important;
  color: #9eacd6 !important;
  font-weight: 700 !important;
}

.map-address span {
  position: relative !important;
  display: inline-block !important;
  color: #ffffff !important;
  font-size: 21px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.04em !important;
}

.map-address span::before {
  content: "" !important;
  display: inline-block !important;
  width: 1px !important;
  height: 18px !important;
  margin-right: 18px !important;
  background: rgba(255, 255, 255, 0.42) !important;
  vertical-align: -3px !important;
}

/* 모션 */
.yeon-map-section.is-visible .map-title {
  animation: mapTitleUp 0.7s ease forwards !important;
}

.yeon-map-section.is-visible .map-box {
  animation: mapImageUp 0.75s ease 0.14s forwards !important;
}

.yeon-map-section.is-visible .map-address {
  animation: mapAddressUp 0.65s ease 0.3s forwards !important;
}

@keyframes mapTitleUp {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mapImageUp {
  0% {
    opacity: 0;
    transform: translateY(32px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mapAddressUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 반응형 */
@media (max-width: 768px) {
  .yeon-map-section {
    padding: 58px 0 64px !important;
  }

  .yeon-map-section .map-inner {
    width: calc(100% - 28px) !important;
  }

  .map-title p {
    font-size: 14px !important;
  }

  .map-title h3 {
    font-size: 38px !important;
  }

  .map-box {
    height: 240px !important;
  }

  .map-address {
    flex-direction: column !important;
    gap: 4px !important;
  }

  .map-address strong,
  .map-address span {
    font-size: 17px !important;
  }

  .map-address span::before {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .map-title h3 {
    font-size: 33px !important;
  }

  .map-box {
    height: 210px !important;
  }

  .map-address strong,
  .map-address span {
    font-size: 19px !important;
  }
}

/* =========================================================
   VENDOR HALL HEAD CENTER ALIGN
   웨딩홀 섹션 제목/탭 중앙 정렬
========================================================= */

.vendor-hall .vendor-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 28px !important;
  width: 100% !important;
  margin: 0 auto 42px !important;
  text-align: center !important;
}

.vendor-hall .vendor-title {
  width: 100% !important;
  text-align: center !important;
}

.vendor-hall .vendor-title p {
  text-align: center !important;
}

.vendor-hall .vendor-title h3 {
  color: #dbcfb4 !important;
  text-align: center !important;
}

.vendor-hall .vendor-tabs {
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  /* display: flex !important; */
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.vendor-hall .vendor-tabs button {
  /* min-width: 115px !important; */
  height: 40px !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   그누보드 연동 업체 카드 보정
========================================================= */
.vendor-empty {
  pointer-events: none !important;
}

/* =========================================================
   게시판 연동 카드 이미지 보정
   - 게시글에 이미지가 없을 때도 카드 영역 유지
========================================================= */
.vendor-card .vendor-no-img {
  position: absolute !important;
  inset: 0 0 46px 0 !important;
  width: 100% !important;
  height: calc(100% - 46px) !important;
  background: #ffffff !important;
  z-index: 1 !important;
}

.vendor-card img {
  display: block !important;
}

/* =========================================================
   게시판 연동 업체 카드 추가 보정
   - button 카드 기본 스타일 제거
   - 전체보기/분류 클릭 시 로드된 모든 카드 필터링
   - 카드 클릭 시 상세페이지 이동 대신 팝업 노출
========================================================= */
.vendor-card {
  width: 100% !important;
  border: 1px solid #f1f1f1 !important;
  padding: 0 !important;
  margin: 0 !important;
  font: inherit !important;
  text-align: left !important;
  text-decoration: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  aspect-ratio: 3 / 2.4;
}
.vendor-slide-track .vendor-card,
.vendor-studio .vendor-card,
.vendor-dress .vendor-card {
  aspect-ratio: 360 /580;
}
.vendor-card:focus {
  outline: 2px solid rgba(174, 185, 223, 0.85) !important;
  outline-offset: 3px !important;
}

.vendor-card strong {
  width: 100% !important;
  text-align: center !important;
}

/* 업체 팝업 */
.vendor-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease !important;
}

.vendor-modal.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.vendor-modal-bg {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.58) !important;
}

.vendor-modal-box {
  position: relative !important;
  z-index: 2 !important;
  width: min(720px, 100%) !important;
  background: #ffffff !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28) !important;
  transform: translateY(18px) scale(0.98) !important;
  transition: transform 0.24s ease !important;
  overflow: hidden !important;
}

.vendor-modal.is-open .vendor-modal-box {
  transform: translateY(0) scale(1) !important;
}

.vendor-modal-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 3 !important;
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(17, 17, 17, 0.72) !important;
  color: #ffffff !important;
  font-size: 27px !important;
  line-height: 34px !important;
  text-align: center !important;
  cursor: pointer !important;
}

.vendor-modal-img-wrap {
  position: relative !important;
  width: 100% !important;
  background: #f4f6fb !important;
}

.vendor-modal-img-wrap img {
  display: block !important;
  width: 100% !important;
  max-height: 70vh !important;
  object-fit: contain !important;
  background: #f4f6fb !important;
}

.vendor-modal-img-wrap.is-empty {
  min-height: 220px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.vendor-modal-img-wrap.is-empty::before {
  content: "이미지 준비중" !important;
  color: #999999 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.vendor-modal-box h4 {
  margin: 0 !important;
  padding: 20px 28px 24px !important;
  background: #ffffff !important;
  color: #111111 !important;
  font-size: 22px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  text-align: center !important;
  letter-spacing: -0.04em !important;
}

.vendor-modal-actions {
  display: none !important;
}

.vendor-modal.has-instagram .vendor-modal-box h4 {
  padding-bottom: 14px !important;
}

.vendor-modal.has-instagram .vendor-modal-actions {
  display: flex !important;
  justify-content: center !important;
  padding: 0 28px 24px !important;
}

.vendor-modal-instagram[hidden] {
  display: none !important;
}

.vendor-modal-instagram img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
}

/* 웨딩홀·웨딩샵 게시글 다중 이미지 팝업 갤러리 */
.vendor-modal.has-gallery .vendor-modal-box {
  width: min(980px, 100%) !important;
}

.vendor-modal-gallery-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
}

.vendor-modal.has-gallery .vendor-modal-gallery-layout {
  grid-template-columns: minmax(0, 1fr) 124px !important;
  gap: 10px !important;
  padding: 10px !important;
}

.vendor-modal-main-swiper {
  width: 100% !important;
  min-width: 0 !important;
  background: #f4f6fb !important;
}

.vendor-modal-main-swiper .swiper-slide {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 320px !important;
  background: #f4f6fb !important;
}

.vendor-modal-main-swiper .swiper-slide img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 68vh !important;
  object-fit: contain !important;
  background: #f4f6fb !important;
}

.vendor-modal-thumbs {
  display: none !important;
}

.vendor-modal.has-gallery .vendor-modal-thumbs {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  max-height: 68vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
}

.vendor-modal-thumb {
  flex: 0 0 96px !important;
  width: 100% !important;
  height: 96px !important;
  padding: 4px !important;
  border: 1px solid #dce0e9 !important;
  background: #ffffff !important;
  cursor: pointer !important;
  opacity: 0.68 !important;
  transition:
    border-color 0.2s ease,
    opacity 0.2s ease,
    transform 0.2s ease !important;
}

.vendor-modal-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  background: #f4f6fb !important;
}

.vendor-modal-thumb:hover,
.vendor-modal-thumb.is-active {
  border-color: #9aaadc !important;
  opacity: 1 !important;
}

.vendor-modal-thumb.is-active {
  box-shadow: inset 0 0 0 2px #9aaadc !important;
}

.vendor-modal-nav {
  position: absolute !important;
  top: 50% !important;
  z-index: 5 !important;
  display: none !important;
  width: 44px !important;
  height: 44px !important;
  margin-top: -22px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(17, 17, 17, 0.58) !important;
  color: #ffffff !important;
  font-size: 34px !important;
  line-height: 40px !important;
  cursor: pointer !important;
}

.vendor-modal.has-gallery .vendor-modal-nav {
  display: block !important;
}

.vendor-modal-prev {
  left: 14px !important;
}
.vendor-modal-next {
  right: 14px !important;
}

.vendor-modal-count {
  position: absolute !important;
  right: 14px !important;
  bottom: 12px !important;
  z-index: 5 !important;
  display: none !important;
  min-width: 54px !important;
  padding: 6px 10px !important;
  border-radius: 16px !important;
  background: rgba(17, 17, 17, 0.62) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1 !important;
  text-align: center !important;
}

.vendor-modal.has-gallery .vendor-modal-count {
  display: block !important;
}

.vendor-modal-img-wrap.is-empty .vendor-modal-gallery-layout {
  display: none !important;
}

@media (max-width: 768px) {
  .vendor-modal.has-gallery .vendor-modal-gallery-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  .vendor-modal-main-swiper .swiper-slide {
    min-height: 260px !important;
  }

  .vendor-modal-main-swiper .swiper-slide img {
    max-height: 62vh !important;
  }

  .vendor-modal.has-gallery .vendor-modal-thumbs {
    flex-direction: row !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .vendor-modal-thumb {
    flex-basis: 74px !important;
    width: 74px !important;
    height: 64px !important;
  }

  .vendor-modal-nav {
    width: 38px !important;
    height: 38px !important;
    margin-top: -19px !important;
    font-size: 29px !important;
  }
}

.vendor-modal-instagram:hover {
  color: #ffffff !important;
  filter: brightness(1.04) !important;
  transform: translateY(-2px) !important;
}

.vendor-modal-instagram:focus-visible {
  outline: 3px solid rgba(98, 40, 215, 0.32) !important;
  outline-offset: 3px !important;
}

@media (max-width: 768px) {
  .vendor-modal {
    padding: 18px !important;
  }

  .vendor-modal-box h4 {
    padding: 17px 22px 20px !important;
    font-size: 19px !important;
  }

  .vendor-modal-close {
    width: 34px !important;
    height: 34px !important;
    font-size: 24px !important;
    line-height: 31px !important;
  }
}

/* =========================================================
   웨딩샵 세로 이미지 원본 비율 유지
========================================================= */

.vendor-dress .vendor-card {
  background: #ffffff !important;
}

.vendor-dress .vendor-card img {
  object-fit: cover !important;
  object-position: center center !important;
  background: #ffffff !important;
  padding: 0 !important;
}

/* =========================================================
   YEON FAIR INFO SECTION
   대구연웨딩박람회 안내 섹션
   JS 없이도 바로 보이게 처리한 버전
========================================================= */

.yeon-fair-info {
  position: relative !important;
  padding: 92px 0 88px !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.yeon-fair-info .fair-info-inner {
  width: min(1200px, calc(100% - 56px)) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 445px !important;
  gap: 86px !important;
  align-items: center !important;
}

/* 중요: opacity 0 쓰지 않음 */
.fair-info-copy {
  position: relative !important;
  text-align: left !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.fair-kicker {
  margin: 0 0 14px !important;
  color: #777777 !important;
  font-size: 20px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
}

.fair-info-copy h3 {
  margin: 0 !important;
  color: #111111 !important;
  font-size: 55px !important;
  line-height: 1.22 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

.fair-info-copy h3 strong {
  display: block !important;
  margin-top: 4px !important;
  color: #29c683 !important;
  font-size: 65px !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

.fair-info-list {
  margin: 36px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.fair-info-list li {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  color: #212121 !important;
  font-size: 25px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
}

.fair-info-list li b {
  display: inline-block !important;
  margin-left: 10px !important;
  color: #e9474b !important;
  font-weight: 800 !important;
}

/* 아이콘 공통 */
.fair-icon {
  position: relative !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-block !important;
  color: #29c683 !important;
}

/* 날짜 아이콘 */
.fair-icon-date::before {
  content: "" !important;
  position: absolute !important;
  left: 3px !important;
  top: 3px !important;
  width: 17px !important;
  height: 17px !important;
  border: 2px solid #29c683 !important;
  border-radius: 50% !important;
}

.fair-icon-date::after {
  content: "" !important;
  position: absolute !important;
  left: 11px !important;
  top: 6px !important;
  width: 6px !important;
  height: 8px !important;
  border-left: 2px solid #29c683 !important;
  border-bottom: 2px solid #29c683 !important;
}

/* 위치 아이콘 */
.fair-icon-place::before {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 2px !important;
  width: 14px !important;
  height: 14px !important;
  background: #29c683 !important;
  border-radius: 50% 50% 50% 0 !important;
  transform: rotate(-45deg) !important;
}

.fair-icon-place::after {
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  top: 7px !important;
  width: 4px !important;
  height: 4px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
}

/* 티켓 아이콘 */
.fair-icon-ticket::before {
  content: "" !important;
  position: absolute !important;
  left: 1px !important;
  top: 6px !important;
  width: 21px !important;
  height: 13px !important;
  border: 2px solid #29c683 !important;
  border-radius: 3px !important;
  transform: rotate(-25deg) !important;
}

.fair-icon-ticket::after {
  content: "" !important;
  position: absolute !important;
  left: 9px !important;
  top: 4px !important;
  width: 2px !important;
  height: 18px !important;
  background: repeating-linear-gradient(
    to bottom,
    #29c683 0,
    #29c683 3px,
    transparent 3px,
    transparent 5px
  ) !important;
  transform: rotate(-25deg) !important;
}

/* 버튼 */
.fair-info-btn {
  position: relative !important;
  width: 310px !important;
  height: 60px !important;
  margin-top: 46px !important;
  padding: 0 18px 0 32px !important;
  background: #29c683 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  text-decoration: none !important;
  overflow: hidden !important;
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease !important;
}

.fair-info-btn::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -80% !important;
  width: 55% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.32),
    transparent
  ) !important;
  transform: skewX(-24deg) !important;
  animation: fairBtnShine 2.9s ease-in-out infinite !important;
}

.fair-info-btn:hover {
  background: #111111 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 30px rgba(83, 95, 130, 0.18) !important;
}

.fair-info-btn span {
  position: relative !important;
  z-index: 2 !important;
  font-size: 34px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  transform: translateY(-2px) !important;
}

/* 사진 영역 */
.fair-info-photo {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.fair-info-photo::before {
  content: "" !important;
  position: absolute !important;
  right: -22px !important;
  bottom: -22px !important;
  width: 100% !important;
  height: 100% !important;
  background: #2cc785 !important;
  z-index: -1 !important;
}

.fair-info-photo img {
  display: block !important;
  width: 100% !important;
  height: 540px !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* 보이면서 살짝 등장하는 효과 */
.yeon-fair-info .fair-info-copy {
  animation: fairCopySoftIn 0.72s ease both !important;
}

.yeon-fair-info .fair-info-photo {
  animation: fairPhotoSoftIn 0.72s ease 0.12s both !important;
}

.yeon-fair-info .fair-info-list li {
  animation: fairItemSoftUp 0.55s ease both !important;
}

.yeon-fair-info .fair-info-list li:nth-child(1) {
  animation-delay: 0.18s !important;
}

.yeon-fair-info .fair-info-list li:nth-child(2) {
  animation-delay: 0.28s !important;
}

.yeon-fair-info .fair-info-list li:nth-child(3) {
  animation-delay: 0.38s !important;
}

@keyframes fairCopySoftIn {
  0% {
    opacity: 0;
    transform: translateX(-24px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fairPhotoSoftIn {
  0% {
    opacity: 0;
    transform: translateX(24px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fairItemSoftUp {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fairBtnShine {
  0% {
    left: -80%;
  }

  44%,
  100% {
    left: 130%;
  }
}

/* 반응형 */
@media (max-width: 1024px) {
  .yeon-fair-info .fair-info-inner {
    grid-template-columns: 1fr 400px !important;
    gap: 50px !important;
  }

  .fair-info-copy h3 {
    font-size: 40px !important;
  }

  .fair-info-copy h3 strong {
    font-size: 48px !important;
  }

  .fair-info-list li {
    font-size: 19px !important;
  }

  .fair-info-photo img {
    height: 460px !important;
  }
}

@media (max-width: 768px) {
  .yeon-fair-info {
    padding: 64px 0 70px !important;
  }

  .yeon-fair-info .fair-info-inner {
    width: calc(100% - 28px) !important;
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .fair-info-copy {
    text-align: center !important;
  }

  .fair-kicker {
    font-size: 16px !important;
  }

  .fair-info-copy h3 {
    font-size: 32px !important;
  }

  .fair-info-copy h3 strong {
    font-size: 38px !important;
  }

  .fair-info-list {
    width: fit-content !important;
    max-width: 100% !important;
    margin: 30px auto 0 !important;
    gap: 12px !important;
  }

  .fair-info-list li {
    align-items: flex-start !important;
    text-align: left !important;
    font-size: 16px !important;
  }

  .fair-info-list li b {
    display: block !important;
    margin: 4px 0 0 !important;
  }

  .fair-info-btn {
    width: 270px !important;
    height: 54px !important;
    margin-top: 34px !important;
    font-size: 16px !important;
  }

  .fair-info-photo::before {
    right: -12px !important;
    bottom: -12px !important;
  }

  .fair-info-photo img {
    height: 310px !important;
  }
}

@media (max-width: 480px) {
  .fair-info-copy h3 {
    font-size: 28px !important;
  }

  .fair-info-copy h3 strong {
    font-size: 33px !important;
  }

  .fair-info-btn {
    width: 100% !important;
  }

  .fair-info-photo img {
    height: 250px !important;
  }
}

.vendor-title h3 span {
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 500;
}

/* 플래너 팝업: 사진 우측 하단의 작은 인스타그램 바로가기 */
.vendor-modal.has-instagram .vendor-modal-box h4 {
  padding-bottom: 24px !important;
}

.vendor-modal.has-instagram .vendor-modal-actions {
  position: absolute !important;
  right: 22px !important;
  bottom: 22px !important;
  z-index: 4 !important;
  display: block !important;
  padding: 0 !important;
}

.vendor-modal-instagram {
  width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(
    135deg,
    #f9ce34 0%,
    #ee2a7b 48%,
    #6228d7 100%
  ) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transition:
    transform 0.2s ease,
    filter 0.2s ease,
    box-shadow 0.2s ease !important;
}

.vendor-modal-instagram img {
  width: 25px !important;
  height: 25px !important;
  object-fit: contain !important;
  background: transparent !important;
}

.vendor-modal-instagram span {
  display: none !important;
}

.vendor-modal-instagram:hover {
  box-shadow: 0 10px 24px rgba(238, 42, 123, 0.28) !important;
}

@media (max-width: 768px) {
  .vendor-modal.has-instagram .vendor-modal-box h4 {
    padding-bottom: 20px !important;
  }

  .vendor-modal.has-instagram .vendor-modal-actions {
    right: 14px !important;
    bottom: 14px !important;
  }

  .vendor-modal-instagram {
    width: 40px !important;
    height: 40px !important;
    border-radius: 11px !important;
  }

  .vendor-modal-instagram img {
    width: 22px !important;
    height: 22px !important;
  }
}