@charset "utf-8";

/* 히어로가 있는 매거진 메인에만 적용하는 Avada 레이아웃 어댑터.
 * 개별 컴포넌트 삽입 페이지와 사이트 헤더/푸터는 대상에서 제외한다.
 */
html:has(.mg_wp) {
  font-size: 1rem;
}

/* 사이트 브랜드와 관계없이 매거진 리뉴얼의 포인트 색상을 사용한다. */
.mg_wp {
  --mg-badge-hover-bg: var(--mg-primary);
}

.mg_wp .mg_more_link,
.mg_wp .mg_ranking_num,
.mg_wp .mg_ranking_item > a:hover .mg_ranking_title {
  color: var(--mg-primary);
}

#main:has(.mg_hero_banner) {
  padding-inline: 0;
}

#main:has(.mg_hero_banner) > .fusion-row {
  width: 100%;
  max-width: none;
}

#main:has(.mg_hero_banner) .fusion-fullwidth:has(.mg_wp) {
  padding: 0 !important;
  margin-block: 0 !important;
}

/* 최종안에서는 모든 행사의 필터가 스크롤을 따라다니지 않는다. */
.mg_wp .mg_filter {
  position: static;
  top: auto;
}

/* 히어로 설명은 PC에서 전체 표시하고 모바일에서만 두 줄로 제한한다. */
.mg_wp .mg_hero_desc {
  display: block;
  overflow: visible;
  -webkit-box-orient: initial;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

#main:has(.mg_hero_banner) .fusion-fullwidth:has(.mg_wp) > .fusion-builder-row {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

#main:has(.mg_hero_banner) .fusion-layout-column:has(.mg_wp) {
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  flex: 0 0 100%;
}

#main:has(.mg_hero_banner) .fusion-layout-column:has(.mg_wp) > .fusion-column-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
}

#main:has(.mg_hero_banner) .mg_wp .mg_section {
  padding-inline: var(--mg-gutter);
}

#main:has(.mg_hero_banner) .mg_wp .mg_inner {
  max-width: var(--mg-max);
}

/* 원본 12컬럼의 span_4 / span_8, gap 5rem을 Avada 형제 컬럼에 적용한다. */
#main:has(.mg_hero_banner) .fusion-fullwidth:has(.mg_ranking_feed):has(.mg_feature) {
  display: grid;
  grid-template-columns: minmax(0, calc((100% - 10rem) / 3)) minmax(0, 1fr);
  column-gap: 5rem;
  width: calc(100% - var(--mg-gutter) - var(--mg-gutter)) !important;
  max-width: var(--mg-max) !important;
  padding-inline: 0 !important;
  padding-block: 4rem !important;
  margin-inline: auto !important;
}

#main:has(.mg_hero_banner) .fusion-fullwidth:has(.mg_ranking_feed):has(.mg_feature) > .fusion-builder-row {
  /* Avada의 인라인 104% 너비와 음수 margin이 레이아웃에 참여하지 않게 한다. */
  display: contents;
}

#main:has(.mg_hero_banner) .fusion-fullwidth:has(.mg_ranking_feed):has(.mg_feature) > .fusion-builder-row::before,
#main:has(.mg_hero_banner) .fusion-fullwidth:has(.mg_ranking_feed):has(.mg_feature) > .fusion-builder-row::after {
  display: none;
}

#main:has(.mg_hero_banner) .fusion-builder-row:has(.mg_ranking_feed):has(.mg_feature) .mg_section {
  padding-inline: 0;
  padding-block: 0;
}

@media (max-width: 1024px) {
  #main:has(.mg_hero_banner) .fusion-fullwidth:has(.mg_ranking_feed):has(.mg_feature) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4rem;
  }
}

@media (max-width: 640px) {
  .mg_wp .mg_hero_desc {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  #main:has(.mg_hero_banner) .fusion-fullwidth:has(.mg_ranking_feed):has(.mg_feature) {
    width: 100vw !important;
    max-width: none !important;
    row-gap: 2.75rem;
    padding-inline: var(--mg-gutter) !important;
    padding-block: 2.75rem !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  #main:has(.mg_hero_banner) .mg_wp .mg_section.mg_hero {
    padding-inline: 0;
  }

}